@import url('https://fonts.googleapis.com/css2?family=Hanuman:wght@400;700;900&family=Kantumruy+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Outfit:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --primary: #0F766E;
  --primary-light: #14B8A6;
  --primary-dark: #115E59;
  --primary-glow: rgba(20, 184, 166, 0.25);
  --accent: #E11D48;
  --accent-light: #FB7185;
  --bakong-red: #E11925;
  --bg-main: #F8FAFC;
  --surface: #FFFFFF;
  --text-main: #0F172A;
  --text-muted: #64748B;
  --border: #E2E8F0;
  --radius-card: 1.25rem;
  --radius-inner: 0.875rem;
}

* {
  box-sizing: border-box;
}

/* Critical utility overrides: Ensure hidden ALWAYS wins over flex, grid, etc. */
.hidden,
[hidden] {
  display: none !important;
}

/* Dedicated search bar responsive display */
.customer-header-search,
.admin-header-search {
  display: none;
}

@media (min-width: 640px) {
  .customer-header-search,
  .admin-header-search {
    display: block !important;
  }
}

.customer-mobile-search {
  display: block;
}

@media (min-width: 640px) {
  .customer-mobile-search {
    display: none !important;
  }
}

/* Responsive display utility overrides (allows sm:block, sm:flex, etc. to override .hidden on larger screens) */
@media (min-width: 640px) {
  .sm\:block { display: block !important; }
  .sm\:flex { display: flex !important; }
  .sm\:inline { display: inline !important; }
  .sm\:inline-block { display: inline-block !important; }
  .sm\:grid { display: grid !important; }
  .sm\:hidden { display: none !important; }
}

@media (min-width: 768px) {
  .md\:block { display: block !important; }
  .md\:flex { display: flex !important; }
  .md\:inline { display: inline !important; }
  .md\:inline-block { display: inline-block !important; }
  .md\:grid { display: grid !important; }
  .md\:hidden { display: none !important; }
}

@media (min-width: 1024px) {
  .lg\:block { display: block !important; }
  .lg\:flex { display: flex !important; }
  .lg\:inline { display: inline !important; }
  .lg\:inline-block { display: inline-block !important; }
  .lg\:grid { display: grid !important; }
  .lg\:hidden { display: none !important; }
}

@media (min-width: 1280px) {
  .xl\:block { display: block !important; }
  .xl\:flex { display: flex !important; }
  .xl\:inline { display: inline !important; }
  .xl\:inline-block { display: inline-block !important; }
  .xl\:grid { display: grid !important; }
  .xl\:hidden { display: none !important; }
}

body {
  font-family: 'Outfit', 'Plus Jakarta Sans', 'Kantumruy Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--bg-main);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.012em;
}

/* Khmer font override when in Khmer language mode */
body.lang-km {
  font-family: 'Kantumruy Pro', 'Hanuman', 'Outfit', sans-serif;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

/* Brand Typography - Modern Athletic Bold Slanted Display (New Brand Identity) */
.brand-title {
  font-family: 'Saira Condensed', 'Barlow Condensed', 'Outfit', sans-serif !important;
  font-weight: 900 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  text-shadow: none !important;
  filter: none !important;
  background: linear-gradient(135deg, #0F766E 0%, #115E59 50%, #042F2E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  line-height: 1.15;
}

body.lang-km:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active):not([class*="theme-"]) .brand-title {
  font-family: 'Kantumruy Pro', 'Hanuman', sans-serif !important;
  font-weight: 800 !important;
  font-style: italic !important;
  letter-spacing: 0.02em !important;
  background: linear-gradient(135deg, #0F766E 0%, #0D9488 50%, #115E59 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.35;
}

.brand-subtitle {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748B;
}

body.lang-km .brand-subtitle {
  font-family: 'Kantumruy Pro', 'Outfit', sans-serif;
  letter-spacing: 0.02em;
  font-size: 10.5px;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Visible custom horizontal scrollbar matching user screenshot */
.custom-horizontal-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #94A3B8 #E2E8F0;
}
.custom-horizontal-scrollbar::-webkit-scrollbar {
  display: block !important;
  height: 6px !important;
}
.custom-horizontal-scrollbar::-webkit-scrollbar-track {
  background: #E2E8F0 !important;
  border-radius: 9999px !important;
}
.custom-horizontal-scrollbar::-webkit-scrollbar-thumb {
  background: #94A3B8 !important;
  border-radius: 9999px !important;
  cursor: grab !important;
}
.custom-horizontal-scrollbar::-webkit-scrollbar-thumb:active {
  background: #64748B !important;
  cursor: grabbing !important;
}
.custom-horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #64748B !important;
}

/* Catch to scroll (Grab & Drag Cursor & Behavior) */
.catch-to-scroll,
.catch-to-scroll * {
  cursor: grab !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.catch-to-scroll.is-grabbing,
.catch-to-scroll.is-grabbing *,
body.is-tabs-grabbing,
body.is-tabs-grabbing * {
  cursor: grabbing !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Hide scrollbar utility for clean horizontal tab lists */
.no-scrollbar::-webkit-scrollbar,
.scrollbar-none::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.no-scrollbar,
.scrollbar-none {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* Glassmorphism & Modern Soft Shadows */
.dribbble-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.04), 0 8px 10px -6px rgba(15, 23, 42, 0.02);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dribbble-card:hover {
  box-shadow: 0 20px 30px -10px rgba(15, 23, 42, 0.08), 0 10px 15px -5px rgba(15, 23, 42, 0.03);
}

.glass-header {
  position: relative !important;
  z-index: 30 !important;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

#customerThemePickerWrapper,
#customerNotificationWrapper,
#adminThemeQuickWrapper {
  position: relative !important;
  z-index: 40 !important;
}

#customerThemeDropdown,
#customerNotificationDropdown,
#adminThemeDropdown {
  z-index: 100 !important;
}

.glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Gradients */
.gradient-primary {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 50%, #14b8a6 100%);
}

.gradient-customer-hero {
  background: linear-gradient(135deg, #042F2E 0%, #0D9488 50%, #0F766E 100%);
}

/* Hero Carousel Slider */
.hero-slider-track {
  display: flex;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.hero-dot {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-dot-active {
  background-color: #FFFFFF !important;
  width: 1.75rem !important;
  border-radius: 9999px !important;
}

.gradient-card-1 {
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
}
.gradient-card-2 {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
}
.gradient-card-3 {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
}
.gradient-card-4 {
  background: linear-gradient(135deg, #FAF5FF 0%, #F3E8FF 100%);
}

/* Role Switcher Pill */
.role-pill-btn {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.role-pill-active {
  background: #0F766E !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.25);
}

/* Bakong KHQR Authentic Styling */
.khqr-card {
  background: #FFFFFF;
  border-radius: 1.5rem;
  box-shadow: 0 20px 40px -15px rgba(225, 25, 37, 0.2);
  border: 2px solid #E11925;
  position: relative;
  overflow: hidden;
}

.khqr-header {
  background: #E11925;
  color: #FFFFFF;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.khqr-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Tab Active Transitions */
.nav-tab-active {
  background: #0F766E !important;
  color: #FFFFFF !important;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.25);
}

.nav-tab-active i,
.nav-tab-active svg {
  color: #FFFFFF !important;
}

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.status-pending {
  background-color: #FEF3C7;
  color: #92400E;
}

.status-processing {
  background-color: #E0E7FF;
  color: #3730A3;
}

.status-shipped {
  background-color: #E0F2FE;
  color: #0369A1;
}

.status-delivered {
  background-color: #DCFCE7;
  color: #166534;
}

.status-invalid_receipt {
  background-color: #FFF1F2;
  color: #BE123C;
  border: 1px solid #FECDD3;
}

.status-cancelled {
  background-color: #FEE2E2;
  color: #991B1B;
}

/* Pulse indicator for live status */
.pulse-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
}

.pulse-dot::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #10B981;
  animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(0.95); opacity: 0; }
}

/* Receipt Print Mode */
@media print {
  body * {
    visibility: hidden;
  }
  #printableReceipt, #printableReceipt * {
    visibility: visible;
  }
  #printableReceipt {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 20px;
    background: white;
  }
}

/* Customer Live Chat - Maximize, Resizing & Draggable Support */
#customerChatBox.chat-custom-positioned {
  position: fixed !important;
  margin: 0 !important;
  bottom: auto !important;
  right: auto !important;
  z-index: 50 !important;
}

#customerChatBox.is-moving {
  transition: none !important;
  user-select: none !important;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(20, 184, 166, 0.5) !important;
}

#customerChatHeader.is-dragging {
  cursor: grabbing !important;
  user-select: none !important;
}

#customerChatBox.chat-maximized {
  position: fixed !important;
  top: 24px !important;
  bottom: 24px !important;
  left: 24px !important;
  right: 24px !important;
  width: auto !important;
  height: auto !important;
  max-width: 960px !important;
  max-height: 880px !important;
  margin: auto !important;
  z-index: 9999 !important;
  border-radius: 28px !important;
  box-shadow: 0 25px 70px -15px rgba(0, 0, 0, 0.5), 0 0 0 100vw rgba(15, 23, 42, 0.45) !important;
}

#customerChatBox.chat-custom-resized {
  max-height: none !important;
  max-width: none !important;
}

.chat-resize-handle {
  user-select: none;
  touch-action: none;
}

@media (max-width: 640px) {
  #customerChatBox.chat-custom-positioned {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 94vw !important;
    height: 520px !important;
    max-height: 82vh !important;
    margin-bottom: 0.5rem !important;
  }

  #customerChatBox.chat-maximized {
    top: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    right: 8px !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 20px !important;
  }
}

/* Chat Reply Message Flash/Highlight Animation */
@keyframes chatMsgPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(13, 148, 136, 0);
    transform: scale(1);
  }
  20% {
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.5), 0 0 20px rgba(13, 148, 136, 0.35);
    transform: scale(1.03);
  }
  45% {
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.35), 0 0 14px rgba(13, 148, 136, 0.25);
    transform: scale(1.02);
  }
  75% {
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.2);
    transform: scale(1.01);
  }
}

.chat-highlight-flash {
  animation: chatMsgPulse 1.7s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
  border-radius: 1rem !important;
  position: relative;
  z-index: 20;
}

/* ==========================================================================
   Customer Live Chat - Floating Sidebar Dock & Edge Hide Support
   ========================================================================== */

#customerChatWidgetContainer {
  transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1), bottom 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Docked to right sidebar */
#customerChatWidgetContainer.chat-docked-sidebar {
  right: 0 !important;
  bottom: 6.25rem !important;
}

@media (max-width: 640px) {
  #customerChatWidgetContainer.chat-docked-sidebar {
    bottom: 5.25rem !important;
  }
}

#customerChatWidgetContainer.chat-docked-sidebar #customerChatBtnGroup {
  border-top-left-radius: 1.25rem !important;
  border-bottom-left-radius: 1.25rem !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
  box-shadow: -4px 6px 20px -2px rgba(15, 23, 42, 0.4), 0 0 0 1px rgba(20, 184, 166, 0.4) !important;
}

/* Tucked / Hidden into Screen Edge Mode */
#customerChatWidgetContainer.chat-docked-sidebar.chat-tucked-edge #customerChatBtnGroup {
  transform: translateX(calc(100% - 3.25rem)) !important;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
  opacity: 0.95;
  cursor: pointer;
}

/* Chat box spacing when docked */
#customerChatWidgetContainer.chat-docked-sidebar #customerChatBox:not(.chat-custom-positioned):not(.chat-maximized) {
  margin-right: 0.75rem !important;
}

/* ==================== CHRISTMAS SNOW FALLING ANIMATION ==================== */
#senghourChristmasSnowCanvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 99999 !important;
  display: none;
}

body.christmas-theme-active #senghourChristmasSnowCanvas {
  display: block !important;
}

body:not(.christmas-theme-active) #senghourChristmasSnowCanvas {
  display: none !important;
}

/* ==================== KHMER WATER FESTIVAL (BON OM TOUK) ==================== */
#senghourWaterFestivalCanvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 99998 !important;
  display: none;
}

body.water-festival-active #senghourWaterFestivalCanvas {
  display: block !important;
}

body.water-festival-active #senghourWaterFestivalDecorations {
  display: block !important;
}

body:not(.water-festival-active) #senghourWaterFestivalCanvas,
body:not(.water-festival-active) #senghourWaterFestivalDecorations {
  display: none !important;
}

/* ==================== KHMER WATER FESTIVAL FESTIVE THEME & BACKGROUND ==================== */
body.water-festival-active {
  background-color: #071724 !important;
  min-height: 100vh;
  transition: background 0.4s ease-in-out;
}

#senghourWaterFestivalDecorations {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
  transition: opacity 0.4s ease-in-out;
}

#senghourWaterFestivalFireworksCanvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.water-fest-bg-image {
  position: absolute;
  inset: -15px;
  background-image: url('../assets/water-festival-bg.jpg');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  filter: blur(5px) brightness(0.68) saturate(1.1);
  transform: scale(1.04);
  pointer-events: none;
}

.water-fest-bg-tint {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(245, 158, 11, 0.12) 0%, rgba(7, 23, 36, 0.65) 60%, rgba(5, 17, 28, 0.88) 100%),
              linear-gradient(to bottom, rgba(7, 23, 36, 0.5) 0%, rgba(7, 23, 36, 0.25) 40%, rgba(5, 17, 28, 0.75) 100%);
  pointer-events: none;
}

body.water-festival-active #sortLabelText,
body.water-festival-active #custSubcatLabelText {
  color: #fef08a !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

body.water-festival-active #customerStickyHeaderWrapper {
  position: sticky !important;
  z-index: 40 !important;
}

body.water-festival-active .glass-header {
  background: linear-gradient(135deg, rgba(8, 22, 45, 0.95) 0%, rgba(14, 38, 74, 0.96) 50%, rgba(10, 48, 80, 0.95) 100%) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1.5px solid rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 4px 20px -2px rgba(2, 132, 199, 0.3), 0 2px 8px rgba(0, 0, 0, 0.45) !important;
  transition: all 0.35s ease;
}

body.water-festival-active .glass-header .brand-title,
body.water-festival-active #storeLogoBadge .brand-title,
body.lang-km.water-festival-active .brand-title,
body.lang-km.water-festival-active .glass-header .brand-title {
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}

body.water-festival-active .glass-header .brand-subtitle,
body.water-festival-active #storeLogoBadge .brand-subtitle,
body.lang-km.water-festival-active .brand-subtitle,
body.lang-km.water-festival-active .glass-header .brand-subtitle {
  color: #ffffff !important;
  opacity: 0.95 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

body.water-festival-active .glass-header #customerSearchInput {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  color: #0f172a !important;
}

body.water-festival-active .glass-header #customerSearchInput:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
}

body.water-festival-active .glass-header .bg-slate-100 {
  background-color: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(56, 189, 248, 0.28) !important;
}

body.water-festival-active .glass-header #btnLangEn:not(.bg-white),
body.water-festival-active .glass-header #btnLangKm:not(.bg-white),
body.water-festival-active .glass-header #btnCurUsd:not(.bg-teal-700),
body.water-festival-active .glass-header #btnCurKhr:not(.bg-teal-700) {
  color: #e0f2fe !important;
}

body.water-festival-active .glass-header #customerNotifBtn {
  background-color: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  color: #f0f9ff !important;
}

body.water-festival-active .glass-header #customerNotifBtn:hover {
  background-color: rgba(255, 255, 255, 0.24) !important;
  color: #38bdf8 !important;
}

body.water-festival-active .glass-header button[onclick="toggleCustomerChat()"] {
  background-color: rgba(14, 165, 233, 0.22) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  color: #e0f2fe !important;
}

body.water-festival-active .glass-header button[onclick="toggleCustomerChat()"]:hover {
  background-color: rgba(14, 165, 233, 0.35) !important;
  color: #ffffff !important;
}

body.water-festival-active .glass-header button[onclick="toggleCustomerChat()"] i {
  color: #38bdf8 !important;
}

body.water-festival-active main {
  position: relative !important;
  z-index: 10 !important;
}

body.water-festival-active footer {
  position: relative !important;
  z-index: 10 !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
}



/* ==================== KHMER NEW YEAR (CHOUL CHNAM THMEY) ==================== */
#senghourKhmerNewYearCanvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 99997 !important;
  display: none;
}

body.khmer-new-year-active #senghourKhmerNewYearCanvas {
  display: block !important;
}

body.khmer-new-year-active #senghourKhmerNewYearDecorations {
  display: block !important;
}

body:not(.khmer-new-year-active) #senghourKhmerNewYearCanvas,
body:not(.khmer-new-year-active) #senghourKhmerNewYearDecorations {
  display: none !important;
}

/* ==================== KHMER NEW YEAR FESTIVE THEME & BACKGROUND ==================== */
body.khmer-new-year-active {
  background-color: #2a1104 !important;
  min-height: 100vh;
  transition: background 0.4s ease-in-out;
}

#senghourKhmerNewYearDecorations {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
  transition: opacity 0.4s ease-in-out;
}

.kny-bg-image {
  position: absolute;
  inset: -15px;
  background-image: url('../assets/khmer-new-year-bg.jpg');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  filter: blur(5px) brightness(0.72) saturate(1.15);
  transform: scale(1.04);
  pointer-events: none;
}

.kny-bg-tint {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(251, 146, 60, 0.15) 0%, rgba(42, 17, 4, 0.65) 60%, rgba(24, 9, 2, 0.88) 100%),
              linear-gradient(to bottom, rgba(42, 17, 4, 0.5) 0%, rgba(42, 17, 4, 0.22) 40%, rgba(24, 9, 2, 0.75) 100%);
  pointer-events: none;
}



body.khmer-new-year-active #sortLabelText,
body.khmer-new-year-active #custSubcatLabelText {
  color: #fed7aa !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

body.khmer-new-year-active #customerStickyHeaderWrapper {
  position: sticky !important;
  z-index: 40 !important;
}

body.khmer-new-year-active .glass-header {
  background: linear-gradient(135deg, rgba(136, 19, 55, 0.95) 0%, rgba(159, 18, 57, 0.96) 45%, rgba(161, 98, 7, 0.94) 100%) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1.5px solid rgba(251, 191, 36, 0.45) !important;
  box-shadow: 0 4px 20px -2px rgba(225, 29, 72, 0.3), 0 2px 8px rgba(0, 0, 0, 0.45) !important;
  transition: all 0.35s ease;
}

body.khmer-new-year-active .glass-header .brand-title,
body.khmer-new-year-active #storeLogoBadge .brand-title,
body.lang-km.khmer-new-year-active .brand-title,
body.lang-km.khmer-new-year-active .glass-header .brand-title {
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}

body.khmer-new-year-active .glass-header .brand-subtitle,
body.khmer-new-year-active #storeLogoBadge .brand-subtitle,
body.lang-km.khmer-new-year-active .brand-subtitle,
body.lang-km.khmer-new-year-active .glass-header .brand-subtitle {
  color: #ffffff !important;
  opacity: 0.95 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

body.khmer-new-year-active .glass-header #customerSearchInput {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(251, 191, 36, 0.5) !important;
  color: #0f172a !important;
}

body.khmer-new-year-active .glass-header #customerSearchInput:focus {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.25) !important;
}

body.khmer-new-year-active .glass-header .bg-slate-100 {
  background-color: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(251, 191, 36, 0.32) !important;
}

body.khmer-new-year-active .glass-header #btnLangEn:not(.bg-white),
body.khmer-new-year-active .glass-header #btnLangKm:not(.bg-white),
body.khmer-new-year-active .glass-header #btnCurUsd:not(.bg-teal-700),
body.khmer-new-year-active .glass-header #btnCurKhr:not(.bg-teal-700) {
  color: #fff1f2 !important;
}

body.khmer-new-year-active .glass-header #customerNotifBtn {
  background-color: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
  color: #fff1f2 !important;
}

body.khmer-new-year-active .glass-header #customerNotifBtn:hover {
  background-color: rgba(255, 255, 255, 0.24) !important;
  color: #fbbf24 !important;
}

body.khmer-new-year-active .glass-header button[onclick="toggleCustomerChat()"] {
  background-color: rgba(225, 29, 72, 0.24) !important;
  border-color: rgba(251, 191, 36, 0.5) !important;
  color: #fff1f2 !important;
}

body.khmer-new-year-active .glass-header button[onclick="toggleCustomerChat()"]:hover {
  background-color: rgba(225, 29, 72, 0.36) !important;
  color: #ffffff !important;
}

body.khmer-new-year-active .glass-header button[onclick="toggleCustomerChat()"] i {
  color: #fde047 !important;
}

body.khmer-new-year-active main {
  position: relative !important;
  z-index: 10 !important;
}

body.khmer-new-year-active footer {
  position: relative !important;
  z-index: 10 !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
}

@keyframes spinSlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spinSlow 8s linear infinite;
}

/* ==================== CHRISTMAS FESTIVE THEME & BACKGROUND ==================== */
body.christmas-theme-active {
  background-color: #0b1a24 !important;
  min-height: 100vh;
  transition: background 0.4s ease-in-out;
}

#senghourChristmasDecorations {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
  transition: opacity 0.4s ease-in-out;
}

/* Dreamy Depth-of-Field Filter (Soft blur & calibrated brightness so background never competes with products) */
.xmas-bg-image {
  position: absolute;
  inset: -15px;
  background-image: url('../assets/christmas-cute-bg.jpg');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  filter: blur(5px) brightness(0.72) saturate(0.92);
  transform: scale(1.04);
  pointer-events: none;
}

/* Soft Contrast & Focus Overlay Filter */
.xmas-bg-tint {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(15, 23, 42, 0.40) 0%, rgba(11, 26, 36, 0.72) 100%),
              linear-gradient(to bottom, rgba(11, 26, 36, 0.52) 0%, rgba(11, 26, 36, 0.28) 40%, rgba(11, 26, 36, 0.62) 100%);
  pointer-events: none;
}

body.christmas-theme-active #sortLabelText,
body.christmas-theme-active #custSubcatLabelText {
  color: #f1f5f9 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

body.christmas-theme-active #customerStickyHeaderWrapper {
  position: sticky !important;
  z-index: 40 !important;
}

body.christmas-theme-active .glass-header {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(14px) !important;
}

body.christmas-theme-active main {
  position: relative !important;
  z-index: 10 !important;
}

body.christmas-theme-active footer {
  position: relative !important;
  z-index: 10 !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
}

/* ==================== FROZEN SNOW ACCUMULATION: 3D SNOW CAP ARCHITECTURE ==================== */
:root {
  --snow-cap-1: url('../assets/snow-cap-1.svg');
  --snow-cap-2: url('../assets/snow-cap-2.svg');
  --snow-cap-3: url('../assets/snow-cap-3.svg');
  --snow-cap-4: url('../assets/snow-cap-4.svg');

  --xmas-snow-style-1: url('../assets/snow-cap-1.svg');
  --xmas-snow-style-2: url('../assets/snow-cap-2.svg');
  --xmas-snow-style-3: url('../assets/snow-cap-3.svg');
  --xmas-snow-style-4: url('../assets/snow-cap-4.svg');
  --xmas-snow-style-5: url('../assets/snow-cap-1.svg');
  --xmas-snow-style-6: url('../assets/snow-cap-2.svg');
  --xmas-snow-style-7: url('../assets/snow-cap-3.svg');
  --xmas-snow-style-8: url('../assets/snow-cap-4.svg');
  --xmas-pill-style-1: url('../assets/snow-cap-1.svg');
  --xmas-pill-style-2: url('../assets/snow-cap-2.svg');
  --xmas-pill-style-3: url('../assets/snow-cap-3.svg');
  --xmas-pill-style-4: url('../assets/snow-cap-4.svg');
  --xmas-pill-style-5: url('../assets/snow-cap-1.svg');
  --xmas-pill-style-6: url('../assets/snow-cap-2.svg');
  --xmas-snow-pill-svg: url('../assets/snow-cap-1.svg');
  --xmas-snow-hero-svg: url('../assets/snow-hero-frame.svg');
  --xmas-snow-hero-frame: url('../assets/snow-hero-frame.svg');
  --xmas-snow-chat-pill: url('../assets/snow-cap-2.svg');
  --xmas-snow-nav-pill: url('../assets/snow-cap-1.svg');
}

/* 1. Target Parent Containers: Relative & Overflow Visible for Natural Snow Perch */
.product-card,
.category-item,
.dribbble-card,
.cust-cat-pill,
.widget-capsule:not(#customerBottomNav) {
  position: relative !important;
  overflow: visible !important;
}

/* Customer Bottom Navigation Dock (Track Orders, Cart, Profile Button) - Fixed Dock */
#customerBottomNav {
  position: fixed !important;
  bottom: 1rem !important;
  right: 0.75rem !important;
  z-index: 40 !important;
  overflow: visible !important;
  display: flex !important;
}

@media (min-width: 640px) {
  #customerBottomNav {
    bottom: 1.5rem !important;
    right: 1.5rem !important;
  }
}

@media (min-width: 768px) {
  #customerBottomNav {
    right: 2.5rem !important;
  }
}

/* 2. Dedicated 3D Snow Overlay Element Pinned to Container Top */
.snow-overlay {
  display: none !important;
  position: absolute !important;
  top: -8px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 34px !important;
  pointer-events: none !important;
  z-index: 15 !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: top center !important;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.22));
  transition: opacity 0.3s ease;
  will-change: transform;
  transform: translateZ(0);
}

/* Only display snow overlay on boxes when Christmas theme is active */
body.christmas-theme-active .snow-overlay {
  display: block !important;
}

body:not(.christmas-theme-active) .snow-overlay {
  display: none !important;
}

/* 3. Randomization & Variation (4 Distinct Photographic Snow Styles Cycling) */
:nth-child(4n + 1) > .snow-overlay,
:nth-child(4n + 1) .snow-overlay,
.product-card:nth-child(4n + 1) .snow-overlay,
.category-item:nth-child(4n + 1) .snow-overlay,
.cust-cat-pill:nth-child(4n + 1) .snow-overlay {
  background-image: var(--snow-cap-1) !important;
}

:nth-child(4n + 2) > .snow-overlay,
:nth-child(4n + 2) .snow-overlay,
.product-card:nth-child(4n + 2) .snow-overlay,
.category-item:nth-child(4n + 2) .snow-overlay,
.cust-cat-pill:nth-child(4n + 2) .snow-overlay {
  background-image: var(--snow-cap-2) !important;
}

:nth-child(4n + 3) > .snow-overlay,
:nth-child(4n + 3) .snow-overlay,
.product-card:nth-child(4n + 3) .snow-overlay,
.category-item:nth-child(4n + 3) .snow-overlay,
.cust-cat-pill:nth-child(4n + 3) .snow-overlay {
  background-image: var(--snow-cap-3) !important;
}

:nth-child(4n + 4) > .snow-overlay,
:nth-child(4n + 4) .snow-overlay,
.product-card:nth-child(4n + 4) .snow-overlay,
.category-item:nth-child(4n + 4) .snow-overlay,
.cust-cat-pill:nth-child(4n + 4) .snow-overlay {
  background-image: var(--snow-cap-4) !important;
}

/* Direct class overrides */
.xmas-snow-style-1 > .snow-overlay, .xmas-pill-style-1 > .snow-overlay { background-image: var(--snow-cap-1) !important; }
.xmas-snow-style-2 > .snow-overlay, .xmas-pill-style-2 > .snow-overlay { background-image: var(--snow-cap-2) !important; }
.xmas-snow-style-3 > .snow-overlay, .xmas-pill-style-3 > .snow-overlay { background-image: var(--snow-cap-3) !important; }
.xmas-snow-style-4 > .snow-overlay, .xmas-pill-style-4 > .snow-overlay { background-image: var(--snow-cap-4) !important; }
.xmas-snow-style-5 > .snow-overlay, .xmas-pill-style-5 > .snow-overlay { background-image: var(--snow-cap-1) !important; }
.xmas-snow-style-6 > .snow-overlay, .xmas-pill-style-6 > .snow-overlay { background-image: var(--snow-cap-2) !important; }
.xmas-snow-style-7 > .snow-overlay { background-image: var(--snow-cap-3) !important; }
.xmas-snow-style-8 > .snow-overlay { background-image: var(--snow-cap-4) !important; }

/* 4. Edge Alignment & Component Customization */

/* A. Category Pills: Subtle, proportional snowcap conforming to pill curvature */
body.christmas-theme-active #custCategoryFilterBar {
  padding-top: 18px !important;
  padding-bottom: 10px !important;
  overflow-y: visible !important;
}

.category-item .snow-overlay,
.cust-cat-pill .snow-overlay {
  height: 22px !important;
  top: -7px !important;
  left: 2px !important;
  right: 2px !important;
  width: calc(100% - 4px) !important;
  filter: drop-shadow(0 1.5px 3px rgba(15, 23, 42, 0.20)) !important;
}

/* Keep category icons and text crisp and readable on top of snow */
.cust-cat-pill > span,
.category-item > span,
.cust-cat-pill > i,
.category-item > i {
  position: relative !important;
  z-index: 12 !important;
}

/* Search bar snowcap: gentle snow layer settled across top edge */
.customer-header-search {
  position: relative !important;
  overflow: visible !important;
}

.snow-overlay-search {
  height: 22px !important;
  top: -7px !important;
  left: 6px !important;
  right: 6px !important;
  width: calc(100% - 12px) !important;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  z-index: 15 !important;
  filter: drop-shadow(0 1.5px 3.5px rgba(15, 23, 42, 0.18)) !important;
}

/* Promo card & Box snowcaps (Hero preview cards, logistics, security banner, promo box) */
.snow-overlay-card {
  height: 28px !important;
  top: -7px !important;
  left: 4px !important;
  right: 4px !important;
  width: calc(100% - 8px) !important;
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  z-index: 20 !important;
  filter: drop-shadow(0 2px 4px rgba(0, 20, 30, 0.25)) !important;
}

.snow-overlay-box {
  height: 20px !important;
  top: -6px !important;
  left: 3px !important;
  right: 3px !important;
  width: calc(100% - 6px) !important;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  z-index: 15 !important;
  filter: drop-shadow(0 1.5px 3px rgba(0, 20, 30, 0.22)) !important;
}

/* B. Product Cards: Beautiful 36px snow cap sitting atop product image */
body.christmas-theme-active .dribbble-card:not(#heroSliderContainer),
.product-card:not(#heroSliderContainer) {
  border-radius: var(--radius-card, 1.25rem) !important;
  background-color: #ffffff !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(226, 232, 240, 0.95) !important;
}

/* Ensure Product Card image container & images conform strictly to rounded top corners */
.dribbble-card:not(#heroSliderContainer) .aspect-square,
.product-card:not(#heroSliderContainer) .aspect-square,
.dribbble-card:not(#heroSliderContainer) .aspect-\[4\/3\],
.product-card:not(#heroSliderContainer) .aspect-\[4\/3\],
.dribbble-card:not(#heroSliderContainer) > div:not(.snow-overlay):first-of-type,
.product-card:not(#heroSliderContainer) > div:not(.snow-overlay):first-of-type,
body.christmas-theme-active .dribbble-card:not(#heroSliderContainer) > div:not(.snow-overlay):first-of-type,
body.christmas-theme-active .product-card:not(#heroSliderContainer) > div:not(.snow-overlay):first-of-type {
  border-top-left-radius: var(--radius-card, 1.25rem) !important;
  border-top-right-radius: var(--radius-card, 1.25rem) !important;
  overflow: hidden !important;
}

.dribbble-card:not(#heroSliderContainer) .aspect-square img,
.product-card:not(#heroSliderContainer) .aspect-square img,
.dribbble-card:not(#heroSliderContainer) .aspect-\[4\/3\] img,
.product-card:not(#heroSliderContainer) .aspect-\[4\/3\] img,
.dribbble-card:not(#heroSliderContainer) > div:not(.snow-overlay):first-of-type img,
.product-card:not(#heroSliderContainer) > div:not(.snow-overlay):first-of-type img {
  border-top-left-radius: var(--radius-card, 1.25rem) !important;
  border-top-right-radius: var(--radius-card, 1.25rem) !important;
}

/* Ensure the bottom of the card is cleanly rounded */
.dribbble-card:not(#heroSliderContainer) > div:last-child,
.product-card:not(#heroSliderContainer) > div:last-child {
  border-bottom-left-radius: var(--radius-card, 1.25rem) !important;
  border-bottom-right-radius: var(--radius-card, 1.25rem) !important;
}

.product-card .snow-overlay,
.dribbble-card .snow-overlay {
  height: 34px !important;
  top: -8px !important;
  left: 2px !important;
  right: 2px !important;
  width: calc(100% - 4px) !important;
  filter: drop-shadow(0 2.5px 5px rgba(15, 23, 42, 0.24)) !important;
}

/* Ensure Discount and Promo Badges pop above icicles crisply */
body.christmas-theme-active .dribbble-card .aspect-square > span {
  z-index: 30 !important;
  position: absolute !important;
}

/* C. Widget Capsules (Action Bar & Chat Widget) */
.widget-capsule .snow-overlay {
  height: 26px !important;
  top: -8px !important;
  left: 0 !important;
  right: 0 !important;
}

#customerChatBtnGroup .snow-overlay {
  background-image: var(--snow-cap-2) !important;
}

#customerBottomNav .snow-overlay {
  background-image: var(--snow-cap-1) !important;
}

/* Hero Banner Container - Clean dark green card with rounded corners & natural snow perch */
.hero-banner,
#heroSliderContainer {
  position: relative !important;
  overflow: visible !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg, #022c22 0%, #064e3b 45%, #0f766e 100%) !important;
  border: none !important;
  transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hero-banner::before,
.hero-banner::after,
#heroSliderContainer::before,
#heroSliderContainer::after {
  content: none !important;
  display: none !important;
}

/* 3D Melting Icicle & Snow Banner Image for Hero Banner */
.hero-snow-cap-img {
  position: absolute !important;
  top: -20px !important;
  left: -7px !important;
  right: -7px !important;
  width: calc(100% + 14px) !important;
  max-width: none !important;
  height: auto !important;
  object-fit: fill !important;
  pointer-events: none !important;
  z-index: 30 !important;
  filter: drop-shadow(0 4px 10px rgba(0, 14, 20, 0.52)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.36)) !important;
  user-select: none !important;
  display: none !important;
}

body.christmas-theme-active .hero-snow-cap-img {
  display: block !important;
}

@media (max-width: 640px) {
  .hero-snow-cap-img {
    top: -10px !important;
    left: -4px !important;
    right: -4px !important;
    width: calc(100% + 8px) !important;
  }
}

body:not(.christmas-theme-active) .hero-snow-cap-img {
  display: none !important;
}

/* Legacy banner-snow-cap removal */
.banner-snow-cap {
  display: none !important;
}

/* 5. Suppress Legacy Pseudo-Elements (Prevent double/clashing snow overlays) */
body.christmas-theme-active .dribbble-card:not(#heroSliderContainer)::before,
body.christmas-theme-active .dribbble-card:not(#heroSliderContainer)::after,
body.christmas-theme-active .cust-cat-pill::before,
body.christmas-theme-active .cust-cat-pill::after,
body.christmas-theme-active #customerChatBtnGroup::before,
body.christmas-theme-active #customerChatBtnGroup::after,
body.christmas-theme-active #customerBottomNav::before,
body.christmas-theme-active #customerBottomNav::after,
body.christmas-theme-active #heroSliderContainer::before,
body.christmas-theme-active #heroSliderContainer::after,
#heroSliderSnowCapTop {
  display: none !important;
  content: none !important;
}

/* Customer Chat Box Window & Customer Profile Modal: Top realistic ice cap */
body.christmas-theme-active #customerChatBox {
  position: fixed;
  overflow: visible !important;
  border-radius: 1.5rem !important;
}

body.christmas-theme-active #customerChatBox::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 75px;
  background-image: var(--xmas-snow-hero-svg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: top center;
  z-index: 50;
  pointer-events: none !important;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
}

body.christmas-theme-active #customerChatBox::after {
  display: none !important;
  content: none !important;
}

body.christmas-theme-active #customerProfileModal > div {
  position: relative !important;
  overflow: visible !important;
  border-radius: 1.5rem !important;
}

body.christmas-theme-active #customerProfileModal > div::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 75px;
  background-image: var(--xmas-snow-hero-svg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: top center;
  z-index: 50;
  pointer-events: none !important;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
}

/* ==========================================================================
   DYNAMIC STORE COLOR THEMES & BACKGROUND SYSTEM (FOR ADMIN & CUSTOMER)
   Silky Smooth Transitions & Refined Ambient Palettes
   ========================================================================== */

/* Universal Buttery Smooth Color & Background Transitions */
body,
header,
.glass-header,
#customerStickyHeaderWrapper,
#topAnnouncementBar,
.product-card,
.dribbble-card,
.settings-part-card,
#adminThemeQuickBtn,
#customerThemePickerBtn {
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.3s ease,
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 1. ROYAL KHMER GOLD THEME */
body.theme-gold {
  --bg-main: #FAF7F2;
  --primary: #D97706;
  --primary-light: #F59E0B;
  --primary-dark: #B45309;
  background-color: #FAF7F2 !important;
}
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .glass-header,
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) header:not(.modal-exempt) {
  background: linear-gradient(135deg, rgba(255, 253, 248, 0.94) 0%, rgba(254, 249, 235, 0.92) 100%) !important;
  border-bottom: 1.5px solid rgba(217, 119, 6, 0.22) !important;
}
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .brand-title {
  background: linear-gradient(135deg, #92400E 0%, #D97706 50%, #78350F 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #topAnnouncementBar {
  background: linear-gradient(90deg, #78350F 0%, #B45309 50%, #78350F 100%) !important;
  color: #FEF3C7 !important;
  border-top-color: rgba(251, 191, 36, 0.3) !important;
}

/* 2. MIDNIGHT LUXURY DARK THEME */
body.theme-dark {
  --bg-main: #0B1120;
  --surface: #151D2A;
  --text-main: #F1F5F9;
  --text-muted: #94A3B8;
  --border: #1E293B;
  background-color: #0B1120 !important;
  color: #F1F5F9 !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .glass-header,
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) header:not(.modal-exempt) {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.94) 0%, rgba(30, 41, 59, 0.94) 100%) !important;
  border-bottom: 1.5px solid rgba(51, 65, 85, 0.6) !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4) !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .brand-title,
body.lang-km.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .brand-title {
  color: #FFFFFF !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .pulse-dot,
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .pulse-dot::after {
  background: #38BDF8 !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .brand-subtitle {
  color: #38BDF8 !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerSearchInput {
  background-color: #1E293B !important;
  border-color: #334155 !important;
  color: #FFFFFF !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #topAnnouncementBar {
  background: linear-gradient(90deg, #020617 0%, #0F172A 50%, #020617 100%) !important;
  color: #38BDF8 !important;
  border-top-color: rgba(56, 189, 248, 0.3) !important;
}
body.theme-dark .product-card,
body.theme-dark .dribbble-card {
  background-color: #151D2A !important;
  border-color: #1E293B !important;
  color: #F1F5F9 !important;
}

/* 3. ROSE & LOTUS BLOSSOM THEME */
body.theme-rose {
  --bg-main: #FDF7F8;
  --primary: #E11D48;
  --primary-light: #FB7185;
  --primary-dark: #BE123C;
  background-color: #FDF7F8 !important;
}
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .glass-header,
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) header:not(.modal-exempt) {
  background: linear-gradient(135deg, rgba(255, 250, 251, 0.94) 0%, rgba(255, 241, 242, 0.92) 100%) !important;
  border-bottom: 1.5px solid rgba(225, 29, 72, 0.2) !important;
}
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .brand-title {
  background: linear-gradient(135deg, #9F1239 0%, #E11D48 50%, #881337 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #topAnnouncementBar {
  background: linear-gradient(90deg, #881337 0%, #9F1239 50%, #881337 100%) !important;
  color: #FFE4E6 !important;
  border-top-color: rgba(251, 113, 133, 0.3) !important;
}

/* 4. SAPPHIRE OCEAN MARINA THEME */
body.theme-ocean {
  --bg-main: #F3F8FC;
  --primary: #0284C7;
  --primary-light: #38BDF8;
  --primary-dark: #0369A1;
  background-color: #F3F8FC !important;
}
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .glass-header,
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) header:not(.modal-exempt) {
  background: linear-gradient(135deg, rgba(250, 253, 255, 0.94) 0%, rgba(240, 249, 255, 0.92) 100%) !important;
  border-bottom: 1.5px solid rgba(2, 132, 199, 0.2) !important;
}
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .brand-title {
  background: linear-gradient(135deg, #075985 0%, #0284C7 50%, #0C4A6E 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #topAnnouncementBar {
  background: linear-gradient(90deg, #0C4A6E 0%, #075985 50%, #0C4A6E 100%) !important;
  color: #E0F2FE !important;
  border-top-color: rgba(56, 189, 248, 0.3) !important;
}

/* 5. AMETHYST TWILIGHT VIOLET THEME */
body.theme-violet {
  --bg-main: #F8F6FD;
  --primary: #7C3AED;
  --primary-light: #A855F7;
  --primary-dark: #6D28D9;
  background-color: #F8F6FD !important;
}
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .glass-header,
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) header:not(.modal-exempt) {
  background: linear-gradient(135deg, rgba(253, 252, 255, 0.94) 0%, rgba(250, 245, 255, 0.92) 100%) !important;
  border-bottom: 1.5px solid rgba(124, 58, 237, 0.2) !important;
}
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .brand-title {
  background: linear-gradient(135deg, #581C87 0%, #7C3AED 50%, #4C1D95 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #topAnnouncementBar {
  background: linear-gradient(90deg, #4C1D95 0%, #5B21B6 50%, #4C1D95 100%) !important;
  color: #F3E8FF !important;
  border-top-color: rgba(168, 85, 247, 0.3) !important;
}

/* 6. MATCHA ORGANIC NATURE THEME */
body.theme-nature {
  --bg-main: #F4F9F5;
  --primary: #16A34A;
  --primary-light: #22C55E;
  --primary-dark: #15803D;
  background-color: #F4F9F5 !important;
}
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .glass-header,
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) header:not(.modal-exempt) {
  background: linear-gradient(135deg, rgba(252, 255, 253, 0.94) 0%, rgba(240, 253, 244, 0.92) 100%) !important;
  border-bottom: 1.5px solid rgba(22, 163, 74, 0.2) !important;
}
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .brand-title {
  background: linear-gradient(135deg, #14532D 0%, #16A34A 50%, #14532D 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #topAnnouncementBar {
  background: linear-gradient(90deg, #14532D 0%, #166534 50%, #14532D 100%) !important;
  color: #DCFCE7 !important;
  border-top-color: rgba(74, 222, 128, 0.3) !important;
}

/* 7. SUNSET WARM CORAL THEME */
body.theme-sunset {
  --bg-main: #FDF8F3;
  --primary: #EA580C;
  --primary-light: #F97316;
  --primary-dark: #C2410C;
  background-color: #FDF8F3 !important;
}
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .glass-header,
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) header:not(.modal-exempt) {
  background: linear-gradient(135deg, rgba(255, 252, 249, 0.94) 0%, rgba(255, 247, 237, 0.92) 100%) !important;
  border-bottom: 1.5px solid rgba(234, 88, 12, 0.2) !important;
}
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .brand-title {
  background: linear-gradient(135deg, #9A3412 0%, #EA580C 50%, #7C2D12 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #topAnnouncementBar {
  background: linear-gradient(90deg, #7C2D12 0%, #9A3412 50%, #7C2D12 100%) !important;
  color: #FFEDD5 !important;
  border-top-color: rgba(251, 146, 60, 0.3) !important;
}

/* =========================================================
   CUSTOMER HERO BANNER THEME COLOR INTEGRATION
   ========================================================= */
.hero-banner,
#heroSliderContainer,
.hero-slide-item {
  transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Default Emerald Teal */
.hero-banner,
#heroSliderContainer,
.hero-slide-item,
body.theme-emerald .hero-banner,
body.theme-emerald #heroSliderContainer,
body.theme-emerald .hero-slide-item {
  background: linear-gradient(135deg, #022c22 0%, #064e3b 45%, #0f766e 100%) !important;
}

/* 1. Royal Khmer Gold Theme */
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-banner,
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #heroSliderContainer,
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item {
  background: linear-gradient(135deg, #451a03 0%, #78350f 45%, #b45309 100%) !important;
}
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item .text-teal-100 { color: #fef3c7 !important; }
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item .text-teal-200 { color: #fde68a !important; }
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item .text-teal-300 { color: #fcd34d !important; }
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-cta-btn { color: #78350f !important; }
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-ambient-glow { background-color: rgba(245, 158, 11, 0.25) !important; }

/* 2. Midnight Luxury Dark Theme */
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-banner,
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #heroSliderContainer,
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item {
  background: linear-gradient(135deg, #030712 0%, #0f172a 50%, #1e293b 100%) !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item .text-teal-100 { color: #cbd5e1 !important; }
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item .text-teal-200 { color: #94a3b8 !important; }
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item .text-teal-300 { color: #38bdf8 !important; }
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-cta-btn { color: #0f172a !important; }
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-ambient-glow { background-color: rgba(56, 189, 248, 0.15) !important; }

/* 3. Rose & Lotus Blossom Theme */
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-banner,
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #heroSliderContainer,
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item {
  background: linear-gradient(135deg, #4c0519 0%, #881337 45%, #be123c 100%) !important;
}
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item .text-teal-100 { color: #ffe4e6 !important; }
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item .text-teal-200 { color: #fecdd3 !important; }
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item .text-teal-300 { color: #fda4af !important; }
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-cta-btn { color: #881337 !important; }
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-ambient-glow { background-color: rgba(244, 63, 94, 0.25) !important; }

/* 4. Sapphire Ocean Theme */
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-banner,
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #heroSliderContainer,
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item {
  background: linear-gradient(135deg, #082f49 0%, #0369a1 45%, #0284c7 100%) !important;
}
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item .text-teal-100 { color: #e0f2fe !important; }
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item .text-teal-200 { color: #bae6fd !important; }
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item .text-teal-300 { color: #7dd3fc !important; }
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-cta-btn { color: #0c4a6e !important; }
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-ambient-glow { background-color: rgba(14, 165, 233, 0.25) !important; }

/* 5. Amethyst Twilight Violet Theme */
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-banner,
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #heroSliderContainer,
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item {
  background: linear-gradient(135deg, #2e1065 0%, #4c1d95 45%, #6d28d9 100%) !important;
}
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item .text-teal-100 { color: #f3e8ff !important; }
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item .text-teal-200 { color: #e9d5ff !important; }
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item .text-teal-300 { color: #d8b4fe !important; }
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-cta-btn { color: #4c1d95 !important; }
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-ambient-glow { background-color: rgba(168, 85, 247, 0.25) !important; }

/* 6. Matcha Organic Nature Theme */
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-banner,
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #heroSliderContainer,
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item {
  background: linear-gradient(135deg, #052e16 0%, #14532d 45%, #16a34a 100%) !important;
}
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item .text-teal-100 { color: #dcfce7 !important; }
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item .text-teal-200 { color: #bbf7d0 !important; }
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item .text-teal-300 { color: #86efac !important; }
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-cta-btn { color: #14532d !important; }
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-ambient-glow { background-color: rgba(34, 197, 94, 0.25) !important; }

/* 7. Sunset Warm Coral Theme */
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-banner,
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #heroSliderContainer,
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item {
  background: linear-gradient(135deg, #431407 0%, #7c2d12 45%, #ea580c 100%) !important;
}
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item .text-teal-100 { color: #ffedd5 !important; }
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item .text-teal-200 { color: #fed7aa !important; }
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-slide-item .text-teal-300 { color: #fdba74 !important; }
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-cta-btn { color: #7c2d12 !important; }
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .hero-ambient-glow { background-color: rgba(249, 115, 22, 0.25) !important; }

/* Seasonal Overrides when Festivals are active */
body.water-festival-active .hero-banner,
body.water-festival-active #heroSliderContainer,
body.water-festival-active .hero-slide-item {
  background: linear-gradient(135deg, #071724 0%, #0c2d48 45%, #145da0 100%) !important;
}
body.khmer-new-year-active .hero-banner,
body.khmer-new-year-active #heroSliderContainer,
body.khmer-new-year-active .hero-slide-item {
  background: linear-gradient(135deg, #78350f 0%, #b45309 45%, #d97706 100%) !important;
}
body.christmas-theme-active .hero-banner,
body.christmas-theme-active #heroSliderContainer,
body.christmas-theme-active .hero-slide-item {
  background: linear-gradient(135deg, #022c22 0%, #064e3b 45%, #0f766e 100%) !important;
}
body.christmas-theme-active .hero-slide-item .text-teal-100 { color: #ccfbf1 !important; }
body.christmas-theme-active .hero-slide-item .text-teal-200 { color: #99f6e4 !important; }
body.christmas-theme-active .hero-slide-item .text-teal-300 { color: #5eead4 !important; }
body.christmas-theme-active .hero-cta-btn { color: #042f2e !important; }
body.christmas-theme-active .hero-ambient-glow { background-color: rgba(20, 184, 166, 0.25) !important; }

/* Strictly Hide & Disable Customer Theme Picker Tool when any Festival is Active (Water Festival, KNY, Christmas Day) */
body.water-festival-active #customerThemePickerWrapper,
body.khmer-new-year-active #customerThemePickerWrapper,
body.christmas-theme-active #customerThemePickerWrapper {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* =========================================================
   STOREFRONT PRODUCT CARDS & FLOATING CONTROLS THEME SYSTEM
   ========================================================= */

.card-badge-pill,
.card-add-btn,
.card-price,
.card-cat-name,
.card-stock-pill,
.card-stock-dot,
.size-pill-btn,
#customerChatBtnGroup,
#headerCartBtn,
#custHeaderAvatar,
.cart-checkout-btn,
#qvBuyNowBtn,
#qvAddBtn,
#qvBadge,
.subcat-active-pill {
  transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 1. ROYAL KHMER GOLD THEME */
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-badge-pill {
  background-color: #B45309 !important;
  color: #FFFFFF !important;
}
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-add-btn {
  background-color: #B45309 !important;
  box-shadow: 0 4px 14px 0 rgba(180, 83, 9, 0.35) !important;
}
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-add-btn:hover {
  background-color: #92400E !important;
}
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-price {
  color: #78350F !important;
}
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-cat-name {
  color: #B45309 !important;
}
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .product-card:hover .card-prod-title {
  color: #B45309 !important;
}
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-stock-pill {
  color: #92400E !important;
  background-color: #FEF3C7 !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-stock-dot {
  background-color: #F59E0B !important;
}
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .size-pill-btn {
  color: #78350F !important;
  background-color: #FEF3C7 !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .size-pill-btn:hover {
  background-color: #B45309 !important;
  color: #FFFFFF !important;
}
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerChatBtnGroup {
  background: linear-gradient(135deg, #451A03 0%, #B45309 50%, #78350F 100%) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  box-shadow: 0 10px 25px -5px rgba(69, 26, 3, 0.5) !important;
}
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerChatBtnGroup .chat-status-dot,
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerChatBtnGroup .chat-status-ping {
  background-color: #FBBF24 !important;
}
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #headerCartBtn {
  background-color: #B45309 !important;
  box-shadow: 0 4px 14px 0 rgba(180, 83, 9, 0.35) !important;
}
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #headerCartBtn:hover {
  background-color: #92400E !important;
}
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #custHeaderAvatar {
  background-color: #B45309 !important;
}
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerBottomNav [onclick*="openTrackOrdersModal"] i {
  color: #B45309 !important;
}
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .cart-checkout-btn,
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #qvBuyNowBtn {
  background-color: #B45309 !important;
  box-shadow: 0 4px 14px 0 rgba(180, 83, 9, 0.35) !important;
}
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #qvAddBtn {
  border-color: #B45309 !important;
  color: #B45309 !important;
}
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #qvBadge {
  background-color: #B45309 !important;
}
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .subcat-active-pill {
  background-color: #B45309 !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5) !important;
}

/* 2. MIDNIGHT LUXURY DARK THEME */
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-badge-pill {
  background-color: #0284C7 !important;
  color: #FFFFFF !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-add-btn {
  background-color: #0284C7 !important;
  box-shadow: 0 4px 14px 0 rgba(2, 132, 199, 0.4) !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-add-btn:hover {
  background-color: #0369A1 !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-price {
  color: #38BDF8 !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-cat-name {
  color: #38BDF8 !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .product-card:hover .card-prod-title {
  color: #38BDF8 !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-stock-pill {
  color: #38BDF8 !important;
  background-color: rgba(56, 189, 248, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-stock-dot {
  background-color: #38BDF8 !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .size-pill-btn {
  color: #E2E8F0 !important;
  background-color: #1E293B !important;
  border-color: #334155 !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .size-pill-btn:hover {
  background-color: #0284C7 !important;
  color: #FFFFFF !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerChatBtnGroup {
  background: linear-gradient(135deg, #030712 0%, #0F172A 50%, #1E293B 100%) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.7) !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerChatBtnGroup .chat-status-dot,
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerChatBtnGroup .chat-status-ping {
  background-color: #38BDF8 !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #headerCartBtn {
  background-color: #0284C7 !important;
  box-shadow: 0 4px 14px 0 rgba(2, 132, 199, 0.4) !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #headerCartBtn:hover {
  background-color: #0369A1 !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #custHeaderAvatar {
  background-color: #0284C7 !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerBottomNav {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border-color: #334155 !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerBottomNav [onclick*="openTrackOrdersModal"] {
  background-color: #1E293B !important;
  border-color: #334155 !important;
  color: #E2E8F0 !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerBottomNav [onclick*="openTrackOrdersModal"] i {
  color: #38BDF8 !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #custAccountHeaderBtn {
  background-color: #1E293B !important;
  border-color: #334155 !important;
  color: #E2E8F0 !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .cart-checkout-btn,
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #qvBuyNowBtn {
  background-color: #0284C7 !important;
  box-shadow: 0 4px 14px 0 rgba(2, 132, 199, 0.4) !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #qvAddBtn {
  border-color: #0284C7 !important;
  color: #38BDF8 !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #qvBadge {
  background-color: #0284C7 !important;
}
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .subcat-active-pill {
  background-color: #0284C7 !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.5) !important;
}

/* 3. ROSE & LOTUS BLOSSOM THEME */
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-badge-pill {
  background-color: #BE123C !important;
  color: #FFFFFF !important;
}
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-add-btn {
  background-color: #BE123C !important;
  box-shadow: 0 4px 14px 0 rgba(190, 18, 60, 0.35) !important;
}
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-add-btn:hover {
  background-color: #9F1239 !important;
}
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-price {
  color: #881337 !important;
}
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-cat-name {
  color: #BE123C !important;
}
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .product-card:hover .card-prod-title {
  color: #BE123C !important;
}
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-stock-pill {
  color: #9F1239 !important;
  background-color: #FFF1F2 !important;
  border-color: rgba(244, 63, 94, 0.3) !important;
}
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-stock-dot {
  background-color: #F43F5E !important;
}
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .size-pill-btn {
  color: #881337 !important;
  background-color: #FFF1F2 !important;
  border-color: rgba(244, 63, 94, 0.3) !important;
}
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .size-pill-btn:hover {
  background-color: #BE123C !important;
  color: #FFFFFF !important;
}
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerChatBtnGroup {
  background: linear-gradient(135deg, #4C0519 0%, #BE123C 50%, #881337 100%) !important;
  border-color: rgba(251, 113, 133, 0.5) !important;
  box-shadow: 0 10px 25px -5px rgba(76, 5, 25, 0.5) !important;
}
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerChatBtnGroup .chat-status-dot,
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerChatBtnGroup .chat-status-ping {
  background-color: #FB7185 !important;
}
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #headerCartBtn {
  background-color: #BE123C !important;
  box-shadow: 0 4px 14px 0 rgba(190, 18, 60, 0.35) !important;
}
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #headerCartBtn:hover {
  background-color: #9F1239 !important;
}
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #custHeaderAvatar {
  background-color: #BE123C !important;
}
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerBottomNav [onclick*="openTrackOrdersModal"] i {
  color: #BE123C !important;
}
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .cart-checkout-btn,
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #qvBuyNowBtn {
  background-color: #BE123C !important;
  box-shadow: 0 4px 14px 0 rgba(190, 18, 60, 0.35) !important;
}
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #qvAddBtn {
  border-color: #BE123C !important;
  color: #BE123C !important;
}
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #qvBadge {
  background-color: #BE123C !important;
}
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .subcat-active-pill {
  background-color: #BE123C !important;
  box-shadow: 0 0 0 2px rgba(251, 113, 133, 0.5) !important;
}

/* 4. SAPPHIRE OCEAN THEME */
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-badge-pill {
  background-color: #0369A1 !important;
  color: #FFFFFF !important;
}
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-add-btn {
  background-color: #0369A1 !important;
  box-shadow: 0 4px 14px 0 rgba(3, 105, 161, 0.35) !important;
}
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-add-btn:hover {
  background-color: #075985 !important;
}
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-price {
  color: #0C4A6E !important;
}
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-cat-name {
  color: #0369A1 !important;
}
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .product-card:hover .card-prod-title {
  color: #0369A1 !important;
}
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-stock-pill {
  color: #0369A1 !important;
  background-color: #F0F9FF !important;
  border-color: rgba(14, 165, 233, 0.3) !important;
}
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-stock-dot {
  background-color: #0284C7 !important;
}
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .size-pill-btn {
  color: #0C4A6E !important;
  background-color: #F0F9FF !important;
  border-color: rgba(14, 165, 233, 0.3) !important;
}
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .size-pill-btn:hover {
  background-color: #0369A1 !important;
  color: #FFFFFF !important;
}
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerChatBtnGroup {
  background: linear-gradient(135deg, #082F49 0%, #0369A1 50%, #0C4A6E 100%) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 10px 25px -5px rgba(8, 47, 73, 0.5) !important;
}
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerChatBtnGroup .chat-status-dot,
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerChatBtnGroup .chat-status-ping {
  background-color: #38BDF8 !important;
}
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #headerCartBtn {
  background-color: #0369A1 !important;
  box-shadow: 0 4px 14px 0 rgba(3, 105, 161, 0.35) !important;
}
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #headerCartBtn:hover {
  background-color: #075985 !important;
}
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #custHeaderAvatar {
  background-color: #0369A1 !important;
}
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerBottomNav [onclick*="openTrackOrdersModal"] i {
  color: #0369A1 !important;
}
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .cart-checkout-btn,
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #qvBuyNowBtn {
  background-color: #0369A1 !important;
  box-shadow: 0 4px 14px 0 rgba(3, 105, 161, 0.35) !important;
}
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #qvAddBtn {
  border-color: #0369A1 !important;
  color: #0369A1 !important;
}
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #qvBadge {
  background-color: #0369A1 !important;
}
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .subcat-active-pill {
  background-color: #0369A1 !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.5) !important;
}

/* 5. AMETHYST TWILIGHT VIOLET THEME */
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-badge-pill {
  background-color: #6D28D9 !important;
  color: #FFFFFF !important;
}
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-add-btn {
  background-color: #6D28D9 !important;
  box-shadow: 0 4px 14px 0 rgba(109, 40, 217, 0.35) !important;
}
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-add-btn:hover {
  background-color: #5B21B6 !important;
}
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-price {
  color: #4C1D95 !important;
}
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-cat-name {
  color: #6D28D9 !important;
}
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .product-card:hover .card-prod-title {
  color: #6D28D9 !important;
}
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-stock-pill {
  color: #5B21B6 !important;
  background-color: #FAF5FF !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-stock-dot {
  background-color: #7C3AED !important;
}
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .size-pill-btn {
  color: #4C1D95 !important;
  background-color: #FAF5FF !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .size-pill-btn:hover {
  background-color: #6D28D9 !important;
  color: #FFFFFF !important;
}
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerChatBtnGroup {
  background: linear-gradient(135deg, #2E1065 0%, #6D28D9 50%, #4C1D95 100%) !important;
  border-color: rgba(168, 85, 247, 0.5) !important;
  box-shadow: 0 10px 25px -5px rgba(46, 16, 101, 0.5) !important;
}
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerChatBtnGroup .chat-status-dot,
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerChatBtnGroup .chat-status-ping {
  background-color: #C084FC !important;
}
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #headerCartBtn {
  background-color: #6D28D9 !important;
  box-shadow: 0 4px 14px 0 rgba(109, 40, 217, 0.35) !important;
}
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #headerCartBtn:hover {
  background-color: #5B21B6 !important;
}
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #custHeaderAvatar {
  background-color: #6D28D9 !important;
}
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerBottomNav [onclick*="openTrackOrdersModal"] i {
  color: #6D28D9 !important;
}
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .cart-checkout-btn,
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #qvBuyNowBtn {
  background-color: #6D28D9 !important;
  box-shadow: 0 4px 14px 0 rgba(109, 40, 217, 0.35) !important;
}
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #qvAddBtn {
  border-color: #6D28D9 !important;
  color: #6D28D9 !important;
}
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #qvBadge {
  background-color: #6D28D9 !important;
}
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .subcat-active-pill {
  background-color: #6D28D9 !important;
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.5) !important;
}

/* 6. MATCHA ORGANIC NATURE THEME */
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-badge-pill {
  background-color: #15803D !important;
  color: #FFFFFF !important;
}
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-add-btn {
  background-color: #15803D !important;
  box-shadow: 0 4px 14px 0 rgba(21, 128, 61, 0.35) !important;
}
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-add-btn:hover {
  background-color: #166534 !important;
}
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-price {
  color: #14532D !important;
}
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-cat-name {
  color: #15803D !important;
}
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .product-card:hover .card-prod-title {
  color: #15803D !important;
}
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-stock-pill {
  color: #166534 !important;
  background-color: #F0FDF4 !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-stock-dot {
  background-color: #16A34A !important;
}
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .size-pill-btn {
  color: #14532D !important;
  background-color: #F0FDF4 !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .size-pill-btn:hover {
  background-color: #15803D !important;
  color: #FFFFFF !important;
}
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerChatBtnGroup {
  background: linear-gradient(135deg, #052E16 0%, #15803D 50%, #14532D 100%) !important;
  border-color: rgba(34, 197, 94, 0.5) !important;
  box-shadow: 0 10px 25px -5px rgba(5, 46, 22, 0.5) !important;
}
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerChatBtnGroup .chat-status-dot,
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerChatBtnGroup .chat-status-ping {
  background-color: #4ADE80 !important;
}
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #headerCartBtn {
  background-color: #15803D !important;
  box-shadow: 0 4px 14px 0 rgba(21, 128, 61, 0.35) !important;
}
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #headerCartBtn:hover {
  background-color: #166534 !important;
}
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #custHeaderAvatar {
  background-color: #15803D !important;
}
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerBottomNav [onclick*="openTrackOrdersModal"] i {
  color: #15803D !important;
}
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .cart-checkout-btn,
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #qvBuyNowBtn {
  background-color: #15803D !important;
  box-shadow: 0 4px 14px 0 rgba(21, 128, 61, 0.35) !important;
}
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #qvAddBtn {
  border-color: #15803D !important;
  color: #15803D !important;
}
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #qvBadge {
  background-color: #15803D !important;
}
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .subcat-active-pill {
  background-color: #15803D !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.5) !important;
}

/* 7. SUNSET WARM CORAL THEME */
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-badge-pill {
  background-color: #C2410C !important;
  color: #FFFFFF !important;
}
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-add-btn {
  background-color: #C2410C !important;
  box-shadow: 0 4px 14px 0 rgba(194, 65, 12, 0.35) !important;
}
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-add-btn:hover {
  background-color: #9A3412 !important;
}
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-price {
  color: #7C2D12 !important;
}
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-cat-name {
  color: #C2410C !important;
}
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .product-card:hover .card-prod-title {
  color: #C2410C !important;
}
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-stock-pill {
  color: #9A3412 !important;
  background-color: #FFF7ED !important;
  border-color: rgba(249, 115, 22, 0.3) !important;
}
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .card-stock-dot {
  background-color: #EA580C !important;
}
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .size-pill-btn {
  color: #7C2D12 !important;
  background-color: #FFF7ED !important;
  border-color: rgba(249, 115, 22, 0.3) !important;
}
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .size-pill-btn:hover {
  background-color: #C2410C !important;
  color: #FFFFFF !important;
}
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerChatBtnGroup {
  background: linear-gradient(135deg, #431407 0%, #C2410C 50%, #7C2D12 100%) !important;
  border-color: rgba(249, 115, 22, 0.5) !important;
  box-shadow: 0 10px 25px -5px rgba(67, 20, 7, 0.5) !important;
}
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerChatBtnGroup .chat-status-dot,
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerChatBtnGroup .chat-status-ping {
  background-color: #FB923C !important;
}
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #headerCartBtn {
  background-color: #C2410C !important;
  box-shadow: 0 4px 14px 0 rgba(194, 65, 12, 0.35) !important;
}
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #headerCartBtn:hover {
  background-color: #9A3412 !important;
}
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #custHeaderAvatar {
  background-color: #C2410C !important;
}
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #customerBottomNav [onclick*="openTrackOrdersModal"] i {
  color: #C2410C !important;
}
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .cart-checkout-btn,
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #qvBuyNowBtn {
  background-color: #C2410C !important;
  box-shadow: 0 4px 14px 0 rgba(194, 65, 12, 0.35) !important;
}
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #qvAddBtn {
  border-color: #C2410C !important;
  color: #C2410C !important;
}
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #qvBadge {
  background-color: #C2410C !important;
}
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .subcat-active-pill {
  background-color: #C2410C !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.5) !important;
}

/* =========================================================
   FESTIVAL STOREFRONT CARDS, BUTTONS & CONTROLS PRIORITY OVERRIDES
   When Admin enables Water Festival, Khmer New Year, or Christmas,
   ALL product cards, buttons, badges, prices, bottom nav and live chat
   MUST follow the active Festival's official colors!
   Customer chosen colors are strictly prohibited from overriding festivals!
   ========================================================= */

/* 1. KHMER WATER FESTIVAL (BON OM TOUK) STOREFRONT */
body.water-festival-active .card-badge-pill {
  background-color: #0284C7 !important;
  color: #FFFFFF !important;
}
body.water-festival-active .card-add-btn {
  background-color: #0284C7 !important;
  box-shadow: 0 4px 14px 0 rgba(2, 132, 199, 0.4) !important;
  color: #FFFFFF !important;
}
body.water-festival-active .card-add-btn:hover {
  background-color: #0369A1 !important;
}
body.water-festival-active .card-price {
  color: #0284C7 !important;
}
body.water-festival-active .card-cat-name {
  color: #0369A1 !important;
}
body.water-festival-active .product-card:hover .card-prod-title {
  color: #0284C7 !important;
}
body.water-festival-active .card-stock-pill {
  color: #0369A1 !important;
  background-color: #F0F9FF !important;
  border-color: rgba(14, 165, 233, 0.35) !important;
}
body.water-festival-active .card-stock-dot {
  background-color: #0284C7 !important;
}
body.water-festival-active .size-pill-btn {
  color: #0C4A6E !important;
  background-color: #F0F9FF !important;
  border-color: rgba(14, 165, 233, 0.3) !important;
}
body.water-festival-active .size-pill-btn:hover {
  background-color: #0284C7 !important;
  color: #FFFFFF !important;
}
body.water-festival-active #customerChatBtnGroup {
  background: linear-gradient(135deg, #071724 0%, #0369A1 50%, #0C4A6E 100%) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 10px 25px -5px rgba(2, 132, 199, 0.5) !important;
}
body.water-festival-active #customerChatBtnGroup .chat-status-dot,
body.water-festival-active #customerChatBtnGroup .chat-status-ping {
  background-color: #38BDF8 !important;
}
body.water-festival-active #headerCartBtn {
  background-color: #0284C7 !important;
  box-shadow: 0 4px 14px 0 rgba(2, 132, 199, 0.4) !important;
}
body.water-festival-active #headerCartBtn:hover {
  background-color: #0369A1 !important;
}
body.water-festival-active #custHeaderAvatar {
  background-color: #0284C7 !important;
}
body.water-festival-active #customerBottomNav [onclick*="openTrackOrdersModal"] i {
  color: #0284C7 !important;
}
body.water-festival-active .cart-checkout-btn,
body.water-festival-active #qvBuyNowBtn {
  background-color: #0284C7 !important;
  box-shadow: 0 4px 14px 0 rgba(2, 132, 199, 0.4) !important;
}
body.water-festival-active #qvAddBtn {
  border-color: #0284C7 !important;
  color: #0284C7 !important;
}
body.water-festival-active #qvBadge {
  background-color: #0284C7 !important;
}
body.water-festival-active .subcat-active-pill {
  background-color: #0284C7 !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.5) !important;
}
body.water-festival-active .category-item[data-cat="all"] {
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px 0 rgba(2, 132, 199, 0.4) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
}
body.water-festival-active .pulse-dot,
body.water-festival-active .pulse-dot::after {
  background: #38BDF8 !important;
}

/* 2. KHMER NEW YEAR (CHHOUL CHHNAM THMEI) STOREFRONT */
body.khmer-new-year-active .card-badge-pill {
  background-color: #BE123C !important;
  color: #FFFFFF !important;
}
body.khmer-new-year-active .card-add-btn {
  background-color: #BE123C !important;
  box-shadow: 0 4px 14px 0 rgba(190, 18, 60, 0.4) !important;
  color: #FFFFFF !important;
}
body.khmer-new-year-active .card-add-btn:hover {
  background-color: #9F1239 !important;
}
body.khmer-new-year-active .card-price {
  color: #BE123C !important;
}
body.khmer-new-year-active .card-cat-name {
  color: #B45309 !important;
}
body.khmer-new-year-active .product-card:hover .card-prod-title {
  color: #BE123C !important;
}
body.khmer-new-year-active .card-stock-pill {
  color: #9F1239 !important;
  background-color: #FFF1F2 !important;
  border-color: rgba(244, 63, 94, 0.35) !important;
}
body.khmer-new-year-active .card-stock-dot {
  background-color: #BE123C !important;
}
body.khmer-new-year-active .size-pill-btn {
  color: #881337 !important;
  background-color: #FFF1F2 !important;
  border-color: rgba(244, 63, 94, 0.3) !important;
}
body.khmer-new-year-active .size-pill-btn:hover {
  background-color: #BE123C !important;
  color: #FFFFFF !important;
}
body.khmer-new-year-active #customerChatBtnGroup {
  background: linear-gradient(135deg, #4C0519 0%, #9F1239 50%, #78350F 100%) !important;
  border-color: rgba(251, 191, 36, 0.5) !important;
  box-shadow: 0 10px 25px -5px rgba(159, 18, 57, 0.5) !important;
}
body.khmer-new-year-active #customerChatBtnGroup .chat-status-dot,
body.khmer-new-year-active #customerChatBtnGroup .chat-status-ping {
  background-color: #FBBF24 !important;
}
body.khmer-new-year-active #headerCartBtn {
  background-color: #BE123C !important;
  box-shadow: 0 4px 14px 0 rgba(190, 18, 60, 0.4) !important;
}
body.khmer-new-year-active #headerCartBtn:hover {
  background-color: #9F1239 !important;
}
body.khmer-new-year-active #custHeaderAvatar {
  background-color: #BE123C !important;
}
body.khmer-new-year-active #customerBottomNav [onclick*="openTrackOrdersModal"] i {
  color: #BE123C !important;
}
body.khmer-new-year-active .cart-checkout-btn,
body.khmer-new-year-active #qvBuyNowBtn {
  background-color: #BE123C !important;
  box-shadow: 0 4px 14px 0 rgba(190, 18, 60, 0.4) !important;
}
body.khmer-new-year-active #qvAddBtn {
  border-color: #BE123C !important;
  color: #BE123C !important;
}
body.khmer-new-year-active #qvBadge {
  background-color: #BE123C !important;
}
body.khmer-new-year-active .subcat-active-pill {
  background-color: #BE123C !important;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.5) !important;
}
body.khmer-new-year-active .category-item[data-cat="all"] {
  background: linear-gradient(135deg, #BE123C 0%, #9F1239 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px 0 rgba(190, 18, 60, 0.4) !important;
  border-color: rgba(251, 191, 36, 0.5) !important;
}
body.khmer-new-year-active .pulse-dot,
body.khmer-new-year-active .pulse-dot::after {
  background: #FBBF24 !important;
}

/* 3. CHRISTMAS DAY (NOEL) STOREFRONT */
body.christmas-theme-active .card-badge-pill {
  background-color: #0F766E !important;
  color: #FFFFFF !important;
}
body.christmas-theme-active .card-add-btn {
  background-color: #0F766E !important;
  box-shadow: 0 4px 14px 0 rgba(15, 118, 110, 0.35) !important;
  color: #FFFFFF !important;
}
body.christmas-theme-active .card-add-btn:hover {
  background-color: #115E59 !important;
}
body.christmas-theme-active .card-price {
  color: #0F766E !important;
}
body.christmas-theme-active .card-cat-name {
  color: #0F766E !important;
}
body.christmas-theme-active .product-card:hover .card-prod-title {
  color: #0F766E !important;
}
body.christmas-theme-active .card-stock-pill {
  color: #065F46 !important;
  background-color: #ECFDF5 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}
body.christmas-theme-active .card-stock-dot {
  background-color: #10B981 !important;
}
body.christmas-theme-active .size-pill-btn {
  color: #065F46 !important;
  background-color: #ECFDF5 !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}
body.christmas-theme-active .size-pill-btn:hover {
  background-color: #0F766E !important;
  color: #FFFFFF !important;
}
body.christmas-theme-active #customerChatBtnGroup {
  background: linear-gradient(135deg, #022C22 0%, #064E3B 50%, #0F766E 100%) !important;
  border-color: rgba(45, 212, 191, 0.4) !important;
  box-shadow: 0 10px 25px -5px rgba(2, 44, 34, 0.5) !important;
}
body.christmas-theme-active #customerChatBtnGroup .chat-status-dot,
body.christmas-theme-active #customerChatBtnGroup .chat-status-ping {
  background-color: #10B981 !important;
}
body.christmas-theme-active #headerCartBtn {
  background-color: #0F766E !important;
  box-shadow: 0 4px 14px 0 rgba(15, 118, 110, 0.35) !important;
}
body.christmas-theme-active #headerCartBtn:hover {
  background-color: #115E59 !important;
}
body.christmas-theme-active #custHeaderAvatar {
  background-color: #0F766E !important;
}
body.christmas-theme-active #customerBottomNav [onclick*="openTrackOrdersModal"] i {
  color: #0F766E !important;
}
body.christmas-theme-active .cart-checkout-btn,
body.christmas-theme-active #qvBuyNowBtn {
  background-color: #0F766E !important;
  box-shadow: 0 4px 14px 0 rgba(15, 118, 110, 0.35) !important;
}
body.christmas-theme-active #qvAddBtn {
  border-color: #0F766E !important;
  color: #0F766E !important;
}
body.christmas-theme-active #qvBadge {
  background-color: #0F766E !important;
}
body.christmas-theme-active .subcat-active-pill {
  background-color: #0F766E !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5) !important;
}
body.christmas-theme-active .category-item[data-cat="all"] {
  background: linear-gradient(135deg, #059669 0%, #0d9488 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px 0 rgba(13, 148, 136, 0.35) !important;
  border-color: rgba(45, 212, 191, 0.4) !important;
}
body.christmas-theme-active .pulse-dot,
body.christmas-theme-active .pulse-dot::after {
  background: #10B981 !important;
}

/* =========================================================
   ABSOLUTE FESTIVAL HEADER & TOP BAR PRIORITY OVERRIDE
   When Admin enables Water Festival, Khmer New Year, or Christmas,
   the Top Header Bar ALWAYS wears the Festival's official colors!
   Customer theme colors are strictly prohibited from altering this bar!
   ========================================================= */

/* 1. KHMER WATER FESTIVAL (BON OM TOUK) */
body.water-festival-active .glass-header,
body.water-festival-active header,
html body.water-festival-active .glass-header {
  background: linear-gradient(135deg, rgba(8, 22, 45, 0.96) 0%, rgba(14, 38, 74, 0.97) 50%, rgba(10, 48, 80, 0.96) 100%) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1.5px solid rgba(56, 189, 248, 0.45) !important;
  box-shadow: 0 4px 20px -2px rgba(2, 132, 199, 0.35), 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}
body.water-festival-active .brand-title,
body.water-festival-active .glass-header .brand-title,
body.water-festival-active #storeLogoBadge .brand-title,
body.lang-km.water-festival-active .brand-title,
body.lang-km.water-festival-active .glass-header .brand-title,
body.lang-km.water-festival-active #storeLogoBadge .brand-title {
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}
body.water-festival-active .brand-subtitle,
body.water-festival-active .glass-header .brand-subtitle,
body.water-festival-active #storeLogoBadge .brand-subtitle,
body.lang-km.water-festival-active .brand-subtitle,
body.lang-km.water-festival-active .glass-header .brand-subtitle,
body.lang-km.water-festival-active #storeLogoBadge .brand-subtitle {
  color: #e0f2fe !important;
  opacity: 0.95 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}
body.water-festival-active .glass-header #customerSearchInput {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  color: #0f172a !important;
}
body.water-festival-active .glass-header button[onclick="toggleCustomerChat()"] {
  background-color: rgba(14, 165, 233, 0.25) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  color: #ffffff !important;
}
body.water-festival-active .glass-header button[onclick="toggleCustomerChat()"]:hover {
  background-color: rgba(14, 165, 233, 0.4) !important;
  color: #ffffff !important;
}
body.water-festival-active #topAnnouncementBar {
  background: linear-gradient(90deg, #082f49 0%, #0369a1 50%, #082f49 100%) !important;
  color: #e0f2fe !important;
  border-top-color: rgba(56, 189, 248, 0.4) !important;
}

/* 2. KHMER NEW YEAR (CHHOUL CHHNAM THMEI) */
body.khmer-new-year-active .glass-header,
body.khmer-new-year-active header,
html body.khmer-new-year-active .glass-header {
  background: linear-gradient(135deg, rgba(136, 19, 55, 0.96) 0%, rgba(159, 18, 57, 0.97) 45%, rgba(161, 98, 7, 0.95) 100%) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1.5px solid rgba(251, 191, 36, 0.5) !important;
  box-shadow: 0 4px 20px -2px rgba(225, 29, 72, 0.35), 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}
body.khmer-new-year-active .brand-title,
body.khmer-new-year-active .glass-header .brand-title,
body.khmer-new-year-active #storeLogoBadge .brand-title,
body.lang-km.khmer-new-year-active .brand-title,
body.lang-km.khmer-new-year-active .glass-header .brand-title,
body.lang-km.khmer-new-year-active #storeLogoBadge .brand-title {
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}
body.khmer-new-year-active .brand-subtitle,
body.khmer-new-year-active .glass-header .brand-subtitle,
body.khmer-new-year-active #storeLogoBadge .brand-subtitle,
body.lang-km.khmer-new-year-active .brand-subtitle,
body.lang-km.khmer-new-year-active .glass-header .brand-subtitle,
body.lang-km.khmer-new-year-active #storeLogoBadge .brand-subtitle {
  color: #fef08a !important;
  opacity: 0.95 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}
body.khmer-new-year-active .glass-header #customerSearchInput {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(251, 191, 36, 0.55) !important;
  color: #0f172a !important;
}
body.khmer-new-year-active .glass-header button[onclick="toggleCustomerChat()"] {
  background-color: rgba(251, 191, 36, 0.22) !important;
  border-color: rgba(251, 191, 36, 0.65) !important;
  color: #ffffff !important;
}
body.khmer-new-year-active .glass-header button[onclick="toggleCustomerChat()"]:hover {
  background-color: rgba(251, 191, 36, 0.38) !important;
  color: #ffffff !important;
}
body.khmer-new-year-active #topAnnouncementBar {
  background: linear-gradient(90deg, #4c0519 0%, #78350f 50%, #4c0519 100%) !important;
  color: #fef3c7 !important;
  border-top-color: rgba(251, 191, 36, 0.45) !important;
}

/* 3. CHRISTMAS DAY (NOEL) */
body.christmas-theme-active .glass-header,
body.christmas-theme-active header,
html body.christmas-theme-active .glass-header {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.08) !important;
}
body.christmas-theme-active .brand-title,
body.christmas-theme-active .glass-header .brand-title,
body.christmas-theme-active #storeLogoBadge .brand-title,
body.lang-km.christmas-theme-active .brand-title,
body.lang-km.christmas-theme-active .glass-header .brand-title,
body.lang-km.christmas-theme-active #storeLogoBadge .brand-title {
  color: #0F766E !important;
  background: linear-gradient(135deg, #0F766E 0%, #115E59 50%, #042F2E 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}
body.christmas-theme-active .brand-subtitle,
body.christmas-theme-active .glass-header .brand-subtitle,
body.christmas-theme-active #storeLogoBadge .brand-subtitle,
body.lang-km.christmas-theme-active .brand-subtitle,
body.lang-km.christmas-theme-active .glass-header .brand-subtitle,
body.lang-km.christmas-theme-active #storeLogoBadge .brand-subtitle {
  color: #64748B !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
body.christmas-theme-active .glass-header #customerSearchInput {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
body.christmas-theme-active .glass-header button[onclick="toggleCustomerChat()"] {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #0f766e !important;
}
body.christmas-theme-active .glass-header button[onclick="toggleCustomerChat()"]:hover {
  background-color: #e2e8f0 !important;
  color: #0d9488 !important;
}
body.christmas-theme-active #topAnnouncementBar {
  background: linear-gradient(90deg, #022c22 0%, #064e3b 50%, #022c22 100%) !important;
  color: #ecfdf5 !important;
  border-top-color: rgba(20, 184, 166, 0.3) !important;
}

/* ==========================================================================
   ELIMINATE WHITE LINE / BORDER / SHADOW UNDER TOP ANNOUNCEMENT BAR
   ========================================================================== */
#customerStickyHeaderWrapper,
body #customerStickyHeaderWrapper,
body.christmas-theme-active #customerStickyHeaderWrapper,
body.water-festival-active #customerStickyHeaderWrapper,
body.khmer-new-year-active #customerStickyHeaderWrapper {
  border-bottom: none !important;
  box-shadow: none !important;
}

#topAnnouncementBar,
body #topAnnouncementBar,
body.christmas-theme-active #topAnnouncementBar,
body.water-festival-active #topAnnouncementBar,
body.khmer-new-year-active #topAnnouncementBar {
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ==========================================================================
   LANGUAGE & CURRENCY TOGGLE SWITCHERS - HIGH CONTRAST & VISIBILITY
   Ensures "EN" and "ខ្មែរ" letters are ALWAYS sharp, crisp and never lost
   ========================================================================== */
#btnLangEn,
#btnLangKm,
#btnCurUsd,
#btnCurKhr {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  user-select: none !important;
}

/* Active Language Button: Crisp white pill with dark teal brand text */
#btnLangEn.bg-white,
#btnLangKm.bg-white {
  background-color: #ffffff !important;
  color: #0f766e !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08) !important;
}

/* Inactive Language Button: Always crisp dark slate (Slate 600 #475569) */
#btnLangEn:not(.bg-white),
#btnLangKm:not(.bg-white) {
  color: #475569 !important;
  font-weight: 600 !important;
}

#btnLangEn:not(.bg-white):hover,
#btnLangKm:not(.bg-white):hover {
  color: #0f172a !important;
}

/* Inactive Currency Button */
#btnCurUsd:not(.bg-teal-700),
#btnCurKhr:not(.bg-teal-700) {
  color: #475569 !important;
  font-weight: 600 !important;
}

#btnCurUsd:not(.bg-teal-700):hover,
#btnCurKhr:not(.bg-teal-700):hover {
  color: #0f172a !important;
}

/* Christmas Theme - Header is white, inactive toggle letters MUST remain crisp dark slate */
body.christmas-theme-active .glass-header #btnLangEn:not(.bg-white),
body.christmas-theme-active .glass-header #btnLangKm:not(.bg-white),
body.christmas-theme-active .glass-header #btnCurUsd:not(.bg-teal-700),
body.christmas-theme-active .glass-header #btnCurKhr:not(.bg-teal-700) {
  color: #475569 !important;
}

/* ==========================================================================
   DYNAMIC STORE BRAND LOGO - FOLLOWS CUSTOMER THEMES & FESTIVAL COLORS
   ========================================================================== */
#storeLogoBadge img,
.store-brand-logo {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  /* Default: Signature Senghour Emerald Teal (#0F766E) */
  filter: brightness(0) saturate(100%) invert(32%) sepia(85%) saturate(464%) hue-rotate(130deg) brightness(93%) contrast(93%);
  transition: filter 0.35s ease, transform 0.2s ease;
}

/* 1. Theme Gold: Warm Amber Gold (#D97706) */
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #storeLogoBadge img,
body.theme-gold:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .store-brand-logo {
  filter: brightness(0) saturate(100%) invert(56%) sepia(87%) saturate(1634%) hue-rotate(9deg) brightness(95%) contrast(96%) !important;
}

/* 2. Theme Dark: Vibrant Sky Cyan Blue (#38BDF8) */
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #storeLogoBadge img,
body.theme-dark:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .store-brand-logo {
  filter: brightness(0) saturate(100%) invert(74%) sepia(35%) saturate(2250%) hue-rotate(173deg) brightness(101%) contrast(97%) !important;
}

/* 3. Theme Rose: Vivid Lotus Rose Blossom (#E11D48) */
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #storeLogoBadge img,
body.theme-rose:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .store-brand-logo {
  filter: brightness(0) saturate(100%) invert(20%) sepia(85%) saturate(4663%) hue-rotate(336deg) brightness(92%) contrast(93%) !important;
}

/* 4. Theme Ocean: Sapphire Marina Azure (#0284C7) */
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #storeLogoBadge img,
body.theme-ocean:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .store-brand-logo {
  filter: brightness(0) saturate(100%) invert(44%) sepia(91%) saturate(2311%) hue-rotate(178deg) brightness(94%) contrast(98%) !important;
}

/* 5. Theme Violet: Amethyst Twilight Purple (#7C3AED) */
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #storeLogoBadge img,
body.theme-violet:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .store-brand-logo {
  filter: brightness(0) saturate(100%) invert(28%) sepia(91%) saturate(3620%) hue-rotate(256deg) brightness(94%) contrast(98%) !important;
}

/* 6. Theme Nature: Matcha Organic Forest Green (#16A34A) */
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #storeLogoBadge img,
body.theme-nature:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .store-brand-logo {
  filter: brightness(0) saturate(100%) invert(44%) sepia(89%) saturate(497%) hue-rotate(92deg) brightness(96%) contrast(90%) !important;
}

/* 7. Theme Sunset: Warm Coral Tangerine Glow (#EA580C) */
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) #storeLogoBadge img,
body.theme-sunset:not(.water-festival-active):not(.khmer-new-year-active):not(.christmas-theme-active) .store-brand-logo {
  filter: brightness(0) saturate(100%) invert(43%) sepia(96%) saturate(1914%) hue-rotate(360deg) brightness(96%) contrast(94%) !important;
}

/* FESTIVAL OVERRIDES */
/* Water Festival: Crisp pure white symbol on deep river-blue festive header */
body.water-festival-active #storeLogoBadge img,
body.water-festival-active .store-brand-logo {
  filter: none !important;
}

/* Khmer New Year: Crisp pure white symbol on regal maroon festive header */
body.khmer-new-year-active #storeLogoBadge img,
body.khmer-new-year-active .store-brand-logo {
  filter: none !important;
}

/* Christmas Day: Signature emerald teal */
body.christmas-theme-active #storeLogoBadge img,
body.christmas-theme-active .store-brand-logo {
  filter: brightness(0) saturate(100%) invert(32%) sepia(85%) saturate(464%) hue-rotate(130deg) brightness(93%) contrast(93%) !important;
}

/* ==========================================================================
   MOBILE E-COMMERCE APP EXPERIENCE (1688 / LAZADA / ALIBABA STYLE)
   Optimized for all smartphones, tablets, and mobile web browsers
   ========================================================================== */

/* Touch-optimized horizontal scrolling ribbon */
.catch-to-scroll,
#custCategoryFilterBar,
#custSubcategoryFilterBar {
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
}
.catch-to-scroll::-webkit-scrollbar,
#custCategoryFilterBar::-webkit-scrollbar,
#custSubcategoryFilterBar::-webkit-scrollbar {
  display: none !important;
}

/* ==========================================================================
   FULL COMPLETE DISPLAY MODE (Exact Match to User's Mobile Full View Design)
   Ensures small screens & phones render the full 3-column layout with all features
   ========================================================================== */

html, body {
  min-width: 1024px !important;
}

#customerProductsGrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

/* Ensure the full floating capsule dock is visible on all screens */
#customerBottomNav .sm\:hidden {
  display: none !important;
}

#customerBottomNav .hidden.sm\:flex,
#customerBottomNav > div:not(.sm\:hidden):not(.snow-overlay) {
  display: flex !important;
}

#customerBottomNav {
  position: fixed !important;
  bottom: 1.5rem !important;
  right: 1.5rem !important;
  left: auto !important;
  width: auto !important;
  border-radius: 9999px !important;
  padding: 0.5rem 1rem !important;
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.15) !important;
  z-index: 45 !important;
}

#customerChatWidgetContainer {
  bottom: 5.5rem !important;
  right: 1.5rem !important;
}

.hero-slide-item {
  min-height: 320px !important;
}