@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  /* Colors */
  --primary: #6D28D9;
  --primary-hover: #5B21B6;
  --secondary: #8B5CF6;
  --secondary-light: #F3E8FF;
  --accent: #F59E0B;
  --success: #10B981;
  --danger: #EF4444;
  --bg-white: #FAF9F5; /* Soft Off-White/Cream */
  --bg-light: #F5F2EB; /* Soft page cream bg */
  --bg-gray: #EBE6DA;  /* Warmer gray for dividers */
  --border-color: rgba(202, 194, 179, 0.45); /* Soft blended border */
  --text-dark: #1F2937;
  --text-muted: #6B7280;
  
  /* Fonts */
  --font-sans: 'Inter', sans-serif;
  --font-title: 'Poppins', sans-serif;
  
  /* Radii */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  
  /* Shadows & Glass */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 10px 25px -5px rgba(109, 40, 217, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 20px 40px -10px rgba(109, 40, 217, 0.1), 0 10px 16px -8px rgba(0, 0, 0, 0.04);
  --glass-bg: rgba(250, 249, 245, 0.85);
  --glass-border: rgba(250, 249, 245, 0.5);
  --glass-shadow: 0 8px 32px rgba(109, 40, 217, 0.04);
  
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s ease-out;
}

:root[data-theme="dark"] {
  --bg-white: #1A1A1E;
  --bg-light: #121214;
  --bg-gray: #2A2A2E;
  --border-color: rgba(255, 255, 255, 0.08);
  --text-dark: #E4E4E7;
  --text-muted: #A1A1AA;
  
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
  
  --glass-bg: rgba(26, 26, 30, 0.85);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);

  background-color: var(--bg-light);
  color: var(--text-dark);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}



h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  font-weight: 600;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-light);
}
::-webkit-scrollbar-thumb {
  background: #E2E8F0;
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--secondary);
}

/* Developer Control Dock */
#dev-control-dock {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #0F172A;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 100000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.dock-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dock-title {
  font-family: var(--font-title);
  font-weight: 700;
  background: linear-gradient(135deg, #C084FC, #F59E0B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.05rem;
}

.dock-tagline {
  font-size: 0.75rem;
  color: #94A3B8;
  border-left: 1px solid #334155;
  padding-left: 12px;
}

.dock-nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  max-width: 60%;
}

.dock-nav::-webkit-scrollbar {
  height: 2px;
}

.dock-btn {
  background: #1E293B;
  border: 1px solid #334155;
  color: #CBD5E1;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: var(--transition-fast);
}

.dock-btn:hover, .dock-btn.active {
  background: var(--primary);
  border-color: var(--secondary);
  color: #fff;
}

.viewport-toggle {
  display: flex;
  gap: 4px;
  background: #1E293B;
  padding: 3px;
  border-radius: var(--radius-sm);
  border: 1px solid #334155;
}

.vp-btn {
  background: transparent;
  border: none;
  color: #94A3B8;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  transition: var(--transition-fast);
}

.vp-btn.active {
  background: #334155;
  color: #fff;
}

#app-viewport-container {
  margin-top: 0;
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  background: #F1F5F9;
}

#app-viewport {
  background: var(--bg-white);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 100vh;
  width: 100%;
  overflow: visible;
  position: relative;
  --header-height: 80px;
  --scroll-offset: var(--header-height);
}

#app-viewport.desktop {
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

#app-viewport.tablet {
  width: 768px;
  border: 8px solid #334155;
  border-radius: 24px;
  margin: 20px auto;
  box-shadow: var(--shadow-lg);
}

#app-viewport.mobile {
  width: 375px;
  border: 12px solid #334155;
  border-radius: 36px;
  margin: 20px auto;
  box-shadow: var(--shadow-lg);
}

.view-panel {
  display: none;
  width: 100%;
  animation: fadeIn 0.4s ease-out;
}

.view-panel.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Premium Buttons */
.btn-primary {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: var(--radius-md);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition-fast);
}

.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.2);
}

.btn-secondary {
  background: var(--bg-white);
  color: var(--text-dark);
  border: 1px solid var(--border-color);
  padding: 10px 22px;
  border-radius: var(--radius-md);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition-fast);
}

.btn-secondary:hover {
  background: var(--bg-light);
  border-color: var(--secondary);
}

.icon-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: var(--transition-fast);
}

.icon-btn:hover {
  background: var(--bg-light);
  color: var(--primary);
}

.icon-btn .badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  padding: 2px 5px;
  border: 2px solid var(--bg-white);
}

/* Header & Navigation */
.top-nav-bar {
  background: var(--bg-light);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 6px 32px;
  display: grid;
  grid-template-columns: 1fr auto 1.25fr;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  min-height: 48px;
  box-sizing: border-box;
  position: relative;
  z-index: 10005;
}

.top-bar-left-spacer {
  width: 0;
  height: 0;
}

.top-bar-social-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tb-social-label {



  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-right: 4px;
}
.tb-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-dark);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}
.tb-social-icon svg {
  width: 14px;
  height: 14px;
}
:root[data-theme="dark"] .tb-social-icon {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}
.tb-social-icon:hover {
  transform: scale(1.1);
  color: #fff !important;
}

/* Brand Specific Colors on Hover */
.tb-social-fb:hover {
  background: #1877F2 !important;
  box-shadow: 0 4px 10px rgba(24, 119, 242, 0.3);
}
.tb-social-ig:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  box-shadow: 0 4px 10px rgba(220, 39, 67, 0.3);
}
.tb-social-tt:hover {
  background: #000000 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
:root[data-theme="dark"] .tb-social-tt:hover {
  background: #FFFFFF !important;
  color: #000000 !important;
}
.tb-social-yt:hover {
  background: #FF0000 !important;
  box-shadow: 0 4px 10px rgba(255, 0, 0, 0.3);
}
.tb-social-x:hover {
  background: #0F1419 !important;
  box-shadow: 0 4px 10px rgba(15, 20, 25, 0.3);
}
:root[data-theme="dark"] .tb-social-x:hover {
  background: #FFFFFF !important;
  color: #000000 !important;
}

/* Location Selector Dropdown container */
.top-bar-loc-dropdown,
.top-bar-lang-dropdown,
.top-bar-help-dropdown {
  position: relative;
  display: inline-block;
}
.top-bar-loc-btn {
  background: transparent;
  border: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  height: 28px;
  box-sizing: border-box;
  border-radius: 6px;
  transition: all 0.2s ease;
  outline: none;
}
.top-bar-loc-btn:hover {
  background: rgba(124, 58, 237, 0.05);
  color: var(--primary);
}
.tb-chevron {
  transition: transform 0.2s ease;
  color: var(--text-light);
}
.top-bar-loc-dropdown.active .tb-chevron,
.top-bar-lang-dropdown.active .tb-chevron,
.top-bar-help-dropdown.active .tb-chevron {
  transform: rotate(180deg);
}

/* Dropdown Menu Cards (Glassmorphic) */
.tb-dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  z-index: 1010;
  min-width: 175px;
  padding: 6px 0;
  box-sizing: border-box;
}
:root[data-theme="dark"] .tb-dropdown-content {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.tb-dropdown-content.show {
  display: block;
  animation: tbDropdownFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes tbDropdownFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.tb-dropdown-title {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 12px 4px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 4px;
}
.tb-dropdown-content a {
  display: block;
  padding: 8px 14px;
  color: var(--text-dark) !important;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.75rem;
  transition: all 0.15s ease;
}
.tb-dropdown-content a:hover {
  background: rgba(124, 58, 237, 0.08);
  color: var(--primary) !important;
  padding-left: 18px;
}

/* Center Section: Auto Rotating Announcement Ticker */
.top-bar-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  overflow: hidden;
  position: relative;
  width: 320px;
}
.top-bar-ticker {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
  text-align: center;
}
.tb-ticker-item {
  height: 24px;
  line-height: 24px;
  display: none;
  font-weight: 700;
  color: var(--primary);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.tb-ticker-item.active {
  display: block;
  animation: tbTickerSlideFade 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes tbTickerSlideFade {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Right Section */
.top-bar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

/* Glass Pill Buttons for Dropdown Switchers */
.top-bar-glass-btn {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.1);
  height: 28px;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  outline: none;
}
:root[data-theme="dark"] .top-bar-glass-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}
.top-bar-glass-btn:hover {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.25);
  color: var(--primary);
}

.top-bar-right .tb-dropdown-content {
  left: auto;
  right: 0;
}

/* Sell on Rara Deals Premium CTA Pill */
.top-bar-cta-btn {
  background: linear-gradient(135deg, #7C3AED 0%, #4F46E5 100%);
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 28px;
  box-sizing: border-box;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: none;
  cursor: pointer;
}
.top-bar-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45);
}
.tb-cta-icon {
  font-size: 1rem;
}
.tb-cta-text-col {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}
.tb-cta-title {
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: -0.2px;
}
.tb-cta-badge {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 800;
  font-size: 0.48rem;
  letter-spacing: 0.8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Plain link styling */
.top-bar-link {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.75rem;
  display: inline-flex;
  height: 28px;
  box-sizing: border-box;
  align-items: center;
  gap: 5px;
  transition: color 0.2s ease;
}
.top-bar-link:hover {
  color: var(--primary);
}

.top-nav-links {
  display: flex;
  gap: 20px;
  align-items: center;
}

.main-header {
  padding: 16px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-color);
  position: relative;
  z-index: 100;
  transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-user-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-logo {
  font-family: var(--font-title);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-logo span {
  color: var(--accent);
}

.search-container {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 3px 4px;
  background: var(--bg-light);
  transition: var(--transition-fast);
}

.search-container:focus-within {
  border-color: var(--primary);
  background: var(--bg-white);
  box-shadow: 0 0 12px rgba(109, 40, 217, 0.06);
}

.search-input {
  border: none;
  background: transparent;
  flex: 1;
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  outline: none;
  color: var(--text-dark);
}

.search-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.search-btn {
  background: var(--primary);
  border: none;
  color: #fff;
  padding: 8px 20px;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-title);
  transition: var(--transition-fast);
}

.search-btn:hover {
  background: var(--primary-hover);
}

.category-nav-row {
  background: #FCFAFF !important;
  border-bottom: 1px solid #ECE7F5 !important;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 32px;
  position: relative;
  z-index: 90;
  height: 58px; /* Premium height */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
  box-sizing: border-box;
}

.all-cat-btn {
  background: linear-gradient(135deg, #6D28D9, #7C3AED, #8B5CF6) !important;
  color: #ffffff !important;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0 24px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(109, 40, 217, 0.2);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  white-space: nowrap;
}

.all-cat-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.35);
  filter: brightness(1.05);
}

.all-cat-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(109, 40, 217, 0.2);
}

.nav-menu-links {
  display: flex;
  gap: 28px; /* Clean spacing gaps */
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  height: 100%;
  align-items: center;
}

.nav-menu-links::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

.nav-menu-links a {
  color: #1E293B !important; /* Premium slate color */
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 8px 0;
  white-space: nowrap;
  position: relative;
  transition: color 0.25s ease, transform 0.25s ease;
  display: inline-flex;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
}

/* Animated purple underline active indicator */
.nav-menu-links a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #7c3aed, #8b5cf6);
  transition: width 0.25s ease, left 0.25s ease;
  border-radius: 2px;
}

.nav-menu-links a:hover::after,
.nav-menu-links a.active::after {
  width: 100%;
  left: 0;
}

.nav-menu-links a:hover {
  color: #7C3AED !important; /* Purple hover */
  transform: translateY(-2px); /* Subtle upward shift */
}

.nav-menu-links a.active {
  color: #6D28D9 !important; /* Active brand purple */
  font-weight: 700 !important;
}

/* Sticky Premium Header Wrapper */
.sticky-header-wrapper {
  position: relative; /* Default relative flow */
  z-index: 10000;
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-color);
  width: 100%;
  transition: background 0.3s ease,
              box-shadow 0.3s ease,
              border-color 0.3s ease,
              padding 0.3s ease;
}

/* Scrolled state header enhancements - Bulletproof fixed positioning */
.sticky-header-wrapper.is-sticky {
  position: fixed !important;
  top: 0 !important; /* Sticky at the very top of the viewport */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.sticky-header-wrapper.is-sticky .main-header {
  padding: 8px 32px !important;
}

/* Constrain width when inside tablet/mobile simulators to match inner viewport boundaries */
#app-viewport.tablet .sticky-header-wrapper.is-sticky {
  width: 752px !important;
}

#app-viewport.mobile .sticky-header-wrapper.is-sticky {
  width: 351px !important;
}

:root[data-theme="dark"] .sticky-header-wrapper.is-sticky {
  background: rgba(26, 26, 30, 0.85) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Layout spacer to prevent layout jump when header becomes position: fixed */
.sticky-header-spacer {
  height: 73px !important;
  display: none !important;
}

#app-viewport.scrolled .sticky-header-spacer {
  display: block !important;
}

/* Distraction-Free Compact Checkout Header Rules (Always compact, no menu, search, etc.) */
#app-viewport.checkout-view-active .sticky-header-spacer {
  height: 72px !important;
}

#app-viewport.checkout-view-active .sticky-header-wrapper .search-container,
#app-viewport.checkout-view-active .sticky-header-wrapper .header-user-actions > button,
#app-viewport.checkout-view-active .sticky-header-wrapper .header-user-account-container,
#app-viewport.checkout-view-active .category-nav-row {
  display: none !important;
}

#app-viewport.checkout-view-active .sticky-header-wrapper .header-user-actions::after {
  content: "🔒 Secure Checkout | Need Help?";
  font-family: var(--font-title);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--success);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

:root[data-theme="dark"] #app-viewport.checkout-view-active .sticky-header-wrapper .header-user-actions::after {
  color: #34D399;
}

/* HOMEPAGE GRID STRUCT */
.home-upper-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto 24px auto;
  padding: 0 16px;
  box-sizing: border-box;
  align-items: start;
}

.home-left-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.home-hero-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
}

.home-center-hero {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

/* Category Sidebar */
.home-cat-sidebar {
  grid-column: 1;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px 0;
  align-self: start;
  position: sticky;
  top: calc(var(--scroll-offset) + 16px);
  max-height: calc(100vh - var(--scroll-offset) - 40px);
  overflow-y: auto;
}

.home-cat-item {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-dark);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: var(--transition-fast);
}

.home-cat-item:hover {
  background: var(--secondary-light);
  color: var(--primary);
}

.home-cat-icon {
  margin-right: 12px;
  font-size: 1.1rem;
}

/* ============================================
   HERO BANNER — Screenshot-matching design
   Left: white bg + dark text
   Right: lavender blob + floating products + phone
   ============================================ */
.hero-slider-box {
  background: linear-gradient(135deg, #F3F0FF 0%, #EFEBFF 100%);
  border-radius: var(--radius-lg);
  min-height: 380px;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  border: 1px solid #EDE9FE;
  box-shadow: 0 4px 24px rgba(109,40,217,0.05);
}

/* LEFT COLUMN: Text and Actions (50% Width) */
.hero-text-block {
  width: 50%;
  min-width: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 24px 30px 24px 40px;
  background: transparent;
}

.hero-subtitle {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--primary);
  color: #FFFFFF;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  align-self: flex-start;
  font-family: var(--font-title);
  letter-spacing: 0.2px;
}

.hero-title {
  font-size: 2rem;
  line-height: 1.25;
  color: #1F2937;
  font-family: var(--font-title);
  font-weight: 800;
}

.purple-highlight {
  color: #6D28D9;
}

.hero-desc {
  font-size: 0.85rem;
  color: #4B5563;
  line-height: 1.5;
  max-width: 380px;
}

/* CTA button group & shapes */
.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.btn-primary-hero {
  background: #6D28D9;
  color: #FFFFFF;
  border: none;
  padding: 10px 24px;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(109, 40, 217, 0.2);
  transition: all 0.3s ease;
  font-family: var(--font-title);
}

.btn-primary-hero:hover {
  background: #5B21B6;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 15px rgba(109, 40, 217, 0.25);
}

.btn-secondary-hero {
  background: var(--bg-white);
  color: #1F2937;
  border: 1px solid rgba(229, 231, 235, 0.8);
  padding: 10px 24px;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.01);
  transition: all 0.3s ease;
  font-family: var(--font-title);
}

.btn-secondary-hero:hover {
  background: #F9FAFB;
  transform: translateY(-1.5px);
  border-color: rgba(109, 40, 217, 0.2);
  box-shadow: 0 5px 10px rgba(0,0,0,0.03);
}

/* RIGHT COLUMN: Graphic & Smartphone Mockup (50% Width) */
.hero-render-block {
  width: 50%;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  min-height: 380px;
  padding: 20px;
  background: transparent;
}

/* Background blob */
.hero-bg-blob {
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.18) 0%, rgba(139, 92, 246, 0.05) 55%, transparent 75%);
  border-radius: 50%;
  right: 20px;
  top: 40px;
  pointer-events: none;
  z-index: 1;
}

/* Smartphone Mockup */
.hero-phone-container {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-2deg);
  filter: drop-shadow(0 15px 30px rgba(0,0,0,0.06));
  transition: transform 0.3s ease;
}

.hero-phone-container:hover {
  transform: rotate(0deg) scale(1.02);
}

.hero-phone-shell {
  width: 155px;
  background: #000000;
  border-radius: 30px;
  padding: 8px;
  border: 3px solid #1F2937;
  box-shadow: inset 0 0 8px rgba(255,255,255,0.2);
  position: relative;
}

.hero-phone-notch {
  width: 50px;
  height: 12px;
  background: #000000;
  border-radius: 8px;
  margin: 0 auto 6px;
}

.hero-phone-screen {
  background: #F8FAFC;
  border-radius: 20px;
  padding: 10px 8px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

/* Inside screen elements */
.hps-top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2px;
}

.hps-back-btn {
  font-size: 0.72rem;
  font-weight: 700;
  color: #4B5563;
  cursor: pointer;
}

.hps-logo {
  font-size: 0.62rem;
  font-weight: 800;
  color: #6D28D9;
  font-family: var(--font-title);
}

.hps-user-avatar {
  font-size: 0.75rem;
  cursor: pointer;
}

.hps-search-bar {
  background: var(--bg-white);
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.01);
}

.hps-search-bar .search-placeholder {
  font-size: 0.58rem;
  color: #94A3B8;
  font-weight: 500;
}

.hps-search-bar .search-icon {
  font-size: 0.65rem;
  color: #6D28D9;
}

.hps-section-title {
  font-size: 0.6rem;
  font-weight: 700;
  color: #1F2937;
  padding: 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hps-categories-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.hps-cat-item-circle {
  background: var(--bg-white);
  border: 1px solid #F1F5F9;
  border-radius: 8px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hps-cat-item-circle:hover {
  transform: translateY(-1px);
  border-color: rgba(109, 40, 217, 0.15);
  background: rgba(109, 40, 217, 0.02);
}

.cat-icon {
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hps-cat-item-circle svg.ri {
  width: 22px !important;
  height: 22px !important;
}

.cat-label {
  font-size: 0.48rem;
  font-weight: 600;
  color: #4B5563;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.hps-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}

.hps-countdown-timer {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 0.52rem;
  font-weight: 700;
  color: #EF4444;
}

.timer-box {
  background: #EF4444;
  color: #FFFFFF;
  padding: 1px 3px;
  border-radius: 3px;
  font-size: 0.5rem;
}

.hps-view-all {
  font-size: 0.5rem;
  font-weight: 700;
  color: #6D28D9;
  text-decoration: none;
}

.hps-products-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.hps-product-mini-card {
  background: var(--bg-white);
  border: 1px solid #F1F5F9;
  border-radius: 6px;
  padding: 5px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.01);
}

.mini-prod-img {
  font-size: 0.95rem;
}

.mini-prod-price {
  font-size: 0.45rem;
  font-weight: 700;
  color: #6D28D9;
}

/* Overlapping Product Assets positioning */
.hero-product-asset {
  position: absolute;
  z-index: 5;
  animation: float-asset 4s ease-in-out infinite alternate;
  pointer-events: auto;
  cursor: pointer;
}

.asset-emoji {
  font-size: 2.8rem;
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}

.hero-product-asset:hover .asset-emoji {
  transform: scale(1.15) translateY(-4px);
  filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.2));
}

.asset-headphones {
  left: 20px;
  bottom: 10px;
  animation-delay: 0s;
}

.asset-headphones .asset-emoji {
  font-size: 3rem;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.12));
}

.asset-watch {
  left: 150px;
  bottom: 5px;
  animation-delay: 0.5s;
}

.asset-watch .asset-emoji {
  font-size: 2.2rem;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.12));
}

.asset-gamepad {
  right: 75px;
  bottom: 10px;
  animation-delay: 1.1s;
}

.asset-gamepad .asset-emoji {
  font-size: 2.8rem;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.12));
}

.asset-plant {
  right: 15px;
  bottom: 15px;
  animation-delay: 1.8s;
}

.asset-plant .asset-emoji {
  font-size: 3.2rem;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}

/* Purple bag SVG asset */
.hero-bag-asset {
  position: absolute;
  left: 75px;
  bottom: 10px;
  width: 100px;
  height: 120px;
  z-index: 4;
  animation: float-asset 4.2s ease-in-out infinite alternate;
  animation-delay: 0.3s;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 15px 20px rgba(109, 40, 217, 0.18));
}

.bag-svg {
  width: 100%;
  height: 100%;
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}

.hero-bag-asset:hover .bag-svg {
  transform: scale(1.12) translateY(-4px);
  filter: drop-shadow(0 20px 30px rgba(109, 40, 217, 0.3));
}

@keyframes float-asset {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-6px) rotate(1.5deg); }
}

/* Responsive configurations */
@media (max-width: 1120px) {
  .hero-slider-box { min-height: 380px; }
  .hero-text-block { width: 50%; padding: 20px 20px 20px 30px; }
  .hero-render-block { width: 50%; min-height: 380px; }
  .hero-title { font-size: 1.8rem; }
  .hero-phone-shell { width: 140px; }
  .hero-phone-screen { min-height: 200px; }
  .hero-bag-asset { width: 90px; height: 108px; left: 65px; }
  .asset-headphones .asset-emoji { font-size: 2.6rem; }
  .asset-watch .asset-emoji { font-size: 2rem; }
  .asset-gamepad .asset-emoji { font-size: 2.4rem; }
  .asset-plant .asset-emoji { font-size: 2.8rem; }
}

@media (max-width: 768px) {
  .hero-slider-box {
    flex-direction: column;
    min-height: auto;
  }
  .hero-text-block {
    width: 100%;
    padding: 40px 24px;
    border-bottom: 1px solid #EDE9FE;
  }
  .hero-render-block {
    width: 100%;
    min-height: 380px;
    padding: 30px 20px;
  }
  .hero-phone-shell {
    width: 155px;
  }
  .hero-phone-screen {
    min-height: 220px;
  }
  .hero-bag-asset {
    left: 75px;
  }
}

@media (max-width: 480px) {
  .hero-title { font-size: 1.5rem; }
  .hero-render-block { min-height: 320px; }
  .hero-phone-shell { width: 140px; }
  .hero-phone-screen { min-height: 200px; }
  /* Hide overlapping product assets on very small mobile for usability */
  .hero-product-asset, .hero-bag-asset, .hero-bg-blob {
    display: none;
  }
}

/* Trust badges strip */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}

.trust-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  flex: 1 1 140px;
}

.trust-icon-box {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--secondary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.trust-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-dark);
}

.trust-desc {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Deal of the Day Card */
.deal-day-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: var(--shadow-sm);
}

.deal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.deal-badge-red {
  background: var(--danger);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}

.deal-img-box {
  height: 160px;
  background: var(--bg-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

/* =====================================================
   ⭐ SPONSORED PRODUCTS SHOWCASE WIDGET
   ===================================================== */
.sponsored-showcase-card {
  position: relative;
  background: var(--bg-white);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.08), 0 1px 3px rgba(99, 102, 241, 0.05);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.sponsored-showcase-card:hover {
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 15px 35px rgba(99, 102, 241, 0.15), 0 2px 8px rgba(99, 102, 241, 0.1);
}

/* Top gradient accent line */
.sponsored-showcase-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #f59e0b, #ef4444, #10b981);
  z-index: 2;
}

/* ---- Header ---- */
.sponsored-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 50%, #FAF5FF 100%);
}

.sponsored-header-left {
  display: flex;
  align-items: center;
  gap: 7px;
}

.sponsored-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.2);
  animation: sponsoredPulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes sponsoredPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(239,68,68,0.2); }
  50%       { box-shadow: 0 0 0 6px rgba(239,68,68,0.06); }
}

.sponsored-title {
  font-family: var(--font-title);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -0.01em;
}

.sponsored-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sponsored-countdown-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 500;
}

.sponsored-countdown-badge {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  font-family: var(--font-title);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(239,68,68,0.3);
}

/* ---- Slide Track (Smooth Horizontal Translation) ---- */
.sponsored-slide-track {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.sponsored-slide {
  display: block; /* Always visible layoutwise for translate alignment */
  flex: 0 0 100%;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  opacity: 0.2;
  transition: opacity 0.5s ease;
}
.sponsored-slide.active {
  opacity: 1;
}

/* Ad label */
.sponsored-ad-label {
  display: inline-block;
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 10px;
  box-shadow: 0 3px 8px rgba(139, 92, 246, 0.25);
}

/* Product image area (Taller & Colorful) */
.sponsored-img-box {
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px; /* More compact height */
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: inset 0 0 20px rgba(255,255,255,0.6), 0 4px 15px rgba(0, 0, 0, 0.04);
}

.sponsored-img-box:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 20px rgba(255,255,255,0.4), 0 8px 25px rgba(99, 102, 241, 0.12);
}

.sponsored-img-emoji {
  font-size: 5.8rem; /* Larger emoji */
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15));
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sponsored-img-box:hover .sponsored-img-emoji {
  transform: scale(1.08) rotate(-3deg);
}

/* Discount badge on image */
.sponsored-discount-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(239,68,68,0.35);
  z-index: 2;
}

/* Product info */
.sponsored-product-name {
  font-family: var(--font-title);
  font-size: 0.87rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.3;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sponsored-seller-name {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.sponsored-seller-name span {
  color: #6366f1;
  font-weight: 600;
}

/* Star rating row */
.sponsored-rating-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
}

.sponsored-stars {
  display: flex;
  gap: 1px;
}

.sponsored-stars svg {
  width: 11px;
  height: 11px;
}

.sponsored-rating-text {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Price row */
.sponsored-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
}

.sponsored-price-current {
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
}

.sponsored-price-original {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: line-through;
}

.sponsored-price-save {
  font-size: 0.68rem;
  font-weight: 700;
  color: #10b981;
  background: rgba(16,185,129,0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

/* CTA Buttons */
.sponsored-cta-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.sponsored-btn-buy {
  background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--font-title);
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(99,102,241,0.3);
  text-align: center;
}

.sponsored-btn-buy:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99,102,241,0.45);
}

.sponsored-btn-wish {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.sponsored-btn-wish:hover {
  border-color: #ef4444;
  background: rgba(239,68,68,0.05);
}

/* ---- Navigation Arrows ---- */
.sponsored-arrow {
  position: absolute;
  top: 120px; /* Centered relative to the new 130px image box height */
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  background: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-dark);
  z-index: 5;
  transition: all 0.22s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.sponsored-arrow:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(99,102,241,0.35);
}

.sponsored-arrow-prev { left: 10px; }
.sponsored-arrow-next { right: 10px; }

/* ---- Dot Indicators ---- */
.sponsored-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 4px 16px 10px;
}

.sponsored-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E5E7EB;
  cursor: pointer;
  transition: all 0.25s ease;
}

.sponsored-dot.active {
  background: var(--primary);
  width: 18px;
  border-radius: 3px;
}

/* ---- Progress Bar ---- */
.sponsored-progress-bar {
  height: 3px;
  background: #F3F4F6;
  border-radius: 0 0 18px 18px;
}

.sponsored-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #f59e0b);
  border-radius: inherit;
  width: 0%;
  transition: width 0.1s linear;
}

/* ---- Verified badge ---- */
.sponsored-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #059669;
  background: rgba(5,150,105,0.1);
  border: 1px solid rgba(5,150,105,0.2);
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 8px;
}

/* ---- Stock bar ---- */
.sponsored-stock-row {
  margin-bottom: 12px;
}

.sponsored-stock-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
}

.sponsored-stock-bar {
  height: 4px;
  background: #F3F4F6;
  border-radius: 2px;
  overflow: hidden;
}

.sponsored-stock-fill {
  height: 100%;
  background: linear-gradient(90deg, #ef4444, #f59e0b);
  border-radius: inherit;
  transition: width 0.5s ease;
}


.deal-timer-row {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.deal-timer-box {
  background: var(--danger);
  color: #fff;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 4px 6px;
  border-radius: 4px;
  min-width: 28px;
  text-align: center;
}

/* Circular Categories */
.circular-categories-row {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 12px 0 16px;
  margin-top: 0;
  justify-content: space-between;
  scrollbar-width: none;
}

.circular-categories-row::-webkit-scrollbar {
  display: none;
}

.circle-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 76px;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  flex: 1;
}

.circle-cat-card:hover {
  background: var(--bg-light);
}

.circle-cat-icon {
  width: 72px;
  height: 72px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: var(--transition);
  border: none;
  position: relative;
}

.circle-cat-emoji {
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.circle-cat-svg {
  width: 32px;
  height: 32px;
  stroke-width: 2.2;
  transition: transform 0.25s ease;
}

.circle-cat-img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  position: absolute;
  top: -8px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
  transition: transform 0.25s ease, filter 0.25s ease;
}

.circle-cat-card:hover .circle-cat-img {
  transform: scale(1.1) translateY(-3px);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.22));
}

.circle-cat-card:hover .circle-cat-icon {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 12px 28px rgba(0,0,0,0.14);
}

.circle-cat-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dark);
  text-align: center;
  line-height: 1.3;
  max-width: 76px;
}

/* Top Picks Cards */
.picks-section {
  margin-top: 0;
}

.section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-title-main {
  font-size: 1.25rem;
  font-family: var(--font-title);
  color: var(--text-dark);
}

.picks-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.top-picks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.picks-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.picks-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--secondary-light);
}

.picks-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  z-index: 10;
}

.picks-card-wish {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}

.picks-card-img-box {
  height: 160px;
  background: var(--bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.picks-card-img {
  max-width: 75%;
  max-height: 75%;
  object-fit: contain;
  transition: var(--transition);
}

.picks-card-img-box span {
  display: inline-block;
  transition: transform 0.3s ease;
}

.picks-card:hover .picks-card-img {
  transform: scale(1.05);
}

.picks-card:hover .picks-card-img-box span {
  transform: scale(1.08);
}

.picks-card-body {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.picks-card-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.4;
  height: 36px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.picks-card-ratings {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 6px 0;
}

.picks-card-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Top Vendors Showcase Row & Scroll Carousel */
.vendors-scroll-row {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 12px 4px;
  margin-top: 16px;
}

.vendors-marquee-track {
  display: flex;
  gap: 16px;
  will-change: transform;
  width: max-content;
}

.vendor-showcase-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: var(--transition);
  flex: 0 0 320px; /* Do not shrink inside flex container */
}

.vendor-showcase-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

/* Sidebar links */
/* Removed legacy sidebar-link-panel style */

/* Removed .sidebar-link-card */

/* Removed:hover */

/* ====================================================
   PREMIUM APP PROMO CARD v2.0  (apc-*)
   ==================================================== */

/* Keyframes */
@keyframes apcPhoneFloat {
  0%, 100% { transform: translateY(0px) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(-2deg); }
}
@keyframes apcOrbPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(1.12); }
}
@keyframes apcParticleDrift {
  0% { transform: translateY(0) scale(1); opacity: 0.7; }
  50% { transform: translateY(-18px) scale(1.3); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 0.7; }
}
@keyframes apcFloat1 { 0%,100%{transform:translateY(0) rotate(-6deg);} 50%{transform:translateY(-8px) rotate(4deg);} }
@keyframes apcFloat2 { 0%,100%{transform:translateY(0) rotate(8deg);} 60%{transform:translateY(-12px) rotate(-4deg);} }
@keyframes apcFloat3 { 0%,100%{transform:translateY(0) rotate(3deg);} 40%{transform:translateY(-6px) rotate(-8deg);} }
@keyframes apcFloat4 { 0%,100%{transform:translateY(0) rotate(-4deg);} 70%{transform:translateY(-10px) rotate(6deg);} }
@keyframes apcFloat5 { 0%,100%{transform:translateY(0) rotate(6deg);} 55%{transform:translateY(-7px) rotate(-3deg);} }
@keyframes apcFloat6 { 0%,100%{transform:translateY(0) rotate(-8deg);} 45%{transform:translateY(-9px) rotate(5deg);} }
@keyframes apcCardHover {
  0%, 100% { box-shadow: 0 8px 32px rgba(109,40,217,0.35); }
  50% { box-shadow: 0 12px 48px rgba(109,40,217,0.55); }
}
@keyframes apcBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(236,72,153,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(236,72,153,0); }
}
@keyframes apcProgressScan {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Card Wrapper */
.apc-wrap {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(135deg, #4F1D95, #6D28D9, #7C3AED, #8B5CF6);
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #fff;
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1), box-shadow 0.35s ease;
  animation: apcCardHover 4s ease-in-out infinite;
  isolation: isolate;
}
.apc-wrap:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(109,40,217,0.6) !important;
  animation-play-state: paused;
}

/* Background orbs */
.apc-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: apcOrbPulse 5s ease-in-out infinite;
}
.apc-orb-1 {
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(139,92,246,0.6) 0%, transparent 70%);
  top: -40px; right: -40px;
  animation-delay: 0s;
}
.apc-orb-2 {
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(236,72,153,0.35) 0%, transparent 70%);
  bottom: 60px; left: -25px;
  animation-delay: 1.8s;
}
.apc-orb-3 {
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(99,102,241,0.4) 0%, transparent 70%);
  top: 45%; left: 50%;
  transform: translate(-50%,-50%);
  animation-delay: 3s;
}

/* Particles */
.apc-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: apcParticleDrift linear infinite;
}
.apc-p1 { width:4px;height:4px; background:#c4b5fd; top:15%; left:18%; animation-duration:3.2s; animation-delay:0s; }
.apc-p2 { width:3px;height:3px; background:#f9a8d4; top:30%; right:20%; animation-duration:4.1s; animation-delay:0.8s; }
.apc-p3 { width:5px;height:5px; background:#a5b4fc; top:65%; left:10%; animation-duration:3.7s; animation-delay:1.5s; }
.apc-p4 { width:3px;height:3px; background:#fbcfe8; bottom:25%; right:15%; animation-duration:2.9s; animation-delay:2s; }
.apc-p5 { width:4px;height:4px; background:#ddd6fe; top:80%; left:40%; animation-duration:3.5s; animation-delay:0.4s; }

/* All inner elements above z-index 0 */
.apc-header, .apc-phone-stage, .apc-benefits-card,
.apc-offer-card, .apc-btn-group, .apc-apk-btn,
.apc-stats-row, .apc-trust-strip { position: relative; z-index: 1; }

/* ── HEADER ── */
.apc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.apc-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.apc-logo-mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #ec4899, #f59e0b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(236,72,153,0.5);
}
.apc-app-name {
  font-family: var(--font-title);
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}
.apc-app-sub {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.65);
  margin-top: 1px;
}
.apc-new-badge {
  background: linear-gradient(135deg, #ec4899, #f43f5e);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 20px;
  flex-shrink: 0;
  animation: apcBadgePulse 2s ease-in-out infinite;
}

/* ── PHONE STAGE ── */
.apc-phone-stage {
  position: relative;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Floating Objects */
.apc-float-obj {
  position: absolute;
  font-size: 1.5rem;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
  pointer-events: none;
  z-index: 2;
}
.apc-fo-1 { top:8%; left:4%;  animation: apcFloat1 3.8s ease-in-out infinite; }
.apc-fo-2 { top:5%; right:5%; animation: apcFloat2 4.2s ease-in-out infinite 0.5s; }
.apc-fo-3 { bottom:15%; left:2%; animation: apcFloat3 3.5s ease-in-out infinite 1s; }
.apc-fo-4 { bottom:12%; right:3%; animation: apcFloat4 4.5s ease-in-out infinite 0.3s; }
.apc-fo-5 { top:42%; left:1%;  animation: apcFloat5 3.2s ease-in-out infinite 0.8s; }
.apc-fo-6 { top:44%; right:2%; animation: apcFloat6 4.0s ease-in-out infinite 1.2s; }

/* Smartphone Mockup */
.apc-phone-mockup {
  position: relative;
  width: 108px;
  flex-shrink: 0;
  animation: apcPhoneFloat 4s ease-in-out infinite;
}
.apc-phone-frame {
  width: 108px;
  min-height: 210px;
  border-radius: 22px;
  background: linear-gradient(160deg, #1e1b4b 0%, #0f0e1a 100%);
  border: 2.5px solid rgba(139,92,246,0.7);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 8px 32px rgba(109,40,217,0.5),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
.apc-phone-notch {
  width: 44px;
  height: 14px;
  background: #0f0e1a;
  border-radius: 0 0 12px 12px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.apc-phone-speaker {
  width: 18px; height: 3px;
  background: #2d2b5e;
  border-radius: 2px;
}
.apc-phone-screen {
  padding: 4px 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.apc-screen-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2px;
}
.apc-screen-search {
  background: rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 3px 5px;
  border: 1px solid rgba(255,255,255,0.08);
}
.apc-screen-banner {
  background: linear-gradient(90deg, #ef4444, #f59e0b);
  border-radius: 5px;
  padding: 3px 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.apc-screen-cats {
  display: flex;
  gap: 3px;
  overflow: hidden;
}
.apc-scat {
  font-size: 0.3rem;
  padding: 2px 4px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
  flex-shrink: 0;
}
.apc-scat-active {
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff;
}
.apc-screen-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.apc-mini-card {
  background: rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
}
.apc-mini-img { font-size: 1.1rem; text-align: center; line-height: 1.2; }
.apc-mini-price { font-size: 0.28rem; color: rgba(255,255,255,0.9); font-weight:700; text-align:center; margin-top:2px; }
.apc-mini-disc {
  position: absolute;
  top: 2px; right: 2px;
  background: #ef4444;
  color: #fff;
  font-size: 0.22rem;
  font-weight: 800;
  padding: 1px 2px;
  border-radius: 2px;
}
.apc-screen-nav {
  display: flex;
  justify-content: space-around;
  padding: 3px 0 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.55rem;
}
.apc-snav-active {
  filter: brightness(1.4);
}

/* Side buttons */
.apc-phone-vol {
  position: absolute;
  left: -4px; top: 45px;
  width: 3px; height: 28px;
  background: rgba(139,92,246,0.6);
  border-radius: 2px 0 0 2px;
  box-shadow: 0 10px 0 rgba(139,92,246,0.6);
}
.apc-phone-pwr {
  position: absolute;
  right: -4px; top: 52px;
  width: 3px; height: 22px;
  background: rgba(139,92,246,0.6);
  border-radius: 0 2px 2px 0;
}

/* Phone bottom glow */
.apc-phone-glow {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 30px;
  background: radial-gradient(ellipse, rgba(139,92,246,0.6) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* ── BENEFITS GLASS CARD ── */
.apc-benefits-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 10px 12px;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apc-benefit-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.apc-benefit-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1);
}
.apc-benefit-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}
.apc-benefit-desc {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.55);
  margin-top: 1px;
}

/* ── EXCLUSIVE OFFER CARD ── */
.apc-offer-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.apc-offer-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  background-size: 200% 100%;
  animation: apcProgressScan 3s linear infinite;
  pointer-events: none;
}
.apc-offer-tag {
  font-size: 0.56rem;
  font-weight: 700;
  color: #fde68a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}
.apc-offer-headline {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.8);
  margin-bottom: 2px;
}
.apc-offer-amount {
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 900;
  color: #fbbf24;
  line-height: 1;
}
.apc-offer-amount span {
  font-size: 0.7rem;
  color: #f9a8d4;
}
.apc-offer-sub {
  font-size: 0.55rem;
  color: rgba(255,255,255,0.5);
  margin-top: 3px;
}

/* Coupon ticket badge */
.apc-coupon-badge {
  position: relative;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 4px 16px rgba(251,191,36,0.4);
  flex-shrink: 0;
}
.apc-coupon-perf {
  position: absolute;
  left: -5px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(79,29,149,0.9);
}
.apc-cp-top { top: -4px; }
.apc-cp-bot { bottom: -4px; }
.apc-coupon-label {
  font-family: var(--font-title);
  font-size: 0.65rem;
  font-weight: 900;
  color: #1e1b4b;
  letter-spacing: 1.5px;
  white-space: nowrap;
}

/* ── DOWNLOAD BUTTONS ── */
.apc-btn-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.apc-store-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  border-radius: 12px;
  padding: 9px 10px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
}
.apc-apple {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color: #fff;
}
.apc-apple:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  filter: brightness(1.15);
}
.apc-google {
  background: linear-gradient(135deg, #174ea6, #1a73e8);
  color: #fff;
}
.apc-google:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(26,115,232,0.45);
  filter: brightness(1.15);
}
.apc-store-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: #fff;
}
.apc-store-text { line-height: 1.1; }
.apc-store-small {
  font-size: 0.45rem;
  color: rgba(255,255,255,0.65);
}
.apc-store-big {
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
}

/* APK button */
.apc-apk-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 8px;
  color: rgba(255,255,255,0.8);
  font-size: 0.65rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.apc-apk-btn:hover {
  background: rgba(255,255,255,0.15);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255,255,255,0.1);
  color: #fff;
}

/* ── STATS ROW ── */
.apc-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 10px 8px;
}
.apc-stat { text-align: center; flex: 1; }
.apc-stat-num {
  font-family: var(--font-title);
  font-size: 0.85rem;
  font-weight: 900;
  color: #fbbf24;
  line-height: 1;
}
.apc-stat-lbl {
  font-size: 0.5rem;
  color: rgba(255,255,255,0.6);
  margin-top: 2px;
}
.apc-stat-divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}

/* ── TRUST STRIP ── */
.apc-trust-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px 10px;
}
.apc-trust-item {
  font-size: 0.55rem;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Dark mode — keep the card looking equally good */
:root[data-theme="dark"] .apc-wrap {
  background: linear-gradient(135deg, #3b0764, #5b21b6, #6d28d9, #7c3aed);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .apc-wrap {
    border-radius: 18px;
  }
  .apc-btn-group {
    grid-template-columns: 1fr 1fr;
  }
}


/* Promo bottom grid */
.bottom-promos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.promo-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Homepage Wide Container & Responsive Grids */
.homepage-wide-container {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ====================================================
   HOMEPAGE ADVERTISEMENT ZONE  (haz-*)
   Premium Sponsored Brand Showcase Carousel
   ==================================================== */

.homepage-ad-zone {
  width: 100%;
  height: auto;
  border-radius: 24px;
  background: var(--bg-white);
  border: 1px solid #EEEEEE;
  padding: 16px 20px 20px;
  box-sizing: border-box;
  box-shadow: 0 10px 40px rgba(124, 58, 237, 0.08);
}

/* Header area */
.haz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}
.haz-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.haz-fire {
  font-size: 1.5rem;
  line-height: 1;
}
.haz-title-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.haz-title {
  font-family: var(--font-title, inherit);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.1;
}
.haz-subtitle {
  font-size: 0.82rem;
  color: var(--text-light);
  margin: 0;
}
.haz-badge-glass {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--primary);
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.15);
  backdrop-filter: blur(4px);
  border-radius: 50px;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Carousel block */
.haz-ad-block {
  width: 100%;
  height: 350px;
  position: relative;
  overflow: hidden;
}

/* Slide container split layout */
.haz-slide {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 20px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  z-index: 1;
}
.haz-slide.active {
  opacity: 1;
  visibility: visible;
  position: relative;
  z-index: 2;
}

/* Left Column: Featured Brand Banner (35%) */
.haz-brand-banner {
  width: 35%;
  height: 100%;
  border-radius: 20px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  color: #1F2937;
  transition: transform 0.3s ease;
}
.haz-brand-banner:hover {
  transform: scale(1.01);
}

/* Specific brand gradients */
.haz-bg-samsung {
  background: linear-gradient(135deg, #EEF2FF 0%, #D8B4FE 50%, #C7D2FE 100%);
}
.haz-bg-apple {
  background: linear-gradient(135deg, #F1F5F9 0%, #CBD5E1 50%, #94A3B8 100%);
}
.haz-bg-nari {
  background: linear-gradient(135deg, #FFF1F2 0%, #FCA5A5 50%, #FECDD3 100%);
}
.haz-bg-ktm {
  background: linear-gradient(135deg, #F5F3FF 0%, #C7D2FE 50%, #DDD6FE 100%);
}

.haz-brand-header {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.haz-brand-logo {
  font-size: 2.2rem;
  line-height: 1;
}
.haz-brand-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.haz-brand-name {
  font-family: var(--font-title, inherit);
  font-size: 1.15rem;
  font-weight: 800;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 4px;
}
.haz-brand-verify {
  font-size: 0.8rem;
  color: #3B82F6;
}
.haz-store-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: #4B5563;
}

.haz-brand-content {
  z-index: 2;
  margin-top: 8px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.haz-brand-headline {
  font-family: var(--font-title, inherit);
  font-size: 1.45rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.2;
}
.haz-brand-desc {
  font-size: 0.78rem;
  color: #374151;
  line-height: 1.4;
  max-width: 95%;
}

.haz-brand-footer {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.haz-discount-badge {
  font-size: 0.78rem;
  font-weight: 800;
  color: #FFFFFF;
  background: #7C3AED;
  padding: 6px 14px;
  border-radius: 30px;
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.haz-brand-buttons {
  display: flex;
  gap: 8px;
}
.haz-btn-shop, .haz-btn-visit {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  text-decoration: none;
}
.haz-btn-shop {
  background: #111827;
  color: #FFFFFF;
}
.haz-btn-shop:hover {
  background: #1F2937;
  transform: translateY(-1px);
}
.haz-btn-visit {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #1F2937;
}
.haz-btn-visit:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

/* Floating Brand Emoji Animation */
@keyframes hazFloatEmoji {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-12px) rotate(6deg); }
}
.haz-floating-render {
  position: absolute;
  right: 15px;
  bottom: 40px;
  font-size: 5rem;
  line-height: 1;
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
  animation: hazFloatEmoji 6s ease-in-out infinite;
}

/* Right Column: Sponsored Products (65%) */
.haz-products-showcase {
  width: 65%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  box-sizing: border-box;
}

/* Ecommerce Product Card inside carousel */
.haz-prod-card {
  background: #FFFFFF;
  border: 1px solid #EEEEEE;
  border-radius: 18px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  box-sizing: border-box;
  height: 100%;
}
.haz-prod-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.2);
}
.haz-prod-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #EF4444;
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  z-index: 5;
}
.haz-prod-wish {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #E5E7EB;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  z-index: 5;
  transition: all 0.2s ease;
  padding: 0;
  color: #9CA3AF;
  box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}
.haz-prod-wish:hover {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #EF4444;
  transform: scale(1.05);
}
.haz-prod-wish.active {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #EF4444;
}

.haz-prod-img-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 95px;
  margin-top: 4px;
  margin-bottom: 8px;
  background: #FAF8FF;
  border-radius: 12px;
  transition: background 0.3s ease;
}
.haz-prod-card:hover .haz-prod-img-box {
  background: #F5F3FF;
}
.haz-prod-img {
  font-size: 2.8rem;
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.haz-prod-card:hover .haz-prod-img {
  transform: scale(1.08) rotate(3deg);
}

.haz-prod-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.haz-prod-sponsored {
  align-self: flex-start;
  background: #7C3AED;
  color: #FFFFFF;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.haz-prod-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 2px 0 0 0;
  height: 34px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.haz-prod-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.haz-rating-stars {
  color: #F59E0B;
  font-size: 0.8rem;
}
.haz-rating-count {
  font-size: 0.7rem;
  color: var(--text-light);
}

.haz-prod-price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 4px;
}
.haz-prices {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.haz-price-current {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
}
.haz-price-old {
  font-size: 0.75rem;
  text-decoration: line-through;
  color: var(--text-light);
}

.haz-prod-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  z-index: 3;
}
.haz-action-qv, .haz-action-cart {
  flex: 1;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 6px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--border-color);
  background: var(--bg-white);
  color: var(--text-dark);
  box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.haz-action-qv:hover {
  background: var(--bg-light);
  border-color: var(--text-light);
}
.haz-action-cart {
  background: rgba(124, 58, 237, 0.05);
  color: #7C3AED;
  border-color: rgba(124, 58, 237, 0.2);
}
.haz-action-cart:hover {
  background: #7C3AED;
  color: #FFFFFF;
  border-color: #7C3AED;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}

/* Manual Navigation Controls */
.haz-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dark);
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
  padding: 0;
}
.haz-arrow:hover {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.3);
}
.haz-arrow-prev {
  left: -20px;
}
.haz-arrow-next {
  right: -20px;
}
.haz-chevron {
  width: 18px;
  height: 18px;
}

/* Bottom indicators pagination dots */
.haz-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.haz-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-color);
  cursor: pointer;
  transition: all 0.3s ease;
}
.haz-dot.active {
  background: #7C3AED;
  transform: scale(1.25);
  width: 20px;
  border-radius: 4px;
}

/* ====================================================
   ADDITIONAL ENHANCEMENTS: URGENCY, SOCIAL PROOF & TICKER
   ==================================================== */

/* Premium Countdown Timer inside Brand Banner */
.haz-brand-countdown {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.2);
  padding: 6px 12px;
  border-radius: 30px;
  align-self: flex-start;
  z-index: 2;
  margin-bottom: 8px;
}
.haz-bcd-pulse {
  width: 6px;
  height: 6px;
  background-color: #EF4444;
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(239, 68, 68, 0.4);
  animation: hazBcdPulse 1.8s infinite;
}
@keyframes hazBcdPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}
.haz-bcd-label {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #EF4444;
  letter-spacing: 0.5px;
}
.haz-bcd-time {
  font-family: monospace, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  color: #EF4444;
  letter-spacing: 0.5px;
}

/* Brand Urgency List */
.haz-brand-urgency {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.haz-urgency-item {
  font-size: 0.72rem;
  font-weight: 700;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Floating Glassmorphic Analytics Card */
.haz-brand-analytics {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  padding: 8px 10px;
  margin-top: 10px;
  z-index: 2;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}
.haz-analytics-title {
  font-size: 0.65rem;
  font-weight: 800;
  color: #1F2937;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.haz-analytics-grid {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.haz-analytics-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.haz-analytics-val {
  font-size: 0.72rem;
  font-weight: 800;
  color: #7C3AED;
}
.haz-analytics-lbl {
  font-size: 0.55rem;
  font-weight: 600;
  color: #4B5563;
}

/* Follow Store Button */
.haz-btn-follow {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #1F2937;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}
.haz-btn-follow:hover {
  background: rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}
.haz-btn-follow.following {
  background: #10B981;
  color: #FFFFFF;
  border-color: #10B981;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
}
.haz-btn-follow.following:hover {
  background: #059669;
}

/* Featured Badges stack */
.haz-prod-badge-container {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 5;
}
.haz-prod-badge {
  position: static; /* Override absolute positioning */
  background: #EF4444;
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
}
.haz-prod-featured-badge {
  font-size: 0.62rem;
  font-weight: 800;
  color: #FFFFFF;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  width: fit-content;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.haz-featured-bestseller {
  background: #F59E0B; /* Amber */
}
.haz-featured-editors-pick {
  background: #3B82F6; /* Blue */
}
.haz-featured-trending {
  background: #8B5CF6; /* Purple */
}
.haz-featured-limited-stock {
  background: #EF4444; /* Red */
}

/* Social Proof indicators inside product cards */
.haz-prod-social-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 6px 0;
  border-top: 1px dashed var(--border-color);
  border-bottom: 1px dashed var(--border-color);
  padding: 5px 0;
}
.haz-psp-item {
  font-size: 0.62rem;
  font-weight: 700;
  color: #6B7280;
  display: flex;
  align-items: center;
  gap: 3px;
}
.haz-psp-free {
  color: #10B981; /* Green Free Delivery badge text */
}

/* Taller, real images with transparent background inside showcase card */
.haz-real-prod-img {
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.06));
  transition: transform 0.3s ease;
  border-radius: 8px;
}
.haz-prod-card:hover .haz-real-prod-img {
  transform: scale(1.06);
}
.haz-floating-real-img {
  position: absolute;
  right: -15px;
  bottom: -15px;
  width: 160px;
  height: 160px;
  object-fit: contain;
  filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.12));
  pointer-events: none;
  z-index: 1;
  animation: hazFloatEmoji 6s ease-in-out infinite;
}

/* Infinite Scrolling Logo Bar */
.haz-logo-strip {
  margin-top: 24px;
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.haz-logo-strip-title {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--text-light);
  letter-spacing: 1px;
  white-space: nowrap;
}
.haz-logo-track-container {
  overflow: hidden;
  flex: 1;
  position: relative;
  height: 30px;
  display: flex;
  align-items: center;
  mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.haz-logo-track {
  display: flex;
  width: max-content;
  animation: hazLogoScroll 18s linear infinite;
  gap: 50px;
  align-items: center;
}
.haz-logo-track-container:hover .haz-logo-track {
  animation-play-state: paused;
}
.haz-logo-item {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  user-select: none;
}
.haz-logo-item:hover {
  opacity: 1;
}
@keyframes hazLogoScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* KTM/Tech dark gradient overrides */
.haz-bg-ktm {
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 50%, #020617 100%);
}
.haz-bg-ktm .haz-brand-name,
.haz-bg-ktm .haz-brand-headline,
.haz-bg-ktm .haz-brand-desc,
.haz-bg-ktm .haz-store-name,
.haz-bg-ktm .haz-urgency-item,
.haz-bg-ktm .haz-analytics-title,
.haz-bg-ktm .haz-analytics-lbl {
  color: #F8FAFC !important;
}
.haz-bg-ktm .haz-brand-verify {
  color: #38BDF8;
}
.haz-bg-ktm .haz-brand-analytics {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}
.haz-bg-ktm .haz-analytics-val {
  color: #38BDF8;
}
.haz-bg-ktm .haz-btn-visit {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
  color: #F8FAFC;
}
.haz-bg-ktm .haz-btn-visit:hover {
  background: rgba(255, 255, 255, 0.25);
}
.haz-bg-ktm .haz-btn-follow {
  border-color: rgba(255, 255, 255, 0.2);
  color: #F8FAFC;
}
.haz-bg-ktm .haz-btn-follow:hover {
  background: rgba(255, 255, 255, 0.1);
}
.haz-bg-ktm .haz-brand-countdown {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.35);
}
.haz-bg-ktm .haz-bcd-label,
.haz-bg-ktm .haz-bcd-time {
  color: #FCA5A5;
}
.haz-bg-ktm .haz-bcd-pulse {
  background-color: #FCA5A5;
}

/* Dynamic Brand Gradients Light theme */
.haz-bg-samsung {
  background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 50%, #7DD3FC 100%);
}
.haz-bg-apple {
  background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 50%, #CBD5E1 100%);
}
.haz-bg-nari {
  background: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 50%, #FBCFE8 100%);
}

/* Responsive Overrides */
@media (max-width: 1024px) {
  .haz-ad-block {
    height: 310px;
  }
  .haz-brand-banner {
    width: 40%;
    padding: 20px;
  }
  .haz-brand-headline {
    font-size: 1.2rem;
  }
  .haz-products-showcase {
    width: 60%;
    grid-template-columns: repeat(2, 1fr); /* 2 products on Tablet */
  }
  .haz-products-showcase > div:last-child {
    display: none; /* Hide 3rd product card */
  }
  .haz-floating-render {
    font-size: 3.5rem;
    bottom: 30px;
  }
}

@media (max-width: 768px) {
  .homepage-ad-zone {
    padding: 16px;
    border-radius: 20px;
  }
  .haz-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
  }
  .haz-title {
    font-size: 1.05rem;
  }
  .haz-subtitle {
    font-size: 0.72rem;
  }
  .haz-badge-glass {
    padding: 3px 8px;
    font-size: 0.6rem;
  }
  .haz-ad-block {
    height: auto;
  }
  .haz-slide {
    display: flex;
    flex-direction: column; /* Stack vertically on mobile */
    position: relative;
    opacity: 1;
    visibility: visible;
    gap: 16px;
  }
  .haz-slide:not(.active) {
    display: none;
  }
  .haz-brand-banner {
    width: 100%;
    height: 160px; /* Banner on top */
    flex-direction: row;
    align-items: center;
    padding: 20px;
  }
  .haz-brand-content {
    margin: 0;
    justify-content: center;
    flex: 1;
  }
  .haz-brand-headline {
    font-size: 1.3rem;
  }
  .haz-brand-desc {
    font-size: 0.78rem;
    max-width: 100%;
  }
  .haz-brand-footer {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  .haz-floating-render {
    display: none; /* Hide floating render on Mobile */
  }
  
  /* Products horizontal swipe carousel on mobile */
  .haz-products-showcase {
    width: 100%;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 4px 4px 10px 4px;
    scrollbar-width: thin;
    box-sizing: border-box;
  }
  .haz-prod-card {
    flex: 0 0 200px; /* fixed card width on mobile swipe */
    scroll-snap-align: start;
    height: 280px;
  }
  .haz-prod-img-box {
    height: 80px;
  }
  .haz-prod-img {
    font-size: 3rem;
  }
  .haz-prod-title {
    font-size: 0.78rem;
    height: 34px;
  }
  .haz-products-showcase > div:last-child {
    display: flex; /* Show all on swipe */
  }
  
  /* Arrow controls positions on Mobile */
  .haz-arrow {
    width: 32px;
    height: 32px;
  }
  .haz-arrow-prev {
    left: -5px;
  }
  .haz-arrow-next {
    right: -5px;
  }
}

/* Dark Mode Overrides */
:root[data-theme="dark"] .homepage-ad-zone {
  border-color: var(--border-color);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
:root[data-theme="dark"] .haz-brand-name {
  color: #FFFFFF;
}
:root[data-theme="dark"] .haz-store-name {
  color: #E5E7EB;
}
:root[data-theme="dark"] .haz-brand-headline {
  color: #FFFFFF;
}
:root[data-theme="dark"] .haz-brand-desc {
  color: #E5E7EB;
}
:root[data-theme="dark"] .haz-btn-visit {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}
:root[data-theme="dark"] .haz-btn-visit:hover {
  background: rgba(255, 255, 255, 0.25);
}
:root[data-theme="dark"] .haz-prod-card {
  background: var(--bg-white);
  border-color: var(--border-color);
}
:root[data-theme="dark"] .haz-prod-img-box {
  background: rgba(255, 255, 255, 0.02);
}
:root[data-theme="dark"] .haz-prod-card:hover .haz-prod-img-box {
  background: rgba(124, 58, 237, 0.05);
}
:root[data-theme="dark"] .haz-prod-wish {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-color);
}
:root[data-theme="dark"] .haz-prod-wish:hover {
  background: rgba(239, 68, 68, 0.15);
}
:root[data-theme="dark"] .haz-action-qv, :root[data-theme="dark"] .haz-action-cart {
  background: var(--bg-white);
  border-color: var(--border-color);
  color: var(--text-dark);
}
:root[data-theme="dark"] .haz-action-cart {
  background: rgba(139, 92, 246, 0.1);
  color: #A78BFA;
  border-color: rgba(139, 92, 246, 0.25);
}
:root[data-theme="dark"] .haz-action-cart:hover {
  background: #7C3AED;
  color: #FFFFFF;
}
:root[data-theme="dark"] .haz-arrow {
  background: var(--bg-white);
  border-color: var(--border-color);
  color: var(--text-dark);
}
:root[data-theme="dark"] .haz-arrow:hover {
  background: var(--primary);
  color: #FFFFFF;
}

/* Specific brand gradients on Dark Mode for softer contrast */
:root[data-theme="dark"] .haz-bg-samsung {
  background: linear-gradient(135deg, #1E293B 0%, #4C1D95 50%, #1E1B4B 100%);
}
:root[data-theme="dark"] .haz-bg-apple {
  background: linear-gradient(135deg, #0F172A 0%, #334155 50%, #1E293B 100%);
}
:root[data-theme="dark"] .haz-bg-nari {
  background: linear-gradient(135deg, #4C0519 0%, #881337 50%, #310411 100%);
}
:root[data-theme="dark"] .haz-bg-ktm {
  background: linear-gradient(135deg, #2E1065 0%, #3B0764 50%, #1E1B4B 100%);
}

/* Dark mode text and element contrast overrides for brand campaigns */
:root[data-theme="dark"] .haz-brand-banner .haz-brand-name,
:root[data-theme="dark"] .haz-brand-banner .haz-brand-headline,
:root[data-theme="dark"] .haz-brand-banner .haz-brand-desc,
:root[data-theme="dark"] .haz-brand-banner .haz-store-name,
:root[data-theme="dark"] .haz-brand-banner .haz-urgency-item,
:root[data-theme="dark"] .haz-brand-banner .haz-analytics-title,
:root[data-theme="dark"] .haz-brand-banner .haz-analytics-lbl {
  color: #F8FAFC !important;
}
:root[data-theme="dark"] .haz-brand-banner .haz-brand-verify {
  color: #38BDF8 !important;
}
:root[data-theme="dark"] .haz-brand-banner .haz-brand-analytics {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
:root[data-theme="dark"] .haz-brand-banner .haz-analytics-val {
  color: #38BDF8 !important;
}
:root[data-theme="dark"] .haz-brand-banner .haz-btn-visit {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #F8FAFC !important;
}
:root[data-theme="dark"] .haz-brand-banner .haz-btn-visit:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}
:root[data-theme="dark"] .haz-brand-banner .haz-btn-follow {
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #F8FAFC !important;
}
:root[data-theme="dark"] .haz-brand-banner .haz-btn-follow:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}
:root[data-theme="dark"] .haz-brand-banner .haz-brand-countdown {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}
:root[data-theme="dark"] .haz-brand-banner .haz-bcd-label,
:root[data-theme="dark"] .haz-brand-banner .haz-bcd-time {
  color: #FCA5A5 !important;
}
:root[data-theme="dark"] .haz-brand-banner .haz-bcd-pulse {
  background-color: #FCA5A5 !important;
}





.ai-recommendations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.video-spotlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.shopping-guides-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Advanced Category Mega Menu Dropdown */
.adv-mega-dropdown {
  position: absolute;
  top: 100%;
  left: 32px;
  width: calc(100% - 64px);
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 2000;
  display: none;
  grid-template-columns: 240px 1fr 300px;
  overflow: hidden;
  animation: fadeIn 0.25s ease-out;
}

.mega-menu-trigger:hover .adv-mega-dropdown,
.adv-mega-dropdown:hover {
  display: grid;
}

/* Category Filter Layout */
.category-page-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  padding: 24px;
}

.filter-sidebar {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  align-self: start;
}

/* Details and dashboards */
.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 24px;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 700px;
}

.dashboard-sidebar {
  background: var(--bg-white);
  border-right: 1px solid var(--border-color);
  padding: 20px 12px;
}

.dashboard-body {
  padding: 24px;
}

/* Analytics */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.analytics-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
}

.analytics-val {
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 4px;
  font-family: var(--font-title);
}

/* Language and notifications widgets */
.lang-switcher-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.lang-switcher-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.notifications-dropdown-box {
  position: absolute;
  top: 100%;
  right: 0;
  width: 280px;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  z-index: 1000;
  display: none;
}

.icon-btn:focus-within .notifications-dropdown-box,
.notifications-dropdown-box:hover {
  display: block;
}

/* Newsletter section block */
.newsletter-subscribe-section {
  background: linear-gradient(135deg, var(--secondary-light), #fff);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 40px;
  margin: 32px 32px 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.newsletter-input-group {
  display: flex;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 4px;
  background: var(--bg-white);
  width: 100%;
  max-width: 420px;
}

.newsletter-input {
  border: none;
  outline: none;
  padding: 8px 16px;
  flex: 1;
  font-size: 0.85rem;
  background: transparent;
}

/* Mobile Category Drawer styles */
.mobile-drawer {
  position: fixed;
  top: 0;
  left: -320px;
  width: 300px;
  height: 100%;
  background: var(--bg-white);
  box-shadow: 0 0 15px rgba(0,0,0,0.15);
  z-index: 30000;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

.mobile-drawer.active {
  left: 0;
}

.mobile-drawer-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mobile-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.mobile-drawer-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-muted);
}

.mobile-drawer-close:hover {
  color: var(--danger);
}

.mobile-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
  z-index: 29000;
  display: none;
  animation: fadeInOverlay 0.3s ease-out;
}

.mobile-drawer-overlay.active {
  display: block;
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

.floating-cat-btn {
  position: fixed;
  bottom: 90px;
  right: 24px;
  z-index: 9999;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  padding: 12px 20px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.85rem;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}

.floating-cat-btn:hover {
  transform: scale(1.05);
  background: var(--primary-hover);
}

/* Overlay dialogs */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 20000;
  overflow-y: auto;
  padding: 40px 16px;
  box-sizing: border-box;
}

.modal-overlay.active {
  display: flex;
}

.modal-box {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 100%;
  max-width: 460px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  margin: auto 0;
  box-sizing: border-box;
}

.payment-brand-select {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 16px 0;
}

.payment-gate-card {
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  cursor: pointer;
  text-align: center;
  font-weight: 700;
  transition: var(--transition-fast);
}

.payment-gate-card:hover, .payment-gate-card.active {
  border-color: var(--primary);
  background: var(--secondary-light);
  color: var(--primary);
}

.esewa-card { color: #60B246; }
.khalti-card { color: #5C2D91; }
.imepay-card { color: #ED1C24; }
.connectips-card { color: #005691; }

.timeline-track {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 32px 0;
}

.timeline-line {
  position: absolute;
  top: 13px;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--bg-gray);
  z-index: 1;
}

.timeline-line-active {
  position: absolute;
  top: 13px;
  left: 0;
  width: 50%;
  height: 4px;
  background: var(--success);
  z-index: 2;
  transition: width 1s ease-in-out;
}

.timeline-step {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.timeline-dot {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: var(--bg-gray);
  border: 4px solid var(--bg-white);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
}

.timeline-step.completed .timeline-dot {
  background: var(--success);
  color: #fff;
}

.timeline-step.active .timeline-dot {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 4px var(--secondary-light);
}

#ai-assistant-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  transition: bottom 0.3s ease, right 0.3s ease;
}

@media (max-width: 768px) {
  #ai-assistant-widget {
    bottom: 20px;
    right: 20px;
  }
}

@media (max-width: 480px) {
  #ai-assistant-widget {
    bottom: 18px;
    right: 18px;
  }
}

.ai-bubble-btn {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6D28D9, #7C3AED, #8B5CF6);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 12px 35px rgba(109, 40, 217, 0.35);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ai-bubble-btn:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 16px 40px rgba(109, 40, 217, 0.5), 0 0 15px rgba(124, 58, 237, 0.4);
}

.ai-bubble-btn .ai-bubble-label {
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  color: #FFFFFF;
  margin-top: 4px;
  text-align: center;
  line-height: 1;
  letter-spacing: 0.3px;
}

.ai-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background-color: #EF4444;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 10;
  line-height: 1;
}

.ai-chat-window {
  position: absolute;
  bottom: 82px;
  right: 0;
  width: 300px;
  height: 380px;
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.ai-chat-window.active {
  display: flex;
}

.ai-chat-header {
  background: var(--primary);
  color: #fff;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 0.85rem;
}

.ai-chat-messages {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.8rem;
}

.ai-msg {
  padding: 6px 10px;
  border-radius: var(--radius-md);
  max-width: 80%;
}

.ai-msg.bot {
  background: var(--bg-light);
  align-self: flex-start;
  border-top-left-radius: 4px;
}

.ai-msg.user {
  background: var(--secondary-light);
  color: var(--primary);
  align-self: flex-end;
  border-top-right-radius: 4px;
}

.ai-chat-input-row {
  display: flex;
  border-top: 1px solid var(--border-color);
  padding: 6px;
}

.ai-chat-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.8rem;
  padding: 6px;
}

.ai-chat-send {
  background: var(--primary);
  border: none;
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* ==========================================
   16. Responsive Media Queries
   ========================================== */

/* Deal of the day sticky on desktop only */
@media (min-width: 1280px) {
  .deal-day-card {
    position: sticky;
    top: calc(var(--scroll-offset) + 16px); /* clear dev dock */
    z-index: 10;
  }
}

/* 1. Desktop (1280px - 1599px) */
@media (min-width: 1280px) and (max-width: 1599px) {
  .home-layout-grid {
    grid-template-columns: 260px minmax(0, 1fr) 280px;
    gap: 20px;
  }
}

/* 2. Laptop (1024px - 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .home-layout-grid {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 20px;
  }
  
  .home-right-sidebar {
    display: none !important;
  }
  
  .picks-grid, .top-picks-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 3. Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .home-layout-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 0 16px;
  }
  
  .home-cat-sidebar {
    display: none !important;
  }
  
  .home-right-sidebar {
    display: none !important;
  }
  
  .floating-cat-btn {
    display: flex;
  }
  
  .picks-grid, .top-picks-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .hero-slider-box {
    height: auto;
    min-height: auto;
    padding: 32px;
  }
  
  .hero-text-block {
    max-width: 70%;
  }
}

/* 4. Mobile (<768px) */
@media (max-width: 767px) {
  .top-nav-bar {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    padding: 10px 16px;
  }
  
  .main-header {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
    text-align: center;
  }
  
  .brand-logo {
    justify-content: center;
  }
  
  .header-user-actions {
    justify-content: center;
  }
  
  .category-nav-row {
    flex-direction: column;
    padding: 0;
    gap: 0;
    height: auto !important;
  }
  
  .all-cat-btn {
    width: 100%;
    justify-content: center;
    border-radius: 0;
    height: 46px;
  }
  
  .nav-menu-links {
    width: 100%;
    overflow-x: auto;
    padding: 10px 16px;
    justify-content: flex-start;
    gap: 24px;
    height: 42px;
  }
  
  .home-layout-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }
  
  .home-cat-sidebar {
    display: none !important; 
  }
  
  .home-right-sidebar {
    display: none !important;
  }
  
  .floating-cat-btn {
    display: flex;
  }
  
  .hero-slider-box {
    height: auto;
    min-height: auto;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .hero-text-block {
    max-width: 100%;
  }
  
  .hero-render-block {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 24px;
    height: 180px;
  }
  
  .phone-mockup-wrapper {
    display: none; 
  }
  
  .glass-floating-badge {
    position: static;
    display: inline-flex;
    margin-right: 8px;
    margin-top: 8px;
  }
  
  .picks-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .top-picks-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .newsletter-subscribe-section {
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    text-align: center;
  }
  
  .newsletter-input-group {
    max-width: 100%;
  }
  
  .bottom-promos-grid {
    grid-template-columns: 1fr;
  }
  
  .category-page-layout {
    grid-template-columns: 1fr;
  }
  
  .product-detail-grid {
    grid-template-columns: 1fr;
  }
  
  .dashboard-layout {
    grid-template-columns: 1fr;
  }
  
  .analytics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .homepage-wide-container {
    padding: 16px 16px;
  }
  
  .circular-categories-row {
    justify-content: flex-start;
  }
  
  .ai-recommendations-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .video-spotlights-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .shopping-guides-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .picks-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .top-picks-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .analytics-grid {
    grid-template-columns: 1fr;
  }
  
  .ai-recommendations-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   NEW SECTION COMPONENTS
   ========================================== */

/* Skeleton Loaders */
@keyframes skeleton-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton-glow {
  background: linear-gradient(90deg, #F0F0F0 25%, #E0E0E0 37%, #F0F0F0 63%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}

.skeleton-card {
  border-radius: var(--radius-md);
  height: 280px;
  background: linear-gradient(90deg, #F0F0F0 25%, #E0E0E0 37%, #F0F0F0 63%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}

.skeleton-vendor-card {
  border-radius: var(--radius-md);
  width: 200px;
  height: 220px;
  flex-shrink: 0;
  background: linear-gradient(90deg, #F0F0F0 25%, #E0E0E0 37%, #F0F0F0 63%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}

.skeleton-review-card {
  border-radius: var(--radius-md);
  height: 180px;
  background: linear-gradient(90deg, #F0F0F0 25%, #E0E0E0 37%, #F0F0F0 63%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}

.skeleton-brand-logo {
  border-radius: var(--radius-sm);
  width: 120px;
  height: 70px;
  flex-shrink: 0;
  background: linear-gradient(90deg, #F0F0F0 25%, #E0E0E0 37%, #F0F0F0 63%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}

.skeleton-proof-card {
  border-radius: var(--radius-md);
  height: 200px;
  background: linear-gradient(90deg, #F0F0F0 25%, #E0E0E0 37%, #F0F0F0 63%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}

.skeleton-stat-card {
  border-radius: var(--radius-md);
  height: 120px;
  background: linear-gradient(90deg, #F0F0F0 25%, #E0E0E0 37%, #F0F0F0 63%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}

.skeleton-app-banner {
  border-radius: var(--radius-lg);
  height: 220px;
  background: linear-gradient(90deg, #F0F0F0 25%, #E0E0E0 37%, #F0F0F0 63%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}

.skeleton-achievement-card {
  border-radius: var(--radius-md);
  height: 160px;
  background: linear-gradient(90deg, #E0D8F0 25%, #D4C8E8 37%, #E0D8F0 63%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}

.skeleton-category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 75px;
  flex-shrink: 0;
}

.skeleton-circle-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(90deg, #F0F0F0 25%, #E0E0E0 37%, #F0F0F0 63%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}

.skeleton-text-line {
  width: 55px;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, #F0F0F0 25%, #E0E0E0 37%, #F0F0F0 63%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}

/* Product Card Enhancements */
.trending-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: linear-gradient(135deg, #EF4444, #DC2626);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  z-index: 2;
}

.hot-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  z-index: 2;
}

.sold-count-row {
  font-size: 0.68rem;
  color: var(--success);
  font-weight: 600;
  margin-bottom: 6px;
}

.stock-progress-wrapper {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stock-progress-bar {
  flex: 1;
  height: 4px;
  background: #E5E7EB;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.stock-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--danger), #F97316);
  border-radius: var(--radius-full);
  transition: width 0.8s ease;
}

.stock-label {
  font-size: 0.65rem;
  color: var(--danger);
  font-weight: 600;
  white-space: nowrap;
}

/* Section title badges */
.trending-filter-tabs {
  display: flex;
  gap: 8px;
}

.trending-tab-btn {
  padding: 5px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: transparent;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
}

.trending-tab-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.trending-tab-btn:hover:not(.active) {
  border-color: var(--primary);
  color: var(--primary);
}

.hot-badge-pill {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #92400E;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid #FCD34D;
}

.ai-recommendation-badge {
  background: linear-gradient(135deg, var(--secondary-light), #EDE9FE);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid #DDD6FE;
}

/* Electronics Mega Layout */
.electronics-mega-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.mega-deals-banner {
  width: 240px;
  flex-shrink: 0;
  background: linear-gradient(145deg, #1E293B, #334155, #1E1B4B);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  min-height: 300px;
}

.banner-badge {
  background: rgba(245, 158, 11, 0.2);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.banner-cta {
  margin-top: auto;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  display: block;
  transition: var(--transition-fast);
}

.banner-cta:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Hardware USP Strip */
.hardware-usp-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.usp-badge {
  background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
  color: #065F46;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid #A7F3D0;
}

/* Brands Marquee */
.brands-marquee-wrapper {
  overflow: hidden;
  width: 100%;
  padding: 8px 0;
}

.brands-marquee-track {
  display: flex;
  gap: 16px;
  will-change: transform;
}

.brand-logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 24px;
  min-width: 120px;
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.brand-logo-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 20px rgba(109, 40, 217, 0.08);
  transform: translateY(-2px);
}

.brand-logo-icon {
  font-size: 2rem;
}

.brand-logo-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-dark);
  white-space: nowrap;
}

/* Vendor Cards */
.vendors-scroll-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
}

.vendors-scroll-row::-webkit-scrollbar { height: 4px; }

.vendor-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: 200px;
  flex-shrink: 0;
  cursor: pointer;
  transition: var(--transition);
  scroll-snap-align: start;
}

.vendor-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

.vendor-banner {
  height: 70px;
  width: 100%;
}

.vendor-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
}

.vendor-avatar {
  font-size: 2rem;
  background: var(--bg-light);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -24px;
  border: 3px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.vendor-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-dark);
}

.vendor-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vendor-plan-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.vendor-plan-badge.platinum { background: #F3E8FF; color: #6D28D9; }
.vendor-plan-badge.gold { background: #FEF3C7; color: #92400E; }
.vendor-plan-badge.silver { background: #F1F5F9; color: #475569; }
.vendor-plan-badge.standard { background: #F0FDF4; color: #166534; }

.vendor-rating {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
}

.vendor-status {
  font-size: 0.68rem;
  color: var(--success);
  font-weight: 600;
}

.vendor-follow-btn {
  font-size: 0.72rem;
  padding: 5px 14px;
  margin-top: 4px;
}

/* Review Cards */
.video-spotlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.review-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: var(--transition);
  position: relative;
}

.review-card::before {
  content: '"';
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 4rem;
  color: var(--secondary-light);
  font-family: Georgia, serif;
  line-height: 1;
}

.review-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--secondary);
}

.review-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-avatar {
  font-size: 2rem;
  background: var(--bg-light);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.review-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-dark);
}

.review-stars {
  color: var(--accent);
  font-size: 0.75rem;
}

.review-date {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: auto;
}

.review-product {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.review-text {
  font-size: 0.82rem;
  color: var(--text-dark);
  line-height: 1.6;
  font-style: italic;
}

.review-footer {
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
  margin-top: 4px;
}

.review-helpful {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Social Proof Gallery */
.social-proof-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.social-proof-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
  transition: var(--transition);
}

.social-proof-card:hover .social-proof-overlay {
  opacity: 1;
}

.social-proof-card:hover {
  transform: scale(1.03);
}

.social-proof-img {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--secondary-light), #EDE9FE);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

.social-proof-overlay {
  position: absolute;
  inset: 0;
  background: rgba(109, 40, 217, 0.85);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px;
  opacity: 0;
  transition: var(--transition);
}

.social-proof-label {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

.social-proof-desc {
  color: rgba(255,255,255,0.85);
  font-size: 0.65rem;
  line-height: 1.4;
  margin: 2px 0;
}

.social-proof-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.75);
  margin-top: 4px;
}

/* Marketplace Stats */
.marketplace-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.marketplace-stats-grid .stat-card {
  background: #ffffff !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  padding: 20px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  transition: var(--transition) !important;
  cursor: pointer !important;
}

.marketplace-stats-grid .stat-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
}

.marketplace-stats-grid .stat-card .stat-value,
.marketplace-stats-grid .stat-card .stat-label {
  text-align: center !important;
}

.stat-icon-box {
  font-size: 1.8rem;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  font-family: var(--font-title);
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* App Download Full Banner */

.app-download-full-banner {
  background: linear-gradient(135deg, #0A081A 0%, #151138 50%, #201A52 100%) !important;
  border-radius: var(--radius-lg);
  padding: 48px 64px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(139, 92, 246, 0.25);
  box-shadow: 0 25px 50px -12px rgba(109, 40, 217, 0.35) !important;
}

.app-download-glow-1 {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, rgba(139, 92, 246, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.app-download-glow-2 {
  position: absolute;
  bottom: -15%;
  right: 15%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.app-download-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.app-download-badge {
  align-self: flex-start;
  background: rgba(139, 92, 246, 0.15);
  color: #C084FC;
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: 1px solid rgba(139, 92, 246, 0.3);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.app-download-title {
  background: linear-gradient(95deg, #FFFFFF 30%, #C084FC 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2.8rem !important;
  font-weight: 800;
  line-height: 1.2;
  font-family: var(--font-title);
  margin: 0;
}

.app-download-desc {
  color: #9CA3AF !important;
  font-size: 1.08rem !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  max-width: 600px;
  margin: 0;
}

.app-features-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0 12px 0;
}

.app-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #D1D5DB;
  font-size: 0.95rem;
}

.app-feature-icon {
  font-size: 1.1rem;
  background: rgba(255, 255, 255, 0.05);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.app-download-btns-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.app-secondary-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.app-store-btn-custom {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #ffffff !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  min-width: 155px;
}

.app-apk-btn-primary {
  background: linear-gradient(135deg, #059669 0%, #10B981 100%) !important;
  border: 1px solid #10B981 !important;
  border-radius: 12px !important;
  padding: 10px 24px !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.25) !important;
  transition: all 0.3s ease !important;
  max-width: fit-content;
}

.app-apk-btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.45) !important;
  background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
}

.app-secondary-store-btn {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  padding: 8px 18px !important;
  transition: all 0.2s ease !important;
}

.app-secondary-store-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-2px) !important;
}

.app-btn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
}

.app-btn-sub {
  font-size: 0.52rem;
  font-weight: 500;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.app-btn-main {
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  margin-top: 1px;
}

.app-download-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

.app-phone-mockup-wrapper {
  position: relative;
  width: 200px;
  height: 320px;
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.app-mockup-img {
  width: 250px;
  height: auto;
  border-radius: 28px;
  border: 4px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6), 0 0 40px rgba(139, 92, 246, 0.2);
  transform: rotate(8deg) translateY(10px);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
  z-index: 1;
}

.app-phone-mockup-wrapper:hover .app-mockup-img {
  transform: rotate(4deg) translateY(-5px) scale(1.05);
  box-shadow: 0 35px 80px -20px rgba(0, 0, 0, 0.7), 0 0 50px rgba(139, 92, 246, 0.35);
}

.app-phone-glow {
  position: absolute;
  width: 220px;
  height: 340px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0) 80%);
  top: -15px;
  left: -10px;
  z-index: -1;
  pointer-events: none;
}

.app-phone-menu,
.app-phone-profile {
  font-size: 8px;
}

.app-phone-search {
  background: var(--bg-white);
  border-radius: 12px;
  margin: 6px 8px;
  padding: 4px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.app-phone-search-placeholder {
  font-size: 7px;
  color: #9CA3AF;
}

.app-phone-search-icon {
  font-size: 7px;
  color: var(--primary);
}

.app-phone-body {
  padding: 0 8px 8px;
  flex: 1;
  overflow: hidden;
}

.app-phone-section {
  margin-top: 6px;
}

.app-phone-section-title {
  font-size: 8px;
  font-weight: 800;
  color: #1F2937;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app-phone-categories {
  display: flex;
  gap: 6px;
}

.app-phone-cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.app-phone-cat-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.app-phone-cat-label {
  font-size: 5.5px;
  font-weight: 600;
  color: #4B5563;
  margin-top: 2px;
  text-align: center;
}

.app-phone-timer {
  background: var(--danger);
  color: #ffffff;
  font-size: 6px;
  font-weight: 700;
  padding: 0.5px 3px;
  border-radius: 2px;
}

.app-phone-products {
  display: flex;
  gap: 6px;
}

.app-phone-prod-card {
  background: var(--bg-white);
  border-radius: 6px;
  padding: 4px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.app-phone-prod-img {
  font-size: 12px;
  margin-bottom: 2px;
}

.app-phone-prod-price {
  font-size: 6px;
  font-weight: 800;
  color: var(--primary);
}


/* Newsletter */
.newsletter-subscribe-section {
  background: linear-gradient(135deg, #F3E8FF, #EDE9FE);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
}

.newsletter-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 40px 48px;
}

.newsletter-text-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.newsletter-badge {
  background: rgba(109, 40, 217, 0.1);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  align-self: flex-start;
  border: 1px solid rgba(109, 40, 217, 0.2);
}

.newsletter-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.2;
}

.newsletter-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.newsletter-form-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 380px;
}

.newsletter-input-group {
  display: flex;
  gap: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(109, 40, 217, 0.3);
  background: var(--bg-white);
}

.newsletter-email-input {
  flex: 1;
  padding: 14px 16px;
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-dark);
}

.newsletter-submit-btn {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  border: none;
  padding: 14px 24px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  font-family: var(--font-sans);
}

.newsletter-submit-btn:hover {
  opacity: 0.9;
}

.newsletter-disclaimer {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Payment Partners */
.payment-partners-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
}

.payment-partner-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 24px;
  min-width: 100px;
  transition: var(--transition-fast);
  cursor: default;
}

.payment-partner-badge:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.partner-name {
  font-size: 0.72rem;
  font-weight: 700;
}

/* Achievement Cards */
.achievements-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.achievement-card {
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #fff;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.achievement-card::before {
  content: '';
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 100px;
  height: 100px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
}

.achievement-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.achievement-icon {
  font-size: 2.5rem;
  margin-bottom: 4px;
}

.achievement-title {
  font-size: 1.2rem;
  font-weight: 800;
  font-family: var(--font-title);
  line-height: 1.2;
}

.achievement-subtitle {
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.9;
}

.achievement-desc {
  font-size: 0.75rem;
  opacity: 0.8;
  line-height: 1.5;
  margin-top: 4px;
}

/* View All Button */
.view-all-btn {
  font-size: 0.85rem;
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  padding: 6px 16px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-full);
  transition: var(--transition-fast);
}

.view-all-btn:hover {
  background: var(--primary);
  color: #fff;
}

/* Responsive overrides for new sections */
@media (max-width: 1280px) {
  .marketplace-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .social-proof-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .electronics-mega-layout {
    flex-direction: column;
  }
  .mega-deals-banner {
    width: 100%;
    min-height: auto;
  }
  .achievements-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .app-download-full-banner {
    grid-template-columns: 1fr;
    padding: 32px;
  }
  .app-download-visual { display: none; }
}

@media (max-width: 768px) {
  .video-spotlights-grid {
    grid-template-columns: 1fr;
  }
  .social-proof-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .marketplace-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .achievements-cards-grid {
    grid-template-columns: 1fr;
  }
  .newsletter-inner {
    flex-direction: column;
    padding: 28px 24px;
  }
  .newsletter-form-block {
    min-width: auto;
    width: 100%;
  }
  .payment-partners-grid {
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .social-proof-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .app-download-full-banner {
    padding: 24px 20px;
  }
  .app-download-title {
    font-size: 1.4rem;
  }
}

/* ==========================================
   PREMIUM MARKETPLACE FOOTER
   ========================================== */
.marketplace-footer {
  background: linear-gradient(135deg, #0F0A1E 0%, #1A1033 40%, #1E1B4B 100%);
  color: #fff;
  padding: 0;
  margin-top: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-top-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 56px 48px 40px;
}
.footer-brand-col { display: flex; flex-direction: column; gap: 0; }
.footer-tagline { font-size: 0.8rem; color: rgba(255,255,255,0.65); line-height: 1.6; margin-bottom: 20px; }
.footer-social-row { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-social-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85); font-size: 0.72rem; font-weight: 600;
  padding: 6px 12px; border-radius: var(--radius-sm); text-decoration: none;
  transition: var(--transition-fast);
}
.footer-social-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.footer-links-col { display: flex; flex-direction: column; gap: 16px; }
.footer-col-title {
  font-size: 0.88rem; font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 12px;
}
.footer-links-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links-list a { color: rgba(255,255,255,0.6); font-size: 0.8rem; text-decoration: none; transition: var(--transition-fast); }
.footer-links-list a:hover { color: var(--secondary); padding-left: 4px; }
.footer-bottom-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 20px 48px; border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.78rem; color: rgba(255,255,255,0.5);
}
.footer-payment-icons { display: flex; align-items: center; gap: 16px; font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.6); }
@media (max-width: 1024px) {
  .footer-top-grid { grid-template-columns: 1fr 1fr 1fr; gap: 28px; padding: 40px 28px 32px; }
  .footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .footer-top-grid { grid-template-columns: 1fr 1fr; gap: 24px; padding: 32px 20px 24px; }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-bottom-bar { flex-direction: column; text-align: center; padding: 20px; gap: 12px; }
  .footer-payment-icons { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 480px) { .footer-top-grid { grid-template-columns: 1fr; } }

/* ==========================================
   FLASH SALES FULL WIDTH
   ========================================== */
.flash-sales-full {
  background: linear-gradient(135deg, #FFFBEB 0%, #FFF7ED 50%, #FFFBEB 100%);
  border: 1px solid #FDE68A;
  border-radius: var(--radius-lg);
  padding: 24px 28px 28px;
  margin-top: 0 !important;
  position: relative;
  overflow: hidden;
}

.flash-sales-full::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.flash-sale-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #F59E0B, #EF4444);
  border-radius: 50%;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
  animation: flash-pulse 1.5s ease-in-out infinite;
}

@keyframes flash-pulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4); transform: scale(1); }
  50% { box-shadow: 0 6px 20px rgba(245, 158, 11, 0.65); transform: scale(1.08); }
}

.flash-sales-full .section-title-main {
  font-size: 1.35rem;
  font-weight: 800;
  color: #92400E;
}

.flash-sales-full .deal-badge-red {
  background: linear-gradient(135deg, #EF4444, #DC2626);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
}

.flash-sales-grid {
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 14px;
}

@media (max-width: 1280px) {
  .flash-sales-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 1024px) {
  .flash-sales-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
  .flash-sales-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .flash-sales-full { padding: 18px 16px 20px; }
}

/* Category row separator */
.circular-categories-row {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 4px;
  padding-bottom: 20px !important;
}

/* ==========================================
   PREMIUM MARKETPLACE FOOTER
   ========================================== */
.marketplace-footer {
  background: linear-gradient(135deg, #0F0A1E 0%, #1A1033 40%, #1E1B4B 100%);
  color: #fff; padding: 0; margin-top: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-top-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px; padding: 56px 48px 40px;
}
.footer-brand-col { display: flex; flex-direction: column; gap: 0; }
.footer-tagline { font-size: 0.8rem; color: rgba(255,255,255,0.65); line-height: 1.6; margin-bottom: 20px; }
.footer-social-row { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-social-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85); font-size: 0.72rem; font-weight: 600;
  padding: 6px 12px; border-radius: var(--radius-sm); text-decoration: none;
  transition: var(--transition-fast);
}
.footer-social-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.footer-links-col { display: flex; flex-direction: column; gap: 16px; }
.footer-col-title {
  font-size: 0.88rem; font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 12px;
}
.footer-links-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links-list a { color: rgba(255,255,255,0.6); font-size: 0.8rem; text-decoration: none; transition: var(--transition-fast); }
.footer-links-list a:hover { color: var(--secondary); padding-left: 4px; }
.footer-bottom-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 20px 48px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.78rem; color: rgba(255,255,255,0.5);
}
.footer-payment-icons { display: flex; align-items: center; gap: 16px; font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.6); }
@media (max-width: 1024px) {
  .footer-top-grid { grid-template-columns: 1fr 1fr 1fr; gap: 28px; padding: 40px 28px 32px; }
  .footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .footer-top-grid { grid-template-columns: 1fr 1fr; gap: 24px; padding: 32px 20px 24px; }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-bottom-bar { flex-direction: column; text-align: center; padding: 20px; gap: 12px; }
  .footer-payment-icons { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 480px) { .footer-top-grid { grid-template-columns: 1fr; } }

/* ==========================================
   TOP PICKS FOR YOU - Horizontal Scroll Carousel
   ========================================== */
.top-picks-scroll-wrapper {
  position: relative;
}

.top-picks-scroll-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.top-picks-scroll-track::-webkit-scrollbar { display: none; }

.top-pick-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0;
  width: 180px;
  flex-shrink: 0;
  cursor: pointer;
  transition: var(--transition);
  scroll-snap-align: start;
  overflow: hidden;
  position: relative;
}

.top-pick-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

.top-pick-img {
  width: 100%;
  height: 140px;
  background: linear-gradient(135deg, #F8FAFC, #F1F5F9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  position: relative;
}

.top-pick-discount-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--danger);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 4px;
  z-index: 2;
}

.top-pick-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.top-pick-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.top-pick-rating {
  font-size: 0.68rem;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 4px;
}

.top-pick-rating span { color: var(--text-muted); }

.top-pick-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}

.top-pick-price {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-dark);
}

.top-pick-original {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-decoration: line-through;
}

.scroll-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--text-dark);
  box-shadow: var(--shadow-md);
  z-index: 10;
  transition: var(--transition-fast);
}

.scroll-nav-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.scroll-nav-prev { left: -18px; }
.scroll-nav-next { right: -18px; }

@media (max-width: 768px) {
  .top-pick-card { width: 150px; }
  .top-pick-img { height: 110px; font-size: 2.8rem; }
  .scroll-nav-btn { display: none; }
}

/* ==========================================
   FULL-WIDTH CATEGORIES BLOCK
   Spans edge-to-edge of the content area
   below the 3-column hero grid
   ========================================== */
.full-width-categories-block {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 24px 16px;
  box-shadow: var(--shadow-sm);
}

/* Categories row inside full-width block */
.full-width-categories-block .circular-categories-row {
  display: flex !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: space-between !important;
  scrollbar-width: none !important;
  gap: 0 !important;
  padding: 8px 0 4px !important;
  border-bottom: none !important;
  margin: 0 !important;
}

.full-width-categories-block .circular-categories-row::-webkit-scrollbar {
  display: none;
}

/* Each category tile gets equal flex space */
.full-width-categories-block .circle-cat-card {
  flex: 1;
  min-width: 70px;
  max-width: 110px;
}

/* Section label above categories */

/* homepage-wide-container: no top gap so categories touch hero bottom */
.homepage-wide-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* The 3-column grid bottom margin removed — categories sit flush below */
.home-layout-grid {
  margin-bottom: 0 !important;
}

/* ==========================================
   GRID FULL SPAN — Categories & Flash Sales
   span ALL 3 columns of home-layout-grid
   (Left Sidebar → Center → Right Sidebar)
   ========================================== */
.grid-full-span {
  grid-column: 1 / -1;
}

/* Sidebar links card panel wrapper */
.sidebar-link-panel {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: var(--shadow-sm);
  margin-top: 24px;
}

.ql-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  cursor: pointer;
  transition: transform 0.25s ease;
  border-bottom: 1px solid rgba(243, 244, 246, 0.8);
}

.ql-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ql-item:first-of-type {
  padding-top: 2px;
}

.ql-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ql-svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Specific icon background gradients matching the image */
.ql-icon-seller {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
}

.ql-icon-track {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
}

.ql-icon-support {
  background: linear-gradient(135deg, #EEF2FF 0%, #C7D2FE 100%);
}

.ql-icon-app {
  background: linear-gradient(135deg, #FFF7ED 0%, #FED7AA 100%);
}

.ql-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-left: 14px;
  flex: 1;
  min-width: 0;
}

.ql-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1F2937;
  transition: color 0.2s ease;
  font-family: var(--font-title);
}

.ql-sub {
  font-size: 0.75rem;
  color: #6B7280;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ql-arrow {
  color: #9CA3AF;
  transition: all 0.2s ease;
  margin-left: auto;
  display: flex;
  align-items: center;
}

.ql-chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

/* Hover effects */
.ql-item:hover {
  transform: translateX(4px);
}

.ql-item:hover .ql-title {
  color: var(--primary);
}

.ql-item:hover .ql-icon-box {
  transform: scale(1.08);
}

.ql-item:hover .ql-arrow {
  color: var(--primary);
}

.ql-item:hover .ql-chevron {
  transform: translateX(2px);
}

/* Categories full span styling */
.categories-full-span {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 20px 18px;
  box-shadow: var(--shadow-sm);
}

.categories-full-span .circular-categories-row {
  display: flex !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: space-between !important;
  scrollbar-width: none !important;
  gap: 0 !important;
  padding: 6px 0 0 !important;
  border-bottom: none !important;
  margin: 0 !important;
}

.categories-full-span .circular-categories-row::-webkit-scrollbar { display: none; }

.categories-full-span .circle-cat-card {
  flex: 1;
  min-width: 68px;
  max-width: 120px;
}

/* Flash Sales full span — remove picks-section top margin */
.grid-full-span.flash-sales-full {
  margin-top: 0;
}

/* Ensure home-layout-grid supports spanning children */
.home-layout-grid {
  align-items: start;
  row-gap: 16px;
}

/* ==================================================
   REBUILD: CENTER COLUMN SECTIONS (CATEGORIES, FLASH SALES, TOP PICKS)
   ================================================== */

/* Section 1: Shop By Category */
.shop-by-category-center {
  background: var(--bg-white);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  margin-top: 24px;
}

.circular-categories-row-center {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px 8px;
}

.circular-categories-row-center .circle-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 1 1 85px;
  max-width: 105px;
}

.circular-categories-row-center .circle-cat-icon {
  width: 72px;
  height: 72px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid transparent;
}

.circular-categories-row-center .circle-cat-card:hover .circle-cat-icon {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 8px 20px rgba(109, 40, 217, 0.2);
  border-color: var(--primary);
}

.circular-categories-row-center .circle-cat-card:hover .circle-cat-name {
  color: var(--primary) !important;
}

.circular-categories-row-center .circle-cat-emoji {
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.circular-categories-row-center .circle-cat-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dark);
  text-align: center;
  line-height: 1.3;
}

/* Section 2: Flash Sale */
.flash-sale-center {
  background: var(--bg-white);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  margin-top: 24px;
}

.flash-sale-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.flash-timer-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.flash-timer-box .time-block {
  background: #DC2626;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 0.9rem;
  font-weight: 700;
  min-width: 24px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
}

.flash-sales-grid-center {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.flash-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  cursor: pointer;
}

.flash-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(109, 40, 217, 0.12);
  border-color: var(--primary);
}

.flash-card-img-box {
  background: #f8f9fa;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.flash-card-discount {
  position: absolute;
  top: 8px;
  left: 8px;
  background: linear-gradient(135deg, #EF4444, #DC2626);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

.flash-wishlist-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--bg-white);
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
  padding: 0;
  outline: none;
}

.flash-wishlist-btn:hover {
  transform: scale(1.15);
}

.flash-card-emoji {
  font-size: 3.5rem;
  transition: transform 0.3s ease;
}

.flash-card:hover .flash-card-emoji {
  transform: scale(1.08);
}

.flash-quick-view {
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  background: rgba(109, 40, 217, 0.9);
  color: #ffffff;
  text-align: center;
  padding: 8px 0;
  font-size: 0.75rem;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 3;
}

.flash-card:hover .flash-quick-view {
  bottom: 0;
}

.flash-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}

.flash-card-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 34px;
}

.flash-card-rating-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
}

.flash-rating-stars {
  color: #F59E0B;
  font-weight: 700;
}

.flash-rating-count {
  color: var(--text-muted);
}

.flash-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.flash-current-price {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--primary);
}

.flash-old-price {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-decoration: line-through;
}

.flash-progress-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.flash-progress-bar {
  background: #E5E7EB;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}

.flash-progress-fill {
  background: linear-gradient(90deg, #F59E0B, #EF4444);
  height: 100%;
  border-radius: 3px;
}

.flash-progress-text {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-dark);
}

.flash-claim-badge {
  color: #DC2626;
}

/* Section 3: Top Picks For You */
.top-picks-center {
  background: var(--bg-white);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  margin-top: 24px;
}

.top-picks-grid-center {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.top-pick-card-grid {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  cursor: pointer;
}

.top-pick-card-grid:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(109, 40, 217, 0.12);
  border-color: var(--primary);
}

.top-pick-img-box {
  background: #f8f9fa;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.top-pick-discount-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: linear-gradient(135deg, #10B981, #059669);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.top-pick-emoji {
  font-size: 3.5rem;
  transition: transform 0.3s ease;
}

.top-pick-card-grid:hover .top-pick-emoji {
  transform: scale(1.08);
}

.top-pick-cart-btn {
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  background: var(--primary);
  color: #ffffff;
  border: none;
  text-align: center;
  padding: 8px 0;
  font-size: 0.75rem;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 3;
  cursor: pointer;
}

.top-pick-card-grid:hover .top-pick-cart-btn {
  bottom: 0;
}

.top-pick-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}

.top-pick-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 34px;
}

.top-pick-rating-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
}

.top-pick-stars {
  color: #F59E0B;
}

.top-pick-reviews {
  color: var(--text-muted);
}

.top-pick-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}

.top-pick-current-price {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--primary);
}

.top-pick-old-price {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-decoration: line-through;
}

@media (max-width: 1200px) {
  .flash-sales-grid-center, .top-picks-grid-center {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .flash-sales-grid-center, .top-picks-grid-center {
    grid-template-columns: repeat(2, 1fr);
  }
  .shop-by-category-center, .flash-sale-center, .top-picks-center {
    padding: 16px;
    border-radius: 12px;
  }
  .circular-categories-row-center .circle-cat-card {
    flex: 1 1 70px;
    max-width: 85px;
  }
  .circular-categories-row-center .circle-cat-icon {
    width: 56px;
    height: 56px;
  }
  .circular-categories-row-center .circle-cat-emoji {
    font-size: 1.6rem;
  }
}

/* ==================================================
   REBUILD NEW STYLES: 1440px LAYOUT COMPATIBILITY
   ================================================== */
.home-right-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
  width: 100%;
}

@media (max-width: 768px) {
  .trust-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .trust-strip {
    grid-template-columns: 1fr;
  }
}

/* Category Row: Desktop Grid vs Tablet/Mobile Scroll */
.circular-categories-row-horizontal {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE 10+ */
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x mandatory !important;
  gap: 16px !important;
  padding: 8px 4px !important;
  user-select: none !important;
  scroll-behavior: smooth !important;
}

.circular-categories-row-horizontal::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari, Opera */
}

.circular-categories-row-horizontal .circle-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px 4px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 0 0 auto !important;
  width: 90px !important;
  scroll-snap-align: start !important;
}

.circular-categories-row-horizontal .circle-cat-card:focus-visible {
  outline: 2px solid var(--primary, #7C3AED) !important;
  outline-offset: 4px !important;
  border-radius: 8px !important;
}

@media (max-width: 1024px) {
  .circular-categories-row-horizontal-redundant {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .circular-categories-row-horizontal-redundant::-webkit-scrollbar {
    display: none;
  }
}

.circular-categories-row-horizontal-redundant .circle-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px 4px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

@media (max-width: 1024px) {
  .circular-categories-row-horizontal-redundant .circle-cat-card {
    flex: 0 0 auto;
    width: 90px;
  }
}

.circular-categories-row-horizontal-redundant .circle-cat-icon {
  width: 72px;
  height: 72px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid transparent;
}

.circular-categories-row-horizontal-redundant .circle-cat-card:hover .circle-cat-icon {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 8px 20px rgba(109, 40, 217, 0.2);
  border-color: var(--primary);
}

.circular-categories-row-horizontal-redundant .circle-cat-card:hover .circle-cat-name {
  color: var(--primary) !important;
}

.circular-categories-row-horizontal-redundant .circle-cat-emoji {
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.circular-categories-row-horizontal .circle-cat-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dark);
  text-align: center;
  line-height: 1.3;
}

.trust-strip-fullwidth {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
  width: 100%;
}

/* Picks Section Card container */
.picks-section {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 4px 20px rgba(109, 40, 217, 0.02), 0 2px 8px rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-color);
}

/* Card Height Matching and Flex alignment */
.picks-card, .flash-card, .top-pick-card-grid {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.picks-card-body, .flash-card-body, .top-pick-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Responsive grid stacking for Upper Layout */
@media (max-width: 1279px) {
  .home-upper-layout {
    grid-template-columns: 1fr;
  }
  .home-right-sidebar {
    display: none !important;
  }
}
@media (max-width: 1023px) {
  .home-hero-grid {
    grid-template-columns: 1fr;
  }
  .home-cat-sidebar {
    display: none !important;
  }
}

/* Product Card Grid (6 Columns) */
.grid-6-cols {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

@media (max-width: 1200px) {
  .grid-6-cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .grid-6-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Flash Sales Slider Styles */
.flash-sales-slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.flash-sales-slider-container::before,
.flash-sales-slider-container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.flash-sales-slider-container::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-white) 0%, rgba(255, 255, 255, 0) 100%);
}

.flash-sales-slider-container::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-white) 0%, rgba(255, 255, 255, 0) 100%);
}

.flash-sales-slider-track {
  width: 100%;
  overflow: hidden;
  cursor: grab;
  user-select: none;
}

.flash-sales-slider-track:active {
  cursor: grabbing;
}

.flash-sales-slider-inner {
  display: flex;
  gap: 16px;
  width: max-content;
  will-change: transform;
}

.flash-sales-slider-inner .flash-card {
  width: var(--flash-card-width, 170px);
  flex: 0 0 var(--flash-card-width, 170px);
  box-sizing: border-box;
}

.flash-sales-slider-inner .flash-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}



/* Theme Toggle Button Styles */
.theme-toggle-btn {
  font-size: 1.2rem;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  color: var(--text-dark);
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  padding: 0;
  outline: none;
}

.theme-toggle-btn:hover {
  background: var(--bg-light);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.theme-toggle-btn svg {
  transition: transform 0.5s ease, opacity 0.3s ease;
  fill: none;
  stroke: currentColor;
}

.theme-toggle-btn:hover svg {
  transform: rotate(20deg) scale(1.1);
}

/* Toggle Sun/Moon display depending on active theme */
:root[data-theme="dark"] .theme-icon-moon {
  display: none !important;
}
:root[data-theme="dark"] .theme-icon-sun {
  display: inline-block !important;
  color: var(--accent);
}
:root:not([data-theme="dark"]) .theme-icon-moon {
  display: inline-block !important;
  color: var(--primary);
}
:root:not([data-theme="dark"]) .theme-icon-sun {
  display: none !important;
}

/* General Dark Theme adjustment overrides */
:root[data-theme="dark"] .glass {
  background: rgba(26, 26, 30, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

:root[data-theme="dark"] .main-header {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .circle-cat-icon {
  background: var(--bg-white) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

:root[data-theme="dark"] .search-suggestions-box {
  background: var(--bg-white) !important;
  border: 1px solid var(--border-color) !important;
}

:root[data-theme="dark"] .notifications-dropdown-box {
  background: var(--bg-white) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-lg) !important;
}

:root[data-theme="dark"] .floating-cat-btn {
  background: var(--primary) !important;
  color: #fff !important;
}

/* Ensure background filters or overlaps look correct in dark mode */
:root[data-theme="dark"] .hps-product-mini-card,
:root[data-theme="dark"] .app-phone-prod-card,
:root[data-theme="dark"] .flash-card,
:root[data-theme="dark"] .flash-wishlist-btn {
  background: var(--bg-white) !important;
}

:root[data-theme="dark"] .hps-cat-item-circle,
:root[data-theme="dark"] .hps-search-bar,
:root[data-theme="dark"] .app-phone-search {
  background: var(--bg-white) !important;
}

:root[data-theme="dark"] .flash-card-img-box {
  background: var(--bg-light) !important;
}

:root[data-theme="dark"] .sidebar-link-panel {
  background: var(--bg-white) !important;
  border: 1px solid var(--border-color) !important;
}

:root[data-theme="dark"] .admin-sidebar, 
:root[data-theme="dark"] .seller-sidebar, 
:root[data-theme="dark"] .customer-sidebar {
  background: var(--bg-white) !important;
  border-right: 1px solid var(--border-color) !important;
}

:root[data-theme="dark"] .admin-stat-card, 
:root[data-theme="dark"] .seller-stat-card,
:root[data-theme="dark"] .dashboard-card {
  background: var(--bg-white) !important;
  border: 1px solid var(--border-color) !important;
}

:root[data-theme="dark"] select,
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] textarea {
  background: var(--bg-white) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .ai-chat-widget-box {
  background: var(--bg-white) !important;
  border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .ai-chat-input {
  background: var(--bg-light) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .ai-bubble-btn {
  background: var(--primary) !important;
}

:root[data-theme="dark"] .btn-secondary-hero {
  background: var(--bg-white) !important;
  color: var(--text-dark) !important;
  border: 1px solid var(--border-color) !important;
}

:root[data-theme="dark"] .hero-slider-box {
  background: linear-gradient(135deg, #2D1A4D 0%, #1A1230 100%) !important;
}

:root[data-theme="dark"] .hero-title {
  color: #F3F4F6 !important;
}

:root[data-theme="dark"] .hero-desc {
  color: #D1D5DB !important;
}

:root[data-theme="dark"] .app-promo-banner {
  background: linear-gradient(135deg, #1E1B4B 0%, #311042 100%) !important;
}

/* .app-promo-card replaced by .apc-wrap (see Premium App Promo Card v2.0 section) */

:root[data-theme="dark"] .top-nav-bar {
  background: #121214 !important;
  border-bottom: 1px solid var(--border-color) !important;
}

:root[data-theme="dark"] .main-header {
  background: var(--bg-white) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

:root[data-theme="dark"] .category-nav-row {
  background: #181426 !important;
  border-bottom: 1px solid #2D2544 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

:root[data-theme="dark"] .nav-menu-links a {
  color: #E2E8F0 !important;
}

:root[data-theme="dark"] .nav-menu-links a:hover {
  color: #A78BFA !important;
}

:root[data-theme="dark"] .nav-menu-links a.active {
  color: #C084FC !important;
}

:root[data-theme="dark"] .nav-menu-links a::after {
  background: linear-gradient(90deg, #a78bfa, #c084fc) !important;
}

:root[data-theme="dark"] .home-cat-sidebar {
  background: var(--bg-white) !important;
  border: 1px solid var(--border-color) !important;
}

:root[data-theme="dark"] .home-cat-item {
  color: var(--text-dark) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

:root[data-theme="dark"] .home-cat-item:hover {
  background: var(--bg-light) !important;
}


/* ==================================================
   WORLD-CLASS ENTERPRISE PRODUCT DETAIL PAGE (PDP)
   ================================================== */
.pdp-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 32px;
  font-family: var(--font-sans);
}

.pdp-breadcrumb {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.pdp-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition-fast);
}

.pdp-breadcrumb a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.pdp-three-col-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pdp-right-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 993px) {
  .pdp-three-col-layout {
    display: grid;
    grid-template-columns: 32% 43% 25%;
    gap: 24px;
    align-items: start;
  }
  .pdp-left-column {
    position: sticky;
    top: 100px;
  }
  .pdp-right-column {
    position: sticky;
    top: 100px;
  }
}

/* Card Styling for PDP Redesign */
.pdp-gallery-card,
.pdp-info-card,
.pdp-delivery-card,
.pdp-seller-card,
.pdp-return-card,
.pdp-accordion-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.pdp-gallery-card {
  padding: 16px;
}

.pdp-info-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Buy Box buttons alignment */
.pdp-actions-row { position: relative; z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 10px;
}

.pdp-actions-row button {
  padding: 14px;
  font-size: 0.95rem;
  border-radius: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.pdp-btn-buy {
  background: var(--primary);
  color: #fff;
  border: none;
}
.pdp-btn-buy:hover {
  background: var(--secondary);
  transform: translateY(-1px);
}

.pdp-btn-cart {
  background: var(--bg-white);
  color: var(--primary);
  border: 2px solid var(--primary);
}
.pdp-btn-cart:hover {
  background: rgba(109, 40, 217, 0.05);
  transform: translateY(-1px);
}

/* Sidebar cards elements */
.pdp-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pdp-card-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pdp-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
}

.pdp-card-row-label {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.pdp-select-custom {
  border: none;
  font-weight: 700;
  color: var(--primary);
  background: transparent;
  cursor: pointer;
  outline: none;
  font-size: 0.82rem;
  padding: 2px 4px;
  text-align: right;
  direction: rtl;
}

/* Seller Card Styles */
.pdp-seller-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.pdp-verified-badge {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.pdp-seller-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.pdp-seller-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  border: 1px solid var(--border-color);
}

.pdp-seller-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
  cursor: pointer;
  transition: var(--transition-fast);
}
.pdp-seller-name:hover {
  color: var(--primary);
  text-decoration: underline;
}

.pdp-seller-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: var(--bg-light);
  padding: 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

.pdp-seller-metric-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pdp-seller-metric-label {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.pdp-seller-metrics strong {
  font-size: 0.8rem;
  color: var(--text-dark);
  font-weight: 700;
}

.pdp-seller-actions {
  display: flex;
  gap: 12px;
}

/* Service & Guarantee Styles */
.pdp-return-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pdp-return-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.pdp-return-item svg {
  color: var(--primary);
  flex-shrink: 0;
}

/* Mobile responsive style */
@media (max-width: 992px) {
  .pdp-actions-row { position: relative; z-index: 50;
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.pdp-main-preview {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-sm);
}

.pdp-main-image {
  font-size: 10rem;
  transition: transform 0.1s ease-out;
  cursor: zoom-in;
  user-select: none;
}

/* Only enable zoom on desktop where hover is fine */
@media (hover: hover) {
  .pdp-main-preview:hover .pdp-main-image {
    transform: scale(2);
  }
}

.pdp-thumbnails {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.pdp-thumbnails::-webkit-scrollbar {
  height: 4px;
}

.pdp-thumbnails::-webkit-scrollbar-thumb {
  background: var(--bg-gray);
  border-radius: var(--radius-full);
}

.pdp-thumb-item {
  width: 68px;
  height: 68px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border-color);
  background: var(--bg-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  flex-shrink: 0;
  position: relative;
}

.pdp-thumb-item.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(109, 40, 217, 0.15);
}

.pdp-thumb-item:hover {
  border-color: var(--primary);
}

.pdp-thumb-video-overlay {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Center Info Column styles */
.pdp-info-col {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
}

.pdp-category-badge {
  background: var(--secondary-light);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pdp-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 12px 0 8px 0;
  line-height: 1.3;
}

.pdp-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 0.82rem;
}

.pdp-stars {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
}

.pdp-rating-count {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.pdp-rating-count:hover {
  text-decoration: underline;
}

.pdp-divider {
  color: var(--border-color);
  font-weight: 300;
}

.pdp-sold-count {
  color: var(--text-muted);
}

/* Live Purchase Activity (Section C) */
.pdp-live-activity-box {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.pdp-pulse-badge {
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.15);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: #10B981;
  border-radius: 50%;
  display: inline-block;
  animation: pdpPulse 1.8s infinite ease-in-out;
}

@keyframes pdpPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.pdp-urgency-badge {
  background: rgba(239, 68, 68, 0.08);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.15);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  animation: pdpShake 5s infinite;
}

@keyframes pdpShake {
  0%, 100% { transform: rotate(0); }
  98% { transform: rotate(0); }
  99% { transform: rotate(-3deg); }
  99.5% { transform: rotate(3deg); }
}

.pdp-brand-info {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.pdp-stock-status-green {
  color: #059669;
  font-weight: 700;
  background: #D1FAE5;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
}

.pdp-stock-status-red {
  color: var(--danger);
  font-weight: 700;
  background: #FEE2E2;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
}

.pdp-hr {
  border: 0;
  border-top: 1px solid var(--border-color);
  margin: 16px 0;
}

/* Variant Selection */
.pdp-variant-section {
  margin-bottom: 16px;
}

.pdp-variant-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.pdp-selected-label {
  font-weight: 500;
  color: var(--primary);
}

.pdp-swatch-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pdp-swatch-btn {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  transition: var(--transition-fast);
}

.pdp-swatch-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.pdp-swatch-btn.active {
  border-color: var(--primary);
  background: var(--secondary-light);
  color: var(--primary);
  box-shadow: 0 0 0 2px rgba(109, 40, 217, 0.15);
}

/* Product Guarantees (Section D) */
.pdp-guarantees-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.pdp-guarantee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  transition: var(--transition-fast);
}

.pdp-guarantee-item:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
}

.pdp-guarantee-icon {
  font-size: 1.4rem;
}

.pdp-guarantee-item h5 {
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-dark);
}

.pdp-guarantee-item p {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin: 2px 0 0 0;
}

/* Right Buy Box column styles */
.pdp-buy-box-col {
  grid-column: 3;
  grid-row: 1 / span 2;
  position: sticky;
  top: calc(var(--scroll-offset) + 16px);
}

.pdp-buy-box-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.pdp-buy-box-card:hover {
  box-shadow: var(--shadow-md);
}

.pdp-price-box {
  background: var(--bg-light);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.pdp-price-amount {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--primary);
}

.pdp-compare-price {
  font-size: 1.1rem;
  color: var(--text-muted);
  text-decoration: line-through;
}

.pdp-discount-badge {
  background: #FEE2E2;
  color: var(--danger);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.pdp-savings-label {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.pdp-buy-box-row {
  display: flex;
  justify-content: space-between;
}

.pdp-qty-selector {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 2px;
  background: var(--bg-light);
}

.pdp-qty-btn {
  background: var(--bg-white);
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.pdp-qty-btn:hover {
  background: var(--primary);
  color: #fff;
}

.pdp-qty-val {
  width: 36px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark);
}

/* Delivery Widget styles */
.pdp-delivery-widget select {
  font-size: 0.8rem;
  color: var(--primary);
  font-weight: 700;
  border: none;
  background: transparent;
  outline: none;
  cursor: pointer;
}

.pdp-verified-seller-badge {
  background: var(--secondary-light);
  color: var(--primary);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(109, 40, 217, 0.15);
}

.pdp-seller-metrics-grid div {
  background: var(--bg-light);
  border-radius: 6px;
  padding: 6px 8px;
  text-align: center;
}

/* Tab System styles */
.pdp-tabs-container {
  grid-column: 1 / span 2;
  grid-row: 2;
  margin-top: 24px;
}

.pdp-tab-header {
  display: flex;
  border-bottom: 2px solid var(--bg-gray);
  overflow-x: auto;
  gap: 12px;
}

.pdp-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-fast);
}

.pdp-tab-btn:hover, .pdp-tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.pdp-tab-content-panel {
  padding-top: 16px;
}

.pdp-tab-pane {
  display: none;
}

.pdp-tab-pane.active {
  display: block;
}

/* FAQ Accordion styles */
.pdp-faq-item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  margin-bottom: 8px;
  overflow: hidden;
}

.pdp-faq-question {
  padding: 12px 16px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--transition-fast);
  background: var(--bg-light);
  user-select: none;
}

.pdp-faq-question:hover {
  color: var(--primary);
}

.pdp-faq-answer {
  padding: 0 16px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), padding 0.3s ease;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.pdp-faq-item.active .pdp-faq-answer {
  padding: 12px 16px;
  max-height: 200px;
  border-top: 1px solid var(--border-color);
}

.pdp-faq-icon {
  transition: transform 0.2s ease;
  font-weight: 400;
}

.pdp-faq-item.active .pdp-faq-icon {
  transform: rotate(180deg);
}

/* Coupon Banner styles */
.pdp-coupon-banner {
  background: linear-gradient(135deg, var(--secondary-light) 0%, #FAF9F5 100%);
  border: 1.5px dashed var(--primary);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
}

:root[data-theme="dark"] .pdp-coupon-banner {
  background: linear-gradient(135deg, #2D1A4D 0%, #1A1A1E 100%) !important;
  border-color: var(--primary);
}

.pdp-coupon-flash {
  background: var(--primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 4px;
}

.pdp-coupon-timer {
  text-align: right;
}

.pdp-countdown-clock {
  font-family: monospace;
  font-weight: 700;
  color: var(--danger);
  font-size: 1rem;
  background: #FEE2E2;
  padding: 4px 10px;
  border-radius: 6px;
  margin-top: 4px;
}

/* Seller detailed Card styles */
.pdp-section-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.pdp-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 20px;
  font-family: var(--font-title);
  border-left: 4px solid var(--primary);
  padding-left: 10px;
}

.pdp-seller-profile-card {
  background: var(--bg-light);
  border-radius: var(--radius-md);
  padding: 20px;
}

.pdp-spc-header {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 16px;
}

.pdp-spc-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}

.pdp-spc-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.pdp-spc-metric-item {
  text-align: center;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
}

.spc-metric-val {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--primary);
}

.spc-metric-label {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Frequently Bought Together (FBT) styles */
.pdp-fbt-box {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 24px;
  align-items: center;
}

.pdp-fbt-items-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.pdp-fbt-product-item {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 250px;
  flex: 1 1 200px;
}

.fbt-img-wrap {
  width: 50px;
  height: 50px;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fbt-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fbt-checkbox-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-dark);
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.fbt-prod-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fbt-prod-price {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
}

.pdp-fbt-plus {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--text-muted);
}

.pdp-fbt-action-card {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
}

.fbt-total-title {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.fbt-total-val {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary);
  margin-top: 4px;
}

/* Reviews Summary Card (Section E) styles */
.pdp-review-summary-container {
  display: grid;
  grid-template-columns: 180px 1fr 1.2fr;
  gap: 20px;
  background: var(--bg-light);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
}

.pdp-review-summary-details {
  border-right: 1px solid var(--border-color);
  padding-right: 16px;
}

.pdp-review-summary-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  border-right: 1px solid var(--border-color);
  padding-right: 16px;
}

.pdp-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
}

.pdp-progress-label {
  width: 110px;
  color: var(--text-dark);
  font-weight: 600;
}

.pdp-progress-bar-wrap {
  flex-grow: 1;
  height: 8px;
  background: var(--bg-gray);
  border-radius: 4px;
  overflow: hidden;
}

.pdp-progress-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
}

.pdp-progress-bar-fill.pdp-progress-neutral {
  background: #94A3B8;
}

.pdp-progress-bar-fill.pdp-progress-negative {
  background: var(--danger);
}

.pdp-progress-val {
  width: 30px;
  text-align: right;
  font-weight: 700;
  color: var(--text-muted);
}

.pdp-review-summary-ai {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(109, 40, 217, 0.03);
  padding: 10px;
  border-radius: var(--radius-sm);
}

/* Buyer Uploaded Media styles */
.pdp-review-media-gallery {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.pdp-rmg-item {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: var(--transition-fast);
}

.pdp-rmg-item:hover {
  border-color: var(--primary);
  transform: scale(1.05);
}

.rmg-play-icon {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 0.55rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  padding: 1px 4px;
  border-radius: 3px;
}

.pdp-rmg-video .rmg-play-icon {
  background: var(--danger);
}

/* Individual Reviews styles */
.pdp-review-card {
  border-bottom: 1px solid var(--border-color);
  padding: 16px 0;
}

.pdp-review-card:last-child {
  border-bottom: none;
}

.pdp-rc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pdp-rc-buyer {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark);
}

.pdp-rc-verified {
  font-size: 0.68rem;
  color: #059669;
  font-weight: 600;
  background: #D1FAE5;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

.pdp-rc-stars {
  color: var(--accent);
  font-size: 0.75rem;
}

.pdp-rc-date {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.pdp-rc-comment {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 8px 0;
}

.pdp-rc-helpful {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-color);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.pdp-rc-helpful:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Similar Products Carousel styles */
.pdp-carousel-nav {
  display: flex;
  gap: 6px;
}

.pdp-carousel-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-white);
  color: var(--text-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.pdp-carousel-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.pdp-carousel-track-container {
  overflow: hidden;
  width: 100%;
}

.pdp-carousel-track {
  display: flex;
  gap: 16px;
  transition: transform 0.4s ease-in-out;
  /* Scroll behavior fallback for touch screens */
  overflow-x: auto;
  scroll-behavior: smooth;
}

.pdp-carousel-track::-webkit-scrollbar {
  display: none;
}

.pdp-carousel-track .deal-card-center,
.pdp-carousel-track .picks-card {
  flex-shrink: 0;
}

/* Recently Viewed Products styles */
.pdp-recent-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

/* Sticky Mobile Bottom Bar (Section G) styles */
.pdp-mobile-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-white);
  border-top: 1px solid var(--border-color);
  padding: 10px 16px;
  justify-content: space-between;
  align-items: center;
  z-index: 9999;
  box-shadow: 0 -4px 10px rgba(0,0,0,0.06);
}

.sticky-mobile-price-col {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.sm-price-label {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.sm-price-amount {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary);
}

.sticky-mobile-actions {
  display: flex;
  gap: 8px;
}

.sm-action-btn {
  padding: 8px 16px;
  font-size: 0.85rem;
  border-radius: 8px;
  font-weight: 700;
}

/* RESPONSIVE OVERRIDES FOR PDP */
@media (max-width: 992px) {
  .pdp-three-col-layout {
    grid-template-columns: 320px 1fr;
  }
  .pdp-gallery-col {
    grid-column: 1;
    grid-row: 1;
  }
  .pdp-info-col {
    grid-column: 2;
    grid-row: 1;
  }
  .pdp-buy-box-col {
    grid-column: span 2;
    grid-row: auto;
    position: static;
  }
  .pdp-tabs-container {
    grid-column: span 2;
    grid-row: auto;
  }
  .pdp-spc-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .pdp-recent-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .pdp-three-col-layout {
    grid-template-columns: 1fr;
  }
  .pdp-gallery-col {
    grid-column: auto;
    grid-row: auto;
    position: static;
  }
  .pdp-info-col {
    grid-column: auto;
    grid-row: auto;
  }
  .pdp-buy-box-col {
    grid-column: auto;
    grid-row: auto;
  }
  .pdp-tabs-container {
    grid-column: auto;
    grid-row: auto;
  }
  .pdp-recent-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .pdp-fbt-box {
    grid-template-columns: 1fr;
  }
  .pdp-fbt-action-card {
    max-width: 100%;
  }
  .pdp-review-summary-container {
    grid-template-columns: 1fr;
  }
  .pdp-review-summary-details {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
    padding-right: 0;
  }
  .pdp-review-summary-progress {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
    padding-right: 0;
  }
  /* Show sticky mobile bar on smaller screens */
  .pdp-mobile-sticky-bar {
    display: flex;
  }
  .pdp-container {
    padding-bottom: 80px; /* Space for mobile bar */
  }
}

@media (max-width: 480px) {
  .pdp-recent-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ==========================================
   CART / CHECKOUT / ORDER FLOW — PREMIUM CSS
   ========================================== */

/* ---- Shared Page Wrapper ---- */
.cart-page-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px 48px;
}

/* ---- Progress Stepper ---- */
.checkout-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px 40px;
  box-shadow: var(--shadow-sm);
}
.stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 80px;
}
.stepper-step span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  font-family: var(--font-title);
  letter-spacing: 0.02em;
}
.stepper-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-gray);
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: var(--transition);
}
.stepper-step.active .stepper-circle {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.15);
}
.stepper-step.active span { color: var(--primary); }
.stepper-step.completed .stepper-circle {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.stepper-step.completed span { color: var(--success); }
.stepper-line {
  flex: 1;
  height: 2px;
  background: var(--border-color);
  margin: 0 8px;
  margin-bottom: 22px;
  border-radius: 2px;
  min-width: 40px;
}
.stepper-line.active {
  background: linear-gradient(90deg, var(--success), var(--primary));
}

/* ---- Cart Tab Toggle ---- */
.cart-tab-toggle {
  display: flex;
  gap: 4px;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 20px;
  width: fit-content;
}
.cart-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: calc(var(--radius-md) - 4px);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.cart-tab-btn.active {
  background: var(--bg-white);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.cart-tab-badge {
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  font-weight: 700;
}

/* ---- Cart Main Layout ---- */
.cart-main-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}
.cart-items-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Cart Item Card ---- */
.cart-item-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.cart-item-card:hover { border-color: rgba(109,40,217,0.2); box-shadow: var(--shadow-md); }
.cart-item-img { width: 80px; height: 80px; border-radius: var(--radius-sm); background: var(--bg-light); display: flex; align-items: center; justify-content: center; font-size: 2.4rem; flex-shrink: 0; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-title { font-size: 0.9rem; font-weight: 700; color: var(--text-dark); margin: 0 0 3px 0; font-family: var(--font-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item-seller { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 8px; }
.cart-item-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cart-item-action-link { font-size: 0.75rem; color: var(--primary); text-decoration: none; cursor: pointer; font-weight: 600; background: none; border: none; padding: 0; transition: var(--transition-fast); }
.cart-item-action-link:hover { opacity: 0.7; }
.cart-item-action-link.danger { color: var(--danger); }
.cart-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; }
.cart-item-price { font-size: 1.05rem; font-weight: 800; color: var(--text-dark); font-family: var(--font-title); }
.cart-item-original { font-size: 0.75rem; color: var(--text-muted); text-decoration: line-through; }

/* ---- Quantity Control ---- */
.qty-control { display: flex; align-items: center; border: 1.5px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-white); }
.qty-btn { width: 32px; height: 32px; border: none; background: var(--bg-light); color: var(--text-dark); font-size: 1rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); }
.qty-btn:hover { background: var(--secondary-light); color: var(--primary); }
.qty-value { min-width: 36px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--text-dark); border-left: 1.5px solid var(--border-color); border-right: 1.5px solid var(--border-color); }

/* ---- Saved Item Card ---- */
.saved-item-card { background: var(--bg-white); border: 1px dashed var(--border-color); border-radius: var(--radius-md); padding: 14px 16px; display: flex; align-items: center; gap: 14px; transition: var(--transition); }
.saved-item-img { width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--bg-light); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; flex-shrink: 0; }
.saved-item-info { flex: 1; }
.saved-item-title { font-size: 0.85rem; font-weight: 600; color: var(--text-dark); margin-bottom: 4px; }
.saved-item-price { font-size: 0.85rem; font-weight: 700; color: var(--primary); }
.move-to-cart-btn { padding: 7px 14px; border: 2px solid var(--primary); border-radius: var(--radius-sm); background: transparent; color: var(--primary); font-size: 0.75rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: var(--transition-fast); font-family: var(--font-sans); }
.move-to-cart-btn:hover { background: var(--primary); color: #fff; }

/* ---- Empty Cart State ---- */
.cart-empty-state { text-align: center; padding: 60px 24px; background: var(--bg-white); border-radius: var(--radius-md); border: 1px dashed var(--border-color); }
.cart-empty-icon { font-size: 3.5rem; margin-bottom: 16px; opacity: 0.5; }
.cart-empty-state h3 { font-family: var(--font-title); font-size: 1.1rem; color: var(--text-dark); margin-bottom: 8px; }
.cart-empty-state p { font-size: 0.85rem; color: var(--text-muted); }

/* ---- Delivery Estimate ---- */
.cart-delivery-estimate { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(109,40,217,0.04)); border: 1px solid rgba(16,185,129,0.25); border-radius: var(--radius-md); padding: 14px 18px; }
.delivery-est-icon { font-size: 1.6rem; }
.delivery-est-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.delivery-est-label { font-size: 0.82rem; color: var(--text-dark); font-weight: 600; }
.delivery-est-date { font-size: 0.75rem; color: var(--text-muted); }
.delivery-est-free { background: var(--success); color: #fff; font-size: 0.7rem; font-weight: 800; padding: 3px 10px; border-radius: var(--radius-full); letter-spacing: 0.05em; }

/* ---- Cart Recommendations ---- */
.cart-recommendations { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 16px 20px; box-shadow: var(--shadow-sm); }
.cart-rec-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cart-rec-header h4 { font-family: var(--font-title); font-size: 0.9rem; color: var(--text-dark); margin: 0; }
.view-all-link { font-size: 0.75rem; color: var(--primary); font-weight: 600; text-decoration: none; }
.cart-rec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cart-rec-card { border-radius: var(--radius-sm); border: 1px solid var(--border-color); overflow: hidden; cursor: pointer; transition: var(--transition); background: var(--bg-white); text-align: center; padding-bottom: 8px; }
.cart-rec-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cart-rec-img { width: 100%; aspect-ratio: 1; background: var(--bg-light); display: flex; align-items: center; justify-content: center; font-size: 2rem; padding: 8px 0; }
.cart-rec-name { font-size: 0.72rem; color: var(--text-dark); font-weight: 600; padding: 4px 8px 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cart-rec-price { font-size: 0.78rem; color: var(--primary); font-weight: 700; padding: 0 8px; }

/* ---- Summary Card ---- */
.cart-summary-col { position: relative; }
.cart-summary-card { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 22px; box-shadow: var(--shadow-md); }
.cart-summary-title { font-family: var(--font-title); font-size: 1rem; font-weight: 700; color: var(--text-dark); margin: 0 0 16px 0; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); }
.sticky-summary { position: sticky; top: calc(var(--scroll-offset) + 16px); }

/* ---- Coupon ---- */
.coupon-section { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border-color); }
.coupon-input-row { display: flex; gap: 8px; }
.coupon-field { flex: 1; padding: 9px 12px; border: 1.5px solid var(--border-color); border-radius: var(--radius-sm); font-size: 0.82rem; font-family: var(--font-sans); color: var(--text-dark); background: var(--bg-light); transition: var(--transition-fast); outline: none; }
.coupon-field:focus { border-color: var(--primary); background: var(--bg-white); }
.coupon-apply-btn { padding: 9px 16px; background: var(--primary); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 700; cursor: pointer; font-family: var(--font-sans); transition: var(--transition-fast); white-space: nowrap; }
.coupon-apply-btn:hover { background: var(--primary-hover); }
.coupon-message { margin-top: 6px; font-size: 0.75rem; font-weight: 600; min-height: 18px; }
.coupon-message.success { color: var(--success); }
.coupon-message.error { color: var(--danger); }

/* ---- Price Breakdown ---- */
.cart-price-breakdown { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.price-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.83rem; color: var(--text-muted); }
.price-divider { height: 1px; background: var(--border-color); margin: 4px 0; }
.total-row { font-size: 1rem; font-weight: 800; color: var(--text-dark); }
.total-row span:last-child { color: var(--primary); }
.discount-row { color: var(--success); }
.discount-value { color: var(--success); font-weight: 700; }

/* ---- Guarantees ---- */
.cart-guarantees { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 16px; padding: 12px; background: var(--bg-light); border-radius: var(--radius-sm); }
.guarantee-item { font-size: 0.7rem; color: var(--success); font-weight: 600; }
.cart-checkout-btn { width: 100%; padding: 14px; justify-content: center; font-size: 0.95rem; margin-bottom: 10px; border-radius: var(--radius-sm); }
.cart-continue-btn { width: 100%; padding: 11px; justify-content: center; font-size: 0.85rem; border-radius: var(--radius-sm); }

/* ==========================================
   CHECKOUT PAGE
   ========================================== */
.checkout-main-layout { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.checkout-forms-col { display: flex; flex-direction: column; gap: 16px; }
.checkout-summary-col { position: relative; }
.checkout-section-card { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 20px 24px; box-shadow: var(--shadow-sm); }
.checkout-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.checkout-section-header h3 { font-family: var(--font-title); font-size: 0.95rem; font-weight: 700; color: var(--text-dark); margin: 0; }
.checkout-section-title { font-family: var(--font-title); font-size: 0.95rem; font-weight: 700; color: var(--text-dark); margin: 0 0 16px 0; }
.add-address-btn { padding: 7px 14px; border: 2px solid var(--primary); border-radius: var(--radius-sm); background: transparent; color: var(--primary); font-size: 0.78rem; font-weight: 700; cursor: pointer; font-family: var(--font-sans); transition: var(--transition-fast); }
.add-address-btn:hover { background: var(--primary); color: #fff; }
.address-book-item { border: 2px solid var(--border-color); border-radius: var(--radius-sm); padding: 14px 16px; cursor: pointer; transition: var(--transition); display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.address-book-item.active { border-color: var(--primary); background: rgba(109,40,217,0.03); }
.address-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-color); flex-shrink: 0; margin-top: 3px; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); position: relative; }
.address-book-item.active .address-radio { border-color: var(--primary); background: var(--primary); }
.address-book-item.active .address-radio::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.address-info { flex: 1; }
.address-label-tag { font-size: 0.7rem; font-weight: 700; color: var(--primary); background: var(--secondary-light); padding: 2px 8px; border-radius: var(--radius-full); display: inline-block; margin-bottom: 4px; text-transform: uppercase; }
.address-name { font-size: 0.85rem; font-weight: 700; color: var(--text-dark); margin-bottom: 2px; }
.address-detail { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }
.address-actions { display: flex; gap: 8px; margin-top: 8px; }
.address-edit-link { font-size: 0.72rem; color: var(--primary); font-weight: 600; cursor: pointer; background: none; border: none; padding: 0; }
.delivery-method-grid { display: flex; flex-direction: column; gap: 10px; }
.delivery-method-card { border: 2px solid var(--border-color); border-radius: var(--radius-sm); padding: 14px 16px; cursor: pointer; display: flex; align-items: center; gap: 14px; transition: var(--transition); }
.delivery-method-card.active { border-color: var(--primary); background: rgba(109,40,217,0.03); }
.delivery-method-card:hover { border-color: rgba(109,40,217,0.3); }
.dm-icon { font-size: 1.5rem; }
.dm-info { flex: 1; }
.dm-name { font-size: 0.88rem; font-weight: 700; color: var(--text-dark); }
.dm-days { font-size: 0.75rem; color: var(--success); font-weight: 600; }
.dm-courier { font-size: 0.72rem; color: var(--text-muted); }
.dm-price { font-size: 0.9rem; font-weight: 800; color: var(--primary); }
.dm-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-color); transition: var(--transition-fast); flex-shrink: 0; position: relative; }
.delivery-method-card.active .dm-radio { border-color: var(--primary); background: var(--primary); }
.delivery-method-card.active .dm-radio::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.payment-methods-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.payment-method-card { border: 2px solid var(--border-color); border-radius: var(--radius-sm); padding: 14px 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 70px; transition: var(--transition); background: var(--bg-white); position: relative; }
.payment-method-card.active { border-color: var(--primary); background: rgba(109,40,217,0.04); box-shadow: 0 0 0 3px rgba(109,40,217,0.1); }
.payment-method-card:hover { border-color: rgba(109,40,217,0.35); }
.pm-logo { font-size: 0.82rem; font-weight: 800; text-align: center; line-height: 1.2; }
.esewa-logo { color: #52B043; }
.khalti-logo { color: #5C2D91; }
.imepay-logo { color: #E30A17; }
.connectips-logo { color: #0075C9; }
.fonepay-logo { color: #E41E20; }
.cod-logo { color: var(--text-dark); font-size: 0.72rem; }
.pm-radio-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-color); transition: var(--transition-fast); position: relative; }
.payment-method-card.active .pm-radio-dot { border-color: var(--primary); background: var(--primary); }
.payment-method-card.active .pm-radio-dot::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.payment-method-card.esewa { border-top: 3px solid #52B043; }
.payment-method-card.khalti { border-top: 3px solid #5C2D91; }
.payment-method-card.imepay { border-top: 3px solid #E30A17; }
.payment-method-card.connectips { border-top: 3px solid #0075C9; }
.payment-method-card.fonepay { border-top: 3px solid #E41E20; }
.payment-method-card.cod { border-top: 3px solid var(--accent); }
.payment-method-card.wallet { border-top: 3px solid #7c3aed; }
.wallet-logo { color: #7c3aed; font-size: 0.72rem; }
.order-notes-textarea { width: 100%; min-height: 88px; padding: 12px; border: 1.5px solid var(--border-color); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 0.83rem; color: var(--text-dark); background: var(--bg-light); resize: vertical; outline: none; transition: var(--transition-fast); box-sizing: border-box; }
.order-notes-textarea:focus { border-color: var(--primary); background: var(--bg-white); }
.gift-option-label { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.83rem; font-weight: 600; color: var(--text-dark); cursor: pointer; }
.gift-option-label input { accent-color: var(--primary); width: 16px; height: 16px; }
.chk-item-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-color); }
.chk-item-img { width: 48px; height: 48px; background: var(--bg-light); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
.chk-item-info { flex: 1; min-width: 0; }
.chk-item-name { font-size: 0.8rem; font-weight: 600; color: var(--text-dark); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chk-item-qty { font-size: 0.72rem; color: var(--text-muted); }
.chk-item-price { font-size: 0.85rem; font-weight: 700; color: var(--text-dark); flex-shrink: 0; }

/* ==========================================
   ORDER SUCCESS PAGE
   ========================================== */
.order-success-wrapper { max-width: 680px; margin: 0 auto; padding: 40px 24px 60px; text-align: center; }
.success-animation-container { margin-bottom: 24px; }
.success-circle { width: 90px; height: 90px; margin: 0 auto; border-radius: 50%; background: linear-gradient(135deg, var(--success), #059669); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 12px rgba(16,185,129,0.12), 0 0 0 24px rgba(16,185,129,0.06); animation: successPulse 2s ease-in-out infinite; }
@keyframes successPulse { 0%, 100% { box-shadow: 0 0 0 12px rgba(16,185,129,0.12), 0 0 0 24px rgba(16,185,129,0.06); } 50% { box-shadow: 0 0 0 16px rgba(16,185,129,0.1), 0 0 0 32px rgba(16,185,129,0.04); } }
.success-checkmark { width: 44px; height: 44px; }
.success-checkmark-circle { stroke: rgba(255,255,255,0.3); stroke-width: 2; }
.success-checkmark-check { stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: drawCheck 0.6s 0.3s ease forwards; }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
.success-title { font-family: var(--font-title); font-size: 1.8rem; font-weight: 800; color: var(--text-dark); margin: 0 0 8px 0; }
.success-subtitle { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 28px; }
.success-order-card { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 20px 24px; margin-bottom: 16px; text-align: left; box-shadow: var(--shadow-sm); }
.success-order-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.success-meta-label { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; }
.success-meta-value { font-size: 0.88rem; font-weight: 700; color: var(--text-dark); }
.success-meta-value.primary { color: var(--primary); }
.success-meta-value.success-color { color: var(--success); }
.success-items-card { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 20px 24px; margin-bottom: 24px; text-align: left; box-shadow: var(--shadow-sm); }
.success-items-card h4 { font-family: var(--font-title); font-size: 0.9rem; font-weight: 700; color: var(--text-dark); margin: 0 0 14px 0; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
.success-item-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-color); }
.success-item-row:last-child { border-bottom: none; }
.success-item-img { width: 52px; height: 52px; background: var(--bg-light); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.success-item-info { flex: 1; text-align: left; }
.success-item-name { font-size: 0.83rem; font-weight: 600; color: var(--text-dark); }
.success-item-qty { font-size: 0.72rem; color: var(--text-muted); }
.success-item-price { font-size: 0.88rem; font-weight: 700; color: var(--text-dark); }
.success-actions { display: flex; gap: 12px; justify-content: center; margin-bottom: 28px; flex-wrap: wrap; }
.success-btn { padding: 12px 24px; font-size: 0.85rem; border-radius: var(--radius-sm); }
.btn-outline { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border: 2px solid var(--border-color); border-radius: var(--radius-sm); background: transparent; color: var(--text-dark); font-family: var(--font-sans); font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: var(--transition-fast); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.referral-banner { background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: var(--radius-md); padding: 20px 24px; box-shadow: var(--shadow-md); }
.referral-content { display: flex; align-items: center; gap: 16px; text-align: left; }
.referral-icon { font-size: 2rem; flex-shrink: 0; }
.referral-text { flex: 1; }
.referral-text h4 { font-family: var(--font-title); font-size: 0.95rem; color: #fff; margin: 0 0 4px 0; }
.referral-text p { font-size: 0.78rem; color: rgba(255,255,255,0.8); margin: 0; }
.referral-share-btn { padding: 10px 20px; background: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.5); border-radius: var(--radius-sm); color: #fff; font-size: 0.82rem; font-weight: 800; cursor: pointer; white-space: nowrap; font-family: var(--font-sans); transition: var(--transition-fast); }
.referral-share-btn:hover { background: rgba(255,255,255,0.35); }

/* ==========================================
   ORDER TRACKING PAGE
   ========================================== */
.tracking-page-wrapper { max-width: 1200px; margin: 0 auto; padding: 28px 24px 60px; }
.tracking-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.tracking-page-title { font-family: var(--font-title); font-size: 1.4rem; font-weight: 800; color: var(--text-dark); margin: 0 0 4px 0; }
.tracking-page-subtitle { font-size: 0.82rem; color: var(--text-muted); margin: 0; font-weight: 600; }
.tracking-main-layout { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; }
.tracking-left-col, .tracking-right-col { display: flex; flex-direction: column; gap: 16px; }
.tracking-card { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 20px 22px; box-shadow: var(--shadow-sm); }
.tracking-card-title { font-family: var(--font-title); font-size: 0.9rem; font-weight: 700; color: var(--text-dark); margin: 0 0 16px 0; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); }
.tracking-timeline { position: relative; padding-left: 0; }
.tracking-progress-bar { position: absolute; left: 17px; top: 8px; bottom: 8px; width: 3px; background: var(--border-color); border-radius: 2px; z-index: 0; }
.tracking-progress-fill { width: 100%; height: 0%; background: linear-gradient(180deg, var(--primary), var(--success)); border-radius: 2px; transition: height 0.8s cubic-bezier(0.4,0,0.2,1); }
.tracking-steps { display: flex; flex-direction: column; gap: 0; position: relative; z-index: 1; }
.tracking-step { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; }
.tracking-step-dot { width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid var(--border-color); background: var(--bg-white); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; flex-shrink: 0; transition: var(--transition); z-index: 1; }
.tracking-step.completed .tracking-step-dot { background: var(--success); border-color: var(--success); color: #fff; box-shadow: 0 0 0 4px rgba(16,185,129,0.15); }
.tracking-step.active .tracking-step-dot { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 4px rgba(109,40,217,0.15); animation: trackingPulse 1.5s ease-in-out infinite; }
@keyframes trackingPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(109,40,217,0.15); } 50% { box-shadow: 0 0 0 8px rgba(109,40,217,0.08); } }
.tracking-step-info { flex: 1; padding-top: 6px; }
.tracking-step-label { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); margin-bottom: 2px; }
.tracking-step.completed .tracking-step-label, .tracking-step.active .tracking-step-label { color: var(--text-dark); }
.tracking-step-time { font-size: 0.72rem; color: var(--text-muted); }
.tracking-step.active .tracking-step-time { color: var(--primary); font-weight: 600; }
.tracking-log-list { display: flex; flex-direction: column; gap: 12px; }
.tracking-log-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-color); }
.tracking-log-item:last-child { border-bottom: none; }
.tracking-log-time { font-size: 0.72rem; color: var(--primary); font-weight: 700; white-space: nowrap; min-width: 75px; }
.tracking-log-info { flex: 1; }
.tracking-log-status { font-size: 0.82rem; font-weight: 700; color: var(--text-dark); margin-bottom: 2px; }
.tracking-log-detail { font-size: 0.75rem; color: var(--text-muted); }
.tracking-map-container { position: relative; height: 200px; background: linear-gradient(160deg, #e8f4f8, #d4e8f0 40%, #c8dce8); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 10px; }
.mock-map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(100,160,200,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(100,160,200,0.1) 1px, transparent 1px); background-size: 30px 30px; }
.mock-map-roads { position: absolute; inset: 0; }
.map-road { position: absolute; background: rgba(255,255,255,0.6); border-radius: 2px; }
.map-road.horizontal { left: 0; right: 0; height: 8px; transform: translateY(-50%); }
.map-road.vertical { top: 0; bottom: 0; width: 8px; transform: translateX(-50%); }
.map-rider-icon { position: absolute; left: 42%; top: 45%; font-size: 1.4rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); animation: riderFloat 3s ease-in-out infinite; z-index: 3; }
@keyframes riderFloat { 0% { transform: translateX(0px); } 50% { transform: translateX(-8px); } 100% { transform: translateX(0px); } }
.map-destination-pin { position: absolute; right: 18%; top: 22%; font-size: 1.4rem; z-index: 3; animation: pinBounce 1.5s ease-in-out infinite; }
@keyframes pinBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.map-origin-dot { position: absolute; left: 8%; bottom: 22%; font-size: 1.1rem; z-index: 3; }
.map-route-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.map-route-path { animation: routeDash 3s linear infinite; }
@keyframes routeDash { to { stroke-dashoffset: -20; } }
.map-location-label { font-size: 0.78rem; color: var(--text-muted); margin: 0; text-align: center; }
.rider-info-grid { display: flex; align-items: center; gap: 14px; }
.rider-avatar { width: 52px; height: 52px; background: linear-gradient(135deg, var(--secondary-light), var(--bg-gray)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; border: 2px solid var(--border-color); }
.rider-details { flex: 1; }
.rider-name { font-size: 0.9rem; font-weight: 700; color: var(--text-dark); margin-bottom: 2px; }
.rider-company { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 2px; }
.rider-vehicle { font-size: 0.75rem; color: var(--text-muted); }
.rider-call-btn { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 16px; background: var(--success); color: #fff; text-decoration: none; border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 700; font-family: var(--font-sans); transition: var(--transition-fast); white-space: nowrap; }
.rider-call-btn:hover { opacity: 0.85; }
.tracking-order-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-color); font-size: 0.8rem; }
.tracking-order-detail-row:last-child { border-bottom: none; }
.tracking-order-detail-row span:first-child { color: var(--text-muted); }
.tracking-order-detail-row span:last-child { font-weight: 700; color: var(--text-dark); }

/* ==========================================
   TOAST NOTIFICATION
   ========================================== */
.rara-toast-container { position: fixed; bottom: 28px; right: 28px; z-index: 99999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.rara-toast { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius-md); box-shadow: 0 8px 32px rgba(0,0,0,0.15); font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; color: #fff; min-width: 260px; max-width: 360px; pointer-events: all; animation: toastIn 0.35s cubic-bezier(0.175,0.885,0.32,1.275) forwards; }
.rara-toast.success { background: linear-gradient(135deg, #059669, #10B981); }
.rara-toast.error { background: linear-gradient(135deg, #DC2626, #EF4444); }
.rara-toast.info { background: linear-gradient(135deg, var(--primary), var(--secondary)); }
.rara-toast.warning { background: linear-gradient(135deg, #D97706, #F59E0B); }
.rara-toast.removing { animation: toastOut 0.3s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(80px); } }

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 992px) {
  .cart-main-layout, .checkout-main-layout { grid-template-columns: 1fr; }
  .cart-summary-col, .checkout-summary-col { order: -1; }
  .sticky-summary { position: static; }
  .cart-rec-grid { grid-template-columns: repeat(2, 1fr); }
  .tracking-main-layout { grid-template-columns: 1fr; }
  .checkout-stepper { padding: 14px 20px; }
  .stepper-line { min-width: 20px; }
  .payment-methods-grid { grid-template-columns: repeat(2, 1fr); }
  .success-order-meta { grid-template-columns: 1fr; }
  .success-actions { flex-direction: column; align-items: center; }
}
@media (max-width: 600px) {
  .cart-page-wrapper, .tracking-page-wrapper { padding: 16px; }
  .checkout-stepper { padding: 12px 8px; }
  .stepper-step span { font-size: 0.62rem; }
  .referral-content { flex-direction: column; text-align: center; }
}

/* ==========================================
   AUTHENTICATION & ACCOUNT CUSTOMER CENTER
   ========================================== */

/* Account Dropdown Menu Styling */
.account-dropdown-menu {
  display: none;
  animation: dropdownFadeIn 0.2s ease-out forwards;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.account-dropdown-menu a {
  transition: background 0.15s ease, color 0.15s ease;
}

.account-dropdown-menu a:hover {
  background: var(--bg-light);
  color: var(--primary);
}

/* Auth Modal Enhancements */
.auth-modal-box {
  animation: modalScaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  background: var(--bg-white) !important;
}

@keyframes modalScaleUp {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.auth-tab-btn {
  transition: all 0.25s ease;
}

.auth-tab-btn:hover {
  color: var(--primary);
}

.auth-tab-btn.active {
  color: var(--primary) !important;
  border-bottom: 2px solid var(--primary) !important;
}

.auth-input-wrapper input:focus {
  border-color: var(--primary) !important;
  background: var(--bg-white) !important;
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.15);
}

.auth-forgot-link {
  transition: color 0.15s ease;
}
.auth-forgot-link:hover {
  color: var(--primary-hover) !important;
  text-decoration: underline !important;
}

.google-btn:hover {
  background: var(--bg-light) !important;
  border-color: var(--primary) !important;
}

/* Customer Dashboard Tabs */
.cust-tab-content {
  animation: tabFadeIn 0.25s ease-out forwards;
}

@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.db-menu-item {
  cursor: pointer;
  transition: all 0.2s ease;
}
.db-menu-item:hover {
  background: var(--bg-light);
  color: var(--primary);
}
.db-menu-item.active {
  background: var(--primary) !important;
  color: #fff !important;
  font-weight: 700;
}

/* OTP Code input */
.otp-input-field:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.15);
  background: var(--bg-white) !important;
}

/* Address Card styles */
.address-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  background: var(--bg-white);
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.address-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}
.address-card.default {
  border-color: var(--primary);
  background: rgba(109, 40, 217, 0.02);
}

/* Wishlist Product Card */
.wishlist-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px;
  background: var(--bg-white);
  text-align: center;
  position: relative;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-height: 220px;
}
.wishlist-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Coupon Card styles */
.coupon-card {
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  background: var(--bg-light);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s ease;
}
.coupon-card:hover {
  border-color: var(--accent);
  background: var(--bg-white);
}

/* Notification item styling */
.notification-item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  background: var(--bg-white);
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.notification-item.unread {
  border-left: 4px solid var(--primary);
  background: rgba(109, 40, 217, 0.03);
}


/* ==========================================================================
   RARA DEALS PREMIUM CUSTOMER DASHBOARD UPGRADE STYLES
   ========================================================================== */

/* Welcome Card in Desktop Sidebar */
.sidebar-welcome-card {
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.05), rgba(139, 92, 246, 0.05));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.welcome-avatar-wrapper {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.2);
}
.welcome-avatar-emoji {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 1.25rem;
}
.welcome-avatar-letter {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--font-title);
  user-select: none;
}
.welcome-name {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-dark);
}
.welcome-member-since {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.member-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  font-weight: 700;
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.member-badge.gold {
  background: linear-gradient(135deg, var(--accent), #D97706);
  color: #fff;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

/* Premium Titles */
.tab-title-premium {
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 20px;
  color: var(--text-dark);
}
.section-title-premium {
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 14px 0;
  color: var(--text-dark);
}
.card-title-premium {
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
}

/* Glassmorphism Premium Cards */
.glass-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.04);
  border-radius: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(31, 38, 135, 0.07);
  border-color: rgba(109, 40, 217, 0.25);
}
[data-theme="dark"] .glass-card {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Welcome Banner Dashboard */
.dashboard-welcome-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.06), rgba(139, 92, 246, 0.06));
  border-color: rgba(109, 40, 217, 0.15);
  margin-bottom: 24px;
}
.welcome-banner-text h3 {
  margin: 0 0 6px 0;
  font-size: 1.4rem;
  font-family: var(--font-title);
}
.welcome-banner-text p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.gold-badge-glow {
  background: linear-gradient(135deg, var(--accent), #D97706);
  color: #fff;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Stats Cards Grid */
.statistics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}
.stat-card {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}
.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.purple-glow { background: rgba(109, 40, 217, 0.1); color: var(--primary); }
.red-glow { background: rgba(239, 68, 68, 0.1); color: #EF4444; }
.gold-glow { background: rgba(245, 158, 11, 0.1); color: var(--accent); }
.green-glow { background: rgba(16, 185, 129, 0.1); color: var(--success); }
.stat-details {
  display: flex;
  flex-direction: column;
}
.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}
.stat-value {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 2px 0 0 0;
  font-family: var(--font-title);
  color: var(--text-dark);
}

/* Split Rows Layout */
.dashboard-split-row {
  display: grid;
  grid-template-columns: 1.85fr 1.15fr;
  gap: 24px;
  margin-bottom: 24px;
}
.split-left, .split-right {
  display: flex;
  flex-direction: column;
}

/* Status Cards Grid */
.status-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.status-box {
  padding: 12px 8px;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--border-color);
}
.status-box:hover {
  transform: translateY(-2px);
}
.status-box-count {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  font-family: var(--font-title);
}
.status-box-label {
  display: block;
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 2px;
}
.status-box.pending { background: rgba(245, 158, 11, 0.05); border-color: rgba(245, 158, 11, 0.2); color: #D97706; }
.status-box.processing { background: rgba(139, 92, 246, 0.05); border-color: rgba(139, 92, 246, 0.2); color: var(--secondary); }
.status-box.shipped { background: rgba(59, 130, 246, 0.05); border-color: rgba(59, 130, 246, 0.2); color: #3B82F6; }
.status-box.delivered { background: rgba(16, 185, 129, 0.05); border-color: rgba(16, 185, 129, 0.2); color: var(--success); }
.status-box.cancelled { background: rgba(239, 68, 68, 0.05); border-color: rgba(239, 68, 68, 0.2); color: #DC2626; }

/* Recent Order Widget Styling */
.recent-order-widget {
  padding: 20px;
}
.card-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.order-id-badge {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
}
.recent-order-detail-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-light);
  padding: 16px;
  border-radius: 12px;
  flex-wrap: wrap;
  gap: 12px;
}
.order-meta-info {
  font-size: 0.82rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-dark);
}
.status-badge-premium {
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 4px;
  background: var(--primary);
  color: #fff;
  display: inline-block;
}

/* Wallet Widget in Right Side */
.gradient-wallet-card {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  padding: 24px;
  border: none;
  box-shadow: 0 12px 30px rgba(109, 40, 217, 0.25);
  border-radius: 20px;
}
.gradient-wallet-card .card-tag {
  font-size: 0.75rem;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  display: block;
}
.wallet-balance-big {
  font-size: 2.2rem;
  font-weight: 800;
  margin: 8px 0 16px 0;
  color: #fff;
  font-family: var(--font-title);
}
.wallet-details-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 12px;
}
.wallet-details-row .detail-lbl {
  font-size: 0.72rem;
  opacity: 0.8;
  display: block;
}
.wallet-details-row .detail-val {
  font-size: 0.95rem;
  font-weight: 700;
}
.wallet-btn-light {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 10px;
  color: #fff;
  padding: 10px;
  width: 100%;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.wallet-btn-light:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Referral Widget Styling */
.referral-widget {
  padding: 20px;
}
.referral-code-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px dashed var(--primary);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  background: rgba(109, 40, 217, 0.04);
  font-weight: 700;
  color: var(--primary);
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}
.copy-btn-small {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.7rem;
  cursor: pointer;
  font-weight: 700;
  transition: background 0.15s;
}
.copy-btn-small:hover {
  background: var(--primary-hover);
}

/* Quick Wishlist list styles */
.quick-wishlist-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quick-wish-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-light);
  border-radius: 10px;
  font-size: 0.8rem;
}
.quick-wish-item span.title {
  font-weight: 600;
  color: var(--text-dark);
}
.quick-wish-item span.price {
  font-weight: 700;
  color: var(--primary);
}

/* Wallet Sub-metrics Grid */
.wallet-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.wallet-metrics-card {
  padding: 24px;
  border-radius: 20px;
  color: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.wallet-metrics-card.purple-grad { background: linear-gradient(135deg, var(--primary), var(--secondary)); }
.wallet-metrics-card.gold-grad { background: linear-gradient(135deg, var(--accent), #D97706); }
.wallet-metrics-card.blue-grad { background: linear-gradient(135deg, #1D4ED8, #3B82F6); }
.wallet-metrics-label {
  font-size: 0.78rem;
  opacity: 0.85;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.wallet-metrics-val {
  font-size: 1.8rem;
  font-weight: 800;
  font-family: var(--font-title);
  margin-top: 4px;
}
.wallet-metrics-btn {
  margin-top: 14px;
  background: rgba(255,255,255,0.22);
  border: none;
  color: #fff;
  padding: 8px 12px;
  font-size: 0.75rem;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  text-align: center;
}
.wallet-metrics-btn:hover { background: rgba(255,255,255,0.32); }

/* Grid systems inside tabs */
.wishlist-grid-premium, .saved-later-grid-premium {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  gap: 16px;
}
.tab-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.addresses-grid-premium {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.coupons-grid-premium {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.notifications-list-premium {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Referral Page Hero Card */
.referral-page-hero {
  border-radius: 20px;
  padding: 32px 24px;
  color: #fff;
  text-align: center;
  box-shadow: 0 10px 25px rgba(109,40,217,0.15);
}
.referral-page-hero.purple-grad {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}
.referral-page-hero h2 {
  font-family: var(--font-title);
  font-size: 1.5rem;
  margin: 10px 0 6px 0;
}
.referral-page-hero p {
  font-size: 0.85rem;
  opacity: 0.9;
  max-width: 480px;
  margin: 0 auto;
}

/* Reviews List Styles */
.reviews-list-premium {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.review-item-card-premium {
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 16px;
  background: var(--bg-white);
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: all 0.2s ease;
}
.review-item-card-premium:hover {
  border-color: rgba(109, 40, 217, 0.2);
  box-shadow: var(--shadow-sm);
}
.review-item-card-premium .prod-emoji {
  font-size: 2.2rem;
  padding: 8px;
  background: var(--bg-light);
  border-radius: 12px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.review-card-details {
  flex: 1;
}
.review-card-title {
  font-size: 0.88rem;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--text-dark);
}
.review-card-stars {
  color: var(--accent);
  font-size: 0.9rem;
  margin-bottom: 6px;
}
.review-card-text {
  font-size: 0.82rem;
  color: var(--text-dark);
  margin: 0 0 6px 0;
  line-height: 1.45;
}
.review-card-date {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.star-select-item {
  transition: color 0.15s ease;
  user-select: none;
}
.star-select-item.selected {
  color: var(--accent) !important;
}
.star-select-item.highlighted {
  color: var(--accent) !important;
}

/* Security 2FA Slider Switch */
.switch-toggle-wrapper input:checked + .toggle-slider {
  background-color: var(--primary);
}
.switch-toggle-wrapper input:checked + .toggle-slider:before {
  transform: translateX(20px);
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px; width: 16px;
  left: 4px; bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
.session-item-premium {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-light);
  border-radius: 10px;
  font-size: 0.8rem;
}
.session-item-premium .session-icon { font-size: 1.4rem; }
.session-item-premium .session-meta { display: flex; flex-direction: column; }
.session-item-premium .session-device { font-weight: 700; color: var(--text-dark); }
.session-item-premium .session-loc { font-size: 0.7rem; color: var(--text-muted); }

/* Logout sidebar styling */
.db-menu-item.logout-item {
  color: #DC2626 !important;
  border-top: 1px solid var(--border-color);
  margin-top: 12px;
  padding-top: 12px;
}
.db-menu-item.logout-item:hover {
  background: rgba(220, 38, 38, 0.05) !important;
}

/* Mobile Bottom Navigation Bar */
.customer-mobile-nav {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 56px;
  background: var(--bg-white);
  border-top: 1px solid var(--border-color);
  grid-template-columns: repeat(5, 1fr);
  z-index: 9999;
  box-shadow: 0 -4px 10px rgba(0,0,0,0.03);
}
.mobile-nav-btn {
  background: transparent;
  border: none;
  outline: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.mobile-nav-btn .nav-icon {
  font-size: 1.25rem;
  margin-bottom: 2px;
  transition: transform 0.2s;
}
.mobile-nav-btn.active {
  color: var(--primary);
}
.mobile-nav-btn.active .nav-icon {
  transform: scale(1.1);
}

/* Mobile responsive styles */
@media (max-width: 768px) {
  #panel-customer .dashboard-layout {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-bottom: 56px; /* Space for bottom nav */
  }
  #panel-customer .dashboard-sidebar {
    display: none !important;
  }
  #panel-customer .dashboard-body {
    padding: 16px;
  }
  #panel-customer .customer-mobile-nav {
    display: grid !important;
  }
  .statistics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .dashboard-split-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .status-summary-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .wallet-metrics-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  /* Mobile Account Menu Shortcuts Hub */
  .mobile-shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 16px;
  }
  .mobile-shortcut-card {
    padding: 16px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all 0.15s ease;
  }
  .mobile-shortcut-card:hover {
    border-color: var(--primary);
    background: rgba(109, 40, 217, 0.02);
  }
  .mobile-shortcut-card .sc-icon {
    font-size: 1.8rem;
  }
  .mobile-shortcut-card .sc-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-dark);
  }
}



/* ==========================================================================
   RARA DEALS PREMIUM CUSTOMER DASHBOARD v3 STYLES
   ========================================================================== */

/* Dashboard Search Bar */
.dashboard-search-container {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}
.dashboard-search-container input {
  width: 100%;
  padding: 12px 16px 12px 42px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-white);
  color: var(--text-dark);
  font-size: 0.85rem;
  box-sizing: border-box;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}
.dashboard-search-container input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.1);
  outline: none;
}
.dashboard-search-container .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--text-muted);
}
[data-theme="dark"] .dashboard-search-container input {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Hero Welcome Card v2 */
.dashboard-welcome-banner-v2 {
  position: relative;
  padding: 32px;
  background: linear-gradient(135deg, #4c1d95, #7c3aed);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  color: #fff;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(109, 40, 217, 0.3);
}
.dashboard-welcome-banner-v2 .mesh-shapes {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.dashboard-welcome-banner-v2 .shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.35;
  mix-blend-mode: screen;
  animation: floatingShape 10s infinite alternate;
}
.dashboard-welcome-banner-v2 .shape-1 {
  width: 150px; height: 150px;
  background: #f59e0b;
  top: -30px; right: 20px;
}
.dashboard-welcome-banner-v2 .shape-2 {
  width: 200px; height: 200px;
  background: #ec4899;
  bottom: -50px; left: 10%;
  animation-delay: -3s;
}
@keyframes floatingShape {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, 20px) scale(1.1); }
}
.welcome-main-info {
  position: relative;
  z-index: 2;
}
.greeting-time {
  font-size: 0.85rem;
  opacity: 0.9;
  font-weight: 500;
}
.welcome-title {
  font-family: var(--font-title);
  font-size: 1.65rem;
  font-weight: 800;
  margin: 4px 0 8px 0 !important;
  color: #fff !important;
}
.membership-tag {
  margin-bottom: 20px;
}
.welcome-metrics-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 16px;
  border-radius: 16px;
  margin-bottom: 20px;
}
.wel-metric {
  display: flex;
  flex-direction: column;
}
.wel-metric .lbl {
  font-size: 0.72rem;
  opacity: 0.8;
}
.wel-metric .val {
  font-size: 1.1rem;
  font-weight: 800;
  margin-top: 2px;
  font-family: var(--font-title);
}
.welcome-cta-row {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 12px;
}

/* Active Deliveries */
.active-deliveries-card {
  border-left: 5px solid var(--accent);
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.deliv-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.deliv-truck {
  font-size: 1.8rem;
}
.deliv-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-dark);
  display: block;
}
.deliv-subtitle {
  font-size: 0.72rem;
  color: var(--accent);
  font-weight: 700;
}
.deliv-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.deliv-details {
  font-size: 0.8rem;
  color: var(--text-dark);
}
.text-glow {
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.2);
}

/* Quick Actions Grid */
.quick-actions-hub-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.quick-action-card {
  padding: 16px 8px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 16px;
  border-color: rgba(226, 232, 240, 0.6);
}
.quick-action-card .qa-icon {
  font-size: 1.6rem;
  transition: transform 0.2s ease;
}
.quick-action-card:hover .qa-icon {
  transform: scale(1.15) translateY(-2px);
}
.quick-action-card .qa-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-dark);
  white-space: nowrap;
}

/* Loyalty Progress Card */
.loyalty-milestone-card {
  padding: 20px;
}
.loyalty-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.loyalty-points-tag {
  background: rgba(109, 40, 217, 0.08);
  border: 1px solid rgba(109, 40, 217, 0.15);
  color: var(--primary);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
}
.loyalty-progress-container {
  position: relative;
  padding: 10px 0 24px 0;
  margin: 0 10px;
}
.loyalty-progress-track {
  position: absolute;
  top: 14px; left: 0; right: 0;
  height: 6px;
  background: var(--bg-light);
  border-radius: 3px;
  z-index: 1;
}
.loyalty-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--secondary), var(--primary));
  border-radius: 3px;
  transition: width 0.5s ease;
}
.loyalty-milestones-nodes {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
}
.milestone-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
}
.milestone-node .node-circle {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #E2E8F0;
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s;
}
.milestone-node.active .node-circle {
  background: var(--primary);
}
.milestone-node.current .node-circle {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  transform: scale(1.15);
}
.milestone-node .node-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 6px;
}
.milestone-node.active .node-label {
  color: var(--text-dark);
  font-weight: 700;
}
.loyalty-footer-info {
  font-size: 0.78rem;
  color: var(--text-dark);
  background: var(--bg-light);
  padding: 10px 14px;
  border-radius: 8px;
  margin-top: 10px;
}

/* Spending Insights Grid */
.spending-insights-grid .insight-item-box {
  padding: 12px;
  background: var(--bg-light);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  transition: all 0.2s;
}
.spending-insights-grid .insight-item-box:hover {
  border-color: var(--primary);
  background: var(--bg-white);
}
.spending-insights-grid .insight-item-box .lbl {
  font-size: 0.68rem;
  color: var(--text-muted);
  display: block;
}
.spending-insights-grid .insight-item-box .val {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-dark);
  display: block;
  margin-top: 4px;
}

/* Achievements Badges */
.achievement-badge-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-light);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  font-size: 0.78rem;
  transition: all 0.2s;
}
.achievement-badge-item.completed {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.02);
}
.achievement-badge-item .badge-icon {
  font-size: 1.35rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.achievement-badge-item.completed .badge-icon {
  background: rgba(16, 185, 129, 0.1);
}
.achievement-badge-item .badge-name {
  font-weight: 700;
  color: var(--text-dark);
}
.achievement-badge-item .badge-status {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
}
.achievement-badge-item.completed .badge-status {
  color: var(--success);
}

/* Saved Payment Cards */
.payment-card-premium {
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 16px;
  background: var(--bg-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
}
.payment-card-premium:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.payment-card-premium .card-details {
  display: flex;
  align-items: center;
  gap: 12px;
}
.payment-card-premium .payment-logo {
  font-size: 1.8rem;
  padding: 4px;
  background: var(--bg-light);
  border-radius: 8px;
  width: 44px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.payment-card-premium .payment-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark);
}
.payment-card-premium .payment-status {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2px;
  display: block;
}

/* Sidebar Count Badges */
.sidebar-count-badge {
  background: var(--primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  margin-left: auto;
  display: inline-block;
}

/* Timeline Activity */
.activity-timeline-container {
  position: relative;
  padding-left: 20px;
  border-left: 2px solid var(--border-color);
  margin-left: 10px;
}
.timeline-node-item {
  position: relative;
  margin-bottom: 16px;
}
.timeline-node-item:last-child {
  margin-bottom: 0;
}
.timeline-node-item::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
}
.timeline-node-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 2px;
}
.timeline-node-time {
  font-size: 0.68rem;
  color: var(--text-muted);
}

/* Add subtle responsive tweaks */
@media (max-width: 1120px) {
  .quick-actions-hub-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .quick-actions-hub-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .welcome-metrics-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .dashboard-welcome-banner-v2 {
    padding: 20px !important;
  }
}



/* ==========================================================================
   RARA DEALS LUXURY CUSTOMER DASHBOARD SIDEBAR REDESIGN
   ========================================================================== */

/* 1. Layout Adjustments */
.dashboard-layout {
  display: grid;
  grid-template-columns: 280px 1fr !important;
  gap: 24px;
  min-height: 750px;
}

.dashboard-sidebar {
  background: #ffffff !important;
  border-right: 1px solid var(--border-color) !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  overflow-y: auto;
  max-height: 100vh;
}

/* 2. Profile Card Redesign */
.sidebar-welcome-card {
  background: linear-gradient(135deg, #F8F5FF 0%, #FFFFFF 100%) !important;
  border: 1px solid rgba(124, 58, 237, 0.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px rgba(124, 58, 237, 0.08) !important;
  padding: 16px 12px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.welcome-card-header {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: -6px;
}

.welcome-avatar-wrapper {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #7C3AED, #A855F7) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  box-shadow: 0 6px 15px rgba(124, 58, 237, 0.2) !important;
  margin: 0 auto !important;
}

.welcome-avatar-letter {
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

.welcome-avatar-emoji {
  position: absolute !important;
  bottom: -4px !important;
  right: -4px !important;
  font-size: 1.05rem !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.welcome-card-body {
  text-align: center;
}

.welcome-name {
  font-family: var(--font-title);
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  color: var(--text-dark) !important;
  margin: 0 0 2px 0 !important;
  line-height: 1.3;
}

.welcome-member-since {
  font-size: 0.68rem !important;
  color: var(--text-muted) !important;
  font-weight: 500;
}

/* Membership Tiers */
.member-badge {
  padding: 4px 10px !important;
  border-radius: 99px !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.member-badge::before {
  margin-right: 4px;
}

.member-badge.platinum {
  background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
  color: #ffffff !important;
}
.member-badge.platinum::before {
  content: "👑" !important;
}

.member-badge.gold {
  background: linear-gradient(135deg, #F59E0B, #D97706) !important;
  color: #ffffff !important;
}
.member-badge.gold::before {
  content: "👑" !important;
}

.member-badge.silver {
  background: linear-gradient(135deg, #64748B, #475569) !important;
  color: #ffffff !important;
}
.member-badge.silver::before {
  content: "⭐" !important;
}

.member-badge.bronze {
  background: linear-gradient(135deg, #B45309, #78350F) !important;
  color: #ffffff !important;
}
.member-badge.bronze::before {
  content: "⭐" !important;
}

/* Welcome Card Stats Grid */
.welcome-card-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  border-top: 1px solid rgba(124, 58, 237, 0.08);
  padding-top: 14px;
  margin-top: 8px;
}

.welcome-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.welcome-stat-icon {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.welcome-stat-text {
  display: flex;
  flex-direction: column;
}

.welcome-stat-text strong {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-dark);
}

.welcome-stat-text span {
  font-size: 0.6rem;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

/* 3. Sidebar Menu Cards */
.dashboard-menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.db-menu-item {
  display: flex;
  align-items: center;
  height: 68px !important;
  padding: 0 16px !important;
  background: #ffffff !important;
  border: 1px solid #F1F5F9 !important;
  border-radius: 18px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01) !important;
  box-sizing: border-box;
}

.menu-label {
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--text-dark) !important;
  flex-grow: 1;
  transition: color 0.25s ease;
}

.menu-arrow {
  color: #94A3B8 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  flex-shrink: 0;
  margin-left: 8px;
}

/* Icon Box square container */
.menu-icon-box {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 14px !important;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-icon-box svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.2px;
}

/* Icon Container Soft Background Colors */
.ib-dashboard { background: rgba(124, 58, 237, 0.08) !important; color: #7C3AED !important; }
.ib-orders { background: rgba(59, 130, 246, 0.08) !important; color: #3B82F6 !important; }
.ib-wishlist { background: rgba(236, 72, 153, 0.08) !important; color: #EC4899 !important; }
.ib-addresses { background: rgba(16, 185, 129, 0.08) !important; color: #10B981 !important; }
.ib-payments { background: rgba(6, 182, 212, 0.08) !important; color: #06B6D4 !important; }
.ib-coupons { background: rgba(249, 115, 22, 0.08) !important; color: #F97316 !important; }
.ib-wallet { background: rgba(245, 158, 11, 0.08) !important; color: #D97706 !important; }
.ib-notifications { background: rgba(234, 179, 8, 0.08) !important; color: #EAB308 !important; }
.ib-saved { background: rgba(99, 102, 241, 0.08) !important; color: #6366F1 !important; }
.ib-reviews { background: rgba(234, 179, 8, 0.08) !important; color: #CA8A04 !important; }
.ib-referral { background: rgba(168, 85, 247, 0.08) !important; color: #A855F7 !important; }
.ib-support { background: rgba(59, 130, 246, 0.08) !important; color: #3B82F6 !important; }
.ib-settings { background: rgba(100, 116, 139, 0.08) !important; color: #64748B !important; }
.ib-security { background: rgba(16, 185, 129, 0.08) !important; color: #10B981 !important; }
.ib-logout { background: rgba(239, 68, 68, 0.08) !important; color: #EF4444 !important; }

/* 4. Active Menu Card Design */
.db-menu-item.active {
  background: #ffffff !important;
  border: 2px solid #7C3AED !important;
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.18) !important;
  color: #7C3AED !important;
}

.db-menu-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  background: linear-gradient(180deg, #7C3AED, #A855F7);
  border-radius: 0 4px 4px 0;
}

.db-menu-item.active .menu-label {
  color: #7C3AED !important;
  font-weight: 700 !important;
}

.db-menu-item.active .menu-arrow {
  color: #7C3AED !important;
}

.db-menu-item.active .menu-icon-box {
  background: rgba(124, 58, 237, 0.12) !important;
  color: #7C3AED !important;
  transform: scale(1.03);
}

/* 5. Hover Animations */
.db-menu-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(124, 58, 237, 0.08) !important;
  border-color: rgba(124, 58, 237, 0.3) !important;
  background: #ffffff !important;
}

.db-menu-item:hover .menu-icon-box {
  transform: scale(1.08);
}

.db-menu-item:hover .menu-arrow {
  transform: translateX(4px);
  color: #7C3AED !important;
}

.db-menu-item:hover .menu-label {
  color: #7C3AED !important;
}

/* 6. Notification Count Badges */
.sidebar-count-badge {
  background: linear-gradient(135deg, #7C3AED, #A855F7) !important;
  color: #ffffff !important;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.7rem;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  margin-left: auto;
  margin-right: 4px;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3);
  flex-shrink: 0;
}

/* 7. Logout Area Section */
.sidebar-divider {
  height: 1px;
  background: rgba(124, 58, 237, 0.1);
  margin: 16px 0 8px 0;
  width: 100%;
}

.db-menu-item.logout-item {
  background: rgba(239, 68, 68, 0.06) !important;
  border: 1px solid rgba(239, 68, 68, 0.1) !important;
  color: #EF4444 !important;
  margin-top: 4px;
}

.db-menu-item.logout-item .menu-label {
  color: #EF4444 !important;
}

.db-menu-item.logout-item .menu-arrow {
  color: #EF4444 !important;
}

.db-menu-item.logout-item:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
  box-shadow: 0 10px 25px rgba(239, 68, 68, 0.12) !important;
}

.db-menu-item.logout-item:hover .menu-label {
  color: #EF4444 !important;
}

.db-menu-item.logout-item:hover .menu-arrow {
  color: #EF4444 !important;
}

/* 8. Responsive Sidebar Settings */

/* Tablet view: Compact Sidebar */
@media (max-width: 1024px) and (min-width: 768px) {
  .dashboard-layout {
    grid-template-columns: 90px 1fr !important;
    gap: 16px;
  }
  
  .dashboard-sidebar {
    width: 90px !important;
    padding: 20px 8px !important;
    align-items: center;
  }
  
  .sidebar-welcome-card {
    display: none !important;
  }
  
  .db-menu-item {
    width: 68px !important;
    height: 68px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 16px !important;
  }
  
  .menu-icon-box {
    margin-right: 0 !important;
  }
  
  .menu-label,
  .menu-arrow,
  .sidebar-count-badge {
    display: none !important;
  }
  
  .sidebar-divider {
    margin: 8px 0;
  }
}

.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-sidebar-close {
  display: none !important;
}

/* Mobile Slide-Out Account Drawer */
@media (max-width: 767px) {
  .mobile-sidebar-close {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f3f4f6;
    border: none;
    color: var(--text-dark);
    cursor: pointer;
    z-index: 10001;
    transition: all 0.2s ease;
  }
  .mobile-sidebar-close:hover {
    background: #e5e7eb;
    transform: scale(1.05);
  }

  .dashboard-sidebar {
    position: fixed !important;
    left: -290px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    background: #ffffff !important;
    z-index: 10000 !important;
    box-shadow: 0 0 40px rgba(124, 58, 237, 0.15) !important;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column;
    padding: 24px 20px !important;
    overflow-y: auto;
  }
  
  .dashboard-sidebar.open {
    left: 0 !important;
    display: flex !important;
  }
  
  .sidebar-overlay.active {
    display: block !important;
    opacity: 1 !important;
  }
}


/* ==========================================
   RARA DEALS PREMIUM NOTIFICATION SYSTEM STYLES
   ========================================== */

/* 1. Badge Style */
.notifications-dropdown-box {
  display: none !important; /* Override default hover rules if any, we will manage via js toggle .show */
}

/* Header badge custom styling */
#header-notif-badge {
  position: absolute !important;
  top: -5px !important;
  right: -5px !important;
  background: #EF4444 !important;
  color: #fff !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4) !important;
  border: 2px solid var(--bg-white, #fff) !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  z-index: 10;
}

/* 2. Notification Dropdown */
#header-notif-btn {
  position: relative !important;
}

#header-notif-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 380px;
  background: var(--bg-white, #ffffff);
  border: 1px solid rgba(124, 58, 237, 0.08) !important;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
  padding: 16px;
  z-index: 9999 !important;
  display: none;
  cursor: default;
  text-align: left;
  transform-origin: top right;
}

#header-notif-dropdown.show {
  display: block !important;
  animation: dropdownFade 0.25s ease forwards;
}

@keyframes dropdownFade {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#header-notif-dropdown .dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  padding-bottom: 12px;
  margin-bottom: 12px;
}

#header-notif-dropdown .dropdown-header h4 {
  margin: 0;
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-dark, #1e293b);
}

#header-notif-dropdown .mark-all-read-btn {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary, #7C3AED);
  cursor: pointer;
  transition: opacity 0.2s;
  user-select: none;
}

#header-notif-dropdown .mark-all-read-btn:hover {
  opacity: 0.8;
  text-decoration: underline;
}

#header-notif-dropdown .dropdown-body {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}

#header-notif-dropdown .dropdown-body::-webkit-scrollbar {
  width: 5px;
}

#header-notif-dropdown .dropdown-body::-webkit-scrollbar-thumb {
  background: var(--border-color, #cbd5e1);
  border-radius: 99px;
}

#header-notif-dropdown .dropdown-footer {
  border-top: 1px solid var(--border-color, #e2e8f0);
  padding-top: 12px;
  margin-top: 12px;
  text-align: center;
}

#header-notif-dropdown .dropdown-footer a {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--primary, #7C3AED);
  text-decoration: none;
  transition: color 0.2s;
  display: inline-block;
}

#header-notif-dropdown .dropdown-footer a:hover {
  color: var(--secondary, #4c1d95);
}

/* Dropdown Notification item */
.dropdown-notif-item {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  transition: all 0.2s ease;
  position: relative;
  cursor: pointer;
}

.dropdown-notif-item:hover {
  background: var(--bg-light, #f8fafc);
}

.dropdown-notif-item.unread {
  background: rgba(124, 58, 237, 0.03);
}

.dropdown-notif-item .notif-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

.dropdown-notif-item .notif-details {
  flex: 1;
  min-width: 0;
}

.dropdown-notif-item .notif-title {
  font-size: 0.82rem;
  font-weight: 750;
  margin: 0 0 2px 0;
  color: var(--text-dark, #1e293b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-notif-item .notif-desc {
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
  margin: 0 0 4px 0;
  line-height: 1.35;
  word-wrap: break-word;
}

.dropdown-notif-item .notif-time {
  font-size: 0.68rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 500;
}

.dropdown-notif-item .unread-indicator {
  width: 8px;
  height: 8px;
  background: #7C3AED;
  border-radius: 50%;
  align-self: center;
  flex-shrink: 0;
}

/* 3. Full Notification Center page styles */
.premium-notif-card {
  display: flex;
  gap: 16px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
  text-align: left;
}

.premium-notif-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.04), 0 8px 8px -5px rgba(0, 0, 0, 0.04);
  border-color: rgba(124, 58, 237, 0.15);
}

.premium-notif-card.unread {
  background: rgba(124, 58, 237, 0.012);
  border-left: 4px solid #7C3AED;
}

.premium-notif-card .notif-icon-container {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.02);
}

.premium-notif-card .notif-content-block {
  flex: 1;
  min-width: 0;
}

.premium-notif-card .notif-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.premium-notif-card .notif-card-title {
  font-size: 0.95rem;
  font-weight: 800;
  margin: 0;
  color: var(--text-dark, #1e293b);
}

.premium-notif-card .notif-card-desc {
  font-size: 0.85rem;
  color: var(--text-muted, #475569);
  margin: 0 0 8px 0;
  line-height: 1.45;
}

.premium-notif-card .notif-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.premium-notif-card .notif-card-time {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 500;
}

.premium-notif-card .notif-card-actions {
  display: flex;
  gap: 8px;
}

.premium-notif-card .action-link {
  background: transparent;
  border: none;
  color: var(--primary, #7C3AED);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
}

.premium-notif-card .action-link:hover {
  background: rgba(124, 58, 237, 0.08);
}

.premium-notif-card .purple-dot {
  width: 10px;
  height: 10px;
  background: #7C3AED;
  border-radius: 50%;
  box-shadow: 0 0 8px #7C3AED;
  flex-shrink: 0;
  margin-left: 8px;
}

/* Category & Priority styling */
.notif-icon-box.critical, .notif-icon-container.critical { background: rgba(239, 68, 68, 0.08); color: #ef4444; }
.notif-icon-box.high, .notif-icon-container.high { background: rgba(249, 115, 22, 0.08); color: #f97316; }
.notif-icon-box.normal, .notif-icon-container.normal { background: rgba(59, 130, 246, 0.08); color: #3b82f6; }
.notif-icon-box.promotion, .notif-icon-container.promotion { background: rgba(168, 85, 247, 0.08); color: #a855f7; }

/* Filter Badge inside tab notifications list card */
.notif-category-badge {
  font-size: 0.65rem;
  background: rgba(124, 58, 237, 0.06);
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  color: var(--primary, #7C3AED);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.notif-priority-badge {
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.notif-priority-badge.critical { background: rgba(239, 68, 68, 0.08); color: #ef4444; }
.notif-priority-badge.high { background: rgba(249, 115, 22, 0.08); color: #f97316; }
.notif-priority-badge.normal { background: rgba(59, 130, 246, 0.08); color: #3b82f6; }
.notif-priority-badge.promotion { background: rgba(168, 85, 247, 0.08); color: #a855f7; }

/* Preferences Transitions */
.notif-settings-panel {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.notif-settings-grid label.checkbox-label {
  transition: all 0.2s ease;
  padding: 6px 10px;
  border-radius: 8px;
}
.notif-settings-grid label.checkbox-label:hover {
  background: rgba(124, 58, 237, 0.04);
  transform: translateX(3px);
}
.notif-settings-grid label.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border-color, #cbd5e1);
  cursor: pointer;
}

/* Make sure dropdown does not show on focus-within if we click inside dropdown */
.icon-btn:focus-within .notifications-dropdown-box,
.notifications-dropdown-box:hover {
  display: none !important; /* override the focus-within rule in old css */
}

/* Top Bar Theme Toggle button */
.theme-toggle-top-btn {
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  width: 28px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  color: var(--text-dark);
}
:root[data-theme="dark"] .theme-toggle-top-btn {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}
.theme-toggle-top-btn:hover {
  transform: scale(1.1);
  background: var(--primary);
  color: #fff !important;
}

.theme-toggle-top-btn svg {
  transition: transform 0.5s ease, opacity 0.3s ease;
  fill: none;
  stroke: currentColor;
}

.theme-toggle-top-btn:hover svg {
  transform: rotate(20deg) scale(1.1);
}

/* ==========================================================================
   RARA DEALS ULTRA-PREMIUM HEADER ACTIONS STYLES
   ========================================================================== */

.header-user-actions .icon-btn.header-action-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: var(--text-dark, #1e293b) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 0 !important;
  outline: none !important;
}

.header-user-actions .icon-btn.header-action-btn:hover {
  background: rgba(124, 58, 237, 0.06) !important;
  color: var(--primary, #7C3AED) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.08) !important;
}

.header-user-actions .icon-btn.header-action-btn:active {
  transform: translateY(0) scale(0.95) !important;
}

/* Header Action SVGs */
.header-icon-svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.2px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: all 0.3s ease;
  pointer-events: none;
}

/* Ringing animation on bell hover */
@keyframes headerBellRinging {
  0% { transform: rotate(0); }
  15% { transform: rotate(12deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(7deg); }
  60% { transform: rotate(-7deg); }
  75% { transform: rotate(3deg); }
  90% { transform: rotate(-3deg); }
  100% { transform: rotate(0); }
}

.header-action-btn:hover .header-icon-svg.bell-icon {
  animation: headerBellRinging 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform-origin: top center;
}

/* Heart icon fill on hover */
.header-action-btn:hover .header-icon-svg.heart-icon {
  fill: rgba(124, 58, 237, 0.15);
  transform: scale(1.08);
}

/* Cart icon animation on hover */
@keyframes headerCartShake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-2px) rotate(-3deg); }
  50% { transform: translateX(2px) rotate(3deg); }
  75% { transform: translateX(-1px) rotate(-1deg); }
  100% { transform: translateX(0); }
}

.header-action-btn:hover .header-icon-svg.cart-icon {
  animation: headerCartShake 0.4s ease-in-out;
}

/* Dynamic Notification Count Badges (Red Gradient) */
.header-action-btn .badge.header-badge {
  position: absolute !important;
  top: -2px !important;
  right: -2px !important;
  background: linear-gradient(135deg, #EF4444, #DC2626) !important;
  color: #ffffff !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  display: none; /* controlled by JS show/hide */
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.45) !important;
  border: 2px solid var(--bg-white, #ffffff) !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  z-index: 10;
}

/* ==========================================================================
   RARA DEALS NEXT-GENERATION PREMIUM CATEGORY PAGE STYLES
   ========================================================================== */

/* 1. Category Hero & Banners */
.category-hero-outer-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 24px;
  box-sizing: border-box;
}

.category-premium-hero-wrapper {
  position: absolute !important;
  left: -99999px !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Category V2 Header presentation layer */
.category-premium-header-v2 {
  position: relative;
  background: var(--bg-white, #ffffff);
  border-radius: 16px;
  padding: 20px 24px;
  border: 1px solid var(--border-color, #e5e7eb);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  margin-bottom: 16px;
  overflow: hidden;
  max-height: 180px;
  height: 180px;
  box-sizing: border-box;
  transition: max-height 0.3s ease, height 0.3s ease;
}

.category-header-v2-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  position: relative;
  z-index: 2;
}

.category-header-v2-left {
  flex: 0 0 70%;
  max-width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.category-header-v2-breadcrumb {
  font-size: 0.72rem;
  color: var(--text-muted, #6b7280);
  margin-bottom: 6px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}
.category-header-v2-breadcrumb a {
  color: var(--text-muted, #6b7280);
  text-decoration: none;
  transition: color 0.2s;
}
.category-header-v2-breadcrumb a:hover {
  color: var(--primary, #6D28D9);
}
.category-header-v2-breadcrumb .bc-current {
  color: var(--text-dark, #1f2937);
  font-weight: 600;
}

.category-header-v2-title {
  font-family: var(--font-title, inherit);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-dark, #1f2937);
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.category-header-v2-desc {
  font-size: 0.82rem;
  color: var(--text-muted, #4b5563);
  margin: 0 0 8px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-header-v2-mini-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 6px;
}
.category-header-v2-mini-badges .mini-badge {
  font-size: 0.7rem;
  color: #10b981;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.category-header-v2-stats {
  display: flex;
  align-items: center;
  gap: 16px;
}
.category-header-v2-stats .stat-v2-item {
  font-size: 0.72rem;
  color: var(--text-muted, #6b7280);
  background: var(--bg-light, #f3f4f6);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.category-header-v2-right {
  flex: 0 0 30%;
  max-width: 30%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  height: 100%;
}

.category-header-v2-illustration {
  max-height: 140px;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.08));
  animation: floatEffect 4s ease-in-out infinite;
  z-index: 3;
}

.category-header-v2-radial-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(109, 40, 217, 0.1) 0%, rgba(109, 40, 217, 0) 70%);
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}

@keyframes floatEffect {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Premium Trust Strip */
.category-trust-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}
.category-trust-strip .trust-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border-color, #e5e7eb);
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-dark, #374151);
  box-shadow: 0 4px 10px rgba(0,0,0,0.01);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s ease;
  min-height: 42px;
  box-sizing: border-box;
}
.category-trust-strip .trust-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary, #6D28D9);
  box-shadow: 0 6px 15px rgba(109, 40, 217, 0.05);
}

/* Skeleton Loading styles */
.category-header-skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite ease-in-out;
  border-radius: 4px;
  display: inline-block;
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Mobile Filter Button style */
.mobile-filter-btn {
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--bg-light, #f3f4f6);
  border: 1px solid var(--border-color, #e5e7eb);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-dark, #374151);
  cursor: pointer;
  transition: all 0.2s ease;
}
.mobile-filter-btn:hover {
  background: var(--border-color, #e5e7eb);
}

/* Sticky Toolbar active modifications */
.category-sort-header {
  transition: box-shadow 0.3s ease, padding 0.3s ease, background 0.3s ease;
}
.category-sort-header.sticky-active {
  position: fixed !important;
  z-index: 999;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 48px) !important;
  max-width: 1392px !important;
  box-sizing: border-box;
}

/* Constrain width when inside tablet/mobile simulators to match inner viewport boundaries */
#app-viewport.tablet .category-sort-header.sticky-active {
  width: 704px !important;
}
#app-viewport.mobile .category-sort-header.sticky-active {
  width: 303px !important;
}

/* Filters visual upgrade */
.filter-group-accordion {
  border-bottom: 1px solid var(--border-color, #f3f4f6);
  margin-bottom: 4px;
}
.filter-group-header {
  padding: 12px 4px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark, #1f2937);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.filter-group-header:hover {
  color: var(--primary, #6D28D9);
}
.filter-group-header.active {
  color: var(--primary, #6D28D9);
}
.filter-options .checkbox-label {
  font-size: 0.78rem;
  padding: 6px 4px;
  transition: background 0.2s ease;
  border-radius: 6px;
  margin-bottom: 2px;
}
.filter-options .checkbox-label:hover {
  background: var(--bg-light, #f9fafb);
}

/* CLS-free product card hover styles */
.picks-grid.premium-product-grid .picks-card {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease !important;
}
.picks-grid.premium-product-grid .picks-card:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06) !important;
}

/* Responsive category layout constraints */
@media (max-width: 1024px) {
  .category-premium-header-v2 {
    max-height: 140px;
    height: 140px;
    padding: 16px 20px;
  }
  .category-header-v2-left {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .category-header-v2-right {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .category-header-v2-illustration {
    max-height: 110px;
  }
  .category-trust-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .category-premium-header-v2 {
    max-height: none;
    height: auto;
    padding: 16px;
  }
  .category-header-v2-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .category-header-v2-left {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .category-header-v2-right {
    flex: 0 0 100%;
    max-width: 100%;
    justify-content: center;
    width: 100%;
  }
  .category-header-v2-illustration {
    max-height: 120px;
  }
  .category-trust-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .mobile-filter-btn {
    display: inline-flex;
  }
}

.category-premium-hero {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}
.category-hero-glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 40px;
}
.category-hero-content-box {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.category-hero-badge-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.trending-badge-glow {
  background: linear-gradient(135deg, #FF007A, #FF7B00);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(255, 0, 122, 0.3);
  animation: pulseBadge 2s infinite;
}
@keyframes pulseBadge {
  0% { transform: scale(1); box-shadow: 0 4px 12px rgba(255, 0, 122, 0.3); }
  50% { transform: scale(1.03); box-shadow: 0 4px 20px rgba(255, 0, 122, 0.5); }
  100% { transform: scale(1); box-shadow: 0 4px 12px rgba(255, 0, 122, 0.3); }
}
.live-browse-counter {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.category-hero-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}
.category-hero-text {
  max-width: 60%;
}
.category-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.hero-cat-icon {
  font-size: 3rem;
  animation: floatIcon 3s ease-in-out infinite;
}
@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
#category-hero-title {
  font-family: var(--font-title);
  font-size: 2.8rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: -1px;
}
#category-hero-desc {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 16px 0;
  line-height: 1.5;
}
.category-hero-story-text {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  padding-left: 12px;
}
.category-hero-float-previews {
  display: flex;
  gap: 16px;
  position: relative;
}
.float-preview-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 12px;
  width: 120px;
  backdrop-filter: blur(10px);
  text-align: center;
  color: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  animation: floatCard 4s ease-in-out infinite;
}
.float-preview-card:nth-child(2) {
  animation-delay: 1.5s;
}
@keyframes floatCard {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}
.float-preview-card span {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 6px;
}
.float-preview-card h5 {
  margin: 0;
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.float-preview-card p {
  margin: 2px 0 0 0;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Category-specific theme gradients */
.theme-default {
  background: linear-gradient(135deg, #7C3AED, #4F46E5, #312E81);
}
.theme-electronics {
  background: linear-gradient(135deg, #1E3A8A, #3B82F6, #1D4ED8);
}
.theme-fashion {
  background: linear-gradient(135deg, #EC4899, #F43F5E, #E11D48);
}
.theme-beauty {
  background: linear-gradient(135deg, #8A5CF6, #F472B6, #FDA4AF);
}
.theme-home-kitchen {
  background: linear-gradient(135deg, #065F46, #10B981, #047857);
}
.theme-jewellery {
  background: linear-gradient(135deg, #78350F, #D97706, #B45309);
}

.category-hero-stats {
  display: flex;
  gap: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 20px;
}
.hero-stat-card {
  display: flex;
  flex-direction: column;
}
.stat-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
}
.stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

/* 2. Netflix-Style Sub-Navigation */
.category-netflix-nav-container {
  padding: 8px 24px;
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  top: var(--scroll-offset);
  background: var(--bg-white);
  z-index: 50;
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.category-netflix-nav-container::-webkit-scrollbar {
  display: none;
}
.category-netflix-nav {
  display: flex;
  gap: 12px;
  width: max-content;
}
.netflix-pill {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  color: var(--text-dark);
  font-family: var(--font-title);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.netflix-pill:hover {
  background: var(--border-color);
  transform: translateY(-1px);
}
.netflix-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}

/* 3. Promo Banner Bar */
.category-promo-bar {
  background: linear-gradient(90deg, #7C3AED, #9333EA);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 24px;
  overflow: hidden;
  position: relative;
}
.promo-bar-track {
  display: flex;
  justify-content: space-around;
  animation: scrollPromo 25s linear infinite;
  white-space: nowrap;
  gap: 40px;
}
@keyframes scrollPromo {
  0% { transform: translateX(5%); }
  100% { transform: translateX(-5%); }
}

/* 4. Smart Search & Filter Bar */
.category-smart-search-bar {
  padding: 16px 24px;
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.smart-search-container {
  position: relative;
  max-width: 500px;
}
.smart-search-input-wrapper {
  display: flex;
  align-items: center;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0 16px;
  transition: all 0.3s;
}
.smart-search-input-wrapper:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
  background: var(--bg-white);
}
.search-magnifier {
  font-size: 1rem;
  color: var(--text-muted);
}
#category-search-input {
  border: none;
  background: transparent;
  width: 100%;
  padding: 12px;
  outline: none;
  font-size: 0.9rem;
  color: var(--text-dark);
}
.voice-search-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 4px;
}
.ai-smart-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  z-index: 100;
  margin-top: 4px;
  overflow: hidden;
}
.ai-sug-item {
  padding: 12px 16px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s;
  color: var(--text-dark);
}
.ai-sug-item:hover {
  background: var(--bg-light);
}

.quick-searches-row {
  display: flex;
  align-items: center;
}
.quick-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 8px;
}
.quick-link {
  font-size: 0.75rem;
  color: var(--primary);
  cursor: pointer;
  margin-right: 12px;
  font-weight: 600;
}
.quick-link:hover {
  text-decoration: underline;
}

/* 5. Mega Collections */
.mega-collections-container {
  padding: 24px;
}
.section-title-premium {
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 16px 0;
  letter-spacing: -0.5px;
  position: relative;
  padding-left: 14px;
}
.section-title-premium::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  height: 18px;
  width: 4px;
  background: var(--primary);
  border-radius: 2px;
}
.mega-collections-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.collection-mega-card {
  border-radius: 20px;
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.collection-mega-card::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.15);
  top: 0;
  left: -100%;
  transition: all 0.5s;
}
.collection-mega-card:hover::before {
  left: 100%;
}
.collection-mega-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.05);
}
.collection-icon {
  font-size: 2.2rem;
}
.collection-info {
  flex: 1;
}
.collection-info h4 {
  margin: 0;
  font-size: 0.9rem;
  font-family: var(--font-title);
  color: var(--text-dark);
}
.collection-info p {
  margin: 2px 0 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.collection-arrow {
  font-size: 1.1rem;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.collection-mega-card:hover .collection-arrow {
  transform: translateX(4px);
  color: var(--primary);
}

/* 6. Advanced Sidebar Filters */
.filter-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
}
.clear-all-filters-btn {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.clear-all-filters-btn:hover {
  text-decoration: underline;
}

.filter-group-accordion {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 12px;
  padding-bottom: 12px;
}
.filter-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-title);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark);
  cursor: pointer;
  padding: 6px 0;
}
.accordion-arrow {
  font-size: 0.65rem;
  transition: transform 0.3s;
  color: var(--text-muted);
}
.filter-group-header.active .accordion-arrow {
  transform: rotate(180deg);
}
.filter-group-content {
  display: none;
  padding-top: 8px;
}
.filter-group-content.open {
  display: block;
}

/* Price Range Slider style */
.price-slider-container {
  position: relative;
  height: 24px;
  margin-bottom: 12px;
  padding-top: 10px;
}
.slider-track {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--border-color);
  border-radius: 2px;
}
.dual-range-slider {
  position: absolute;
  width: 100%;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  top: 10px;
  left: 0;
}
.dual-range-slider::-webkit-slider-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  cursor: pointer;
  pointer-events: auto;
  -webkit-appearance: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.dual-range-slider::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.price-range-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}
.price-range-inputs input {
  width: 80px;
  padding: 6px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-align: center;
  font-size: 0.75rem;
  outline: none;
  background: var(--bg-light);
}

.filter-search-box {
  margin-bottom: 10px;
}
.filter-search-box input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  font-size: 0.75rem;
  outline: none;
}
.scrollable-filters {
  max-height: 180px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Color Swatches Grid */
.color-swatches-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.color-swatch-item {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid var(--border-color);
  transition: transform 0.2s;
  box-sizing: border-box;
}
.color-swatch-item:hover {
  transform: scale(1.15);
}
.color-swatch-item.active {
  border: 2px solid var(--primary);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}
.swatch-black { background: #000; }
.swatch-white { background: #fff; }
.swatch-silver { background: #c0c0c0; }
.swatch-gold { background: #ffd700; }
.swatch-blue { background: #0000ff; }
.swatch-red { background: #ff0000; }
.swatch-rose { background: #b76e79; }

/* Custom toggle switch style */
.toggle-switch-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  margin-bottom: 10px;
  cursor: pointer;
  color: var(--text-dark);
}
.toggle-switch-label input {
  display: none;
}
.toggle-slider {
  width: 32px;
  height: 18px;
  background: var(--border-color);
  border-radius: 15px;
  position: relative;
  transition: 0.3s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: 0.3s;
}
.toggle-switch-label input:checked + .toggle-slider {
  background: var(--primary);
}
.toggle-switch-label input:checked + .toggle-slider::before {
  transform: translateX(14px);
}

.rating-filter-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rating-filter-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: background 0.2s;
  color: var(--text-dark);
}
.rating-filter-item:hover {
  background: var(--bg-light);
}

/* 7. Product Catalog Main Area */
.category-sort-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}
.sort-results-count {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.sort-controls-box {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sort-controls-box select {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  font-size: 0.8rem;
  outline: none;
  background: var(--bg-white);
  color: var(--text-dark);
}
.view-mode-buttons {
  display: flex;
  gap: 6px;
}
.view-mode-btn {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  font-size: 0.75rem;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.view-mode-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* 8. Active Filter Chips */
.active-filter-chips-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  background: var(--bg-light);
  padding: 8px 12px;
  border-radius: 12px;
}
.chips-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
}
.chips-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.filter-chip-item {
  background: var(--bg-white);
  border: 1px solid rgba(124, 58, 237, 0.2);
  color: var(--primary);
  font-size: 0.7rem;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.filter-chip-item:hover {
  background: rgba(124, 58, 237, 0.05);
}
.clear-chips-btn {
  font-size: 0.7rem;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
}

/* 9. Upgraded Premium Product Cards */
.premium-product-grid {
  gap: 20px !important;
}
.picks-card {
  border-radius: 20px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
  border: 1px solid var(--border-color) !important;
}
.picks-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 40px rgba(124, 58, 237, 0.06) !important;
}
.quickview-btn-overlay {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-dark);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border: none;
  z-index: 10;
}
.picks-card-img-box:hover .quickview-btn-overlay {
  opacity: 1;
  transform: translate(-50%, 0);
}
.picks-card-wish-btn {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  font-size: 0.95rem;
  transition: 0.2s;
}
.picks-card-wish-btn:hover {
  transform: scale(1.1);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.2);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}
.picks-card-wish-btn.active {
  color: #fff;
  background: #EF4444;
  border-color: #EF4444;
}

/* Card badges & ribbons */
.verified-seller-badge-card {
  background: rgba(59, 130, 246, 0.08);
  color: #2563EB;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
.fast-delivery-badge-card {
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Social Proof rows */
.social-proof-row-card {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--text-muted);
  border-top: 1px dashed var(--border-color);
  padding-top: 8px;
  margin-top: 8px;
}

/* 10. Flash Deals Segment */
.category-flash-deals-banner {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.03), rgba(245, 158, 11, 0.03));
  border: 1px dashed var(--danger);
  border-radius: 20px;
  padding: 20px;
  margin: 32px 0;
}
.flash-banner-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.flash-title-block {
  display: flex;
  align-items: center;
  gap: 8px;
}
.flash-icon-spark {
  font-size: 1.4rem;
  animation: bounceTimer 1.5s infinite;
}
@keyframes bounceTimer {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.flash-countdown-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-title);
  font-weight: 700;
}
.time-block {
  background: var(--danger);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
}
.ends-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.flash-deal-product-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.flash-deal-product-row::-webkit-scrollbar {
  display: none;
}
.flash-deal-item-card {
  min-width: 280px;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  gap: 12px;
}
.flash-item-img {
  width: 80px;
  height: 80px;
  background: var(--bg-light);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
}
.flash-item-info {
  flex: 1;
}
.stock-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
  position: relative;
}
.stock-fill {
  background: linear-gradient(90deg, #F59E0B, #EF4444);
  height: 100%;
  border-radius: 3px;
}

/* 11. Premium Brand Showcase Cards */
.premium-brands-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.brand-mini-storefront {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s;
}
.brand-mini-storefront:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.04);
}
.brand-cover-banner {
  height: 60px;
  background-size: cover;
  background-position: center;
}
.brand-header-info {
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: -24px;
}
.brand-mini-logo {
  width: 44px;
  height: 44px;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.brand-mini-details {
  flex: 1;
  padding-top: 18px;
}
.brand-mini-details h4 {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-dark);
}
.brand-mini-details p {
  margin: 2px 0 0 0;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.brand-follow-btn {
  background: var(--primary-light);
  border: none;
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
  margin-right: 12px;
  margin-bottom: 12px;
  float: right;
}
.brand-follow-btn.following {
  background: var(--border-color);
  color: var(--text-muted);
}

/* 12. Interactive Featured Sellers */
.featured-sellers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.seller-mini-storefront {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s;
}
.seller-mini-storefront:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.04);
}
.seller-banner-box {
  height: 80px;
}
.seller-profile-row {
  display: flex;
  gap: 12px;
  padding: 12px;
  margin-top: -30px;
}
.seller-mini-logo-box {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--bg-white);
  border: 2px solid var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.seller-mini-info-box {
  flex: 1;
  padding-top: 24px;
}
.seller-mini-info-box h4 {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-dark);
}
.seller-badges-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.seller-level-badge {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
.seller-level-badge.platinum { background: linear-gradient(135deg, #7C3AED, #3B82F6); color: #fff; }
.seller-level-badge.gold { background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; }
.seller-level-badge.silver { background: linear-gradient(135deg, #94A3B8, #64748B); color: #fff; }

.seller-stats-line {
  display: flex;
  justify-content: space-around;
  padding: 12px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-light);
}
.seller-stat-chunk {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.seller-stat-chunk strong {
  font-size: 0.8rem;
  color: var(--text-dark);
}
.seller-stat-chunk span {
  font-size: 0.65rem;
  color: var(--text-muted);
}
.seller-visit-store-btn {
  display: block;
  text-align: center;
  padding: 10px;
  background: var(--bg-white);
  border-top: 1px solid var(--border-color);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  text-decoration: none;
}
.seller-visit-store-btn:hover {
  background: rgba(124, 58, 237, 0.03);
}

/* 13. Recommendations Carousels */
.recommendations-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 6px 0;
}
.recommendations-carousel::-webkit-scrollbar {
  display: none;
}
.recommendations-carousel .picks-card {
  min-width: 200px;
  max-width: 200px;
}

/* Recently Viewed Shelf */
.recently-viewed-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 6px 0;
}
.recently-viewed-grid::-webkit-scrollbar {
  display: none;
}
.recently-viewed-grid .picks-card {
  min-width: 180px;
  max-width: 180px;
}

/* 14. Floating AI Assistant Widget styling */
.ai-floating-assistant {
  position: fixed;
  bottom: 80px;
  right: 24px;
  z-index: 1000;
}
.ai-assistant-bubble {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.4);
  position: relative;
  transition: transform 0.3s;
}
.ai-assistant-bubble:hover {
  transform: scale(1.08);
}
.ai-bubble-icon {
  font-size: 1.4rem;
}
.ai-bubble-label {
  font-size: 0.55rem;
  color: #fff;
  font-weight: 700;
  margin-top: 2px;
}
.pulse-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--primary);
  animation: ringPulse 2s infinite;
  pointer-events: none;
}
@keyframes ringPulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

.ai-assistant-window {
  position: absolute;
  bottom: 72px;
  right: 0;
  width: 320px;
  height: 440px;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideUp {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.ai-window-header {
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  color: #fff;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ai-header-profile {
  display: flex;
  gap: 10px;
  align-items: center;
}
.ai-avatar {
  font-size: 1.5rem;
  background: rgba(255,255,255,0.2);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-status-online {
  font-size: 0.6rem;
  background: #10B981;
  color: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
}
.ai-close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}
.ai-window-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-light);
}
.ai-message {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.8rem;
  max-width: 80%;
  line-height: 1.4;
}
.ai-message.bot {
  background: var(--bg-white);
  color: var(--text-dark);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}
.ai-message.user {
  background: var(--primary);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.ai-quick-queries {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.quick-q-btn {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  color: var(--text-dark);
  font-size: 0.75rem;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
}
.quick-q-btn:hover {
  border-color: var(--primary);
  background: rgba(124, 58, 237, 0.02);
}
.ai-window-footer {
  padding: 12px;
  background: var(--bg-white);
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 8px;
}
.ai-window-footer input {
  flex: 1;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px 12px;
  outline: none;
  font-size: 0.8rem;
}
.ai-send-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

/* 15. Mobile Sticky Bottom Nav Bar */
.mobile-category-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-color);
  padding: 6px 12px;
  justify-content: space-around;
  z-index: 900;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
}
.mobile-bar-btn {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--text-muted);
}
.mobile-bar-btn:hover {
  color: var(--primary);
}
.mobile-bar-icon {
  font-size: 1.15rem;
}
.mobile-bar-text {
  font-size: 0.6rem;
  font-weight: 700;
}

/* 16. Mobile Bottom Sheet for Sorting */
.mobile-bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--bg-white);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  z-index: 1000;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.1);
}
.mobile-bottom-sheet.open {
  transform: translateY(0);
}
.bottom-sheet-content {
  padding: 24px;
}
.bottom-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.bottom-sheet-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}
.bottom-sheet-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sort-option-item {
  padding: 12px;
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 8px;
  color: var(--text-dark);
}
.sort-option-item:hover {
  background: var(--bg-light);
}

/* Responsive Overrides */
@media (max-width: 768px) {
  .category-page-layout {
    grid-template-columns: 1fr !important;
  }
  .filter-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100%;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0;
    border: none;
    box-shadow: 10px 0 40px rgba(0,0,0,0.15);
    overflow-y: auto;
  }
  .filter-sidebar.open {
    transform: translateX(0);
  }
  .mobile-category-sticky-bar {
    display: flex;
  }
  .mega-collections-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .premium-brands-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .featured-sellers-grid {
    grid-template-columns: 1fr;
  }
  .category-hero-main {
    flex-direction: column;
    align-items: flex-start;
  }
  .category-hero-text {
    max-width: 100%;
  }
  .category-hero-float-previews {
    display: none;
  }
  .ai-floating-assistant {
    bottom: 140px;
  }
}

/* ==================================================
   WORLD-CLASS PREMIUM SELLER STOREFRONT STYLING
   ================================================== */

/* 1. Announcement Bar Ticker */
.store-announcement-bar {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  padding: 8px 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: storeAnnouncePulse 4s infinite alternate;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
@keyframes storeAnnouncePulse {
  0% { opacity: 0.95; }
  100% { opacity: 1; filter: brightness(1.1); }
}

/* 2. Premium Hero Banner */
.store-premium-hero {
  position: relative;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s;
}
.store-premium-hero:hover {
  box-shadow: var(--shadow-md);
}
.store-hero-cover-wrap {
  position: relative;
  height: 240px;
  background: var(--bg-gray);
  overflow: hidden;
}
.store-hero-cover {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 8s ease-in-out;
}
.store-premium-hero:hover .store-hero-cover {
  transform: scale(1.08);
}
.store-hero-cover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.6));
}
.btn-store-story-video {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 5;
  transition: all 0.3s;
}
.btn-store-story-video:hover {
  background: #fff;
  color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}
.btn-store-story-video .play-icon {
  font-size: 0.7rem;
}

/* Store Profile Info Block */
.store-identity-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px;
  gap: 24px;
}
.store-identity-left {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex: 1;
}
.store-logo-wrapper {
  position: relative;
  margin-top: -64px;
  z-index: 10;
}
.store-logo-box {
  width: 100px;
  height: 100px;
  border-radius: 24px;
  background: var(--bg-white);
  border: 4px solid var(--bg-white);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  transition: transform 0.3s;
}
.store-premium-hero:hover .store-logo-box {
  transform: scale(1.05);
}
.store-logo-verified-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--success);
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  border: 3px solid var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 900;
  box-shadow: var(--shadow-sm);
}
.store-info-details {
  display: flex;
  flex-direction: column;
}
.store-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.store-name-title {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0;
}
.store-subscription-badges {
  display: flex;
  gap: 6px;
}
.badge-sub {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  color: #fff;
}
.badge-sub.basic { background: #9CA3AF; }
.badge-sub.pro { background: var(--secondary); }
.badge-sub.premium { background: linear-gradient(135deg, #F59E0B, #D97706); }
.badge-trust {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  color: #fff;
}
.badge-trust.verified { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }

.store-meta-stats-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.store-social-links {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.store-social-icon {
  font-size: 1.1rem;
  opacity: 0.8;
  transition: transform 0.2s, opacity 0.2s;
  cursor: pointer;
  text-decoration: none !important;
}
.store-social-icon:hover {
  opacity: 1;
  transform: scale(1.15);
}

.store-identity-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.store-actions-row {
  display: flex;
  gap: 8px;
}
.btn-follow-store {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-follow-store:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}
.btn-follow-store.following {
  background: var(--bg-gray);
  color: var(--text-dark);
  border: 1px solid var(--border-color);
}
.btn-message-store, .btn-share-store {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  color: var(--text-dark);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-message-store:hover, .btn-share-store:hover {
  background: var(--bg-light);
  transform: translateY(-1px);
}
.store-live-status-block {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.store-live-dot {
  width: 8px;
  height: 8px;
  background: var(--success);
  border-radius: var(--radius-full);
  box-shadow: 0 0 8px var(--success);
  animation: storeLivePulse 1.5s infinite;
}
@keyframes storeLivePulse {
  0% { transform: scale(0.9); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.6; }
}

/* 3. Floating Trust metrics */
.store-trust-showcase {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.store-trust-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 12px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s;
}
.store-trust-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}
.store-trust-val {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 4px;
}
.store-trust-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* 4. Sticky Navigation Subtabs */
.store-sticky-nav-bar {
  position: sticky;
  top: calc(var(--scroll-offset) + 16px);
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  z-index: 50;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.store-nav-tabs {
  display: flex;
  overflow-x: auto;
  gap: 4px;
  padding: 6px;
  scrollbar-width: none;
}
.store-nav-tabs::-webkit-scrollbar {
  display: none;
}
.store-nav-tab {
  background: none;
  border: none;
  padding: 10px 18px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: all 0.2s;
}
.store-nav-tab:hover {
  color: var(--primary);
  background: var(--bg-light);
}
.store-nav-tab.active {
  background: var(--primary);
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(109, 40, 217, 0.2);
}

/* 5. Tab Panels */
.store-tab-panel {
  display: none;
  animation: storeFadeIn 0.3s ease-out;
}
.store-tab-panel.active {
  display: block;
}
@keyframes storeFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 6. Home: Live activity bar */
.store-live-activity-bar {
  background: rgba(239, 68, 68, 0.08);
  border: 1px dashed rgba(239, 68, 68, 0.3);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.live-activity-pulse {
  width: 8px;
  height: 8px;
  background: var(--danger);
  border-radius: var(--radius-full);
  animation: storeLivePulse 1.2s infinite;
}
.live-activity-text {
  font-size: 0.8rem;
  color: var(--danger);
  font-weight: 700;
}

/* Follower rewards box */
.store-follower-rewards-box {
  background: linear-gradient(135deg, var(--bg-white), var(--secondary-light));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 24px;
  animation: storeSlideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
}
@keyframes storeSlideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
.rewards-box-content h4 {
  font-size: 1rem;
  color: var(--primary);
  margin-bottom: 6px;
}
.rewards-box-content p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.rewards-vouchers-row {
  display: flex;
  gap: 12px;
}
.reward-ticket {
  background: var(--bg-white);
  border: 2px dashed var(--primary);
  border-radius: var(--radius-sm);
  padding: 12px;
  min-width: 150px;
  text-align: center;
  position: relative;
}
.reward-ticket::before, .reward-ticket::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  background: var(--bg-light);
  border-radius: var(--radius-full);
  transform: translateY(-50%);
}
.reward-ticket::before { left: -6px; border-right: 2px solid var(--primary); }
.reward-ticket::after { right: -6px; border-left: 2px solid var(--primary); }
.ticket-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--primary);
}
.ticket-desc {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.btn-claim-ticket {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}
.btn-claim-ticket:hover {
  background: var(--primary-hover);
}
.btn-claim-ticket.collected {
  background: var(--success);
  color: #fff;
  cursor: default;
}

/* Feature Banner */
.store-brand-feature-banner {
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.04) 0%, rgba(139, 92, 246, 0.08) 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
}
.feature-banner-text h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 6px;
}
.feature-banner-text p {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.45;
}

/* Coupons grid */
.store-coupons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.store-coupon-ticket {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  transition: transform 0.3s, border-color 0.3s;
}
.store-coupon-ticket:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
}
.coupon-left {
  background: var(--secondary-light);
  color: var(--primary);
  width: 100px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 2px dashed var(--border-color);
  position: relative;
}
.coupon-left::before, .coupon-left::after {
  content: '';
  position: absolute;
  right: -5px;
  width: 10px;
  height: 10px;
  background: var(--bg-light);
  border-radius: var(--radius-full);
}
.coupon-left::before { top: -5px; }
.coupon-left::after { bottom: -5px; }
.coupon-left-val {
  font-size: 1.3rem;
  font-weight: 800;
}
.coupon-left-label {
  font-size: 0.65rem;
  font-weight: 700;
}
.coupon-right {
  flex: 1;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.coupon-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-dark);
}
.coupon-desc {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.btn-coupon-collect {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  align-self: flex-start;
  transition: all 0.2s;
  margin-top: 8px;
}
.btn-coupon-collect:hover {
  background: var(--primary-hover);
}
.btn-coupon-collect.collected {
  background: var(--success);
  cursor: default;
}

/* Title Header */
.store-section-title {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 16px;
}

/* 7. Products page search & filters */
.store-products-layout {
  display: flex;
  flex-direction: column;
}
.store-subcategory-scroll {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding-bottom: 12px;
  scrollbar-width: none;
}
.store-subcategory-scroll::-webkit-scrollbar {
  display: none;
}
.store-sub-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  color: var(--text-dark);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.store-sub-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.store-sub-pill.active {
  background: var(--primary-hover);
  color: #fff;
  border-color: var(--primary-hover);
}
.store-search-bar-wrap {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.store-search-bar-wrap input {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--radius-md) !important;
}
.store-voice-btn {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  font-size: 1.15rem;
  width: 44px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}
.store-voice-btn:hover {
  background: var(--bg-light);
  border-color: var(--primary);
}

/* 8. Flash deals timers & progress */
.store-flash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
}
.store-flash-countdown {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark);
}
.flash-claim-row {
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.flash-claim-track {
  height: 6px;
  background: var(--bg-gray);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 4px;
}
.flash-claim-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--danger), var(--accent));
  border-radius: var(--radius-full);
}

/* 9. Reviews Dashboard styling */
.store-reviews-dashboard {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  gap: 32px;
  margin-bottom: 24px;
}
.reviews-dashboard-left {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border-color);
  padding-right: 32px;
}
.dashboard-big-rating {
  font-size: 3rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1;
}
.dashboard-stars {
  font-size: 1.1rem;
  color: var(--accent);
  margin-top: 6px;
}
.dashboard-total-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.reviews-dashboard-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rating-bar-row {
  display: flex;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-dark);
  gap: 10px;
}
.rating-bar-row span:first-child {
  width: 45px;
}
.rating-bar-row span:last-child {
  width: 30px;
  text-align: right;
}
.bar-bg {
  flex: 1;
  height: 8px;
  background: var(--bg-gray);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-full);
}
.store-reviews-filter-row {
  display: flex;
  gap: 8px;
}
.reviews-filter-pill {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  color: var(--text-dark);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.reviews-filter-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.reviews-filter-pill.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.store-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.review-item-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
}
.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.review-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.review-user-avatar {
  font-size: 1.25rem;
}
.review-username {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark);
}
.review-verified-tag {
  font-size: 0.65rem;
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
  padding: 2px 6px;
  border-radius: var(--radius-full);
  font-weight: 700;
}
.review-date {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.review-rating-row {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--accent);
}
.review-text {
  font-size: 0.82rem;
  color: var(--text-dark);
  margin-top: 8px;
  line-height: 1.45;
}
.review-photos-shelf {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.review-photo-item {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  background: var(--bg-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: transform 0.2s;
}
.review-photo-item:hover {
  transform: scale(1.05);
}
.review-merchant-reply {
  background: var(--bg-light);
  border-left: 3px solid var(--primary);
  border-radius: 4px;
  padding: 10px 12px;
  margin-top: 12px;
}
.merchant-reply-header {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
}
.merchant-reply-text {
  font-size: 0.78rem;
  color: var(--text-dark);
  margin-top: 4px;
  line-height: 1.4;
}

/* 10. Customer Gallery styles */
.store-gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.gallery-img-card {
  position: relative;
  aspect-ratio: 1;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s;
}
.gallery-img-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}
.gallery-img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 4px;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.3s;
}
.gallery-img-card:hover .gallery-card-overlay {
  opacity: 1;
}

/* 11. TikTok Stream sections */
.store-live-card-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.live-hero-video-mock {
  position: relative;
  aspect-ratio: 1.5;
  background: linear-gradient(135deg, #1A1A24 0%, #0F0F14 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.live-hero-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--danger);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  box-shadow: 0 0 10px var(--danger);
}
.live-hero-viewers {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}
.live-play-btn-mock {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.2);
  border: 2px solid #fff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 0 15px rgba(255,255,255,0.3);
  transition: transform 0.2s;
}
.live-hero-video-mock:hover .live-play-btn-mock {
  transform: scale(1.1);
}
.live-hero-product-teaser {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-lg);
}
:root[data-theme="dark"] .live-hero-product-teaser {
  background: rgba(26, 26, 30, 0.95);
}
.teaser-img {
  font-size: 2rem;
}
.teaser-info {
  flex: 1;
}
.teaser-info h5 {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-dark);
}
.teaser-info p {
  margin: 2px 0 0 0;
  font-size: 0.75rem;
  color: var(--primary);
  font-weight: 800;
}
.btn-teaser-buy {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}
.btn-teaser-buy:hover {
  background: var(--primary-hover);
}
.live-hero-chat-mock {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-left: 1px solid var(--border-color);
}
.live-chat-header {
  background: var(--bg-light);
  border-bottom: 1px solid var(--border-color);
  padding: 12px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-dark);
}
.live-chat-messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  font-size: 0.78rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
}
.live-chat-messages div {
  background: var(--bg-light);
  padding: 6px 10px;
  border-radius: 8px;
  align-self: flex-start;
}
.live-chat-messages div strong {
  color: var(--primary);
  margin-right: 4px;
}
.live-chat-input-wrap {
  display: flex;
  padding: 10px;
  border-top: 1px solid var(--border-color);
  gap: 6px;
}
.live-chat-input-wrap input {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
}
.btn-send-chat {
  background: var(--primary);
  color: #fff;
  border: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

.upcoming-streams-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.upcoming-stream-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s;
}
.upcoming-stream-card:hover {
  transform: translateY(-2px);
}
.stream-card-banner {
  height: 120px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.stream-card-bell-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}
.upcoming-stream-body {
  padding: 14px;
}
.stream-card-time {
  font-size: 0.72rem;
  color: var(--primary);
  font-weight: 700;
}
.stream-card-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-top: 4px;
}
.btn-stream-reminder {
  width: 100%;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  color: var(--text-dark);
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  margin-top: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-stream-reminder:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.btn-stream-reminder.active {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
}

/* 12. Loyalty System dashboard */
.store-loyalty-container {
  display: flex;
  flex-direction: column;
}
.loyalty-header-dashboard {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.loyalty-title-wrap h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tier-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  color: #fff;
}
.tier-badge.bronze { background: #B45309; }
.tier-badge.silver { background: #9CA3AF; }
.tier-badge.gold { background: linear-gradient(135deg, #F59E0B, #D97706); }
.tier-badge.platinum { background: linear-gradient(135deg, #3B82F6, #6D28D9); }

.loyalty-points-circle {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-full);
  border: 6px solid var(--secondary-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.points-val {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}
.points-label {
  font-size: 0.58rem;
  color: var(--text-muted);
  font-weight: 700;
  margin-top: 2px;
}
.loyalty-progress-row {
  margin-top: 16px;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
}
.progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-dark);
  font-weight: 600;
  margin-bottom: 6px;
}
.progress-track {
  height: 8px;
  background: var(--bg-gray);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: var(--radius-full);
}
.loyalty-sub-title {
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 12px;
}
.loyalty-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.benefit-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
}
.benefit-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 8px;
}
.benefit-card h5 {
  margin: 0 0 4px 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark);
}
.benefit-card p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.loyalty-tiers-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tier-list-row {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}
.tier-list-row.active {
  border-color: var(--primary);
  background: rgba(109, 40, 217, 0.03);
}
.tier-name {
  font-weight: 700;
  color: var(--text-dark);
}
.tier-desc {
  color: var(--text-muted);
}

/* 13. FAQ & Timelines */
.store-faq-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
}
.faq-accordion-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark);
  cursor: pointer;
  text-align: left;
}
.faq-question:hover {
  background: var(--bg-light);
}
.faq-arrow {
  transition: transform 0.2s;
  font-size: 0.75rem;
}
.faq-item.active .faq-arrow {
  transform: rotate(180deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
  border-top: 1px solid transparent;
}
.faq-item.active .faq-answer {
  border-top-color: var(--border-color);
}
.faq-answer-content {
  padding: 16px;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Trust Verification Card */
.trust-verification-card, .operating-details-card, .achievement-timeline-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.trust-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 8px;
}
.verification-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.verif-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}
.verif-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.verif-item span:first-child {
  color: var(--text-dark);
  font-weight: 600;
}
.verif-item span:last-child {
  color: var(--success);
  font-weight: 700;
}

.details-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.details-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
}
.details-row strong {
  color: var(--text-dark);
}
.details-row span {
  color: var(--text-muted);
  text-align: right;
}

/* Timeline Milestones */
.timeline-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  padding-left: 20px;
  margin-top: 12px;
}
.timeline-container::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--primary);
  opacity: 0.3;
}
.timeline-node {
  position: relative;
}
.timeline-node::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--primary);
  border: 2px solid var(--bg-white);
  box-shadow: 0 0 5px var(--primary);
}
.timeline-year {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--primary);
}
.timeline-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-top: 1px;
}

/* Map Card */
.store-map-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.map-placeholder-header {
  padding: 12px 16px;
  background: var(--bg-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}
.map-placeholder-header h5 {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-dark);
}
.map-status {
  font-size: 0.65rem;
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-full);
}
.map-visual-box {
  height: 150px;
  background: linear-gradient(45deg, #A7F3D0 25%, #34D399 25%, #34D399 50%, #A7F3D0 50%, #A7F3D0 75%, #34D399 75%, #34D399 100%);
  background-size: 40px 40px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-visual-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(229, 231, 235, 0.4);
}
.map-pin {
  font-size: 2.2rem;
  z-index: 2;
  animation: mapPinBounce 1.5s infinite;
}
@keyframes mapPinBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.map-circle {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-full);
  background: rgba(109, 40, 217, 0.2);
  border: 1px solid var(--primary);
  z-index: 1;
  animation: mapCircleRipple 2s infinite;
}
@keyframes mapCircleRipple {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}
.map-label {
  position: absolute;
  bottom: 10px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 4px;
  z-index: 2;
}
.map-footer-details {
  padding: 12px 16px;
}
.map-footer-details p {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* AI Recommendations */
.store-ai-recommendations-section {
  border-top: 1px solid var(--border-color);
  margin-top: 40px;
  padding-top: 32px;
}
.ai-carousel-title {
  font-size: 0.85rem;
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 12px;
}

/* Empty State */
.store-empty-state {
  text-align: center;
  padding: 48px 24px;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  max-width: 600px;
  margin: 40px auto;
}
.empty-state-visual {
  font-size: 4rem;
  margin-bottom: 16px;
}
.store-empty-state h3 {
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 8px;
}
.store-empty-state p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 24px;
  line-height: 1.45;
}
.empty-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.store-suggestions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
}

/* Mobile sticky floating action drawer */
.mobile-store-floating-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--bg-white);
  border-top: 1px solid var(--border-color);
  display: none; /* Triggered only on responsive max-width */
  justify-content: space-around;
  padding: 12px;
  box-shadow: 0 -4px 15px rgba(0,0,0,0.05);
  z-index: 100;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.mobile-bar-btn {
  background: none;
  border: none;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.mobile-bar-btn span {
  font-size: 1.25rem;
}
.mobile-bar-btn:hover {
  color: var(--primary);
}

/* Story Video Modal */
.store-story-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: storeFadeIn 0.3s;
}
.store-story-modal.open {
  display: flex;
}
.store-story-modal-content {
  background: var(--bg-white);
  width: 90%;
  max-width: 500px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  animation: storeStoryScale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes storeStoryScale {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.store-story-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: rgba(0,0,0,0.6);
  border: none;
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.store-story-modal-close:hover {
  background: rgba(0,0,0,0.8);
}
.store-story-video-preview {
  padding: 20px;
}
.story-preview-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.store-story-avatar {
  font-size: 2.2rem;
  width: 50px;
  height: 50px;
  background: var(--bg-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.store-story-meta h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-dark);
}
.store-story-meta p {
  margin: 2px 0 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.story-video-box {
  aspect-ratio: 1;
  background: linear-gradient(135deg, #1E1B4B 0%, #311042 100%);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
  text-align: center;
  padding: 20px;
}
.story-playing-animation {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 20px;
}
.wave-bar {
  width: 3px;
  background: var(--secondary);
  border-radius: 1px;
  animation: storyWave 0.8s infinite alternate;
}
.wave-bar:nth-child(1) { height: 100%; animation-delay: 0.1s; }
.wave-bar:nth-child(2) { height: 60%; animation-delay: 0.3s; }
.wave-bar:nth-child(3) { height: 80%; animation-delay: 0.2s; }
.wave-bar:nth-child(4) { height: 40%; animation-delay: 0.4s; }
@keyframes storyWave {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1); }
}

/* 14. Responsive store page checks */
@media (max-width: 1024px) {
  .store-trust-showcase {
    grid-template-columns: repeat(3, 1fr);
  }
  .store-faq-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
@media (max-width: 768px) {
  .store-identity-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .store-identity-left {
    flex-direction: column;
    align-items: center;
  }
  .store-logo-wrapper {
    margin-top: -50px;
  }
  .store-name-row {
    justify-content: center;
  }
  .store-meta-stats-row {
    justify-content: center;
  }
  .store-social-links {
    justify-content: center;
  }
  .store-identity-right {
    align-items: center;
    width: 100%;
  }
  .store-actions-row {
    justify-content: center;
    width: 100%;
  }
  .store-trust-showcase {
    grid-template-columns: repeat(2, 1fr);
  }
  .store-coupons-grid {
    grid-template-columns: 1fr;
  }
  .upcoming-streams-grid {
    grid-template-columns: 1fr;
  }
  .store-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .store-live-card-hero {
    grid-template-columns: 1fr;
  }
  .live-hero-chat-mock {
    border-left: none;
    border-top: 1px solid var(--border-color);
  }
  .mobile-store-floating-bar {
    display: flex;
  }
  #panel-store {
    padding-bottom: 80px; /* space for mobile bar */
  }
}

/* Fix product grid width issue for Seller Store Page */
#panel-store {
  max-width: 1600px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

#panel-store .picks-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important; /* Default Desktop: 5 columns */
  gap: 20px !important;
  width: 100% !important;
}

@media (min-width: 1400px) {
  #panel-store .picks-grid {
    grid-template-columns: repeat(6, 1fr) !important; /* Large Screens: 6 columns */
  }
}

@media (max-width: 1200px) {
  #panel-store .picks-grid {
    grid-template-columns: repeat(4, 1fr) !important; /* Small Desktop: 4 columns */
  }
}

@media (max-width: 992px) {
  #panel-store .picks-grid {
    grid-template-columns: repeat(3, 1fr) !important; /* Tablet: 3 columns */
  }
}

@media (max-width: 768px) {
  #panel-store .picks-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* Mobile: 2 columns */
    gap: 12px !important;
  }
}

@media (max-width: 480px) {
  #panel-store .picks-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* Small Mobile: 2 columns */
    gap: 8px !important;
  }
}

/* Visual scaling and premium layout enhancement */
@media (min-width: 1200px) {
  #panel-store .picks-card-img-box {
    height: 180px !important;
  }
  #panel-store .picks-card-img-box span {
    font-size: 4.8rem !important;
    transition: transform 0.3s ease;
  }
  #panel-store .picks-card:hover .picks-card-img-box span {
    transform: scale(1.1);
  }
}

/* ==========================================================================
   PREMIUM MARKETPLACE HEADER ICONS & BADGES (RARA DEALS)
   ========================================================================== */

/* Base SVG styling with custom 2.2px stroke */
.premium-header-icon {
  width: 22px;
  height: 22px;
  stroke-width: 2.2;
  fill: none;
  stroke: currentColor;
  display: inline-block;
  vertical-align: middle;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--text-muted);
}

/* Responsive sizes */
@media (max-width: 1024px) {
  .premium-header-icon {
    width: 20px;
    height: 20px;
  }
}

/* Icon button hover lift & glow transitions */
.header-user-actions .icon-btn {
  background: transparent !important;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.header-user-actions .icon-btn:hover {
  transform: translateY(-3px) scale(1.05) !important;
  background: transparent !important; /* Keep transparent minimal look */
  box-shadow: none !important;
}

.header-user-actions .icon-btn:hover .premium-header-icon {
  color: var(--primary, #7C3AED) !important;
  filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.45)) !important;
}

/* Active state */
.header-user-actions .icon-btn:active .premium-header-icon {
  color: var(--primary, #7C3AED) !important;
  filter: drop-shadow(0 0 10px rgba(124, 58, 237, 0.7)) !important;
}

/* Premium Badge Redesign (cherry-red gradient) */
.header-user-actions .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: linear-gradient(135deg, #FF4B4B, #E11D48) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  min-width: 18px !important;
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  border: 2px solid var(--bg-white) !important; /* Blends with light/dark background */
  box-shadow: 0 3px 8px rgba(225, 29, 72, 0.35) !important;
  line-height: 1 !important;
  z-index: 10;
  pointer-events: none;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Micro-interaction Animations */

/* Bell vibration shake */
@keyframes bell-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(8deg); }
  30% { transform: rotate(-6deg); }
  45% { transform: rotate(4deg); }
  60% { transform: rotate(-3deg); }
  75% { transform: rotate(2deg); }
  90% { transform: rotate(-1deg); }
}

.header-user-actions .icon-btn:hover .bell-icon {
  animation: bell-ring 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform-origin: top center;
}

/* Wishlist Heart Beat */
@keyframes heart-beat {
  0% { transform: scale(1); }
  25% { transform: scale(1.12); }
  40% { transform: scale(1.02); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.header-user-actions .icon-btn:hover .heart-icon {
  animation: heart-beat 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
  fill: rgba(124, 58, 237, 0.15) !important; /* Sleek semi-transparent purple fill */
}

/* Cart slide-tilt horizontal movement */
@keyframes cart-wheel {
  0% { transform: translateX(0) rotate(0); }
  30% { transform: translateX(2px) rotate(1deg); }
  60% { transform: translateX(-1px) rotate(-0.5deg); }
  100% { transform: translateX(0) rotate(0); }
}

.header-user-actions .icon-btn:hover .cart-icon {
  animation: cart-wheel 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ==========================================================================
   RARA DEALS NEXT-GEN PREMIUM WISHLIST SYSTEM STYLES
   ========================================================================== */

.wishlist-assistant-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(124, 58, 237, 0.04);
  border: 1.5px dashed rgba(124, 58, 237, 0.2);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  transition: var(--transition);
}

:root[data-theme="dark"] .wishlist-assistant-banner {
  background: rgba(139, 92, 246, 0.05) !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
}

.folder-pill {
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.folder-pill:hover {
  background: rgba(124, 58, 237, 0.08);
  border-color: var(--primary);
  color: var(--primary);
}

.folder-pill.active {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
}

/* Premium Product Card styling */
.wishlist-premium-card {
  position: relative;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  overflow: hidden;
  text-align: left;
}

.wishlist-premium-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.wishlist-card-select-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
}

.wishlist-select-cb {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary);
}

.wishlist-card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}

.wishlist-card-badge.out-stock {
  background: rgba(220, 38, 38, 0.08);
  color: #DC2626;
  border: 1px solid rgba(220, 38, 38, 0.15);
}

.wishlist-card-badge.selling-fast {
  background: rgba(245, 158, 11, 0.08);
  color: #D97706;
  border: 1px solid rgba(245, 158, 11, 0.15);
}

.wishlist-card-badge.in-stock {
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.15);
}

.wishlist-price-drop-alert-banner {
  background: rgba(16, 185, 129, 0.06);
  border: 1.5px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--radius-sm);
  padding: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 0.75rem;
  color: #047857;
  font-weight: 600;
}

.wishlist-price-drop-alert-banner span {
  font-weight: 800;
}

/* Price timeline tracking */
.price-timeline-box {
  margin-top: 10px;
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
  font-size: 0.68rem;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.timeline-row {
  display: flex;
  justify-content: space-between;
}

.timeline-row.today {
  color: var(--success);
  font-weight: bold;
}

.wishlist-card-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wishlist-card-meta .seller {
  font-weight: bold;
  color: var(--primary);
  cursor: pointer;
}

.wishlist-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.wishlist-card-actions-row {
  display: flex;
  gap: 6px;
  width: 100%;
}

.wishlist-icon-action-btn {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.wishlist-icon-action-btn:hover {
  background: var(--bg-light);
  border-color: var(--primary);
  color: var(--primary);
}

.wishlist-icon-action-btn.active {
  background: rgba(124, 58, 237, 0.08);
  color: var(--primary);
  border-color: var(--primary);
}

.wishlist-icon-action-btn.delete-btn:hover {
  background: rgba(220, 38, 38, 0.05);
  color: #DC2626;
  border-color: #DC2626;
}

/* Compare layout */
.wishlist-compare-panel {
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  margin-bottom: 24px;
}

.compare-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.compare-header h5 {
  font-family: var(--font-title);
  font-weight: 700;
  margin: 0;
}

.close-compare-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.compare-table-container {
  overflow-x: auto;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 450px;
}

.compare-table th, .compare-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.8rem;
}

.compare-table th {
  font-weight: bold;
  color: var(--text-dark);
}

.compare-table td.feature-name {
  font-weight: bold;
  color: var(--text-muted);
  width: 120px;
}

/* Mobile sticky floating bar */
.wishlist-mobile-floating-bar {
  position: fixed;
  bottom: 68px; /* sits above bottom navigation bar */
  left: 16px;
  right: 16px;
  background: rgba(250, 249, 245, 0.95);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  display: none; /* controlled by JS & Media query */
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px;
  z-index: 1000;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: floatUp 0.3s ease;
}

@keyframes floatUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 768px) {
  body.view-customer-wishlist .wishlist-mobile-floating-bar {
    display: flex;
  }
}

.empty-wishlist-box {
  padding: 48px 24px;
  text-align: center;
  background: var(--bg-white);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 16px;
}

.empty-title {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 8px 0;
}

.empty-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 24px;
  max-width: 320px;
}

.pulsing-chart-dot {
  animation: pulseDot 2s infinite;
  transform-origin: center;
}

@keyframes pulseDot {
  0% { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}





/* ============================================================
   WISHLIST PAGE — COMPLETE RESPONSIVE REDESIGN
   Premium, Mobile-First, Ultra-Clean
   ============================================================ */

/* ── Dashboard body min-width fix (prevents blank content) ── */
.dashboard-layout {
  display: grid !important;
  grid-template-columns: 280px 1fr !important;
  gap: 24px !important;
  min-height: 100vh;
  align-items: start;
}

.dashboard-body {
  padding: 28px !important;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* ── Wishlist page container ── */
#cust-tab-wishlist {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ── AI Assistant banner ── */
.wishlist-assistant-banner {
  border-radius: 14px !important;
  padding: 18px 20px !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}

.assistant-avatar {
  font-size: 2rem !important;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: rgba(124, 58, 237, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Top Dashboard (Savings + Gamification) ── */
.wishlist-top-dashboard {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

.wishlist-savings-tracker,
.wishlist-gamification {
  border-radius: 14px !important;
  padding: 18px 20px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
  transition: box-shadow 0.2s, transform 0.2s;
}

.wishlist-savings-tracker:hover,
.wishlist-gamification:hover {
  box-shadow: 0 6px 24px rgba(124, 58, 237, 0.08) !important;
  transform: translateY(-2px);
}

/* ── Collections/Folder pills ── */
.wishlist-collections-row {
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.folders-pills-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.folders-pills-container::-webkit-scrollbar { display: none; }

/* ── Controls bar ── */
.wishlist-controls-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 12px 16px;
}

.wishlist-controls-bar .controls-left {
  display: flex !important;
  gap: 8px !important;
  flex: 1 1 300px !important;
}

.wishlist-controls-bar .controls-right {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

/* ── Product Grid ── */
.wishlist-grid-premium {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 28px;
}

/* ── Premium Card ── */
.wishlist-premium-card {
  border-radius: 14px !important;
  padding: 14px !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.05) !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-white) !important;
  transition: all 0.22s ease !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px;
}

.wishlist-premium-card:hover {
  box-shadow: 0 8px 28px rgba(124,58,237,0.10) !important;
  transform: translateY(-3px) !important;
  border-color: rgba(124,58,237,0.2) !important;
}

/* Product image area */
.wishlist-premium-card .card-img-area {
  width: 100%;
  height: 130px;
  background: var(--bg-light);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  margin-bottom: 10px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  transition: background 0.2s;
}

.wishlist-premium-card:hover .card-img-area {
  background: rgba(124,58,237,0.04);
}

/* ── Coupon grid ── */
.wishlist-coupons-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}

/* ── AI Recs grid ── */
#wishlist-ai-recs-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 14px !important;
}

/* ── Discounts section ── */
#wishlist-discounts-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 14px !important;
}

/* ============================================================
   TABLET — 768px to 1024px
   ============================================================ */
@media (max-width: 1024px) {
  /* Tablet compact sidebar layout inherited */

  .dashboard-body {
    padding: 20px !important;
  }

  .wishlist-top-dashboard {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .wishlist-grid-premium {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 12px !important;
  }

  .wishlist-coupons-grid {
    grid-template-columns: 1fr !important;
  }

  .wishlist-controls-bar .controls-right button {
    font-size: 0.75rem !important;
    padding: 6px 10px !important;
  }
}

/* ============================================================
   MOBILE — below 768px
   ============================================================ */
@media (max-width: 768px) {
  /* Dashboard layout: single column, sidebar hidden */
  #panel-customer .dashboard-layout {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    min-height: unset !important;
  }

  #panel-customer .dashboard-sidebar:not(.open) {
    display: none !important;
  }

  .dashboard-body {
    padding: 14px !important;
  }

  /* Wishlist top dashboard: stack vertically */
  .wishlist-top-dashboard {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* AI banner: compact on mobile */
  .wishlist-assistant-banner {
    padding: 12px 14px !important;
    gap: 10px !important;
    border-radius: 10px !important;
  }

  .assistant-avatar {
    font-size: 1.5rem !important;
    width: 38px !important;
    height: 38px !important;
  }

  /* Controls bar: full width stacked */
  .wishlist-controls-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }

  .wishlist-controls-bar .controls-left {
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .wishlist-controls-bar .controls-left input,
  .wishlist-controls-bar .controls-left select {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .wishlist-controls-bar .controls-right {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .wishlist-controls-bar .controls-right button {
    width: 100% !important;
    font-size: 0.75rem !important;
    padding: 7px 6px !important;
    justify-content: center !important;
  }

  /* Collections row: scroll horizontally */
  .wishlist-collections-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .folders-pills-container {
    width: 100% !important;
  }

  .add-folder-btn {
    align-self: flex-start !important;
  }

  /* Product grid: 2 cols on mobile */
  .wishlist-grid-premium {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .wishlist-premium-card {
    padding: 10px !important;
    border-radius: 10px !important;
  }

  .wishlist-premium-card .card-img-area {
    height: 100px !important;
    font-size: 2.8rem !important;
    border-radius: 8px !important;
  }

  /* Coupon grid: 1 col */
  .wishlist-coupons-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* AI recs: 2 cols */
  #wishlist-ai-recs-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  #wishlist-discounts-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Savings tracker stats: wrap nicely */
  .tracker-stats {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .stat-box {
    min-width: 80px !important;
  }

  /* Tab title responsive */
  .tab-title-premium {
    font-size: 1.1rem !important;
    margin-bottom: 16px !important;
  }

  /* VIP progress text */
  .vip-progress-text {
    font-size: 0.7rem !important;
  }

  /* Price chart: full width scroll */
  .wishlist-price-chart-card {
    border-radius: 10px !important;
    padding: 14px !important;
  }

  .price-trend-svg {
    min-width: 300px;
  }

  /* Voucher ticket: smaller */
  .wishlist-coupon-ticket .ticket-left {
    width: 75px !important;
    padding: 8px !important;
  }

  .wishlist-coupon-ticket .ticket-right {
    padding: 10px 12px !important;
  }

  /* Compare panel: full-width scroll */
  .compare-table-container {
    overflow-x: auto !important;
  }

  /* Empty wishlist box: compact */
  .empty-wishlist-box {
    padding: 32px 16px !important;
  }

  .empty-icon {
    font-size: 3rem !important;
    margin-bottom: 12px !important;
  }

  .empty-title {
    font-size: 1rem !important;
  }

  .empty-text {
    font-size: 0.8rem !important;
  }
}

/* ============================================================
   SMALL MOBILE — below 480px
   ============================================================ */
@media (max-width: 480px) {
  .dashboard-body {
    padding: 10px !important;
  }

  /* Single column product grid on tiny screens */
  .wishlist-grid-premium {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .wishlist-premium-card {
    padding: 8px !important;
  }

  .wishlist-premium-card .card-img-area {
    height: 85px !important;
    font-size: 2.4rem !important;
  }

  #wishlist-ai-recs-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #wishlist-discounts-container {
    grid-template-columns: 1fr !important;
  }

  .wishlist-controls-bar .controls-right {
    grid-template-columns: 1fr 1fr !important;
  }

  .folder-pill {
    padding: 6px 12px !important;
    font-size: 0.72rem !important;
  }

  .wishlist-assistant-banner .assistant-avatar {
    display: none !important;
  }

  .wishlist-top-dashboard {
    grid-template-columns: 1fr !important;
  }

  .wishlist-savings-tracker,
  .wishlist-gamification {
    padding: 14px !important;
  }
}

/* ============================================================
   DARK MODE OVERRIDES — Wishlist
   ============================================================ */
:root[data-theme="dark"] .wishlist-premium-card {
  background: var(--bg-white) !important;
  border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .wishlist-premium-card:hover {
  box-shadow: 0 8px 28px rgba(139,92,246,0.15) !important;
}

:root[data-theme="dark"] .wishlist-controls-bar {
  background: var(--bg-white) !important;
}

:root[data-theme="dark"] .wishlist-savings-tracker,
:root[data-theme="dark"] .wishlist-gamification {
  background: var(--bg-white) !important;
}

/* ============================================================
   ANIMATION — Card enter stagger
   ============================================================ */
.wishlist-premium-card {
  animation: wishCardIn 0.3s ease-out both;
}

@keyframes wishCardIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}

.wishlist-premium-card:nth-child(1) { animation-delay: 0.02s; }
.wishlist-premium-card:nth-child(2) { animation-delay: 0.04s; }
.wishlist-premium-card:nth-child(3) { animation-delay: 0.06s; }
.wishlist-premium-card:nth-child(4) { animation-delay: 0.08s; }
.wishlist-premium-card:nth-child(5) { animation-delay: 0.10s; }
.wishlist-premium-card:nth-child(6) { animation-delay: 0.12s; }
.wishlist-premium-card:nth-child(7) { animation-delay: 0.14s; }
.wishlist-premium-card:nth-child(8) { animation-delay: 0.16s; }



/* =========================================================================
   PREMIUM CLONED WISHLIST & SIDEBAR STYLES (SAM SAME CLONE)
   ========================================================================= */

.rara-wish-rec-container {
  font-family: 'Inter', sans-serif;
  color: #1E293B;
  padding: 8px 0;
  text-align: left;
}

/* Header Row */
.rara-wish-rec-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.rara-wish-rec-title-area h2 {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0F172A;
}
.rara-wish-rec-title-area p {
  font-size: 0.85rem;
  color: #64748B;
  margin: 0;
}
.rara-wish-rec-header-actions {
  display: flex;
  gap: 8px;
}
.rara-wish-rec-btn-action {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s ease;
}
.rara-wish-rec-btn-action:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
}

/* Metrics Row */
.rara-wish-rec-metrics-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 20px 0;
}
.rara-wish-rec-metric-card {
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid transparent;
  transition: transform 0.2s ease;
}
.rara-wish-rec-metric-card:hover {
  transform: translateY(-2px);
}
.rara-wish-rec-metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.rara-wish-rec-metric-info h3 {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0 0 2px 0;
  color: #0F172A;
}
.rara-wish-rec-metric-info p {
  font-size: 0.75rem;
  font-weight: 700;
  color: #334155;
  margin: 0 0 1px 0;
}
.rara-wish-rec-metric-info span {
  font-size: 0.68rem;
  color: #64748B;
  display: block;
  white-space: nowrap;
}

/* Metric Colors */
.rara-wish-rec-card-pink { background: #FFF1F2; border-color: rgba(244, 63, 94, 0.12); }
.rara-wish-rec-card-pink .rara-wish-rec-metric-icon { background: rgba(244, 63, 94, 0.08); color: #F43F5E; }

.rara-wish-rec-card-green { background: #ECFDF5; border-color: rgba(16, 185, 129, 0.12); }
.rara-wish-rec-card-green .rara-wish-rec-metric-icon { background: rgba(16, 185, 129, 0.08); color: #10B981; }

.rara-wish-rec-card-amber { background: #FFFBEB; border-color: rgba(245, 158, 11, 0.12); }
.rara-wish-rec-card-amber .rara-wish-rec-metric-icon { background: rgba(245, 158, 11, 0.08); color: #D97706; }

.rara-wish-rec-card-blue { background: #EFF6FF; border-color: rgba(59, 130, 246, 0.12); }
.rara-wish-rec-card-blue .rara-wish-rec-metric-icon { background: rgba(59, 130, 246, 0.08); color: #3B82F6; }

.rara-wish-rec-card-purple { background: #F5F3FF; border-color: rgba(139, 92, 246, 0.12); }
.rara-wish-rec-card-purple .rara-wish-rec-metric-icon { background: rgba(139, 92, 246, 0.08); color: #8B5CF6; }

/* Widgets Row */
.rara-wish-rec-widgets-row {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.rara-wish-rec-widget-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.01);
  display: flex;
  flex-direction: column;
}
.rara-wish-rec-widget-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.rara-wish-rec-widget-title h4 {
  font-size: 0.95rem;
  font-weight: 750;
  margin: 0;
  color: #0F172A;
}
.rara-wish-rec-widget-title .manage-link {
  font-size: 0.78rem;
  color: #8B5CF6;
  text-decoration: none;
  font-weight: 700;
}

/* Savings Tracker Info */
.rara-wish-rec-savings-stats {
  display: flex;
  gap: 28px;
  margin-bottom: 12px;
}
.rara-wish-rec-savings-item h5 {
  font-size: 0.72rem;
  color: #64748B;
  margin: 0 0 3px 0;
  font-weight: 600;
  text-transform: uppercase;
}
.rara-wish-rec-savings-item p {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
}
.rara-wish-rec-savings-item.saved p { color: #8B5CF6; }
.rara-wish-rec-savings-item.current p { color: #10B981; }

/* Rewards Progress Box */
.rara-wish-rec-rewards-box {
  background: #F5F3FF;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  border: 1px dashed rgba(139, 92, 246, 0.2);
}
.rara-wish-rec-rewards-icon {
  font-size: 1.7rem;
}
.rara-wish-rec-rewards-info h5 {
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0 0 2px 0;
  color: #0F172A;
}
.rara-wish-rec-rewards-info p {
  font-size: 0.7rem;
  color: #64748B;
  margin: 0;
}

.rara-wish-rec-progress-bg {
  height: 6px;
  background: #E2E8F0;
  border-radius: 3px;
  overflow: hidden;
}
.rara-wish-rec-progress-fill {
  height: 100%;
  background: #8B5CF6;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.rara-wish-rec-progress-lbl {
  font-size: 0.72rem;
  color: #64748B;
  text-align: right;
  margin-top: 4px;
  display: block;
}

/* Collections Grid */
.rara-wish-rec-collections-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.rara-wish-rec-collection-item {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}
.rara-wish-rec-collection-item:hover {
  background: #F1F5F9;
  border-color: #CBD5E1;
}
.rara-wish-rec-collection-item.active {
  border-color: #8B5CF6;
  background: #F5F3FF;
}
.rara-wish-rec-collection-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 2px;
}
.rara-wish-rec-collection-count {
  font-size: 0.7rem;
  color: #64748B;
}
.rara-wish-rec-btn-new-collection {
  grid-column: 1 / -1;
  background: transparent;
  border: 1px dashed #CBD5E1;
  border-radius: 10px;
  padding: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #8B5CF6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.rara-wish-rec-btn-new-collection:hover {
  background: #F8FAFC;
  border-color: #8B5CF6;
}

/* Filters and Search Row */
.rara-wish-rec-filters-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  align-items: center;
}
.rara-wish-rec-search-box {
  position: relative;
  flex-grow: 1;
}
.rara-wish-rec-search-box input {
  width: 100%;
  padding: 10px 16px 10px 38px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  font-size: 0.88rem;
  outline: none;
  background: #FFFFFF;
  box-sizing: border-box;
}
.rara-wish-rec-search-box input:focus {
  border-color: #8B5CF6;
}
.rara-wish-rec-search-box .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94A3B8;
  font-size: 0.95rem;
}
.rara-wish-rec-select-filter {
  padding: 10px 14px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  font-size: 0.85rem;
  background: #FFFFFF;
  color: #334155;
  outline: none;
  cursor: pointer;
  font-weight: 600;
}
.rara-wish-rec-btn-filter-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  font-size: 0.85rem;
  background: #FFFFFF;
  font-weight: 600;
  cursor: pointer;
  color: #334155;
}

/* Pills Filters */
.rara-wish-rec-pills-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.rara-wish-rec-pills-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rara-wish-rec-pill {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.rara-wish-rec-pill:hover {
  background: #F8FAFC;
}
.rara-wish-rec-pill.active {
  background: #F5F3FF;
  border-color: #8B5CF6;
  color: #8B5CF6;
}
.rara-wish-rec-clear-filters {
  font-size: 0.8rem;
  color: #EF4444;
  background: transparent;
  border: none;
  font-weight: 700;
  cursor: pointer;
}

/* Urgent Alerts */
.rara-wish-rec-alerts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.rara-wish-rec-alert-banner {
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid transparent;
}
.rara-wish-rec-alert-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rara-wish-rec-alert-icon {
  font-size: 1.5rem;
}
.rara-wish-rec-alert-text h5 {
  font-size: 0.88rem;
  font-weight: 700;
  margin: 0 0 2px 0;
}
.rara-wish-rec-alert-text h5 span {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: 6px;
}
.rara-wish-rec-alert-text p {
  font-size: 0.75rem;
  margin: 0;
  color: #64748B;
}
.rara-wish-rec-btn-alert-action {
  background: transparent;
  border: none;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.rara-wish-rec-alert-green { background: #ECFDF5; border-color: rgba(16, 185, 129, 0.1); color: #065F46; }
.rara-wish-rec-alert-green h5 span { background: #D1FAE5; color: #065F46; }
.rara-wish-rec-alert-green .rara-wish-rec-btn-alert-action { color: #047857; }

.rara-wish-rec-alert-orange { background: #FFF7ED; border-color: rgba(249, 115, 22, 0.1); color: #9A3412; }
.rara-wish-rec-alert-orange h5 span { background: #FFEDD5; color: #9A3412; }
.rara-wish-rec-alert-orange .rara-wish-rec-btn-alert-action { color: #EA580C; }

/* Product Grid */
.rara-wish-rec-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.rara-wish-rec-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.rara-wish-rec-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}
.rara-wish-rec-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  z-index: 2;
}
.rara-wish-rec-card-badge.price-dropped { background: #D1FAE5; color: #065F46; }
.rara-wish-rec-card-badge.low-stock { background: #FFEDD5; color: #9A3412; }
.rara-wish-rec-card-badge.flash-sale { background: #FEE2E2; color: #991B1B; }

.rara-wish-rec-card-heart {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 1.1rem;
  color: #EF4444;
  cursor: pointer;
  background: none;
  border: none;
  z-index: 2;
}
.rara-wish-rec-card-image {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  margin-top: 12px;
  margin-bottom: 12px;
  background: #F8FAFC;
  border-radius: 12px;
}
.rara-wish-rec-card-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1E293B;
  margin: 0 0 6px 0;
  line-height: 1.4;
  height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
}
.rara-wish-rec-card-meta {
  font-size: 0.72rem;
  color: #64748B;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.rara-wish-rec-card-meta .seller {
  font-weight: 700;
  color: #334155;
}
.rara-wish-rec-card-meta .seller-verified {
  color: #3B82F6;
  font-size: 0.7rem;
}
.rara-wish-rec-price-area {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
}
.rara-wish-rec-price-current {
  font-size: 1.05rem;
  font-weight: 800;
  color: #EF4444;
}
.rara-wish-rec-price-original {
  font-size: 0.78rem;
  color: #94A3B8;
  text-decoration: line-through;
}
.rara-wish-rec-card-badge-row {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.rara-wish-rec-tag {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
.rara-wish-rec-tag.in-stock { background: #E2F0D9; color: #385723; }
.rara-wish-rec-tag.fast-deliv { background: #FFF2CC; color: #7F6000; }

.rara-wish-rec-card-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
}
.rara-wish-rec-btn-action-icon {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  color: #475569;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.rara-wish-rec-btn-action-icon:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
}
.rara-wish-rec-btn-action-icon.delete:hover {
  background: #FEE2E2;
  color: #EF4444;
  border-color: #FCA5A5;
}
.rara-wish-rec-btn-buy-now {
  flex-grow: 1;
  background: #8B5CF6;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.rara-wish-rec-btn-buy-now:hover {
  opacity: 0.95;
}
.rara-wish-rec-btn-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  margin: 0 auto 32px;
  transition: all 0.2s ease;
}
.rara-wish-rec-btn-load-more:hover {
  background: #F8FAFC;
}

/* Coupons Section */
.rara-wish-rec-coupons-section {
  border-top: 1px solid #E2E8F0;
  padding-top: 24px;
  margin-bottom: 32px;
}
.rara-wish-rec-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.rara-wish-rec-section-header h4 {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0;
  color: #0F172A;
}
.rara-wish-rec-section-header a {
  font-size: 0.8rem;
  color: #8B5CF6;
  text-decoration: none;
  font-weight: 700;
}
.rara-wish-rec-coupons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Coupon Tickets */
.rara-wish-rec-coupon-ticket {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  overflow: hidden;
}
.rara-wish-rec-coupon-ticket::before, .rara-wish-rec-coupon-ticket::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: #F8FAFC;
  border-radius: 50%;
  border: 1px solid #E2E8F0;
  top: 50%;
  transform: translateY(-50%);
}
.rara-wish-rec-coupon-ticket::before { left: -7px; }
.rara-wish-rec-coupon-ticket::after { right: -7px; }

.rara-wish-rec-ticket-left {
  display: flex;
  flex-direction: column;
  text-align: left;
  border-right: 1px dashed #E2E8F0;
  padding-right: 16px;
  flex-grow: 1;
}
.rara-wish-rec-ticket-value {
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 2px;
}
.rara-wish-rec-ticket-left.purple .rara-wish-rec-ticket-value { color: #8B5CF6; }
.rara-wish-rec-ticket-left.green .rara-wish-rec-ticket-value { color: #10B981; }
.rara-wish-rec-ticket-left.orange .rara-wish-rec-ticket-value { color: #F59E0B; }
.rara-wish-rec-ticket-left.pink .rara-wish-rec-ticket-value { color: #EC4899; }

.rara-wish-rec-ticket-desc {
  font-size: 0.72rem;
  color: #64748B;
  margin-bottom: 6px;
}
.rara-wish-rec-ticket-code {
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
  background: #F1F5F9;
  padding: 2px 8px;
  border-radius: 4px;
  align-self: flex-start;
  font-family: monospace;
}
.rara-wish-rec-ticket-right {
  padding-left: 12px;
}
.rara-wish-rec-btn-collect {
  background: #FFFFFF;
  border: 1px solid #8B5CF6;
  color: #8B5CF6;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.rara-wish-rec-btn-collect:hover {
  background: #8B5CF6;
  color: #FFFFFF;
}
.rara-wish-rec-btn-collect.collected {
  background: #F1F5F9;
  border-color: #CBD5E1;
  color: #94A3B8;
  cursor: default;
}

/* Recommendations Slider */
.rara-wish-rec-recommendations {
  border-top: 1px solid #E2E8F0;
  padding-top: 24px;
}
.rara-wish-rec-slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.rara-wish-rec-slider-arrow {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  font-size: 0.85rem;
  color: #475569;
}
.rara-wish-rec-slider-arrow.left { left: -16px; }
.rara-wish-rec-slider-arrow.right { right: -16px; }

.rara-wish-rec-slider-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  width: 100%;
}
.rara-wish-rec-slider-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.rara-wish-rec-slider-img {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: #F8FAFC;
  border-radius: 10px;
  margin-bottom: 8px;
}
.rara-wish-rec-slider-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #1E293B;
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rara-wish-rec-slider-price {
  font-size: 0.9rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 8px;
}
.rara-wish-rec-btn-slider-add {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 6px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s ease;
}
.rara-wish-rec-btn-slider-add:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
}

/* Sidebar Custom Overrides */
.sidebar-welcome-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.01) !important;
}
.welcome-avatar-wrapper {
  background: #F5F3FF !important;
  border: 2px solid #8B5CF6 !important;
}
.welcome-avatar-letter {
  color: #8B5CF6 !important;
  font-weight: 700 !important;
}
.welcome-name {
  color: #0F172A !important;
  font-weight: 800 !important;
}
.welcome-stat-item strong {
  color: #0F172A !important;
}
.dashboard-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}
.db-menu-item {
  border-radius: 10px !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  transition: all 0.2s ease !important;
  color: #475569 !important;
}
.db-menu-item:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}
.db-menu-item.active {
  background: #F5F3FF !important;
  color: #8B5CF6 !important;
  font-weight: 700 !important;
}
.menu-icon-box {
  background: transparent !important;
  color: inherit !important;
  width: 22px !important;
  height: 22px !important;
  font-size: 1.15rem !important;
}
.sidebar-count-badge {
  background: #8B5CF6 !important;
  color: #FFFFFF !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 20px !important;
}


/* =========================================================================
   NEW PREMIUM DASHBOARD & WISHLIST UI (ISOLATED NAMESPACE: .rara-premium-ui)
   ========================================================================= */

.rara-premium-ui {
    --bg-light: #F8FAFC;
    --bg-card: #FFFFFF;
    --text-primary: #0F172A;
    --text-secondary: #64748B;
    --border-color: #E2E8F0;
    --primary-color: #6366F1; /* Indigo */
    --primary-hover: #4F46E5;
    
    /* Soft Category Colors */
    --color-pink-soft: #FCE7F3;
    --color-pink-text: #BE185D;
    --color-green-soft: #D1FAE5;
    --color-green-text: #047857;
    --color-orange-soft: #FFEDD5;
    --color-orange-text: #C2410C;
    --color-blue-soft: #DBEAFE;
    --color-blue-text: #1D4ED8;
    --color-purple-soft: #F3E8FF;
    --color-purple-text: #7E22CE;

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex;
    gap: 24px;
    padding: 24px;
    background-color: var(--bg-light);
    min-height: 100vh;
}

/* Sidebar */
.rara-premium-ui .premium-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--bg-card);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: fit-content;
}

.rara-premium-ui .user-profile-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}
.rara-premium-ui .user-profile-badge img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.rara-premium-ui .user-profile-badge .info h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 600;
}
.rara-premium-ui .user-profile-badge .info p {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.rara-premium-ui .premium-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-purple-soft);
    color: var(--color-purple-text);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: 6px;
}

.rara-premium-ui .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rara-premium-ui .nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 10px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
    cursor: pointer;
}
.rara-premium-ui .nav-item:hover {
    background: var(--bg-light);
    color: var(--text-primary);
}
.rara-premium-ui .nav-item.active {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
    font-weight: 600;
    border-left: 4px solid var(--primary-color);
    padding-left: 12px;
}
.rara-premium-ui .nav-item .nav-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.rara-premium-ui .nav-badge {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}
.rara-premium-ui .nav-item.active .nav-badge {
    background: var(--primary-color);
    color: white;
}

.rara-premium-ui .invite-card {
    background: linear-gradient(135deg, #FFF0F2 0%, #FCE7F3 100%);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: auto;
}
.rara-premium-ui .invite-card h4 {
    margin: 0 0 8px;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.rara-premium-ui .invite-card p {
    margin: 0 0 16px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.rara-premium-ui .invite-card button {
    background: white;
    color: var(--primary-color);
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Main Content Area */
.rara-premium-ui .main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rara-premium-ui .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.rara-premium-ui .page-header h1 {
    margin: 0 0 8px;
    font-size: 1.8rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}
.rara-premium-ui .page-header h1 svg {
    color: #EF4444; /* Heart red */
}
.rara-premium-ui .page-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.rara-premium-ui .header-actions {
    display: flex;
    gap: 12px;
}
.rara-premium-ui .btn-outline {
    background: white;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.rara-premium-ui .btn-outline:hover {
    background: var(--bg-light);
}

/* Stat Cards */
.rara-premium-ui .stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.rara-premium-ui .stat-card {
    background: white;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border: 1px solid var(--border-color);
}
.rara-premium-ui .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.rara-premium-ui .stat-info h3 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text-primary);
}
.rara-premium-ui .stat-info p {
    margin: 2px 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}
.rara-premium-ui .stat-info span {
    font-size: 0.7rem;
    color: var(--text-secondary);
    display: block;
    margin-top: 4px;
}

/* Colors for Stat Cards */
.rara-premium-ui .stat-pink { background: var(--color-pink-soft); color: var(--color-pink-text); }
.rara-premium-ui .stat-green { background: var(--color-green-soft); color: var(--color-green-text); }
.rara-premium-ui .stat-orange { background: var(--color-orange-soft); color: var(--color-orange-text); }
.rara-premium-ui .stat-blue { background: var(--color-blue-soft); color: var(--color-blue-text); }
.rara-premium-ui .stat-purple { background: var(--color-purple-soft); color: var(--color-purple-text); }


/* Charts and Collections Row */
.rara-premium-ui .middle-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.rara-premium-ui .card-box {
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.rara-premium-ui .card-box h3 {
    margin: 0 0 16px;
    font-size: 1.1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Savings Chart Layout */
.rara-premium-ui .savings-stats {
    display: flex;
    gap: 32px;
    margin-bottom: 24px;
}
.rara-premium-ui .savings-stats > div p {
    margin: 0 0 4px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.rara-premium-ui .savings-stats > div h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}
.rara-premium-ui .savings-stats > div.highlight h4 {
    color: var(--primary-color);
    font-size: 1.2rem;
}
.rara-premium-ui .chart-placeholder {
    width: 100%;
    height: 140px;
    position: relative;
    background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg"><path d="M0 80 Q 50 20, 100 50 T 200 60 T 300 40 T 400 90 T 500 20" fill="none" stroke="%236366F1" stroke-width="2"/><circle cx="500" cy="20" r="4" fill="%236366F1"/></svg>');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 80%;
}
.rara-premium-ui .chart-tooltip {
    position: absolute;
    right: 0;
    top: 20px;
    background: var(--primary-color);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Collections & Rewards */
.rara-premium-ui .rewards-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 24px;
}
.rara-premium-ui .rewards-banner .icon {
    width: 48px;
    height: 48px;
    background: var(--color-purple-soft);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.rara-premium-ui .rewards-banner .info h4 { margin: 0 0 4px; font-size: 1rem; }
.rara-premium-ui .rewards-banner .info p { margin: 0 0 8px; font-size: 0.8rem; color: var(--text-secondary); }
.rara-premium-ui .progress-bar {
    width: 100%;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
}
.rara-premium-ui .progress-fill {
    height: 100%;
    width: 82%; /* 48/58 */
    background: linear-gradient(90deg, #8B5CF6 0%, #3B82F6 100%);
    border-radius: 3px;
}

.rara-premium-ui .collections-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.rara-premium-ui .collection-item {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.rara-premium-ui .collection-item:hover {
    border-color: var(--primary-color);
}
.rara-premium-ui .collection-item.active {
    border-color: var(--primary-color);
    background: rgba(99, 102, 241, 0.05);
}
.rara-premium-ui .collection-item h5 { margin: 0 0 4px; font-size: 0.85rem; color: var(--text-primary); }
.rara-premium-ui .collection-item span { font-size: 0.75rem; color: var(--primary-color); font-weight: 500; }
.rara-premium-ui .btn-new-collection {
    grid-column: span 4;
    padding: 12px;
    background: white;
    border: 1px dashed var(--border-color);
    color: var(--primary-color);
    border-radius: 10px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 8px;
}

/* Filters Bar */
.rara-premium-ui .filters-bar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.rara-premium-ui .filters-top {
    display: flex;
    gap: 16px;
}
.rara-premium-ui .search-input {
    flex: 1;
    position: relative;
}
.rara-premium-ui .search-input input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    outline: none;
    font-size: 0.9rem;
}
.rara-premium-ui .search-input svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}
.rara-premium-ui .filter-select {
    padding: 10px 32px 10px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: white;
    color: var(--text-primary);
    outline: none;
    cursor: pointer;
}
.rara-premium-ui .filters-bottom {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.rara-premium-ui .filter-pill {
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: white;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rara-premium-ui .filter-pill.active {
    background: var(--color-purple-soft);
    color: var(--color-purple-text);
    border-color: var(--color-purple-text);
    font-weight: 500;
}
.rara-premium-ui .clear-all {
    margin-left: auto;
    color: #EF4444;
    font-size: 0.85rem;
    cursor: pointer;
    font-weight: 500;
}

/* Alert Banners */
.rara-premium-ui .alerts-row {
    display: flex;
    gap: 16px;
}
.rara-premium-ui .alert-banner {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}
.rara-premium-ui .alert-banner.success { background: #F0FDF4; border-color: #BBF7D0; }
.rara-premium-ui .alert-banner.warning { background: #FFF7ED; border-color: #FFEDD5; }
.rara-premium-ui .alert-info { display: flex; align-items: center; gap: 12px; }
.rara-premium-ui .alert-info .icon { font-size: 1.5rem; }
.rara-premium-ui .alert-info h4 { margin: 0; font-size: 1rem; color: var(--text-primary); display: flex; align-items: center; gap: 8px;}
.rara-premium-ui .alert-info h4 span { font-size: 0.75rem; padding: 2px 8px; border-radius: 10px; background: rgba(0,0,0,0.05); }
.rara-premium-ui .alert-info p { margin: 4px 0 0; font-size: 0.85rem; color: var(--text-secondary); }
.rara-premium-ui .alert-banner button {
    background: white;
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    font-weight: 500;
}

/* Product Grid */
.rara-premium-ui .product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.rara-premium-ui .product-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}
.rara-premium-ui .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
}
.rara-premium-ui .product-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    z-index: 2;
}
.rara-premium-ui .badge-dropped { background: var(--color-green-soft); color: var(--color-green-text); }
.rara-premium-ui .badge-warning { background: var(--color-orange-soft); color: var(--color-orange-text); }
.rara-premium-ui .badge-flash { background: #FEE2E2; color: #B91C1C; }
.rara-premium-ui .heart-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: #EF4444;
    cursor: pointer;
    z-index: 2;
}
.rara-premium-ui .product-img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    margin-bottom: 16px;
}
.rara-premium-ui .product-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--text-primary);
    line-height: 1.4;
    height: 2.8em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.rara-premium-ui .product-seller {
    font-size: 0.8rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    font-weight: 500;
}
.rara-premium-ui .product-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.rara-premium-ui .product-rating svg { color: #F59E0B; width: 14px; }
.rara-premium-ui .product-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.rara-premium-ui .product-price .current {
    font-size: 1.2rem;
    font-weight: 700;
    color: #EF4444;
}
.rara-premium-ui .product-price .old {
    font-size: 0.85rem;
    text-decoration: line-through;
    color: var(--text-secondary);
}
.rara-premium-ui .product-save {
    font-size: 0.8rem;
    color: var(--color-green-text);
    font-weight: 500;
    margin-bottom: 12px;
}
.rara-premium-ui .product-status {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 16px;
    margin-top: auto;
}
.rara-premium-ui .status-in-stock { color: var(--color-green-text); }
.rara-premium-ui .status-low-stock { color: var(--color-orange-text); }
.rara-premium-ui .product-actions {
    display: flex;
    gap: 8px;
}
.rara-premium-ui .btn-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: white;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}
.rara-premium-ui .btn-icon:hover {
    background: var(--bg-light);
    color: var(--text-primary);
}
.rara-premium-ui .btn-buy {
    flex: 1;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.rara-premium-ui .btn-buy:hover {
    background: var(--primary-hover);
}

.rara-premium-ui .load-more {
    display: flex;
    justify-content: center;
    margin: 24px 0;
}
.rara-premium-ui .load-more button {
    padding: 10px 24px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* Coupons Section */
.rara-premium-ui .coupons-section h3 {
    margin: 0 0 16px;
    font-size: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rara-premium-ui .coupons-section h3 a {
    font-size: 0.85rem;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}
.rara-premium-ui .coupons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.rara-premium-ui .coupon-ticket {
    background: white;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.rara-premium-ui .coupon-ticket::before,
.rara-premium-ui .coupon-ticket::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--bg-light);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    border: 1px dashed var(--border-color);
}
.rara-premium-ui .coupon-ticket::before { left: -10px; border-left: none; }
.rara-premium-ui .coupon-ticket::after { right: -10px; border-right: none; }

.rara-premium-ui .coupon-left {
    padding: 16px;
    flex: 1;
    border-right: 1px dashed var(--border-color);
}
.rara-premium-ui .coupon-left h4 { margin: 0 0 4px; font-size: 1.1rem; }
.rara-premium-ui .coupon-left p { margin: 0 0 8px; font-size: 0.75rem; color: var(--text-secondary); }
.rara-premium-ui .coupon-code {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(0,0,0,0.05);
    border-radius: 6px;
    font-family: monospace;
    font-weight: bold;
    font-size: 0.85rem;
}
.rara-premium-ui .coupon-right {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rara-premium-ui .coupon-right button {
    background: white;
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.8rem;
}

/* Coupon Theme Colors */
.rara-premium-ui .coupon-theme-1 { background: linear-gradient(90deg, #F3E8FF 0%, white 100%); border-color: #D8B4FE; }
.rara-premium-ui .coupon-theme-1 .coupon-left h4 { color: #7E22CE; }
.rara-premium-ui .coupon-theme-2 { background: linear-gradient(90deg, #D1FAE5 0%, white 100%); border-color: #6EE7B7; }
.rara-premium-ui .coupon-theme-2 .coupon-left h4 { color: #047857; }
.rara-premium-ui .coupon-theme-3 { background: linear-gradient(90deg, #FFEDD5 0%, white 100%); border-color: #FDBA74; }
.rara-premium-ui .coupon-theme-3 .coupon-left h4 { color: #C2410C; }
.rara-premium-ui .coupon-theme-4 { background: linear-gradient(90deg, #FCE7F3 0%, white 100%); border-color: #F9A8D4; }
.rara-premium-ui .coupon-theme-4 .coupon-left h4 { color: #BE185D; }

/* Similar styling for "You Might Also Like" */
.rara-premium-ui .recommendations h3 { margin: 32px 0 16px; font-size: 1.2rem; display: flex; justify-content: space-between; align-items: center; }
.rara-premium-ui .recommendations h3 a { font-size: 0.85rem; color: var(--primary-color); text-decoration: none; font-weight: 500; }

/* ================================================= */
/* V3 Premium Wishlist Design */
/* ================================================= */

.rara-v3-ui {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
    background: #f8fafc;
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
}

/* Sidebar V3 */
.sidebar-v3 {
    background: white;
    padding: 24px 0;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px 32px 24px;
}
.sidebar-header .logo-icon {
    font-size: 24px;
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.1);
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
}
.sidebar-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 16px;
}
.sidebar-nav .nav-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 8px;
    color: #475569;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}
.sidebar-nav .nav-item .icon {
    margin-right: 12px;
    font-size: 1.1rem;
    width: 20px; text-align: center;
}
.sidebar-nav .nav-item:hover {
    background: #f1f5f9;
    color: #1e293b;
}
.sidebar-nav .nav-item.active {
    background: #f3f0ff;
    color: #7c3aed;
    border-radius: 8px;
    border-left: 4px solid #7c3aed;
}
.sidebar-nav .nav-item .badge {
    margin-left: auto;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.invite-banner {
    margin: auto 16px 16px 16px;
    padding: 16px;
    background: #fff5f5;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}
.invite-banner h4 {
    font-size: 0.9rem;
    color: #1e293b;
    margin: 0 0 4px 0;
}
.invite-banner p {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0 0 12px 0;
    line-height: 1.4;
}
.invite-btn {
    background: #7c3aed;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}
.invite-banner .gift-icon {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 2rem;
    opacity: 0.9;
}

/* Main Content V3 */
.main-content-v3 {
    padding: 32px 32px 64px 0;
    max-width: 1100px;
}

.wishlist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.wh-left h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wh-left p {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
}
.btn-share {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #e2e8f0;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    font-size: 0.85rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.wishlist-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.search-box {
    position: relative;
    width: 320px;
}
.search-box svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}
.search-box input {
    width: 100%;
    padding: 10px 16px 10px 36px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    outline: none;
}
.search-box input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}
.action-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}
.select-all {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #475569;
    margin-right: 8px;
    cursor: pointer;
}
.btn-outline-purple {
    display: flex; align-items: center; gap: 6px;
    background: white; border: 1px solid #7c3aed; color: #7c3aed;
    padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 0.8rem;
    cursor: pointer;
}
.btn-outline-red {
    display: flex; align-items: center; gap: 6px;
    background: white; border: 1px solid #ef4444; color: #ef4444;
    padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 0.8rem;
    cursor: pointer;
}

/* Products Grid V3 */
.products-grid-v3 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}
.product-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: box-shadow 0.2s ease;
}
.product-card:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.06);
}
.pc-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}
.btn-remove {
    background: none; border: none; font-size: 0.75rem; color: #ef4444; cursor: pointer; font-weight: 500; display:flex; align-items:center; gap:4px;
}
.pc-img {
    width: 100%; height: 140px; object-fit: contain; margin-bottom: 16px;
}
.pc-title {
    font-size: 0.85rem; font-weight: 600; color: #1e293b; margin: 0 0 8px 0; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-price-row {
    display: flex; justify-content: space-between; align-items: center; margin-top: auto; margin-bottom: 16px;
}
.pc-price-row .price {
    font-weight: 700; color: #7c3aed; font-size: 0.95rem;
}
.pc-price-row .stock {
    font-size: 0.7rem; font-weight: 600;
}
.in-stock { color: #10b981; }
.low-stock { color: #f59e0b; }

.pc-buttons {
    display: flex; gap: 8px;
}
.btn-move-cart {
    flex: 1; background: white; border: 1px solid #e2e8f0; color: #475569; padding: 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; cursor: pointer; display:flex; align-items:center; justify-content:center; gap:4px;
}
.btn-buy-now {
    flex: 1; background: #7c3aed; border: 1px solid #7c3aed; color: white; padding: 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; cursor: pointer;
}

/* Alert Banner V3 */
.alert-banner-v3 {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}
.ab-content {
    display: flex; align-items: center; gap: 16px;
}
.ab-icon { font-size: 1.5rem; }
.ab-content h4 { margin: 0 0 4px 0; color: #92400e; font-weight: 700; font-size: 0.95rem; }
.ab-content p { margin: 0; color: #b45309; font-size: 0.85rem; }

/* Recommended Section */
.recommended-header {
    display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 16px;
}
.recommended-header h3 { margin: 0 0 4px 0; font-size: 1.1rem; color: #1e293b; }
.recommended-header p { margin: 0; color: #64748b; font-size: 0.85rem; }
.view-all { color: #7c3aed; font-weight: 600; font-size: 0.85rem; text-decoration: none; }

.recommended-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.rec-card {
    background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.rec-card img { width: 100px; height: 100px; object-fit: contain; margin-bottom: 12px; }
.rec-info h4 { font-size: 0.8rem; margin: 0 0 8px 0; color: #1e293b; line-height: 1.3; }
.rec-info .price { font-weight: 700; color: #1e293b; font-size: 0.85rem; display: block; margin-bottom: 6px; }
.rec-info .rating { font-size: 0.7rem; color: #fbbf24; }
.rec-info .rating .count { color: #64748b; margin-left: 4px; }

/* ================================================= */
/* V3 Premium Dashboard Design */
/* ================================================= */

.dashboard-welcome {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    margin-bottom: 32px;
    box-shadow: 0 10px 25px rgba(124, 58, 237, 0.2);
}
.dw-content h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 8px 0;
}
.dw-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}
.dw-stats {
    display: flex;
    gap: 16px;
}
.stat-pill {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 10px 16px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.dash-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}
.dash-stat-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dash-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
.dash-stat-card .icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.stat-info h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px 0;
}
.stat-info p {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0;
    font-weight: 500;
}

.dash-main-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 32px;
}

.dash-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}
.dash-section-header h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}
.dash-section-header a {
    color: #7c3aed;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

/* Recent Orders */
.recent-orders-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.recent-order-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
}
.roc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px dashed #e2e8f0;
    margin-bottom: 16px;
}
.order-id {
    font-weight: 700; color: #1e293b; margin-right: 12px;
}
.order-date {
    font-size: 0.85rem; color: #64748b;
}
.order-status {
    font-size: 0.75rem; font-weight: 700; padding: 4px 12px; border-radius: 20px; text-transform: uppercase;
}
.status-shipping { background: #fef3c7; color: #d97706; }
.status-delivered { background: #d1fae5; color: #059669; }

.roc-body {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.roc-body img {
    width: 60px; height: 60px; object-fit: contain; background: #f8fafc; border-radius: 8px; padding: 4px;
}
.roc-details h4 {
    font-size: 0.95rem; margin: 0 0 4px 0; color: #1e293b;
}
.roc-details p {
    font-size: 0.85rem; margin: 0; color: #64748b;
}
.roc-price {
    margin-left: auto; font-weight: 700; color: #1e293b;
}

.roc-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
.btn-outline-gray {
    background: white; border: 1px solid #e2e8f0; color: #475569; padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 0.85rem; cursor: pointer;
}

/* Coupons */
.dash-coupons-list {
    display: flex; flex-direction: column; gap: 12px;
}
.dash-coupon-card {
    display: flex; justify-content: space-between; align-items: center;
    background: linear-gradient(to right, #f8fafc, #f1f5f9);
    border: 1px dashed #cbd5e1; border-radius: 12px; padding: 16px;
}
.coupon-left {
    display: flex; flex-direction: column; gap: 4px;
}
.coupon-left .discount { font-weight: 800; color: #7c3aed; font-size: 1.1rem; }
.coupon-left span:last-child { font-size: 0.8rem; color: #64748b; }
.btn-copy { background: #1e293b; color: white; border: none; padding: 6px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; cursor: pointer; }

/* Quick Actions */
.quick-actions-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.qa-btn {
    background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: #475569; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all 0.2s;
}
.qa-btn .icon { font-size: 1.5rem; }
.qa-btn:hover { border-color: #7c3aed; color: #7c3aed; background: #f3f0ff; }


/* ================================================= */
/* V3 Premium Inner Pages CSS */
/* ================================================= */

/* Logout Modal */
.premium-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.premium-modal {
    background: white; border-radius: 20px; padding: 32px; width: 400px;
    text-align: center; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes modalPop {
    0% { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.premium-modal .modal-icon { font-size: 3rem; margin-bottom: 16px; }
.premium-modal h3 { font-size: 1.25rem; margin: 0 0 8px 0; color: #1e293b; }
.premium-modal p { font-size: 0.9rem; color: #64748b; margin: 0 0 24px 0; }
.modal-actions { display: flex; gap: 12px; }
.modal-actions button { flex: 1; padding: 12px; border-radius: 12px; font-weight: 600; cursor: pointer; }
.btn-cancel { background: #f1f5f9; border: none; color: #475569; }
.btn-confirm-logout { background: #ef4444; border: none; color: white; }

/* Filter Tabs */
.tab-filters { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.filter-btn {
    background: white; border: 1px solid #e2e8f0; color: #64748b;
    padding: 8px 16px; border-radius: 30px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.filter-btn.active { background: #1e293b; color: white; border-color: #1e293b; }

/* Orders List */
.premium-orders-list { display: flex; flex-direction: column; gap: 20px; }
.p-order-card { background: white; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.po-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f5f9; padding-bottom: 16px; margin-bottom: 16px; }
.po-info { display: flex; flex-direction: column; gap: 4px; }
.po-id { font-weight: 700; color: #1e293b; }
.po-date { font-size: 0.8rem; color: #64748b; }
.po-status-badge { font-size: 0.75rem; font-weight: 700; padding: 6px 12px; border-radius: 20px; text-transform: uppercase; }
.po-body { display: flex; gap: 20px; align-items: center; }
.po-body img { width: 80px; height: 80px; object-fit: contain; background: #f8fafc; border-radius: 12px; padding: 8px; }
.po-details h3 { margin: 0 0 8px 0; font-size: 1.1rem; color: #1e293b; }
.po-details p { margin: 0; font-size: 0.9rem; color: #475569; }
.po-actions { margin-left: auto; display: flex; gap: 12px; }
.btn-track { background: #7c3aed; color: white; border: none; padding: 10px 16px; border-radius: 8px; font-weight: 600; cursor: pointer; }
.btn-outline { background: white; border: 1px solid #cbd5e1; color: #475569; padding: 10px 16px; border-radius: 8px; font-weight: 600; cursor: pointer; }
.btn-primary { background: #7c3aed; color: white; border: none; padding: 10px 16px; border-radius: 8px; font-weight: 600; cursor: pointer; }

/* Reviews List */
.premium-reviews-list { display: flex; flex-direction: column; gap: 20px; }
.p-review-card { background: white; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; }
.pr-product { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.pr-product img { width: 60px; height: 60px; object-fit: contain; }
.pr-product h4 { margin: 0 0 4px 0; color: #1e293b; }
.pr-rating { color: #fbbf24; font-size: 0.85rem; }
.pr-rating span { color: #64748b; margin-left: 4px; }
.pr-text { color: #475569; line-height: 1.6; margin: 0 0 16px 0; }
.pr-media { display: flex; gap: 12px; margin-bottom: 16px; }
.pr-img-box { width: 80px; height: 80px; background: #f1f5f9; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: #94a3b8; }
.pr-actions { display: flex; gap: 12px; border-top: 1px solid #f1f5f9; padding-top: 16px; }

/* Wallet */
.wallet-stats-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 20px; }
.wallet-card { background: white; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; }
.wallet-card.main-balance { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); color: white; }
.wallet-card.main-balance p { margin: 0 0 8px 0; color: #94a3b8; }
.wallet-card.main-balance h2 { margin: 0 0 24px 0; font-size: 2rem; font-weight: 700; }
.wallet-actions { display: flex; gap: 12px; }
.btn-outline-white { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: white; padding: 10px 16px; border-radius: 8px; font-weight: 600; cursor: pointer; }
.wallet-card.mini { display: flex; align-items: center; gap: 16px; padding: 20px; }
.wallet-card.mini .icon { font-size: 2rem; }
.wallet-card.mini p { margin: 0 0 4px 0; font-size: 0.8rem; color: #64748b; }
.wallet-card.mini h3 { margin: 0; font-size: 1.1rem; color: #1e293b; }

.transaction-list { display: flex; flex-direction: column; gap: 12px; }
.txn-item { display: flex; align-items: center; background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px 20px; gap: 16px; }
.txn-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.txn-item.credit .txn-icon { background: #d1fae5; color: #059669; }
.txn-item.debit .txn-icon { background: #f1f5f9; color: #475569; }
.txn-item.refund .txn-icon { background: #e0e7ff; color: #4f46e5; }
.txn-details h4 { margin: 0 0 4px 0; color: #1e293b; font-size: 0.95rem; }
.txn-details p { margin: 0; color: #64748b; font-size: 0.8rem; }
.txn-amount { margin-left: auto; font-weight: 700; font-size: 1.1rem; }
.txn-item.credit .txn-amount, .txn-item.refund .txn-amount { color: #059669; }

/* Coupons */
.premium-coupons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.p-coupon-card { display: flex; border: 1px dashed #cbd5e1; border-radius: 16px; background: white; overflow: hidden; }
.p-coupon-card .c-left { background: linear-gradient(135deg, #fdf4ff, #f3e8ff); padding: 24px; border-right: 1px dashed #cbd5e1; display: flex; flex-direction: column; justify-content: center; width: 40%; }
.p-coupon-card .c-left h2 { margin: 0 0 4px 0; color: #7c3aed; font-size: 1.5rem; }
.p-coupon-card .c-left p { margin: 0; color: #64748b; font-size: 0.85rem; font-weight: 500; }
.p-coupon-card .c-right { padding: 24px; display: flex; flex-direction: column; gap: 8px; width: 60%; }
.c-code { background: #f1f5f9; padding: 8px; text-align: center; font-weight: 700; letter-spacing: 2px; color: #1e293b; border-radius: 8px; border: 1px dashed #cbd5e1; margin-bottom: 8px; }
.p-coupon-card .c-right p { margin: 0; font-size: 0.8rem; color: #64748b; }
.p-coupon-card .c-right button { margin-top: auto; }

/* Address Book */
.premium-address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.p-address-card { background: white; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; position: relative; }
.p-address-card.default-addr { border-color: #7c3aed; box-shadow: 0 0 0 1px #7c3aed; }
.addr-badge { position: absolute; top: 24px; right: 24px; background: #f3f0ff; color: #7c3aed; font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.addr-badge.billing { background: #f1f5f9; color: #475569; }
.p-address-card h3 { margin: 0 0 12px 0; color: #1e293b; }
.p-address-card p { margin: 0 0 8px 0; color: #475569; font-size: 0.9rem; }
.addr-actions { display: flex; gap: 12px; margin-top: 24px; }

/* Account Settings */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.settings-section { background: white; border: 1px solid #e2e8f0; border-radius: 16px; padding: 32px; }
.settings-section h3 { margin: 0 0 24px 0; color: #1e293b; font-size: 1.1rem; border-bottom: 1px solid #f1f5f9; padding-bottom: 16px; }
.profile-pic-edit { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.profile-pic-edit img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; color: #475569; font-weight: 500; font-size: 0.85rem; }
.p-input { width: 100%; padding: 12px 16px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 0.9rem; outline: none; transition: border-color 0.2s; }
.p-input:focus { border-color: #7c3aed; }
.toggle-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 0.9rem !important; cursor: pointer; }
.toggle-row input { width: 18px; height: 18px; accent-color: #7c3aed; cursor: pointer; }

/* Support Center */
.support-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.support-card { background: white; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; text-align: center; cursor: pointer; transition: all 0.2s; }
.support-card:hover { border-color: #7c3aed; transform: translateY(-2px); }
.support-card .icon { font-size: 2.5rem; margin-bottom: 16px; }
.support-card h3 { margin: 0 0 8px 0; color: #1e293b; font-size: 1rem; }
.support-card p { margin: 0; color: #64748b; font-size: 0.85rem; }

/* Premium Review Modal Styles */
.review-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: fadeInModal 0.2s ease-out;
}
.review-modal-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 24px;
    padding: 32px;
    width: 90%;
    max-width: 480px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(0);
    animation: slideUpModal 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    text-align: left;
}
@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideUpModal {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.review-modal-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.review-modal-field {
    margin-bottom: 16px;
    text-align: left;
}
.review-modal-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
}
.review-modal-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    font-size: 0.9rem;
    transition: all 0.2s;
    outline: none;
    box-sizing: border-box;
}
.review-modal-input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}
.review-modal-stars {
    display: flex;
    gap: 8px;
    font-size: 1.8rem;
    margin: 8px 0;
}
.review-modal-star {
    cursor: pointer;
    transition: transform 0.1s;
    opacity: 0.3;
}
.review-modal-star.active {
    opacity: 1;
}
.review-modal-star:hover {
    transform: scale(1.15);
}
.review-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}
.review-modal-btn-cancel {
    padding: 10px 20px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
}
.review-modal-btn-cancel:hover {
    background: #f8fafc;
}
.review-modal-btn-submit {
    padding: 10px 20px;
    background: #7c3aed;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s;
}
.review-modal-btn-submit:hover {
    background: #6d28d9;
}

/* Review Modal Image Upload & Selector Styling */
.rev-modal-preview-box {
    position: relative;
    width: 65px;
    height: 65px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #cbd5e1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
}
.rev-modal-preview-box:hover {
    transform: scale(1.05);
}
.rev-modal-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rev-modal-preview-box .remove-btn {
    position: absolute;
    top: 3px;
    right: 3px;
    background: rgba(15, 23, 42, 0.85);
    color: #ffffff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    font-weight: 800;
    transition: background 0.2s;
}
.rev-modal-preview-box .remove-btn:hover {
    background: #ef4444;
}


/* ============================================================
   MERCHANT ONBOARDING CENTER (SELL ON RARA DEALS)
   ============================================================ */
.merchant-onboarding-page {
  font-family: var(--font-sans);
  background: var(--bg-white);
  color: var(--text-dark);
  padding-bottom: 80px;
  overflow-x: hidden;
}

.merchant-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.merchant-section-title {
  font-family: var(--font-title);
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 12px;
  color: var(--text-dark);
}

.merchant-section-subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  text-align: center;
  max-width: 600px;
  margin: 0 auto 48px auto;
  line-height: 1.6;
}

/* 1. Hero Section */
.merchant-hero-sec {
  padding: 80px 0;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.04) 0%, rgba(147, 51, 234, 0.01) 100%);
  border-bottom: 1px solid var(--border-color);
}

.merchant-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}

.merchant-hero-title {
  font-family: var(--font-title);
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-dark);
  margin-bottom: 20px;
}

.merchant-hero-desc {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 32px;
}

.merchant-hero-ctas {
  display: flex;
  gap: 16px;
  margin-bottom: 48px;
}

.merchant-btn-primary {
  background: #7C3AED;
  color: #fff;
  border: none;
  padding: 14px 28px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
}

.merchant-btn-primary:hover {
  background: #6D28D9;
  transform: translateY(-2px);
}

.merchant-btn-secondary {
  background: transparent;
  color: #7C3AED;
  border: 2px solid #7C3AED;
  padding: 12px 26px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.merchant-btn-secondary:hover {
  background: rgba(124, 58, 237, 0.05);
  transform: translateY(-2px);
}

.merchant-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  border-top: 1px solid var(--border-color);
  padding-top: 32px;
}

.merchant-stat-val {
  font-family: var(--font-title);
  font-size: 1.7rem;
  font-weight: 800;
  color: #7C3AED;
  margin-bottom: 4px;
}

.merchant-stat-lbl {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Illustration dashboard mockup */
.merchant-illus-box {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.illus-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}

/* 2. Why Sell on Rara Deals */
.merchant-why-sec {
  padding: 80px 0;
}

.merchant-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.merchant-card-premium {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 32px;
  transition: var(--transition);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.merchant-card-premium:hover {
  transform: translateY(-6px);
  border-color: #7C3AED;
  box-shadow: 0 20px 35px -10px rgba(124, 58, 237, 0.15);
}

.merchant-card-icon {
  font-size: 2.2rem;
  margin-bottom: 20px;
}

.merchant-card-title {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-dark);
}

.merchant-card-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* 3. Required Documents Section */
.merchant-docs-sec {
  padding: 80px 0;
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.02) 0%, rgba(124, 58, 237, 0.02) 100%);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.merchant-docs-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
}

.merchant-docs-tab-btn {
  background: var(--bg-white);
  border: 1.5px solid var(--border-color);
  border-radius: 30px;
  padding: 10px 24px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-dark);
  cursor: pointer;
  transition: var(--transition-fast);
}

.merchant-docs-tab-btn.active {
  background: #7C3AED;
  color: #fff;
  border-color: #7C3AED;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}

.merchant-docs-content {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 40px;
  max-width: 650px;
  margin: 0 auto;
  box-shadow: var(--shadow-md);
}

.doc-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.95rem;
  font-weight: 600;
}

.doc-list-item:last-child {
  border-bottom: none;
}

.doc-check-icon {
  color: #10B981;
  font-weight: 800;
}

/* 4. Commission Structure & Calculator */
.merchant-comm-sec {
  padding: 80px 0;
}

.comm-layout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.merchant-table-box {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--shadow-md);
}

.merchant-table {
  width: 100%;
  border-collapse: collapse;
}

.merchant-table th, .merchant-table td {
  padding: 14px 16px;
  text-align: left;
  font-size: 0.9rem;
}

.merchant-table th {
  font-weight: 700;
  color: var(--text-dark);
  border-bottom: 2px solid var(--border-color);
}

.merchant-table td {
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  font-weight: 500;
}

.merchant-table tr:last-child td {
  border-bottom: none;
}

.comm-rate-pill {
  background: rgba(124, 58, 237, 0.08);
  color: #7C3AED;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.82rem;
}

/* Realtime Commission Calculator */
.calc-premium-box {
  background: var(--bg-white);
  border: 1.5px solid #7C3AED;
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 15px 35px rgba(124, 58, 237, 0.06);
  position: relative;
}

.calc-premium-box::before {
  content: 'LIVE CALCULATOR';
  position: absolute;
  top: -10px;
  right: 24px;
  background: #7C3AED;
  color: white;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.calc-group {
  margin-bottom: 20px;
}

.calc-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-dark);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}

.calc-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  color: var(--text-dark);
  font-size: 0.9rem;
  font-weight: 600;
  box-sizing: border-box;
}

.calc-results-card {
  background: rgba(124, 58, 237, 0.04);
  border: 1px dashed rgba(124, 58, 237, 0.3);
  border-radius: var(--radius-sm);
  padding: 20px;
  margin-top: 24px;
}

.calc-result-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.calc-result-row.total {
  border-top: 1px solid rgba(124, 58, 237, 0.2);
  padding-top: 14px;
  margin-top: 6px;
  font-size: 1.1rem;
  color: #7C3AED;
  font-weight: 800;
}

/* 5. Success Process Timeline */
.merchant-timeline-sec {
  padding: 80px 0;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.02) 0%, rgba(147, 51, 234, 0.02) 100%);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.timeline-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  position: relative;
  margin-top: 48px;
}

.timeline-node {
  text-align: center;
  position: relative;
}

.timeline-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-white);
  border: 3px solid var(--border-color);
  color: var(--text-muted);
  font-weight: 800;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
  position: relative;
  z-index: 2;
  transition: var(--transition-fast);
}

.timeline-node:hover .timeline-dot {
  border-color: #7C3AED;
  color: #7C3AED;
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.2);
}

.timeline-node.active .timeline-dot {
  background: #7C3AED;
  border-color: #7C3AED;
  color: #fff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.timeline-title {
  font-family: var(--font-title);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.timeline-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Horizontal line connector */
.timeline-steps::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: var(--border-color);
  z-index: 1;
}

/* 6. Payout & Payment cycle Info */
.merchant-payout-sec {
  padding: 80px 0;
}

.payout-timeline-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px 32px;
  box-shadow: var(--shadow-sm);
}

.payout-flow-step {
  text-align: center;
  flex: 1;
  position: relative;
}

.payout-flow-step:not(:last-child)::after {
  content: '➔';
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  color: #7C3AED;
  font-weight: 800;
  font-size: 1.1rem;
}

.payout-step-icon {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.payout-step-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-dark);
}

/* 7. FAQs Section */
.merchant-faq-sec {
  padding: 80px 0;
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.01) 0%, rgba(124, 58, 237, 0.03) 100%);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.faq-acc-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-accordion-item {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  overflow: hidden;
  transition: var(--transition-fast);
}

.faq-accordion-header {
  padding: 18px 24px;
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.faq-accordion-header:hover {
  background: rgba(124, 58, 237, 0.03);
}

.faq-accordion-header .faq-icon-toggle {
  transition: transform 0.2s ease;
  font-size: 0.95rem;
  color: #7C3AED;
}

.faq-accordion-item.active {
  border-color: #7C3AED;
  box-shadow: var(--shadow-sm);
}

.faq-accordion-item.active .faq-icon-toggle {
  transform: rotate(180deg);
}

.faq-accordion-body {
  padding: 0 24px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out, padding 0.2s ease-out;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.faq-accordion-item.active .faq-accordion-body {
  padding: 16px 24px 24px 24px;
  border-top: 1px solid var(--border-color);
}

/* 8. Registration Form Section */
.merchant-form-sec {
  padding: 80px 0;
}

.merchant-form-wrapper {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 48px;
  max-width: 800px;
  margin: 0 auto;
}

.form-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.mo-form-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-dark);
  display: block;
  margin-bottom: 6px;
}

.mo-form-input, .mo-form-select, .mo-form-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-white);
  color: var(--text-dark);
  font-size: 0.88rem;
  box-sizing: border-box;
  font-family: var(--font-sans);
}

.mo-form-input:focus, .mo-form-select:focus, .mo-form-textarea:focus {
  border-color: #7C3AED;
  outline: none;
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.15);
}

.upload-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.mo-upload-card {
  border: 1.5px dashed var(--border-color);
  border-radius: 10px;
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: var(--transition-fast);
}

.mo-upload-card:hover {
  border-color: #7C3AED;
  background: rgba(124, 58, 237, 0.02);
}

.mo-upload-card input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload-icon {
  font-size: 1.5rem;
  margin-bottom: 6px;
  display: block;
}

.upload-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dark);
  display: block;
  margin-bottom: 2px;
}

.upload-status {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.success-screen-box {
  text-align: center;
  padding: 40px;
}

.success-app-id {
  background: rgba(124, 58, 237, 0.08);
  color: #7C3AED;
  font-family: monospace;
  font-size: 1.3rem;
  font-weight: 800;
  padding: 10px 20px;
  border-radius: 8px;
  display: inline-block;
  margin: 18px 0;
  border: 1px dashed rgba(124, 58, 237, 0.3);
}

/* 9. Final CTA Banner */
.merchant-cta-sec {
  padding: 80px 0;
}

.merchant-cta-banner {
  background: linear-gradient(135deg, #7C3AED 0%, #9333EA 100%);
  border-radius: 18px;
  padding: 60px 48px;
  text-align: center;
  color: #fff;
  box-shadow: 0 15px 35px rgba(124, 58, 237, 0.3);
}

.merchant-cta-title {
  font-family: var(--font-title);
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.merchant-cta-desc {
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto 32px auto;
  opacity: 0.9;
  line-height: 1.6;
}

.merchant-cta-btns {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.merchant-btn-light {
  background: #fff;
  color: #7C3AED;
  border: none;
  padding: 14px 28px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.merchant-btn-light:hover {
  background: #F3F4F6;
  transform: translateY(-2px);
}

.merchant-btn-outline {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  padding: 12px 26px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.merchant-btn-outline:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-2px);
}

.policy-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.premium-purple-badge {
  pointer-events: none;
}

/* ==========================================================================
   REDESIGNED PREMIUM QUICK VIEW MODAL SYSTEM
   ========================================================================== */

#product-quickview-modal {
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(10px) !important;
  transition: opacity 0.3s ease !important;
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
}

#product-quickview-modal.active {
  display: flex !important;
}

.quickview-modal-box {
  background: #ffffff !important;
  width: 1180px !important;
  max-width: 95vw !important;
  max-height: 90vh !important;
  border-radius: 24px !important;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.25) !important;
  border: 1px solid var(--border-color) !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
  animation: qvModalShow 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes qvModalShow {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.qv-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(243, 244, 246, 0.8);
  border: 1px solid var(--border-color);
  color: var(--text-dark);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  transition: all 0.2s ease;
}

.qv-close-btn:hover {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
  transform: rotate(90deg);
}

.qv-scroll-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 24px 16px 24px;
  box-sizing: border-box !important;
}

.qv-three-column-grid {
  display: grid;
  grid-template-columns: 4.2fr 3.8fr 2fr;
  gap: 24px;
  align-items: start;
  margin-top: 18px;
  box-sizing: border-box !important;
}

/* Column 1: Gallery */
.qv-gallery-container {
  display: flex;
  gap: 16px;
  position: sticky;
  top: 0;
}

.qv-vertical-thumbnails {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 70px;
  flex-shrink: 0;
}

.qv-thumb-item {
  width: 68px;
  height: 68px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.qv-thumb-item:hover,
.qv-thumb-item.active {
  border-color: var(--primary);
  box-shadow: 0 0 10px rgba(109, 40, 217, 0.3);
  transform: translateY(-2px);
}

.qv-thumb-item.video-thumb::after {
  content: '▶️';
  position: absolute;
  font-size: 0.8rem;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 0;
}

.qv-main-image-viewport {
  flex: 1;
  height: 450px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.qv-main-image-display {
  font-size: 10rem;
  transition: transform 0.1s ease-out;
  cursor: zoom-in;
  user-select: none;
}

.qv-video-sim-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1e1b4b, #311042);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 10;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.qv-video-sim-overlay.active {
  display: flex !important;
}

/* Column 2: Info */
.qv-brand-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.qv-brand-badge {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.qv-verified-label {
  font-size: 0.72rem;
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
  padding: 3px 8px;
  border-radius: 20px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.qv-utility-buttons {
  display: flex;
  gap: 8px;
}

.qv-util-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.qv-util-btn:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
  transform: translateY(-2px);
}

.qv-product-title {
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.qv-rating-area {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--text-dark);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.qv-rating-stars {
  color: #fbbf24;
  font-size: 1.1rem;
  font-weight: 600;
}

.qv-sold-badge {
  background: rgba(249, 115, 22, 0.1);
  color: #ea580c;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.75rem;
}

.qv-price-area {
  background: rgba(124, 58, 237, 0.03);
  border: 1px solid rgba(124, 58, 237, 0.08);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.qv-price-flex {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.qv-current-price {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary);
}

.qv-old-price {
  font-size: 1.1rem;
  text-decoration: line-through;
  color: var(--text-muted);
}

.qv-discount-pill {
  background: #dc2626;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
}

.qv-emi-box {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

.qv-social-proof-bar {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dark);
  gap: 8px;
  flex-wrap: wrap;
}

.qv-short-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 16px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.qv-selector-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
  display: block;
}

.qv-color-selectors {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.qv-color-node {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.qv-color-node:hover,
.qv-color-node.active {
  border-color: var(--primary);
  box-shadow: 0 0 8px rgba(109, 40, 217, 0.5);
  transform: scale(1.1);
}

.qv-storage-selectors {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.qv-storage-node {
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  background: var(--bg-white);
  transition: all 0.2s ease;
}

.qv-storage-node:hover {
  border-color: var(--primary);
  background: var(--bg-light);
}

.qv-storage-node.active {
  border-color: var(--primary);
  background: rgba(109, 40, 217, 0.05);
  color: var(--primary);
  font-weight: 700;
  box-shadow: 0 0 6px rgba(109, 40, 217, 0.2);
}

.qv-highlights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px;
  background: var(--bg-light);
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--border-color);
}

.qv-highlight-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dark);
}

/* Column 3: Purchase Card */
.qv-purchase-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
}

.qv-stock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.qv-stock-badge {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--success);
  display: flex;
  align-items: center;
  gap: 4px;
}

.qv-stock-left {
  font-size: 0.72rem;
  font-weight: 700;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
}

.qv-delivery-info {
  background: var(--bg-light);
  border-radius: 10px;
  padding: 10px;
  font-size: 0.75rem;
  color: var(--text-dark);
  margin-bottom: 16px;
  border: 1px solid var(--border-color);
}

.qv-qty-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 4px 8px;
  background: var(--bg-white);
}

.qv-qty-btn {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s;
}

.qv-qty-btn:hover {
  background: var(--bg-light);
}

.qv-qty-val {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark);
}

.qv-buy-now-btn {
  width: 100%;
  height: 54px;
  background: linear-gradient(135deg, var(--primary), #4c1d95) !important;
  color: white !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(109, 40, 217, 0.4) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.qv-buy-now-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(109, 40, 217, 0.6) !important;
}

.qv-add-cart-btn {
  width: 100%;
  height: 44px;
  background: transparent !important;
  border: 2px solid var(--primary) !important;
  color: var(--primary) !important;
  border-radius: 12px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.qv-add-cart-btn:hover {
  background: rgba(109, 40, 217, 0.05) !important;
  transform: translateY(-1px) !important;
}

.qv-tertiary-actions {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 700;
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
  margin-bottom: 14px;
}

.qv-tertiary-act-link {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: color 0.2s;
}

.qv-tertiary-act-link:hover {
  color: var(--primary);
}

.qv-seller-card {
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
  margin-top: 10px;
}

.qv-seller-store-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.qv-seller-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.qv-seller-visit-btn {
  width: 100%;
  padding: 6px;
  font-size: 0.72rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-light);
  color: var(--text-dark);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.qv-seller-visit-btn:hover {
  background: var(--border-color);
  color: var(--primary);
}

/* Bottom Strip */
.qv-bottom-trust-strip {
  background: var(--bg-light);
  border-top: 1px solid var(--border-color);
  padding: 14px 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.qv-trust-strip-card {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-dark);
  justify-content: center;
}

/* Mobile Sticky Bottom Wrapper */
.qv-mobile-sticky-footer {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  box-shadow: 0 -4px 15px rgba(0,0,0,0.1);
  padding: 12px 16px;
  box-sizing: border-box;
  z-index: 100;
}

/* Responsive Overrides */
@media (max-width: 992px) {
  .qv-three-column-grid {
    grid-template-columns: 1fr 1fr;
  }
  .qv-purchase-card {
    grid-column: span 2;
    position: static;
    margin-top: 12px;
  }
  .qv-bottom-trust-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .quickview-modal-box {
    width: 100% !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
  .qv-scroll-body {
    padding: 16px 16px 80px 16px;
  }
  .qv-three-column-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .qv-gallery-container {
    flex-direction: column-reverse;
    align-items: center;
  }
  .qv-vertical-thumbnails {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    justify-content: center;
  }
  .qv-main-image-viewport {
    width: 100%;
    height: 320px;
  }
  .qv-main-image-display {
    font-size: 7rem;
  }
  .qv-purchase-card {
    grid-column: span 1;
    margin-top: 0;
  }
  .qv-bottom-trust-strip {
    grid-template-columns: 1fr;
    padding: 14px 16px;
  }
  .qv-mobile-sticky-footer {
    display: flex;
  }
  .qv-purchase-card .qv-buy-now-btn {
    display: none;
  }
}

/* ==========================================================================
   💄 BEAUTY VIDEO SHOPPING CLONE (PIXEL-PERFECT AS PER SCREENSHOT)
   ========================================================================== */

#beauty-video-shopping-section {
  background: #ffffff;
  border: 1px solid #f3f4f6;
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
}

[data-theme="dark"] #beauty-video-shopping-section {
  background: #111827;
  border-color: #1f2937;
}

/* Home page Video Shopping Carousel Grid */
.hp-video-shopping-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 16px;
}
@media (max-width: 767px) {
  .hp-video-shopping-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Section Title & View All elements */
.section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.view-all-btn-outline {
  border: 1.5px solid #6d28d9;
  color: #6d28d9;
  background: #ffffff;
  padding: 6px 16px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.78rem;
  transition: all 0.2s ease;
}
.view-all-btn-outline:hover {
  background: #f5f3ff;
}

/* Slider Track elements */
.bvs-slider-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.bvs-slider-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  scroll-behavior: smooth;
  width: 100%;
  padding: 6px 0;
  box-sizing: border-box;
}
.bvs-slider-track::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Arrow Navigation */
.bvs-slider-arrow {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  color: #6d28d9;
  transition: all 0.2s ease;
  top: 38%;
}
.bvs-slider-arrow.prev {
  left: -18px;
}
.bvs-slider-arrow.next {
  right: -18px;
}
.bvs-slider-arrow:hover {
  background: #f9fafb;
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Video Card Structure */
.bvs-video-card {
  width: calc(25% - 15px);
  min-width: 250px;
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bvs-video-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .bvs-video-card {
  background: #1f2937;
  border-color: #374151;
}

/* Thumbnail Box */
.bvs-card-thumbnail-box {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  background: #000000;
}
.bvs-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bvs-preview-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.bvs-preview-player.playing {
  opacity: 1;
}
.bvs-card-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.45) 100%);
  z-index: 3;
  pointer-events: none;
}

/* Thumbnail Overlay Badges */
.bvs-duration-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 700;
  z-index: 4;
}
.bvs-card-heart-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  padding: 0;
}
.bvs-card-heart-btn svg {
  transition: transform 0.2s;
}
.bvs-card-heart-btn:hover svg {
  transform: scale(1.1);
}
.bvs-card-heart-btn.liked {
  color: #ef4444;
}
.bvs-card-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid #ffffff;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  z-index: 4;
  backdrop-filter: blur(2px);
}
.bvs-card-metrics-row {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  gap: 8px;
  z-index: 4;
}
.bvs-card-metric {
  background: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 700;
}

/* Card Products Strip below thumbnail */
.bvs-card-products-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border-radius: 10px;
  padding: 6px 10px;
  margin-top: 10px;
  border: 1px solid #f1f5f9;
}

[data-theme="dark"] .bvs-card-products-strip {
  background: #374151;
  border-color: #4b5563;
}

.bvs-strip-left {
  display: flex;
  gap: 4px;
}
.bvs-strip-prod-img {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  object-fit: cover;
  background: #ffffff;
  border: 1px solid #e2e8f0;
}
.bvs-strip-count {
  font-size: 0.68rem;
  font-weight: 800;
  color: #6d28d9;
}
.bvs-card-title-bottom {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: #111827;
  margin: 10px 0 6px 0;
  line-height: 1.35;
  height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

[data-theme="dark"] .bvs-card-title-bottom {
  color: #f3f4f6;
}

.bvs-card-creator-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bvs-creator-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f1f5f9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
}
.bvs-creator-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #4b5563;
}

[data-theme="dark"] .bvs-creator-name {
  color: #9ca3af;
}

.bvs-creator-verified {
  display: inline-flex;
  align-items: center;
  color: #6d28d9;
}

/* Category Pills & Sort Bar */
.bvs-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  border-top: 1px solid #f1f5f9;
  padding-top: 18px;
  gap: 16px;
  flex-wrap: wrap;
}

[data-theme="dark"] .bvs-filter-bar {
  border-color: #374151;
}

.bvs-filter-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.bvs-filter-pills::-webkit-scrollbar {
  display: none;
}
.bvs-filter-pill {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #374151;
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bvs-filter-pill:hover {
  border-color: #6d28d9;
  color: #6d28d9;
}
.bvs-filter-pill.active {
  background: #6d28d9;
  border-color: #6d28d9;
  color: #ffffff;
}

[data-theme="dark"] .bvs-filter-pill {
  background: #1f2937;
  border-color: #374151;
  color: #d1d5db;
}
[data-theme="dark"] .bvs-filter-pill.active {
  background: #6d28d9;
  border-color: #6d28d9;
  color: #ffffff;
}

.bvs-sort-dropdown .bvs-select-sort {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #374151;
  cursor: pointer;
  outline: none;
}

[data-theme="dark"] .bvs-sort-dropdown .bvs-select-sort {
  background: #1f2937;
  border-color: #374151;
  color: #d1d5db;
}

/* ==========================================================================
   BVS INTERACTIVE VIEW MODAL OVERRIDES
   ========================================================================== */
.bvs-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(8px);
}
.bvs-modal.show {
  opacity: 1;
  pointer-events: auto;
}

.bvs-modal-content {
  background: #111827;
  border-radius: 20px;
  overflow: hidden;
  max-width: 1100px;
  height: 85vh;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.bvs-modal-back-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s;
}
.bvs-modal-back-btn:hover {
  background: rgba(0, 0, 0, 0.6);
}

.bvs-modal-right {
  flex: 3.5;
  background: #ffffff;
  color: #1f2937;
  padding: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

[data-theme="dark"] .bvs-modal-right {
  background: #ffffff; /* Keep white layout exactly as shown in screenshot */
  color: #1f2937;
}

.bvs-modal-seller-header {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 16px;
  margin-bottom: 16px;
  position: relative;
}
.bvs-seller-logo-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fdf2f8;
  color: #db2777;
  font-weight: 800;
  font-size: 0.85rem;
  border: 2px solid #fbcfe8;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
}
.bvs-seller-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bvs-seller-name-row {
  font-size: 0.95rem;
  font-weight: 800;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.bvs-follow-btn {
  background: #ffffff;
  border: 1.5px solid #6d28d9;
  color: #6d28d9;
  padding: 4px 16px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  align-self: flex-start;
  transition: all 0.2s ease;
  outline: none;
}
.bvs-follow-btn:hover {
  background: #f5f3ff;
}
.bvs-follow-btn.following {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #4b5563;
}
.bvs-modal-close {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: #4b5563;
  padding: 0;
}

.bvs-modal-desc-box {
  margin-bottom: 20px;
}
.bvs-modal-desc-box p {
  margin: 0;
  font-size: 0.85rem;
  color: #4b5563;
  line-height: 1.45;
}

.bvs-modal-products-section {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 16px;
}
.bvs-products-heading {
  font-size: 0.85rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 12px 0;
  font-family: var(--font-title);
}
.bvs-modal-products-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bvs-modal-prod-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  box-sizing: border-box;
}
.bvs-modal-prod-img {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 2px;
}
.bvs-modal-prod-info {
  flex: 1;
}
.bvs-modal-prod-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 4px 0;
}
.bvs-modal-prod-price-row {
  font-size: 0.82rem;
  font-weight: 800;
  color: #6d28d9;
}
.bvs-modal-prod-btn {
  background: #f3e8ff;
  border: none;
  color: #6d28d9;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.bvs-modal-prod-btn:hover {
  background: #e9d5ff;
}

.bvs-modal-footer-actions {
  display: flex;
  gap: 10px;
  border-top: 1px solid #f1f5f9;
  padding-top: 16px;
}
.bvs-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.bvs-action-btn.outline {
  background: #f3f4f6;
  border: none;
  color: #374151;
  flex: 1;
}
.bvs-action-btn.outline:hover {
  background: #e5e7eb;
}
.bvs-action-btn.primary {
  background: #6d28d9;
  border: none;
  color: #ffffff;
  flex: 1.8;
  gap: 6px;
}
.bvs-action-btn.primary:hover {
  background: #5b21b6;
}

/* ==========================================================
   BVS INTERACTIVE COMMENTS TAB
   ========================================================== */
.bvs-comments-sort-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 12px;
}
.bvs-comments-sort-row select {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.75rem;
}
.bvs-comments-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}
.bvs-comment-item {
  display: flex;
  gap: 10px;
  font-size: 0.8rem;
}
.bvs-comment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.bvs-comment-bubble {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 8px 12px;
  box-sizing: border-box;
}
.bvs-comment-user {
  font-weight: 800;
  color: #c084fc;
  margin-bottom: 3px;
}
.bvs-comment-text {
  color: rgba(255,255,255,0.9);
  line-height: 1.35;
}
.bvs-comment-footer {
  display: flex;
  gap: 12px;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.5);
  margin-top: 5px;
}
.bvs-comment-footer span {
  cursor: pointer;
}
.bvs-comment-footer span:hover {
  color: #fff;
}
.bvs-comment-replies {
  margin-left: 20px;
  margin-top: 8px;
  border-left: 1px solid rgba(255,255,255,0.1);
  padding-left: 10px;
}

/* Comment inputs */
.bvs-comments-input-container {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.bvs-comments-input-container input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #fff;
  padding: 8px 12px;
  font-size: 0.8rem;
  outline: none;
}
.bvs-comments-input-container input:focus {
  border-color: var(--primary);
}
.bvs-comments-input-container button {
  background: var(--primary);
  border: none;
  color: white;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.bvs-comments-input-container button:hover {
  background: #7c3aed;
}

/* ==========================================================
   PRODUCT QUICK POPUP OVER THE VIDEO PLAYER
   ========================================================== */
.bvs-quick-popup {
  display: none;
  position: absolute;
  bottom: 60px;
  left: 20px;
  width: 280px;
  background: var(--bg-white);
  color: var(--text-dark);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  border: 1px solid var(--border-color);
  padding: 12px;
  box-sizing: border-box;
  z-index: 25;
  animation: bvsSlideUpQP 0.2s ease;
}
.bvs-quick-popup.show {
  display: block;
}
.bvs-qp-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
}
.bvs-qp-close:hover {
  color: var(--text-dark);
}
.bvs-qp-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bvs-qp-header-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.bvs-qp-img {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: var(--bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}
.bvs-qp-title {
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}
.bvs-qp-price-row {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.bvs-qp-disc-badge {
  background: #ef4444;
  color: #fff;
  font-size: 0.65rem;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 700;
}
.bvs-qp-stock {
  font-size: 0.68rem;
  color: var(--success);
  font-weight: 600;
}
.bvs-qp-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.bvs-qp-btn {
  flex: 1;
  padding: 6px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.bvs-qp-btn.cart {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-dark);
}
.bvs-qp-btn.cart:hover {
  background: var(--bg-light);
}
.bvs-qp-btn.buy {
  background: var(--primary);
  border: none;
  color: #fff;
}
.bvs-qp-btn.buy:hover {
  background: #7c3aed;
}

@keyframes bvsSlideUpQP {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================
   BVS RESPONSIVE LAYOUT OVERRIDES
   ========================================================== */
@media (max-width: 992px) {
  .bvs-split-layout {
    grid-template-columns: 1fr;
  }
  .bvs-featured-col {
    display: none; /* Hide huge featured video on tablet to fit layout */
  }
  .bvs-grid-col {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  /* On mobile, turn the modal into a TikTok style vertical-swipe feed */
  .bvs-modal-content {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    max-width: 100vw;
    max-height: 100vh;
  }
  .bvs-modal-body {
    flex-direction: column;
  }
  .bvs-modal-left {
    flex: 1;
    border-right: none;
  }
  .bvs-modal-right {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: rgba(17, 24, 39, 0.95);
    border-top: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    z-index: 30;
  }
  .bvs-modal-recommendations {
    display: none;
  }
  .bvs-video-controls {
    bottom: 40%;
  }
}

/* ==========================================================================
   💄 BEAUTY VIDEO SHOPPING INLINE PLAYER CLONE
   ========================================================================== */
.bvs-inline-player-layout {
  display: flex;
  width: 100%;
  height: 520px;
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  margin-top: 16px;
  box-sizing: border-box;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  transform: translateY(0);
}

.bvs-inline-player-layout.bvs-switching {
  opacity: 0;
  transform: translateY(20px);
}

[data-theme="dark"] .bvs-inline-player-layout {
  background: #111827;
  border: 1px solid #1f2937;
}

.bvs-inline-left {
  flex: 7.5;
  height: 100%;
  background: #000;
  position: relative;
  overflow: hidden;
}
.bvs-inline-left video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bvs-inline-play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.15);
  cursor: pointer;
  z-index: 3;
}
.bvs-inline-play-overlay .play-indicator-icon {
  font-size: 3rem;
  color: #fff;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s ease;
  pointer-events: none;
}
.bvs-inline-left:hover .play-indicator-icon {
  opacity: 0.85;
  transform: scale(1);
}

.bvs-inline-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
  padding: 16px 20px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 5;
}
.bvs-inline-controls button {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s;
}
.bvs-inline-controls button:active {
  transform: scale(0.9);
}

.bvs-inline-progress-container {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  transition: height 0.1s;
}
.bvs-inline-progress-container:hover {
  height: 6px;
}
.bvs-inline-progress-fill {
  height: 100%;
  background: #d946ef;
  border-radius: 2px;
  position: relative;
}
.bvs-inline-progress-fill::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.1s;
}
.bvs-inline-progress-container:hover .bvs-inline-progress-fill::after {
  opacity: 1;
}

#bvs-inline-time-display {
  font-size: 0.75rem;
  color: #fff;
  font-weight: 700;
  margin: 0 8px;
}

.bvs-inline-back-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s;
}
.bvs-inline-back-btn:hover {
  background: rgba(0, 0, 0, 0.6);
}

.bvs-inline-right {
  flex: 4.5;
  background: #ffffff;
  color: #1f2937;
  padding: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

[data-theme="dark"] .bvs-inline-right {
  background: #ffffff;
  color: #1f2937;
}

.bvs-inline-seller-header {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 16px;
  margin-bottom: 16px;
  position: relative;
}
.bvs-inline-seller-logo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fdf2f8;
  color: #db2777;
  font-weight: 800;
  font-size: 0.85rem;
  border: 2px solid #fbcfe8;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
}
.bvs-inline-seller-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bvs-inline-seller-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.bvs-inline-follow-btn {
  background: #ffffff;
  border: 1.5px solid #6d28d9;
  color: #6d28d9;
  padding: 4px 16px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  align-self: flex-start;
  transition: all 0.2s ease;
  outline: none;
}
.bvs-inline-follow-btn:hover {
  background: #f5f3ff;
}
.bvs-inline-follow-btn.following {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #4b5563;
}
.bvs-inline-close-btn {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: #4b5563;
  padding: 0;
}

.bvs-inline-desc-box {
  margin-bottom: 20px;
}
.bvs-inline-desc-box p {
  margin: 0;
  font-size: 0.85rem;
  color: #4b5563;
  line-height: 1.45;
}

.bvs-inline-products-section {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 16px;
  padding-right: 12px;
}
.bvs-inline-products-heading {
  font-size: 0.85rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 12px 0;
  font-family: var(--font-title);
}
.bvs-inline-products-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bvs-inline-prod-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  box-sizing: border-box;
}
.bvs-inline-prod-img {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 2px;
  cursor: pointer;
}
.bvs-inline-prod-info {
  flex: 1;
}
.bvs-inline-prod-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 4px 0;
  cursor: pointer;
}
.bvs-inline-prod-price {
  font-size: 0.82rem;
  font-weight: 800;
  color: #6d28d9;
}
.bvs-inline-prod-btn {
  background: #f3e8ff;
  border: none;
  color: #6d28d9;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.bvs-inline-prod-btn:hover {
  background: #e9d5ff;
}

.bvs-inline-footer-actions {
  display: flex;
  gap: 10px;
  border-top: 1px solid #f1f5f9;
  padding-top: 16px;
}
.bvs-inline-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.bvs-inline-action-btn.outline {
  background: #f3f4f6;
  border: none;
  color: #374151;
  flex: 1;
}
.bvs-inline-action-btn.outline:hover {
  background: #e5e7eb;
}
.bvs-inline-action-btn.primary {
  background: #6d28d9;
  border: none;
  color: #ffffff;
  flex: 1.8;
  gap: 6px;
}
.bvs-inline-action-btn.primary:hover {
  background: #5b21b6;
}

@media (max-width: 992px) {
  .bvs-inline-player-layout {
    flex-direction: column;
    height: auto;
  }
  .bvs-inline-left {
    border-radius: 24px 24px 0 0 !important;
    height: 350px !important;
  }
  .bvs-inline-right {
    border-radius: 0 0 24px 24px !important;
    border-left: 1px solid #e5e7eb !important;
    border-top: none !important;
    height: auto !important;
  }
}

/* ==========================================================================
   🛒 REDESIGNED PREMIUM CART PAGE STYLES (Amazon + Daraz + Alibaba Inspired)
   ========================================================================== */

#panel-cart {
  background: #f4f5f7;
  padding: 24px 0;
}
[data-theme="dark"] #panel-cart {
  background: #0b0f19;
}

.cart-page-wrapper {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Header & Stepper */
.cart-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}
.cart-main-title {
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0;
  color: #111827;
  font-family: var(--font-title);
}
[data-theme="dark"] .cart-main-title {
  color: #f3f4f6;
}
.cart-subtitle {
  font-size: 0.85rem;
  color: #4b5563;
  margin: 4px 0 0 0;
}
[data-theme="dark"] .cart-subtitle {
  color: #9ca3af;
}

.cart-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cart-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #9ca3af;
}
.cart-step.active {
  color: #6d28d9;
}
.cart-step .step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #4b5563;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
}
.cart-step.active .step-num {
  background: #6d28d9;
  color: #ffffff;
}
.cart-step-line {
  width: 32px;
  height: 2px;
  background: #e5e7eb;
}
.cart-step.active + .cart-step-line {
  background: #c084fc;
}

/* Layout Grid */
.cart-layout-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 24px;
  align-items: start;
}
.cart-main-left,
.cart-main-right {
  min-width: 0;
}

@media (max-width: 992px) {
  .cart-layout-grid {
    grid-template-columns: 1fr;
  }
}

/* Left Side Items */
.cart-savings-banner {
  background: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%);
  border-radius: 16px;
  padding: 16px 20px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.15);
}
.csb-gift-icon {
  font-size: 2rem;
}
.csb-content {
  flex: 1;
}
.csb-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}
.csb-badges {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.csb-badge-item {
  background: rgba(255, 255, 255, 0.2);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  backdrop-filter: blur(2px);
}

/* Product Cards */
.cart-item-card-v2 {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  border: 1px solid #f1f5f9;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}
[data-theme="dark"] .cart-item-card-v2 {
  background: #111827;
  border-color: #1f2937;
}
.cart-item-card-v2:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

.cic-main {
  display: flex;
  gap: 20px;
}
@media (max-width: 768px) {
  .cic-main {
    flex-direction: column;
    gap: 16px;
  }
}

.cic-checkbox-col {
  display: flex;
  align-items: center;
}
.cic-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #6d28d9;
}

.cic-img-col {
  width: 110px;
  height: 110px;
  border-radius: 12px;
  overflow: hidden;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  border: 1px solid #f1f5f9;
}
[data-theme="dark"] .cic-img-col {
  background: #1f2937;
  border-color: #374151;
}
.cic-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.cic-img-col:hover .cic-img {
  transform: scale(1.05);
}

.cic-info-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cic-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: #111827;
  cursor: pointer;
  line-height: 1.4;
  font-family: var(--font-title);
  transition: color 0.2s;
}
.cic-title:hover {
  color: #6d28d9;
}
[data-theme="dark"] .cic-title {
  color: #f3f4f6;
}
[data-theme="dark"] .cic-title:hover {
  color: #a78bfa;
}

.cic-meta {
  display: flex;
  gap: 16px;
  font-size: 0.78rem;
  color: #6b7280;
  flex-wrap: wrap;
}
[data-theme="dark"] .cic-meta {
  color: #9ca3af;
}
.verified-badge-inline {
  display: inline-flex;
  align-items: center;
}

.cic-rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
}
.stars-gold {
  color: #f59e0b;
  font-size: 0.85rem;
}
.rating-count {
  color: #9ca3af;
}
.stock-status {
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}
.stock-status.in-stock {
  background: #ecfdf5;
  color: #10b981;
}
[data-theme="dark"] .stock-status.in-stock {
  background: rgba(16, 185, 129, 0.1);
  color: #34d399;
}

/* Seller box */
.cic-seller-box {
  background: #f8fafc;
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.72rem;
  color: #4b5563;
  flex-wrap: wrap;
}
[data-theme="dark"] .cic-seller-box {
  background: #1f2937;
  color: #d1d5db;
}
.csb-detail b {
  color: #111827;
}
[data-theme="dark"] .csb-detail b {
  color: #f3f4f6;
}
.csb-btn {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #4b5563;
  cursor: pointer;
}
[data-theme="dark"] .csb-btn {
  background: #374151;
  border-color: #4b5563;
  color: #d1d5db;
}
.csb-btn:hover {
  border-color: #6d28d9;
  color: #6d28d9;
}

/* Price & stepper column */
.cic-actions-col {
  width: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .cic-actions-col {
    width: 100%;
    align-items: flex-start;
  }
}

.cic-price-box {
  text-align: right;
}
@media (max-width: 768px) {
  .cic-price-box {
    text-align: left;
  }
}
.cic-current-price {
  font-size: 1.15rem;
  font-weight: 800;
  color: #111827;
}
[data-theme="dark"] .cic-current-price {
  color: #ffffff;
}
.cic-original-price {
  font-size: 0.8rem;
  color: #9ca3af;
  text-decoration: line-through;
  margin-top: 2px;
}
.cic-discount-badge {
  background: #fee2e2;
  color: #ef4444;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 4px;
}
[data-theme="dark"] .cic-discount-badge {
  background: rgba(239, 68, 68, 0.15);
}

.cic-stepper {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}
[data-theme="dark"] .cic-stepper {
  background: #1f2937;
  border-color: #374151;
}
.stepper-btn-v2 {
  background: #f3f4f6;
  border: none;
  width: 32px;
  height: 32px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  color: #4b5563;
  transition: background 0.1s;
}
[data-theme="dark"] .stepper-btn-v2 {
  background: #374151;
  color: #d1d5db;
}
.stepper-btn-v2:hover {
  background: #e5e7eb;
}
[data-theme="dark"] .stepper-btn-v2:hover {
  background: #4b5563;
}
.stepper-val-v2 {
  width: 38px;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: #111827;
}
[data-theme="dark"] .stepper-val-v2 {
  color: #ffffff;
}

.cic-links-row {
  display: flex;
  gap: 8px;
  font-size: 0.72rem;
  color: #9ca3af;
  align-items: center;
}
.cic-link-btn {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 600;
}
[data-theme="dark"] .cic-link-btn {
  color: #9ca3af;
}
.cic-link-btn:hover {
  color: #6d28d9;
}
.cic-link-btn.danger:hover {
  color: #ef4444;
}
.divider-pipe {
  color: #e5e7eb;
}
[data-theme="dark"] .divider-pipe {
  color: #374151;
}

/* Trust Strip under card */
.cic-trust-strip {
  display: flex;
  justify-content: space-around;
  border-top: 1px dashed #e2e8f0;
  padding-top: 12px;
  margin-top: 16px;
  font-size: 0.72rem;
  color: #6b7280;
  flex-wrap: wrap;
  gap: 10px;
}
[data-theme="dark"] .cic-trust-strip {
  border-color: #374151;
  color: #9ca3af;
}
.cts-icon {
  color: #10b981;
  font-weight: bold;
  margin-right: 4px;
}

/* Empty cart state */
.cart-empty-state-v2 {
  background: #ffffff;
  border-radius: 24px;
  padding: 60px 40px;
  text-align: center;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.02);
}
[data-theme="dark"] .cart-empty-state-v2 {
  background: #111827;
}
.empty-state-icon {
  font-size: 4rem;
  margin-bottom: 20px;
}
.empty-state-btns {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* Saved For Later */
.cart-saved-later-section {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px;
  margin-top: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
[data-theme="dark"] .cart-saved-later-section {
  background: #111827;
}
.csl-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 16px 0;
  color: #111827;
  font-family: var(--font-title);
}
[data-theme="dark"] .csl-title {
  color: #f3f4f6;
}
.csl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.csl-card {
  display: flex;
  background: #f8fafc;
  border-radius: 12px;
  padding: 12px;
  gap: 12px;
  align-items: center;
  border: 1px solid #f1f5f9;
}
[data-theme="dark"] .csl-card {
  background: #1f2937;
  border-color: #374151;
}
.csl-card-img {
  width: 65px;
  height: 65px;
  border-radius: 8px;
  object-fit: cover;
  background: #ffffff;
  cursor: pointer;
}
.csl-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.csl-card-title {
  font-size: 0.78rem;
  font-weight: 700;
  margin: 0;
  color: #111827;
  cursor: pointer;
  line-height: 1.35;
  height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
[data-theme="dark"] .csl-card-title {
  color: #f3f4f6;
}
.csl-card-price {
  font-size: 0.82rem;
  font-weight: 800;
  color: #6d28d9;
}
.csl-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.csl-btn-main {
  background: #6d28d9;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
}
.csl-btn-main:hover {
  background: #5b21b6;
}
.csl-btn-icon {
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 3px 6px;
  cursor: pointer;
  font-size: 0.72rem;
}
[data-theme="dark"] .csl-btn-icon {
  border-color: #4b5563;
}
.csl-btn-icon:hover {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
}

/* Frequently Bought Together Bundle */
.cart-bundle-section {
  background: #ffffff;
  border-radius: 20px;
  padding: 24px;
  margin-top: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
[data-theme="dark"] .cart-bundle-section {
  background: #111827;
}
.cb-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 16px 0;
  color: #111827;
  font-family: var(--font-title);
}
[data-theme="dark"] .cb-title {
  color: #f3f4f6;
}
.cb-card {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #f8fafc;
  border-radius: 16px;
  padding: 20px;
  flex-wrap: wrap;
}
[data-theme="dark"] .cb-card {
  background: #1f2937;
}
.cb-images-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cb-img-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.cb-img-box img {
  width: 75px;
  height: 75px;
  border-radius: 10px;
  object-fit: cover;
  background: #ffffff;
  border: 1px solid #e2e8f0;
}
.cb-img-price {
  font-size: 0.72rem;
  font-weight: 800;
  color: #4b5563;
}
[data-theme="dark"] .cb-img-price {
  color: #d1d5db;
}
.cb-plus {
  font-size: 1.5rem;
  font-weight: 300;
  color: #9ca3af;
}
.cb-info-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cb-total-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cb-total-label {
  font-size: 0.9rem;
  color: #6b7280;
}
[data-theme="dark"] .cb-total-label {
  color: #9ca3af;
}
.cb-total-price {
  font-size: 1.3rem;
  font-weight: 800;
  color: #6d28d9;
}
.cb-original-price {
  font-size: 0.85rem;
  color: #9ca3af;
  text-decoration: line-through;
}
.cb-add-btn {
  background: #6d28d9;
  color: #ffffff;
  border: none;
  padding: 10px 24px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s;
  align-self: flex-start;
}
.cb-add-btn:active {
  transform: scale(0.97);
}
.cb-add-btn:hover {
  background: #5b21b6;
}

/* Carousels */
.cart-carousel-section {
  background: #ffffff;
  border-radius: 20px;
  padding: 24px;
  margin-top: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
[data-theme="dark"] .cart-carousel-section {
  background: #111827;
}
.cc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.cc-header h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
  color: #111827;
  font-family: var(--font-title);
}
[data-theme="dark"] .cc-header h3 {
  color: #f3f4f6;
}
.cc-nav-btns {
  display: flex;
  gap: 6px;
}
.cc-nav-btn {
  background: #f3f4f6;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #4b5563;
  transition: background 0.1s;
}
[data-theme="dark"] .cc-nav-btn {
  background: #1f2937;
  color: #d1d5db;
}
.cc-nav-btn:hover {
  background: #e5e7eb;
}

.cc-carousel-track-container {
  overflow-x: auto;
  scrollbar-width: none;
}
.cc-carousel-track-container::-webkit-scrollbar {
  display: none;
}
.cc-carousel-track {
  display: flex;
  gap: 16px;
}
.cc-card {
  width: 220px;
  background: #f8fafc;
  border-radius: 14px;
  padding: 12px;
  border: 1px solid #f1f5f9;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-theme="dark"] .cc-card {
  background: #1f2937;
  border-color: #374151;
}
.cc-card-img-wrapper {
  width: 100%;
  height: 140px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: #ffffff;
  cursor: pointer;
}
.cc-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s;
}
.cc-card:hover .cc-card-img {
  transform: scale(1.05);
}
.cc-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}
.cc-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.cc-card-title {
  font-size: 0.78rem;
  font-weight: 700;
  margin: 0;
  color: #111827;
  line-height: 1.35;
  height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  cursor: pointer;
}
[data-theme="dark"] .cc-card-title {
  color: #f3f4f6;
}
.cc-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.cc-card-price {
  font-size: 0.9rem;
  font-weight: 800;
  color: #6d28d9;
}
.cc-card-original {
  font-size: 0.75rem;
  color: #9ca3af;
  text-decoration: line-through;
}
.cc-card-btns {
  display: flex;
  gap: 6px;
  margin-top: auto;
}
.cc-btn-add {
  flex: 1;
  background: #6d28d9;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 6px;
  cursor: pointer;
}
.cc-btn-add:hover {
  background: #5b21b6;
}
.cc-btn-view {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #4b5563;
  padding: 6px 10px;
  cursor: pointer;
}
[data-theme="dark"] .cc-btn-view {
  background: #374151;
  border-color: #4b5563;
  color: #d1d5db;
}
.cc-btn-view:hover {
  border-color: #6d28d9;
}

/* Right Column Summary */
.cart-main-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: calc(var(--scroll-offset) + 16px);
}

.summary-card-v2 {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  border: 1px solid #f1f5f9;
}
[data-theme="dark"] .summary-card-v2 {
  background: #111827;
  border-color: #1f2937;
}

.sc-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 16px 0;
  color: #111827;
  font-family: var(--font-title);
}
[data-theme="dark"] .sc-title {
  color: #f3f4f6;
}

.sc-breakdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sc-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #4b5563;
}
[data-theme="dark"] .sc-row {
  color: #9ca3af;
}
.sc-row.discount {
  color: #ef4444;
  font-weight: 600;
}
.shipping-free {
  color: #10b981;
  font-weight: 700;
}
.sc-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 8px 0;
}
[data-theme="dark"] .sc-divider {
  background: #1f2937;
}
.sc-row.grand-total {
  font-size: 1.25rem;
  font-weight: 800;
  color: #6d28d9;
}
[data-theme="dark"] .sc-row.grand-total {
  color: #c084fc;
}
.sc-savings-note-el {
  background: #ecfdf5;
  color: #065f46;
  font-size: 0.76rem;
  padding: 6px 12px;
  border-radius: 8px;
  margin-top: 8px;
  font-weight: 600;
}
[data-theme="dark"] .sc-savings-note-el {
  background: rgba(16, 185, 129, 0.1);
  color: #34d399;
}

.card-subtitle-v2 {
  font-size: 0.9rem;
  font-weight: 800;
  margin: 0 0 12px 0;
  color: #111827;
}
[data-theme="dark"] .card-subtitle-v2 {
  color: #f3f4f6;
}

.coupon-field-row {
  display: flex;
  gap: 8px;
}
.coupon-field-v2 {
  flex: 1;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.8rem;
  outline: none;
  font-weight: 700;
}
[data-theme="dark"] .coupon-field-v2 {
  background: #1f2937;
  border-color: #374151;
  color: #ffffff;
}
.coupon-field-v2:focus {
  border-color: #6d28d9;
}
.coupon-apply-btn-v2 {
  background: #6d28d9;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}
.coupon-apply-btn-v2:hover {
  background: #5b21b6;
}

.coupon-message-v2 {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 8px;
}
.coupon-message-v2.success {
  background: #ecfdf5;
  color: #065f46;
}
.coupon-message-v2.error {
  background: #fee2e2;
  color: #991b1b;
}

.available-coupons-strip {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.7rem;
  margin-top: 8px;
}
.ac-label {
  color: #9ca3af;
}
.ac-code {
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 800;
  color: #6d28d9;
  cursor: pointer;
}
[data-theme="dark"] .ac-code {
  background: #1f2937;
  color: #c084fc;
}

/* Delivery Estimator */
.delivery-est-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.de-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
}
.de-change-btn {
  background: none;
  border: none;
  color: #6d28d9;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}
.de-address {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 800;
  margin-top: 6px;
  color: #111827;
}
[data-theme="dark"] .de-address {
  color: #ffffff;
}
.de-arrival-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #4b5563;
  margin-top: 8px;
}
[data-theme="dark"] .de-arrival-row {
  color: #d1d5db;
}
.de-express-badge {
  background: #fef3c7;
  color: #d97706;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 8px;
}
[data-theme="dark"] .de-express-badge {
  background: rgba(217, 119, 6, 0.15);
}

/* Checkout Actions */
.checkout-actions-v2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.checkout-btn-v2 {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(109, 40, 217, 0.2);
  transition: transform 0.1s;
}
.checkout-btn-v2:hover {
  transform: translateY(-1px);
}
.checkout-btn-v2:active {
  transform: translateY(1px);
}
.continue-btn-v2 {
  background: #ffffff;
  border: 1px solid #d1d5db;
  color: #4b5563;
  border-radius: 12px;
  padding: 12px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.1s;
}
[data-theme="dark"] .continue-btn-v2 {
  background: #1f2937;
  border-color: #374151;
  color: #d1d5db;
}
.continue-btn-v2:hover {
  background: #f9fafb;
}
[data-theme="dark"] .continue-btn-v2:hover {
  background: #374151;
}

/* Payment logos preview */
.payment-preview-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 16px;
  border: 1px solid #f1f5f9;
}
[data-theme="dark"] .payment-preview-card {
  background: #111827;
  border-color: #1f2937;
}
.payment-logos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.payment-logo {
  background: #f3f4f6;
  border-radius: 6px;
  padding: 6px;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 800;
  color: #4b5563;
  border: 1px solid #e5e7eb;
}
[data-theme="dark"] .payment-logo {
  background: #1f2937;
  border-color: #374151;
  color: #d1d5db;
}

/* Trust badges */
.trust-badges-block {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 8px;
}
.tb-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tb-icon {
  font-size: 1.1rem;
}
.tb-text {
  font-size: 0.68rem;
  font-weight: 700;
  color: #6b7280;
}
[data-theme="dark"] .tb-text {
  color: #9ca3af;
}

/* Mobile Sticky Bottom Checkout Bar */
.cart-mobile-sticky-bar {
  display: none; /* Hidden on desktop by default */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  padding: 12px 16px;
  box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.08);
  z-index: 9999;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
[data-theme="dark"] .cart-mobile-sticky-bar {
  background: #111827;
  border-color: #374151;
  box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.3);
}

.cmsb-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cmsb-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #6b7280;
}
[data-theme="dark"] .cmsb-label {
  color: #9ca3af;
}
.cmsb-price {
  font-size: 1.15rem;
  font-weight: 800;
  color: #6d28d9;
}
[data-theme="dark"] .cmsb-price {
  color: #c084fc;
}

.cmsb-btn {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(109, 40, 217, 0.15);
  transition: transform 0.1s;
}
.cmsb-btn:active {
  transform: scale(0.97);
}

/* On mobile, show sticky bar and add padding to avoid occlusion */
@media (max-width: 768px) {
  .cart-mobile-sticky-bar {
    display: flex;
  }
  /* Padding to avoid bottom content cut off */
  #panel-cart {
    padding-bottom: 90px !important;
  }
  
  /* Responsive Header Row */
  .cart-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .cart-stepper {
    width: 100%;
    justify-content: space-between;
  }
  
  /* Savings banner responsive */
  .cart-savings-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  /* Stepper lines hide on very small mobile */
  .cart-step-line {
    display: none;
  }
  .cart-stepper {
    gap: 8px;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  
  /* Saved for later grid */
  .csl-grid {
    grid-template-columns: 1fr;
  }
  
  /* Bundle Bundle Section */
  .cb-card {
    padding: 12px;
    gap: 16px;
  }
  .cb-images-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .cb-img-box img {
    width: 60px;
    height: 60px;
  }
  .cb-plus {
    font-size: 1.1rem;
  }
}

/* Sidebar and Drawer Category Icons Spacing & Size */
.home-cat-item span {
  display: inline-flex;
  align-items: center;
  gap: 14px; /* Space between icon and text */
}

.home-cat-item svg.ri {
  width: 22px !important;
  height: 22px !important;
  margin-right: 0px !important; /* Managed by inline-flex gap */
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* Status Dot Utility Styles */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.status-dot-green { background-color: #10b981; }
.status-dot-red { background-color: #ef4444; }
.status-dot-blue { background-color: #3b82f6; }
.status-dot-yellow { background-color: #f59e0b; }
.status-dot-purple { background-color: #8b5cf6; }
.status-dot-orange { background-color: #f97316; }

/* Swatches styling on Storefront PDP */
.pdp-swatch-btn.color-swatch {
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.pdp-swatch-btn.color-swatch.active {
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.4);
}

.pdp-swatch-btn.color-swatch.out-of-stock-swatch::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(239, 68, 68, 0.85);
  transform: translateY(-50%) rotate(-45deg);
  pointer-events: none;
}

.pdp-swatch-btn.out-of-stock-swatch {
  opacity: 0.65;
  position: relative;
}

/* Mobile responsive horizontal swatch row styling */
@media (max-width: 768px) {
  .pdp-swatch-list {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 6px !important;
  }
  .pdp-swatch-list::-webkit-scrollbar {
    display: none !important;
  }
}

/* ==========================================================================


/* ==========================================================================
   REBUILT SPONSORED DEALS WIDGET STYLE (PHASE 3 WIDGET)
   ========================================================================== */
.sponsored-deals-card {
  background: #ffffff !important;
  border-radius: 24px !important;
  border: 1px solid #f1f5f9 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.025), 0 1px 3px rgba(0, 0, 0, 0.01) !important;
  padding: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
  position: relative !important;
}

.sponsored-deals-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 2px 4px !important;
}

.sponsored-deals-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.sponsored-deals-crown-icon {
  font-size: 1.25rem !important;
  line-height: 1 !important;
}

.sponsored-deals-header-title {
  font-family: var(--font-title, sans-serif) !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: 0.5px !important;
}

.sponsored-deals-admin-badge {
  background: #5B21B6 !important;
  color: #ffffff !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  padding: 4px 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
}

.sponsored-deals-banner {
  background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%) !important;
  border-radius: 18px !important;
  padding: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(91, 33, 182, 0.12) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.sponsored-deals-banner-text {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}

.sponsored-deals-banner-title {
  font-family: var(--font-title, sans-serif) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.sponsored-deals-banner-subtitle {
  font-size: 0.78rem !important;
  color: #DDD6FE !important;
  margin-top: 4px !important;
  line-height: 1.3 !important;
}

.sponsored-deals-banner-graphic {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sponsored-deals-slider-container {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  border-radius: 20px !important;
}

.sponsored-deals-slider-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.sponsored-deals-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  position: relative !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 20px !important;
  padding: 16px !important;
  background: #ffffff !important;
}

.sponsored-deals-discount {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  background: #EF4444 !important;
  color: #ffffff !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  z-index: 2 !important;
}

.sponsored-deals-wish-btn {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 2 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  color: #64748b !important;
}

.sponsored-deals-wish-btn:hover {
  border-color: #EF4444 !important;
  color: #EF4444 !important;
}

.sponsored-deals-img-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 200px !important;
  margin-bottom: 12px !important;
  width: 100% !important;
  background: transparent !important;
  overflow: hidden !important;
}

.sponsored-deals-img {
  max-height: 95% !important;
  max-width: 95% !important;
  object-fit: contain !important;
  transition: transform 0.3s ease !important;
}

.sponsored-deals-img-box:hover .sponsored-deals-img {
  transform: scale(1.05) !important;
}

.sponsored-deals-emoji {
  font-size: 5.5rem !important;
}

.sponsored-deals-label {
  align-self: flex-start !important;
  background: #EDE9FE !important;
  color: #6D28D9 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  text-transform: capitalize !important;
}

.sponsored-deals-name {
  font-family: var(--font-title, sans-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  text-align: left !important;
}

.sponsored-deals-rating-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
  font-size: 0.85rem !important;
}

.sponsored-deals-stars {
  color: #F59E0B !important;
  display: flex !important;
  gap: 2px !important;
}

.sponsored-deals-rating-text {
  color: #B45309 !important;
  font-weight: 600 !important;
}

.sponsored-deals-rating-reviews {
  color: #64748B !important;
  font-weight: 500 !important;
}

.sponsored-deals-price-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.sponsored-deals-price-current {
  font-family: var(--font-title, sans-serif) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #6D28D9 !important;
}

.sponsored-deals-price-original {
  font-size: 0.85rem !important;
  color: #94A3B8 !important;
  text-decoration: line-through !important;
}

.sponsored-deals-btn-buy {
  background: #6D28D9 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  font-family: var(--font-title, sans-serif) !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.12) !important;
}

.sponsored-deals-btn-buy:hover {
  background: #5B21B6 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(109, 40, 217, 0.2) !important;
}

.sponsored-deals-dots-container {
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 12px !important;
  margin-bottom: 4px !important;
}

.sponsored-deals-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #E2E8F0 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.sponsored-deals-dot.active {
  background: #6D28D9 !important;
  width: 18px !important;
  border-radius: 4px !important;
}

/* ==========================================================================
   🎬 VIDEO COMMERCE PLAYLIST SYSTEM STYLES (PHASE 3E)
   ========================================================================== */
.video-commerce-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: none;
  z-index: 99999;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: var(--font-main, sans-serif);
}

.video-commerce-container {
  width: 92%;
  max-width: 1150px;
  height: 85vh;
  min-height: 550px;
  background: #0d0d10;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  position: relative;
}

.video-commerce-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.25s ease;
  z-index: 100;
}

.video-commerce-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
  transform: rotate(90deg);
}

.video-commerce-player-section {
  flex: 1.3;
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.video-commerce-video-element {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.video-commerce-controls-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
  padding: 24px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-commerce-player-section:hover .video-commerce-controls-bar {
  opacity: 1;
}

.video-commerce-progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.video-commerce-slider-track {
  position: relative;
  flex-grow: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  cursor: pointer;
}

.video-commerce-slider-fill {
  height: 100%;
  background: var(--primary, #7C3AED);
  border-radius: 3px;
  width: 0%;
}

.video-commerce-slider-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  left: 0%;
  transition: transform 0.1s ease;
}

.video-commerce-slider-track:hover .video-commerce-slider-thumb {
  transform: translate(-50%, -50%) scale(1.2);
}

.video-commerce-buttons-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.video-commerce-btn-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.video-commerce-control-btn {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.video-commerce-control-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}

.video-commerce-time-indicator {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.video-commerce-volume-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.video-commerce-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  outline: none;
}

.video-commerce-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.video-commerce-volume-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.video-commerce-sidebar-section {
  width: 380px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  background: #0f0f13;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.video-commerce-seller-card {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.video-commerce-seller-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.video-commerce-seller-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.video-commerce-seller-logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--primary, #7C3AED);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: rgba(255, 255, 255, 0.05);
}

.video-commerce-seller-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.video-commerce-seller-name {
  font-size: 0.95rem;
  font-weight: 750;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 4px;
}

.video-commerce-seller-badge {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
}

.video-commerce-follow-btn {
  background: var(--primary, #7C3AED);
  border: none;
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.2);
}

.video-commerce-follow-btn:hover {
  background: #6D28D9;
  transform: translateY(-1px);
}

.video-commerce-follow-btn.following {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: none;
}

.video-commerce-seller-description {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.45;
  margin: 0;
}

.video-commerce-products-panel {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.video-commerce-panel-title {
  font-size: 0.82rem;
  font-weight: 750;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.video-commerce-product-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 10px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-commerce-product-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.video-commerce-product-image {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  flex-shrink: 0;
}

.video-commerce-product-details {
  flex-grow: 1;
  min-width: 0;
}

.video-commerce-product-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 3px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-commerce-product-price {
  font-size: 0.85rem;
  font-weight: 750;
  color: #c084fc;
}

.video-commerce-add-cart-btn {
  padding: 6px 12px;
  background: var(--primary, #7C3AED);
  border: none;
  color: #fff;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.video-commerce-add-cart-btn:hover {
  background: #6D28D9;
}

.video-commerce-bottom-actions {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  gap: 10px;
}

.video-commerce-secondary-action {
  flex: 1;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  text-decoration: none;
}

.video-commerce-secondary-action:hover {
  background: rgba(255, 255, 255, 0.08);
}

.video-commerce-primary-action {
  flex: 1.3;
  padding: 10px;
  background: var(--primary, #7C3AED);
  border: none;
  color: #fff;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  text-decoration: none;
}

.video-commerce-primary-action:hover {
  background: #6D28D9;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

/* Floating Hotspot Tags styles */
.video-commerce-hotspot-container {
  position: absolute;
  bottom: 84px;
  left: 20px;
  width: 280px;
  background: rgba(15, 15, 19, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  gap: 12px;
  align-items: center;
  z-index: 20;
  transform: translateY(15px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-commerce-hotspot-container.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.video-commerce-hotspot-badge {
  position: absolute;
  top: -8px;
  left: 12px;
  background: var(--primary, #7C3AED);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3);
}

.video-commerce-hotspot-thumbnail {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.video-commerce-hotspot-content {
  flex-grow: 1;
  min-width: 0;
}

.video-commerce-hotspot-name {
  font-size: 0.8rem;
  font-weight: 750;
  color: #fff;
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-commerce-hotspot-price {
  font-size: 0.78rem;
  color: #c084fc;
  font-weight: 750;
}

.video-commerce-hotspot-buy-btn {
  padding: 6px;
  background: var(--primary, #7C3AED);
  border: none;
  color: #fff;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-commerce-hotspot-buy-btn:hover {
  background: #6D28D9;
}

/* Playlist Rotation Countdown overlay */
.video-commerce-countdown-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 15;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.video-commerce-countdown-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.video-commerce-countdown-number {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--primary-light, #c084fc);
  margin-bottom: 8px;
  text-shadow: 0 0 20px rgba(124, 58, 237, 0.6);
  animation: countdownPulse 1s infinite alternate;
}

.video-commerce-countdown-text {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  letter-spacing: 0.5px;
}

@keyframes countdownPulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.1); opacity: 1; }
}

/* ==========================================================================
   🎬 EMBEDDED HOMEPAGE VIDEO COMMERCE SYSTEM (PIXEL-PERFECT BLUEPRINT MOCK)
   ========================================================================== */

.hp-video-commerce-layout {
  display: flex;
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-color);
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  height: 480px;
}

[data-theme="dark"] .hp-video-commerce-layout {
  background: #111827;
  border-color: #1f2937;
}

/* Left: Player Column */
.hp-video-player-col {
  width: 60%;
  position: relative;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hp-video-player-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Back Arrow overlay */
.hp-video-back-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s;
}

.hp-video-back-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* Controls Overlay */
.hp-video-controls-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
  z-index: 10;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Progress bar */
.hp-video-progress-row {
  width: 100%;
}

.hp-video-slider-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.hp-video-slider-fill {
  height: 100%;
  background: #EC4899; /* pink-500 */
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s linear;
}

.hp-video-slider-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  position: absolute;
  left: 0%;
  transform: translateX(-50%);
  transition: left 0.1s linear;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Controls Buttons Row */
.hp-video-buttons-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hp-video-btn-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hp-video-time-indicator {
  font-size: 0.75rem;
  color: #ffffff;
  font-weight: 600;
}

.hp-video-control-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  opacity: 0.85;
  transition: opacity 0.2s, transform 0.1s;
}

.hp-video-control-btn:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* Right: Details Column */
.hp-video-details-col {
  width: 40%;
  background: #ffffff;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  border-left: 1px solid var(--border-color);
}

[data-theme="dark"] .hp-video-details-col {
  background: #111827;
  border-color: #1f2937;
}

/* Close button */
.hp-video-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}

.hp-video-close-btn:hover {
  color: var(--text-dark);
}

/* Seller Identity Card */
.hp-video-seller-card {
  margin-bottom: 16px;
}

.hp-video-seller-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-right: 20px; /* space for close button */
}

.hp-video-seller-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hp-video-seller-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #EC4899; /* pink background */
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  box-shadow: 0 2px 6px rgba(236, 72, 153, 0.2);
}

.hp-video-seller-info {
  display: flex;
  flex-direction: column;
}

.hp-video-seller-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 4px;
}

.hp-video-seller-badge {
  fill: #7C3AED;
  color: #ffffff;
  width: 14px;
  height: 14px;
}

.hp-video-follow-btn {
  border: 1.5px solid #7C3AED;
  color: #7C3AED;
  background: transparent;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.hp-video-follow-btn:hover,
.hp-video-follow-btn.following {
  background: #7C3AED;
  color: #ffffff;
}

.hp-video-seller-description {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 6px 0 0 0;
}

/* Products Panel */
.hp-video-products-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  margin-bottom: 16px;
  padding-right: 4px;
}

.hp-video-products-panel::-webkit-scrollbar {
  width: 4px;
}

.hp-video-products-panel::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}

.hp-video-panel-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
}

/* Product list card */
.hp-video-product-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  box-sizing: border-box;
}

[data-theme="dark"] .hp-video-product-card {
  background: #1f2937;
  border-color: #374151;
}

.hp-video-product-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.hp-video-product-image {
  font-size: 1.6rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-light);
  border-radius: 8px;
}

.hp-video-product-details {
  flex: 1;
  margin: 0 12px;
  min-width: 0;
}

.hp-video-product-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-video-product-price {
  font-size: 0.75rem;
  font-weight: 700;
  color: #7C3AED;
}

.hp-video-add-cart-btn {
  background: transparent;
  border: 1.5px solid #7C3AED;
  color: #7C3AED;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.hp-video-add-cart-btn:hover {
  background: #7C3AED;
  color: #ffffff;
}

/* Bottom actions */
.hp-video-bottom-actions {
  display: flex;
  gap: 10px;
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
  margin-top: auto;
}

.hp-video-secondary-action {
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  color: var(--text-dark);
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-style: solid;
}

[data-theme="dark"] .hp-video-secondary-action {
  background: #374151;
  border-color: #4b5563;
  color: #ffffff;
}

.hp-video-secondary-action:hover {
  background: #E2E8F0;
}

[data-theme="dark"] .hp-video-secondary-action:hover {
  background: #4b5563;
}

.hp-video-primary-action {
  flex: 1;
  background: #7C3AED;
  border: none;
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.hp-video-primary-action:hover {
  background: #6D28D9;
}

/* Floating Hotspot Tag Card inside Player */
.hp-video-hotspot-container {
  position: absolute;
  bottom: 80px;
  left: 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  border: 1.5px solid #7C3AED;
  max-width: 220px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}

.hp-video-hotspot-container.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.hp-video-hotspot-badge {
  position: absolute;
  top: -9px;
  left: 10px;
  background: #7C3AED;
  color: #ffffff;
  font-size: 0.55rem;
  font-weight: 850;
  padding: 1px 6px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hp-video-hotspot-thumbnail {
  font-size: 1.5rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-light);
  border-radius: 6px;
}

.hp-video-hotspot-content {
  flex: 1;
  min-width: 0;
}

.hp-video-hotspot-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 1px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-video-hotspot-price {
  font-size: 0.68rem;
  font-weight: 700;
  color: #7C3AED;
}

.hp-video-hotspot-buy-btn {
  background: #7C3AED;
  border: none;
  color: #ffffff;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  padding: 0;
}

.hp-video-hotspot-buy-btn:hover {
  background: #6D28D9;
}

/* Responsiveness overrides */
@media (max-width: 768px) {
  .hp-video-commerce-layout {
    flex-direction: column;
    height: auto;
  }
  .hp-video-player-col {
    width: 100%;
    height: 320px;
  }
  .hp-video-details-col {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border-color);
  }
}

/* RARA CHECKOUT PAYMENT REDESIGN */
.payment-methods-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 992px) {
  .payment-methods-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .payment-methods-grid {
    grid-template-columns: 1fr !important;
  }
}

.payment-method-card {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  padding: 16px 12px !important;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 75px !important;
  transition: all 200ms ease !important;
  background: var(--bg-white);
  position: relative;
  overflow: visible !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.payment-method-card:hover:not(.disabled) {
  transform: translateY(-2px) !important;
  border-color: #8B5CF6 !important;
  box-shadow: 0 4px 12px rgba(109,40,217,0.08) !important;
}

.payment-method-card.active {
  border-color: #7C3AED !important;
  background: linear-gradient(135deg, rgba(124,58,237,0.06) 0%, rgba(124,58,237,0.02) 100%), #fff !important;
  box-shadow: 0 0 12px rgba(124,58,237,0.15), 0 4px 6px rgba(124,58,237,0.05) !important;
  transform: scale(1.02) !important;
}

.payment-method-card.active::after {
  content: '✓';
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background: #7C3AED;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: bold;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 5;
}

/* Reset individual top borders to standard card borders */
.payment-method-card.esewa,
.payment-method-card.khalti,
.payment-method-card.imepay,
.payment-method-card.connectips,
.payment-method-card.fonepay,
.payment-method-card.cod,
.payment-method-card.wallet {
  border-top: 1px solid var(--border-color) !important;
}
.payment-method-card.active.esewa,
.payment-method-card.active.khalti,
.payment-method-card.active.imepay,
.payment-method-card.active.connectips,
.payment-method-card.active.fonepay,
.payment-method-card.active.cod,
.payment-method-card.active.wallet {
  border-top: 1px solid #7C3AED !important;
}

.payment-trust-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: #fdfdfd;
  border: 1px solid #f1f1f1;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  font-size: 0.8rem;
  color: #4b5563;
  font-weight: 500;
  flex-wrap: wrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.01);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.trust-divider {
  color: #e5e7eb;
}
@media (max-width: 600px) {
  .payment-trust-bar {
    font-size: 0.72rem;
    gap: 8px;
    padding: 8px;
  }
  .trust-divider {
    display: none;
  }
}

.pm-badge {
  position: absolute;
  top: -10px;
  left: 10px;
  background: linear-gradient(135deg, #34D399, #059669);
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  box-shadow: 0 2px 4px rgba(5,150,105,0.2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  z-index: 2;
}

.pm-badge.blue {
  background: linear-gradient(135deg, #60A5FA, #2563EB);
  box-shadow: 0 2px 4px rgba(37,99,235,0.2);
}

.inline-payment-panel {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-md);
  padding: 24px;
  margin-top: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  animation: slideDownFade 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideDownFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.inline-panel-header {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 12px;
}

.inline-panel-body {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
}

@media (max-width: 768px) {
  .inline-panel-body {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .inline-payment-panel {
    padding: 16px;
  }
}

.qr-display-card {
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.qr-image-wrapper {
  background: white;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid #e5e7eb;
  margin-bottom: 12px;
  display: inline-block;
}

.qr-image-wrapper img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  display: block;
}

.qr-merchant-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
}

.qr-account-no {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Copy Buttons */
.qr-copy-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  width: 100%;
}

.btn-copy-action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-copy-action:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.btn-copy-action.copied {
  background: #d1fae5;
  border-color: #6ee7b7;
  color: #065f46;
}

/* Upload proof area */
.screenshot-upload-dropzone {
  border: 2px dashed #d1d5db;
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: center;
  background: #fafafa;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.screenshot-upload-dropzone:hover {
  border-color: var(--primary);
  background: rgba(109,40,217,0.02);
}

.screenshot-upload-dropzone.has-file {
  border-color: #10B981;
  background: rgba(16,185,129,0.02);
}

.screenshot-preview-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.screenshot-preview-img {
  max-width: 100px;
  max-height: 100px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
}

.remove-screenshot-btn {
  background: #ef4444;
  color: white;
  border: none;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
}

.remove-screenshot-btn:hover {
  background: #dc2626;
}

/* Info panels */
.wallet-info-box {
  border-radius: var(--radius-sm);
  padding: 16px;
  background: rgba(124,58,237,0.04);
  border: 1px solid rgba(124,58,237,0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wallet-balance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wallet-balance-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-dark);
}

.wallet-balance-val {
  font-size: 1.1rem;
  font-weight: 800;
  color: #7C3AED;
}

.wallet-alert {
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wallet-alert.warning {
  background: #fef2f2;
  border: 1px solid #fee2e2;
  color: #b91c1c;
}

.wallet-alert.success {
  background: #ecfdf5;
  border: 1px solid #d1fae5;
  color: #047857;
}

.cod-info-box {
  background: rgba(245, 158, 11, 0.04);
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.cod-truck-icon {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cod-details {
  display: flex;
  flex-direction: column;
}

.cod-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #b45309;
}

.cod-desc {
  font-size: 0.8rem;
  color: #78350f;
}

/* ENHANCEMENT ADDENDUM STYLES */
.smart-steps-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 12px;
  gap: 4px;
}
.smart-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dark);
}
.step-num {
  width: 16px;
  height: 16px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  flex-shrink: 0;
}
.smart-step-arrow {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: bold;
}
@media (max-width: 520px) {
  .smart-steps-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .smart-step-arrow {
    display: none;
  }
}

.confidence-box {
  background: rgba(16, 185, 129, 0.04);
  border: 1px dashed rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 0.78rem;
  color: #065f46;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.confidence-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.inline-summary-card {
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-sizing: border-box;
}

.order-creation-notice {
  font-size: 0.72rem;
  color: var(--text-muted);
  background: #f3f4f6;
  border-left: 3px solid var(--secondary);
  padding: 8px 10px;
  border-radius: 4px;
  margin-top: 16px;
  margin-bottom: 12px;
  line-height: 1.3;
  font-style: italic;
}

.btn-confirm-payment {
  background: var(--primary);
  color: white;
  border: none;
  padding: 12px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s;
  text-align: center;
  box-shadow: 0 2px 4px rgba(109,40,217,0.2);
}

.btn-confirm-payment:hover {
  background: #5b21b6;
}

/* ==========================================
   PREMIUM PRODUCT DETAIL PAGE REDESIGN
   ========================================== */

/* 1. Gallery Controls Actions */
.pdp-gallery-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  gap: 8px;
}
.pdp-gallery-action-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  color: var(--text-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.pdp-gallery-action-btn:hover {
  background: var(--bg-white);
  border-color: var(--primary);
  color: var(--primary);
}
.pdp-gallery-action-btn.active {
  background: rgba(109, 40, 217, 0.05);
  border-color: var(--primary);
  color: var(--primary);
}

/* 2. Trust Bar */
.pdp-trust-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 8px;
  border-top: 1px dashed var(--border-color);
  border-bottom: 1px dashed var(--border-color);
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}
.pdp-trust-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 3. Collapsible Accordions */
.pdp-accordion-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pdp-accordion-item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-white);
}
.pdp-accordion-header {
  width: 100%;
  padding: 14px 18px;
  background: var(--bg-white);
  border: none;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  outline: none;
  transition: background 0.2s ease;
}
.pdp-accordion-header:hover {
  background: var(--bg-light);
}
.pdp-acc-icon {
  font-size: 0.65rem;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}
.pdp-accordion-content {
  display: none;
  padding: 18px;
  border-top: 1px solid var(--border-color);
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.pdp-accordion-item.active .pdp-accordion-content {
  display: block;
}
.pdp-accordion-item.active .pdp-acc-icon {
  transform: rotate(180deg);
}

/* 4. Mobile Sticky Bottom Bar styling */
.pdp-mobile-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-white);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  display: none;
  z-index: 1000;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.pdp-sticky-price-info {
  display: flex;
  flex-direction: column;
}
.pdp-sticky-price-label {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.pdp-sticky-price-val {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--primary);
}
.pdp-sticky-actions {
  display: flex;
  gap: 10px;
  flex: 1;
}
.pdp-sticky-btn-cart,
.pdp-sticky-btn-buy {
  flex: 1;
  padding: 12px 8px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  text-align: center;
  transition: transform 0.1s ease;
}
.pdp-sticky-btn-cart {
  background: linear-gradient(135deg, #F97316, #EA580C);
  color: #fff;
}
.pdp-sticky-btn-buy {
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
  color: #fff;
}

@media (max-width: 992px) {
  .pdp-mobile-sticky-bar {
    display: flex;
  }
}

/* 5. Mobile Performance Optimization Overrides */
@media (max-width: 992px) {
  .pdp-gallery-card,
  .pdp-info-card,
  .pdp-delivery-card,
  .pdp-seller-card,
  .pdp-return-card,
  .pdp-accordion-card {
    box-shadow: none !important;
    border: 1px solid var(--border-color) !important;
  }
  .pdp-main-preview:hover .pdp-main-image {
    transform: none !important;
  }
  .pdp-main-image {
    cursor: default !important;
  }
}

/* 6. High Contrast Action Buttons Gradients */
.pdp-btn-buy {
  background: linear-gradient(135deg, #8B5CF6, #6D28D9) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.2);
}
.pdp-btn-buy:hover {
  background: linear-gradient(135deg, #7C3AED, #5B21B6) !important;
  box-shadow: 0 6px 16px rgba(109, 40, 217, 0.3);
  transform: translateY(-2px);
}

.pdp-btn-cart {
  background: linear-gradient(135deg, #F97316, #EA580C) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.2);
}
.pdp-btn-cart:hover {
  background: linear-gradient(135deg, #FB923C, #D97706) !important;
  box-shadow: 0 6px 16px rgba(234, 88, 12, 0.3);
  transform: translateY(-2px);
}

/* ==================================================
   SOCIAL SHARING SYSTEM WIDGET STYLING
   ================================================== */
.pdp-social-share-section {
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pdp-share-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pdp-share-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark);
}

.pdp-share-metrics-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pdp-share-count-text {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
}

.pdp-trending-badge {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #D97706;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(217, 119, 6, 0.2);
}

.pdp-share-buttons-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pdp-share-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-white);
  border: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  outline: none;
}

.pdp-share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-color: #D1D5DB;
}

.pdp-share-btn svg {
  display: block;
  transition: transform 0.2s ease;
}

.pdp-share-btn:hover svg {
  transform: scale(1.1);
}

/* Symmetrical Mobile Grid Layout */
@media (max-width: 768px) {
  .pdp-social-share-section {
    align-items: center;
    text-align: center;
  }
  
  .pdp-share-header {
    flex-direction: column;
    gap: 4px;
    margin-bottom: 4px;
  }
  
  .pdp-share-buttons-container {
    display: grid;
    grid-template-columns: repeat(4, 44px);
    justify-content: center;
    gap: 16px 12px;
  }
}




ഀ
/* ==========================================================================਍ഀ
   PREMIUM CHECKOUT REDESIGN STYLES਍ഀ
   ========================================================================== */਍ഀ
.checkout-main-layout {਍ഀ
  font-family: var(--font-sans);਍ഀ
}਍ഀ
.checkout-section-card {਍ഀ
  border-radius: 12px !important;਍ഀ
  box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;਍ഀ
  padding: 24px 28px !important;਍ഀ
  margin-bottom: 24px !important;਍ഀ
  border: 1px solid rgba(109, 40, 217, 0.1) !important;਍ഀ
}਍ഀ
.checkout-section-title {਍ഀ
  font-size: 1.1rem !important;਍ഀ
  margin-bottom: 20px !important;਍ഀ
}਍ഀ
.payment-method-card {਍ഀ
  min-height: 90px !important;਍ഀ
  border-radius: 10px !important;਍ഀ
  border-width: 2px !important;਍ഀ
}਍ഀ
.premium-summary {਍ഀ
  border-radius: 12px !important;਍ഀ
  box-shadow: 0 4px 24px rgba(109, 40, 217, 0.08) !important;਍ഀ
  border: 1px solid rgba(109, 40, 217, 0.1) !important;਍ഀ
}਍ഀ
.premium-trust-section {਍ഀ
  display: flex;਍ഀ
  flex-direction: column;਍ഀ
  gap: 12px;਍ഀ
  padding: 20px 0;਍ഀ
  border-top: 1px dashed var(--border-color);਍ഀ
  margin-top: 20px;਍ഀ
}਍ഀ
.premium-trust-section .guarantee-item {਍ഀ
  display: flex;਍ഀ
  align-items: center;਍ഀ
  gap: 10px;਍ഀ
  color: var(--text-dark);਍ഀ
  font-weight: 500;਍ഀ
  font-size: 0.85rem;਍ഀ
}਍ഀ
.premium-trust-section .guarantee-item svg {਍ഀ
  color: var(--success);਍ഀ
}਍ഀ
.checkout-sticky-mobile-cta {਍ഀ
  display: none;਍ഀ
}਍ഀ
.premium-btn {਍ഀ
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;਍ഀ
  color: white !important;਍ഀ
  border-radius: 8px !important;਍ഀ
  height: 56px !important;਍ഀ
  font-size: 1.1rem !important;਍ഀ
  font-weight: 700 !important;਍ഀ
  width: 100% !important;਍ഀ
  display: flex !important;਍ഀ
  justify-content: center !important;਍ഀ
  align-items: center !important;਍ഀ
  box-shadow: 0 8px 16px rgba(109, 40, 217, 0.25) !important;਍ഀ
  border: none !important;਍ഀ
}਍ഀ
.mobile-cta-total {਍ഀ
  display: none;਍ഀ
}਍ഀ
਍ഀ
@media (max-width: 768px) {਍ഀ
  .checkout-sticky-mobile-cta {਍ഀ
    display: flex;਍ഀ
    position: fixed;਍ഀ
    bottom: 0;਍ഀ
    left: 0;਍ഀ
    width: 100%;਍ഀ
    background: var(--bg-white);਍ഀ
    padding: 16px 20px;਍ഀ
    color: var(--primary);਍ഀ
  }਍ഀ
  .premium-btn {਍ഀ
    height: 50px !important;਍ഀ
    border-radius: 25px !important;਍ഀ
    width: auto !important;਍ഀ
    flex: 1;਍ഀ
  }਍ഀ
  .cart-checkout-btn {਍ഀ
    display: none !important; /* Hide original button inside summary on mobile */਍ഀ
  }਍ഀ
  .checkout-sticky-mobile-cta .premium-btn {਍ഀ
    display: flex !important; /* Force show the sticky one */਍ഀ
  }਍ഀ
}਍ഀ
਍

/* ==========================================================================
   ENTERPRISE MARKETPLACE FOOTER SYSTEM V2
   ========================================================================== */

/* 1. Dynamic Festival Announcement Area */
.footer-festival-banner {
  background: #DC2626;
  color: #FFFFFF;
  padding: 10px 16px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  animation: slideDown 0.3s ease-out;
}
.footer-festival-banner a {
  color: #FFFFFF;
  text-decoration: underline;
  margin-left: 4px;
}
.footer-festival-banner a:hover {
  opacity: 0.9;
}
#footer-newsletter-box {
  display: none !important;
}

/* 2. Premium Enterprise Footer Container */
.enterprise-footer {
  background: #0B0F19; /* Deep premium slate dark theme */
  color: #94A3B8;
  padding: 64px 32px 32px 32px;
  border-top: 1px solid #1E293B;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  position: relative;
  overflow: hidden;
}
.footer-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* 3. 5-Column Desktop Grid Layout */
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 1fr 1.1fr 1.1fr;
  gap: 32px;
}
.footer-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-column h3 {
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-column-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-column ul li a {
  color: #94A3B8;
  text-decoration: none;
  font-size: 0.88rem;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer-column ul li a:hover {
  color: #8B5CF6; /* Premium Purple Brand Color */
  transform: translateX(4px);
}
.footer-column ul li a svg {
  stroke-width: 2px;
  transition: transform 0.2s;
}
.footer-column ul li a:hover svg {
  transform: scale(1.1);
}

/* Accordion Controls for Mobile - Default Expanded on Desktop */
.footer-column .accordion-chevron {
  display: none;
  transition: transform 0.3s ease;
  color: #64748B;
}

/* 4. Column 1: Brand & statistics */
.footer-logo {
  max-height: 40px;
  width: auto;
  object-fit: contain;
}
.footer-logo-text {
  font-size: 1.5rem;
  font-weight: 800;
  color: #FFFFFF;
  background: linear-gradient(135deg, #A78BFA, #8B5CF6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}
.footer-intro-text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #64748B;
  margin: 0;
}
.footer-slogan {
  font-style: italic;
  font-size: 0.82rem;
  color: #8B5CF6;
  margin: 0;
}
.footer-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 8px;
}
.footer-stat-card {
  background: rgba(30, 41, 59, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
}
.footer-stat-val {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: #FFFFFF;
}
.footer-stat-label {
  display: block;
  font-size: 0.7rem;
  color: #64748B;
  text-transform: uppercase;
  margin-top: 2px;
}

/* 5. Business Information Block */
.footer-business-block {
  background: rgba(30, 41, 59, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 12px;
  font-size: 0.78rem;
  color: #64748B;
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1.4;
}
.footer-business-block strong {
  color: #94A3B8;
}

/* 6. Dynamic Blog Widget styling */
.footer-blog-post {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.footer-blog-post:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.footer-blog-thumb {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(30, 41, 59, 0.6);
}
.footer-blog-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer-blog-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #E2E8F0;
  text-decoration: none;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}
.footer-blog-title:hover {
  color: #8B5CF6;
}
.footer-blog-date {
  font-size: 0.7rem;
  color: #64748B;
}

/* 7. Column 5: Contact Info */
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.85rem;
}
.footer-contact-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: #94A3B8;
}
.footer-contact-item svg {
  color: #8B5CF6;
  margin-top: 3px;
  flex-shrink: 0;
}
.footer-social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.footer-social-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94A3B8;
  text-decoration: none;
  transition: all 0.2s;
}
.footer-social-btn:hover {
  background: #8B5CF6;
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* 8. Newsletter Card Config */
.footer-middle-section {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  border-top: 1px solid #1E293B;
  border-bottom: 1px solid #1E293B;
  padding: 32px 0;
  align-items: center;
}
.newsletter-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.newsletter-card h4 {
  color: #FFFFFF;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}
.newsletter-card p {
  font-size: 0.85rem;
  color: #64748B;
  margin: 0;
  line-height: 1.5;
}
.newsletter-form-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.newsletter-input-row {
  display: flex;
  gap: 8px;
}
.newsletter-input {
  flex: 1;
  background: #1E293B;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 10px 14px;
  color: #FFFFFF;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s;
}
.newsletter-input:focus {
  border-color: #8B5CF6;
}
.newsletter-btn {
  background: #8B5CF6;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}
.newsletter-btn:hover {
  background: #7C3AED;
}
.newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.72rem;
  color: #64748B;
  cursor: pointer;
  line-height: 1.4;
}
.newsletter-consent input {
  margin-top: 2px;
  accent-color: #8B5CF6;
}

/* 9. Badges Container (App Stores, Payments, Trust Badges) */
.footer-badges-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.badge-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 100%;
  margin-bottom: 4px;
}
.app-badge-btn img {
  height: 34px;
  width: auto;
  border-radius: 4px;
  transition: transform 0.2s;
}
.app-badge-btn:hover img {
  transform: translateY(-2px);
}
.payment-badge-icon {
  background: rgba(30, 41, 59, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  padding: 4px 8px;
  font-weight: 700;
  font-size: 0.72rem;
  color: #E2E8F0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 60px;
  text-transform: uppercase;
}
.trust-badge-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.75rem;
  color: #A78BFA;
  font-weight: 600;
}
.trust-badge-card svg {
  color: #8B5CF6;
}

/* 10. Bottom Copyright Bar */
.footer-copyright-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: #64748B;
  flex-wrap: wrap;
  gap: 16px;
  border-top: 1px solid #1E293B;
  padding-top: 24px;
}
.copyright-right-side {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.copyright-menu {
  display: flex;
  gap: 16px;
}
.copyright-menu a {
  color: #64748B;
  text-decoration: none;
  transition: color 0.2s;
}
.copyright-menu a:hover {
  color: #8B5CF6;
}
.footer-region-selector {
  position: absolute !important;
  left: -99999px !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.footer-region-selector svg {
  color: #64748B;
}
.footer-region-selector select {
  background: transparent;
  border: none;
  color: #E2E8F0;
  font-size: 0.75rem;
  outline: none;
  cursor: pointer;
  font-weight: 600;
}

/* Accessibility Focus States for Tab Navigation */
.enterprise-footer a:focus-visible,
.enterprise-footer select:focus-visible,
.enterprise-footer button:focus-visible,
.enterprise-footer input:focus-visible {
  outline: 2px solid #8B5CF6 !important;
  outline-offset: 4px !important;
  border-radius: 4px !important;
}

/* ==========================================
   Responsiveness overrides for simulated viewports & real screens
   ========================================== */

/* TABLET LAYOUT OVERRIDES */
#app-viewport.tablet .footer-grid,
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px !important;
  }
  .footer-middle-section {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* MOBILE LAYOUT OVERRIDES */

/* 1. Viewport Emulator support */
#app-viewport.mobile .enterprise-footer {
  padding: 32px 16px 80px 16px !important; /* Account for bottom nav */
}
#app-viewport.mobile .footer-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#app-viewport.mobile .footer-column {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding-bottom: 4px !important;
  gap: 0 !important;
  margin-bottom: 8px !important;
}
#app-viewport.mobile .footer-column h3 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 0 !important;
  cursor: pointer !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #f1f5f9 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border: none !important;
  margin: 0 !important;
}
#app-viewport.mobile .footer-column .accordion-chevron {
  display: block !important;
  color: #94a3b8 !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#app-viewport.mobile .footer-column-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease, margin 0.3s ease !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
#app-viewport.mobile .footer-column.open .footer-column-content {
  padding: 4px 0 16px 0 !important;
  max-height: 1000px !important;
}
#app-viewport.mobile .footer-column.open h3 .accordion-chevron {
  transform: rotate(180deg) !important;
}
#app-viewport.mobile .footer-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin-top: 16px !important;
}
#app-viewport.mobile .footer-stat-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  text-align: center !important;
}
#app-viewport.mobile .footer-stat-val {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  display: block !important;
  margin-bottom: 2px !important;
}
#app-viewport.mobile .footer-stat-label {
  font-size: 0.72rem !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
#app-viewport.mobile .footer-middle-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  padding: 32px 0 24px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}
#app-viewport.mobile .newsletter-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  padding: 20px !important;
}
#app-viewport.mobile .newsletter-card h4 {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #f8fafc !important;
  margin-bottom: 8px !important;
}
#app-viewport.mobile .newsletter-card p {
  font-size: 0.85rem !important;
  color: #94a3b8 !important;
  line-height: 1.5 !important;
  margin-bottom: 16px !important;
}
#app-viewport.mobile .newsletter-form-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
#app-viewport.mobile .newsletter-input-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}
#app-viewport.mobile .newsletter-input {
  width: 100% !important;
  height: 46px !important;
  padding: 0 16px !important;
  border-radius: 23px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
  font-size: 0.88rem !important;
  box-sizing: border-box !important;
}
#app-viewport.mobile .newsletter-btn {
  width: 100% !important;
  height: 46px !important;
  border-radius: 23px !important;
  background: var(--primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: none !important;
  cursor: pointer !important;
}
#app-viewport.mobile .newsletter-consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 0.72rem !important;
  color: #64748b !important;
  line-height: 1.4 !important;
  margin-top: 8px !important;
}
#app-viewport.mobile .footer-badges-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}
#app-viewport.mobile .badges-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
#app-viewport.mobile #footer-badges-container > div > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
#app-viewport.mobile #footer-badges-container > div > div:first-child .badges-row {
  justify-content: center !important;
}
#app-viewport.mobile .footer-copyright-bar {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  align-items: center !important;
  text-align: center !important;
}
#app-viewport.mobile .copyright-text {
  font-size: 0.78rem !important;
  color: #64748b !important;
  line-height: 1.5 !important;
}
#app-viewport.mobile .copyright-right-side {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  align-items: center !important;
  width: 100% !important;
}
#app-viewport.mobile .copyright-menu {
  display: flex !important;
  gap: 16px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}
#app-viewport.mobile .copyright-menu a {
  font-size: 0.78rem !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
}
#app-viewport.mobile .footer-region-selector {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  padding: 6px 14px !important;
}
#app-viewport.mobile .footer-region-selector select {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 0.8rem !important;
  outline: none !important;
}

/* 2. Media Query (for real mobile devices) */
@media (max-width: 767px) {
  .enterprise-footer {
    padding: 32px 16px 80px 16px !important;
  }
  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .footer-column {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding-bottom: 4px !important;
    gap: 0 !important;
    margin-bottom: 8px !important;
  }
  .footer-column h3 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 0 !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #f1f5f9 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border: none !important;
    margin: 0 !important;
  }
  .footer-column .accordion-chevron {
    display: block !important;
    color: #94a3b8 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  .footer-column-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease, margin 0.3s ease !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .footer-column.open .footer-column-content {
    padding: 4px 0 16px 0 !important;
    max-height: 1000px !important;
  }
  .footer-column.open h3 .accordion-chevron {
    transform: rotate(180deg) !important;
  }
  .footer-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-top: 16px !important;
  }
  .footer-stat-card {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    padding: 12px !important;
    text-align: center !important;
  }
  .footer-stat-val {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    display: block !important;
    margin-bottom: 2px !important;
  }
  .footer-stat-label {
    font-size: 0.72rem !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }
  .footer-middle-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 32px 0 24px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  }
  .newsletter-card {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding: 20px !important;
  }
  .newsletter-card h4 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #f8fafc !important;
    margin-bottom: 8px !important;
  }
  .newsletter-card p {
    font-size: 0.85rem !important;
    color: #94a3b8 !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
  }
  .newsletter-form-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .newsletter-input-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .newsletter-input {
    width: 100% !important;
    height: 46px !important;
    padding: 0 16px !important;
    border-radius: 23px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
    font-size: 0.88rem !important;
    box-sizing: border-box !important;
  }
  .newsletter-btn {
    width: 100% !important;
    height: 46px !important;
    border-radius: 23px !important;
    background: var(--primary) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    cursor: pointer !important;
  }
  .newsletter-consent {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 0.72rem !important;
    color: #64748b !important;
    line-height: 1.4 !important;
    margin-top: 8px !important;
  }
  .footer-badges-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  .badges-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  #footer-badges-container > div > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  #footer-badges-container > div > div:first-child .badges-row {
    justify-content: center !important;
  }
  .footer-copyright-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding-top: 24px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    align-items: center !important;
    text-align: center !important;
  }
  .copyright-text {
    font-size: 0.78rem !important;
    color: #64748b !important;
    line-height: 1.5 !important;
  }
  .copyright-right-side {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    align-items: center !important;
    width: 100% !important;
  }
  .copyright-menu {
    display: flex !important;
    gap: 16px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  .copyright-menu a {
    font-size: 0.78rem !important;
    color: #94a3b8 !important;
    text-decoration: none !important;
  }
  .footer-region-selector {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 20px !important;
    padding: 6px 14px !important;
  }
  .footer-region-selector select {
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    font-size: 0.8rem !important;
    outline: none !important;
  }
}

/* ── Premium Rara Hero Custom Banner Upgrade ── */

/* Container for custom banners */
.hero-slider-box.rara-hero-active {
  background: linear-gradient(135deg, #F8FAFC 0%, #F5F3FF 50%, #EFF6FF 100%) !important;
  border-color: rgba(124, 58, 237, 0.1) !important;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.03) !important;
}

/* Glass Card for Left Content */
.hero-text-block.rara-hero-glass {
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(12px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
  border-radius: var(--radius-lg) !important;
  padding: 30px 40px !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.02) !important;
  margin: 16px 0 16px 16px !important;
  width: 53% !important;
  max-width: 620px !important;
  z-index: 10 !important;
}

/* Right Column Custom Image Block */
.rara-hero-custom-block {
  width: 47% !important;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 24px;
  z-index: 5 !important;
}

/* Glow Container for visual depth and lighting effects */
.rara-hero-glow-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 5 / 4; /* Reserve aspect-ratio to prevent CLS */
  min-height: clamp(180px, 40vw, 320px);
  min-width: 300px;
}

/* Large circular highlight/lighting */
.rara-hero-circle-highlight {
  position: absolute;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, var(--primary-light, rgba(124, 58, 237, 0.12)) 0%, rgba(59, 130, 246, 0.04) 50%, transparent 70%);
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  filter: blur(8px);
}

/* Soft Radial Glow behind image */
.rara-hero-radial-glow {
  position: absolute;
  width: 180px;
  height: 180px;
  background: var(--primary-light, #C084FC);
  opacity: 0.15;
  filter: blur(40px);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  animation: pulse-glow-v3 8s ease-in-out infinite alternate;
  will-change: transform, opacity; /* GPU Optimization */
}

/* Custom Image Element - Premium effects */
.rara-hero-custom-img {
  max-width: 90%;
  max-height: clamp(180px, 40vw, 320px);
  object-fit: contain;
  z-index: 3;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.08)) drop-shadow(0 4px 10px var(--primary-light, rgba(124, 58, 237, 0.04)));
  animation: premium-float-v3 7s ease-in-out infinite alternate;
  pointer-events: none;
  transition: transform 0.5s ease, opacity 0.4s ease;
  will-change: transform, opacity; /* GPU Optimization */
}

/* Hover effect on custom image block */
.rara-hero-custom-block:hover .rara-hero-custom-img {
  transform: translateY(-5px) scale(1.01);
}

/* Floating Animations using GPU-friendly transform/opacity only */
@keyframes premium-float-v3 {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(-8px) rotate(1deg);
  }
}

@keyframes pulse-glow-v3 {
  0% {
    transform: scale(0.9);
    opacity: 0.12;
  }
  100% {
    transform: scale(1.1);
    opacity: 0.18;
  }
}

/* Future Ready Theme Class Mappings */
.hero-slider-box.theme-purple { background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%) !important; }
.hero-slider-box.theme-blue { background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important; }
.hero-slider-box.theme-fashion { background: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 100%) !important; }
.hero-slider-box.theme-beauty { background: linear-gradient(135deg, #FDF2F8 0%, #FCE7F3 100%) !important; }
.hero-slider-box.theme-electronics { background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%) !important; }

/* Accessibility: Respect user's preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rara-hero-custom-img,
  .rara-hero-radial-glow {
    animation: none !important;
  }
}

/* Responsive configurations for custom banners */
@media (max-width: 1120px) {
  .hero-text-block.rara-hero-glass {
    margin: 12px 0 12px 12px !important;
    padding: 20px 24px !important;
    width: 55% !important;
  }
  .rara-hero-custom-block {
    width: 45% !important;
  }
  .rara-hero-custom-img {
    max-height: clamp(160px, 35vw, 260px) !important;
  }
  .rara-hero-glow-container {
    min-height: 260px;
    min-width: 260px;
  }
}

@media (max-width: 768px) {
  .hero-slider-box.rara-hero-active {
    flex-direction: column !important;
    padding: 24px !important;
  }
  .hero-text-block.rara-hero-glass {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 24px !important;
  }
  .rara-hero-custom-block {
    width: 100% !important;
    min-height: 280px;
    padding: 20px !important;
  }
  .rara-hero-glow-container {
    min-height: 240px;
    min-width: 240px;
  }
  .rara-hero-custom-img {
    max-width: 80% !important;
    max-height: clamp(140px, 30vw, 240px) !important;
  }
}

/* ── Premium Background Types Mappings (bgType) ── */
.hero-slider-box.rara-hero-solid {
  background: var(--bg-white, #FFFFFF) !important;
  border-color: var(--border-color, #E5E7EB) !important;
}
.hero-slider-box.rara-hero-gradient {
  background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%) !important;
  border-color: var(--border-color, #E5E7EB) !important;
}
.hero-slider-box.rara-hero-radial {
  background: radial-gradient(circle, #FFFFFF 0%, #F3F4F6 100%) !important;
  border-color: var(--border-color, #E5E7EB) !important;
}
.hero-slider-box.rara-hero-light {
  background: #FAFAFA !important;
  border-color: #E5E5E5 !important;
}
.hero-slider-box.rara-hero-glass-bg {
  background: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ── Premium Flash Sale Page ── */
#panel-flash-sale {
  padding: 24px var(--container-padding, 4%);
  max-width: 1600px;
  margin: 0 auto;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Flash Sale Hero Banner */
.flash-sale-hero-wrap {
  position: relative;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(124, 58, 237, 0.08);
}

.flash-sale-hero-card {
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #EC4899 100%);
  padding: 40px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  min-height: 280px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.flash-sale-hero-content {
  z-index: 5;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.flash-sale-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.flash-sale-live-dot {
  width: 8px;
  height: 8px;
  background-color: #10B981;
  border-radius: 50%;
  display: inline-block;
  animation: flash-sale-pulse 1.5s infinite alternate;
}

@keyframes flash-sale-pulse {
  0% { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(1.2); opacity: 1; }
}

.flash-sale-hero-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: var(--font-title, inherit);
}

.flash-sale-hero-desc {
  font-size: 1.05rem;
  opacity: 0.9;
  max-width: 500px;
  margin: 0;
  line-height: 1.5;
}

/* Hero Countdown Box */
.flash-sale-hero-countdown-box {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}

.flash-sale-countdown-label {
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

.flash-sale-countdown-timer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flash-sale-time-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  min-width: 65px;
  padding: 8px 6px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.flash-sale-time-unit span {
  font-size: 1.6rem;
  font-weight: 800;
  font-family: monospace;
}

.flash-sale-time-unit label {
  font-size: 0.68rem;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.75;
  margin-top: 2px;
}

.flash-sale-time-sep {
  font-size: 1.8rem;
  font-weight: 700;
  opacity: 0.8;
  animation: flash-sale-blink 1s infinite;
}

@keyframes flash-sale-blink {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.9; }
}

/* Right Side Graphic */
.flash-sale-hero-graphic {
  position: relative;
  width: 250px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.flash-sale-lightning-icon {
  font-size: 6rem;
  animation: flash-sale-float 4s ease-in-out infinite alternate;
  z-index: 3;
}

@keyframes flash-sale-float {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-15px) rotate(5deg); }
}

.flash-sale-pulse-glow {
  position: absolute;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.45) 0%, transparent 70%);
  border-radius: 50%;
  animation: flash-sale-glow-pulse 3s ease-in-out infinite alternate;
  z-index: 1;
  filter: blur(10px);
}

@keyframes flash-sale-glow-pulse {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1.2); opacity: 0.9; }
}

/* Live Selling Widget styling */
.flash-sale-live-widget {
  background: rgba(124, 58, 237, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 8px;
  padding: 12px 20px;
  margin-top: -12px;
  animation: flash-sale-fade-in-up 0.5s ease-out;
}

.flash-sale-live-widget-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.flash-sale-live-widget-icon {
  font-size: 1.25rem;
}

.flash-sale-live-widget-text {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-dark, #1F2937);
}

@keyframes flash-sale-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Main Layout: Sidebar & Products Grid */
.flash-sale-main-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}

/* Left Category Sidebar */
.flash-sale-sidebar {
  background: white;
  border: 1px solid var(--border-color, #E5E7EB);
  border-radius: var(--radius-md, 12px);
  padding: 24px;
  position: sticky;
  top: 100px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.flash-sale-sidebar-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color, #E5E7EB);
  color: var(--text-dark, #1F2937);
  font-family: var(--font-title, inherit);
}

.flash-sale-category-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.flash-sale-category-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-muted, #4B5563);
  text-decoration: none !important;
}

.flash-sale-category-item:hover {
  background: rgba(124, 58, 237, 0.04) !important;
  color: var(--primary, #7C3AED) !important;
}

.flash-sale-category-item.active {
  background: rgba(124, 58, 237, 0.08) !important;
  color: var(--primary, #7C3AED) !important;
  font-weight: 600 !important;
}

.flash-sale-category-icon {
  font-size: 1.2rem;
  width: 24px;
  height: 24px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: inherit !important;
}

.flash-sale-category-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2px !important;
}

.flash-sale-category-name {
  flex: 1 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Mobile Category selector */
.flash-sale-mobile-category-bar {
  display: none;
  background: white;
  border: 1px solid var(--border-color, #E5E7EB);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  align-items: center;
  justify-content: space-between;
}

.flash-sale-mobile-category-bar label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted, #4B5563);
}

.flash-sale-mobile-cat-dropdown {
  background: white;
  border: 1px solid var(--border-color, #E5E7EB);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark, #1F2937);
  outline: none;
}

/* Control Bar (Tabs & Sort) */
.flash-sale-control-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.flash-sale-filter-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.flash-sale-filter-tabs::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Safari/Chrome */
}

.flash-sale-filter-tab {
  background: white;
  border: 1px solid var(--border-color, #E5E7EB);
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  color: var(--text-muted, #4B5563);
}

.flash-sale-filter-tab:hover {
  border-color: var(--primary, #7C3AED);
  color: var(--primary, #7C3AED);
}

.flash-sale-filter-tab.active {
  background: var(--primary, #7C3AED);
  border-color: var(--primary, #7C3AED);
  color: white;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}

.flash-sale-sort-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.flash-sale-sort-wrapper label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted, #4B5563);
}

.flash-sale-sort-dropdown {
  background: white;
  border: 1px solid var(--border-color, #E5E7EB);
  border-radius: var(--radius-sm, 6px);
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark, #1F2937);
  outline: none;
  cursor: pointer;
}

/* Products Grid */
.flash-sale-products-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

/* Flash Sale Card design strictly isolated in namespace */
.flash-sale-card {
  background: white;
  border: 1px solid var(--border-color, #E5E7EB);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.flash-sale-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: rgba(124, 58, 237, 0.15);
}

.flash-sale-card-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 5;
}

.flash-sale-badge-pill {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.flash-sale-badge-pill.discount {
  background: #EF4444;
  color: white;
}

.flash-sale-badge-pill.verified {
  background: #10B981;
  color: white;
}

.flash-sale-card-wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  background: white;
  border: 1px solid var(--border-color, #E5E7EB);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  z-index: 5;
  transition: all 0.2s ease;
  outline: none;
}

.flash-sale-card-wishlist:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.flash-sale-card-img-wrapper {
  background: #F9FAFB;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.flash-sale-card-emoji {
  font-size: 4rem;
  transition: transform 0.4s ease;
  user-select: none;
}

.flash-sale-card:hover .flash-sale-card-emoji {
  transform: scale(1.1) rotate(2deg);
}

.flash-sale-card-quickview {
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  background: rgba(124, 58, 237, 0.9);
  color: white;
  text-align: center;
  padding: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  transition: bottom 0.25s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.flash-sale-card:hover .flash-sale-card-quickview {
  bottom: 0;
}

.flash-sale-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

.flash-sale-card-title {
  font-size: 0.88rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-dark, #1F2937);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.6em;
  line-height: 1.3;
}

.flash-sale-card-time-row {
  display: flex;
  align-items: center;
}

.flash-sale-card-timer-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #EF4444;
  background: #FEF2F2;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #FEE2E2;
}

.flash-sale-card-timer-badge.expired {
  color: #6B7280;
  background: #F3F4F6;
  border-color: #E5E7EB;
}

.flash-sale-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.flash-sale-price-current {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary, #7C3AED);
}

.flash-sale-price-original {
  font-size: 0.82rem;
  text-decoration: line-through;
  color: var(--text-muted, #9CA3AF);
}

/* Progress bar style */
.flash-sale-card-progress-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.flash-sale-card-progress-bar {
  width: 100%;
  height: 6px;
  background: #E5E7EB;
  border-radius: 9999px;
  overflow: hidden;
}

.flash-sale-card-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #F59E0B 0%, #EF4444 100%);
  border-radius: 9999px;
  transition: width 0.4s ease;
}

.flash-sale-card-progress-text {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted, #6B7280);
}

.flash-sale-stock-alert {
  color: #EF4444;
}

.flash-sale-card-actions {
  margin-top: auto;
  padding-top: 4px;
}

.flash-sale-buy-btn {
  width: 100%;
  background: var(--primary, #7C3AED);
  color: white;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.flash-sale-buy-btn:hover {
  background: var(--primary-dark, #6D28D9);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

.flash-sale-buy-btn.expired {
  background: #E5E7EB;
  color: #9CA3AF;
  cursor: not-allowed;
  box-shadow: none;
}

/* Pagination load more */
.flash-sale-pagination-wrap {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.flash-sale-load-more-btn {
  background: white;
  border: 1px solid var(--primary, #7C3AED);
  color: var(--primary, #7C3AED);
  padding: 12px 30px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.flash-sale-load-more-btn:hover {
  background: var(--primary, #7C3AED);
  color: white;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
}

/* Empty State */
.flash-sale-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: white;
  border: 1px dashed var(--border-color, #E5E7EB);
  border-radius: 12px;
}

.flash-sale-empty-icon {
  font-size: 3rem;
  margin-bottom: 12px;
  opacity: 0.5;
}

/* Trust Section styling */
.flash-sale-trust-section {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 16px;
  border-top: 1px solid var(--border-color, #E5E7EB);
  padding-top: 40px;
}

.flash-sale-trust-card {
  text-align: center;
  background: white;
  border: 1px solid var(--border-color, #E5E7EB);
  border-radius: 12px;
  padding: 24px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
}

.flash-sale-trust-icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 12px;
}

.flash-sale-trust-card h4 {
  font-size: 0.92rem;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: var(--text-dark, #1F2937);
}

.flash-sale-trust-card p {
  font-size: 0.78rem;
  color: var(--text-muted, #6B7280);
  margin: 0;
  line-height: 1.4;
}

/* FAQs Section */
.flash-sale-faq-section {
  margin-top: 16px;
  border-top: 1px solid var(--border-color, #E5E7EB);
  padding-top: 40px;
  padding-bottom: 24px;
}

.flash-sale-faq-heading {
  font-size: 1.6rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 30px;
  color: var(--text-dark, #1F2937);
  font-family: var(--font-title, inherit);
}

.flash-sale-faq-accordion {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.flash-sale-faq-item {
  background: white;
  border: 1px solid var(--border-color, #E5E7EB);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.flash-sale-faq-item.active {
  border-color: var(--primary, #7C3AED);
}

.flash-sale-faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 18px 24px;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-dark, #1F2937);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flash-sale-faq-arrow {
  font-size: 0.72rem;
  transition: transform 0.2s;
}

.flash-sale-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: #F9FAFB;
}

.flash-sale-faq-answer p {
  padding: 20px 24px;
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted, #4B5563);
  line-height: 1.6;
}

/* Responsive Rules */
@media (max-width: 1200px) {
  .flash-sale-products-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .flash-sale-trust-section {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .flash-sale-main-layout {
    grid-template-columns: 1fr;
  }
  .flash-sale-sidebar {
    display: none; /* Hide on mobile/tablet sidebar */
  }
  .flash-sale-mobile-category-bar {
    display: flex;
  }
  .flash-sale-products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .flash-sale-hero-card {
    padding: 30px;
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }
  .flash-sale-hero-content {
    align-items: center;
  }
  .flash-sale-hero-desc {
    max-width: 100%;
  }
  .flash-sale-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .flash-sale-trust-section {
    grid-template-columns: repeat(2, 1fr);
  }
  .flash-sale-control-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .flash-sale-sort-wrapper {
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .flash-sale-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .flash-sale-trust-section {
    grid-template-columns: 1fr;
  }
  .flash-sale-hero-countdown-box {
    flex-direction: column;
    gap: 8px;
  }
}

/* All Categories SPA Page */
.all-categories-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  padding: 40px var(--container-padding, 4%);
  background: #F9FAFB;
  min-height: calc(100vh - 120px);
}

.all-categories-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.all-categories-header {
  border-bottom: 2px solid var(--border-color, #E5E7EB);
  padding-bottom: 16px;
}

.all-categories-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-dark, #1F2937);
  margin: 0 0 6px 0;
  font-family: var(--font-title, 'Outfit', sans-serif);
}

.all-categories-subtitle {
  color: var(--text-muted, #6B7280);
  font-size: 0.95rem;
  margin: 0;
}

.all-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.all-categories-card {
  background: #FFFFFF;
  border: 1px solid var(--border-color, #E5E7EB);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.all-categories-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-color: var(--primary, #6D28D9);
}

.all-categories-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #F3E8FF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--primary, #6D28D9);
  margin-bottom: 16px;
  box-shadow: 0 4px 10px rgba(109, 40, 217, 0.1);
}

.all-categories-card-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-dark, #1F2937);
  margin: 0 0 8px 0;
}

.all-categories-card-commission {
  font-size: 0.85rem;
  font-weight: 600;
  color: #059669;
  background: #ECFDF5;
  padding: 4px 10px;
  border-radius: 9999px;
  margin-bottom: 18px;
}

.all-categories-card-btn {
  width: 100%;
  padding: 10px;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  color: #374151;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.all-categories-card-btn:hover {
  background: var(--primary, #6D28D9);
  border-color: var(--primary, #6D28D9);
  color: #FFFFFF;
}

/* Edit form sidebar */
.all-categories-sidebar {
  position: sticky;
  top: 100px;
  height: fit-content;
}

.all-categories-form-card {
  background: #FFFFFF;
  border: 1px solid var(--border-color, #E5E7EB);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.all-categories-form-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-dark, #1F2937);
  margin: 0 0 6px 0;
}

.all-categories-form-subtitle {
  color: var(--text-muted, #6B7280);
  font-size: 0.85rem;
  margin: 0 0 24px 0;
  line-height: 1.4;
}

.all-categories-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.all-categories-form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #4B5563;
}

.all-categories-form-group input {
  padding: 12px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: border-color 0.2s;
}

.all-categories-form-group input:focus {
  outline: none;
  border-color: var(--primary, #6D28D9);
}

.all-categories-form-group input[readonly] {
  background: #F3F4F6;
  color: #9CA3AF;
  cursor: not-allowed;
}

.all-categories-save-btn {
  width: 100%;
  padding: 12px;
  background: var(--primary, #6D28D9);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  box-shadow: 0 4px 10px rgba(109, 40, 217, 0.2);
}

.all-categories-save-btn:hover {
  opacity: 0.9;
}

/* Responsive Rules for All Categories */
@media (max-width: 1024px) {
  .all-categories-container {
    grid-template-columns: 1fr;
  }
  .all-categories-sidebar {
    position: static;
  }
}

/* ==========================================================================
   ENTERPRISE MOBILE BOTTOM NAVIGATION BAR (Production Ready)
   ========================================================================== */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(72px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--glass-bg, rgba(250, 249, 245, 0.85));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-color, rgba(202, 194, 179, 0.45));
  box-shadow: var(--glass-shadow, 0 -10px 30px rgba(109, 40, 217, 0.05));
  border-radius: 20px 20px 0 0;
  z-index: 9999;
  display: none; /* Hidden by default (Desktop/Tablet) */
  align-items: center;
  justify-content: space-around;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 8px 0;
  width: 20%;
  height: 100%;
  color: var(--text-muted, #6B7280);
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease-out;
  min-width: 48px;
  min-height: 48px;
  outline: none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-item:focus-visible {
  outline: 2px solid var(--primary, #6D28D9);
  border-radius: 8px;
}

.mobile-nav-item .nav-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-bottom: 3px;
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-nav-item .nav-label {
  font-size: 0.65rem;
  font-weight: 600;
  font-family: var(--font-sans), sans-serif;
  letter-spacing: 0.02em;
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s ease;
}

.mobile-nav-item .nav-indicator {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 16px;
  height: 3px;
  background-color: var(--primary, #6D28D9);
  border-radius: 2px;
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Active Navigation Item State */
.mobile-nav-item.active {
  color: var(--primary, #6D28D9);
}

.mobile-nav-item.active .nav-icon-wrapper {
  transform: translateY(-3px);
}

.mobile-nav-item.active .nav-indicator {
  transform: translateX(-50%) scaleX(1);
}

/* Notification Badges and Dots */
.mobile-nav-item .nav-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  background-color: var(--danger, #EF4444);
  color: #FFFFFF;
  font-size: 0.55rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 9999px;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(239, 68, 68, 0.3);
  animation: navBadgePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mobile-nav-item .deals-badge {
  background-color: var(--accent, #F59E0B);
  box-shadow: 0 2px 5px rgba(245, 158, 11, 0.3);
}

.mobile-nav-item .nav-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 7px;
  height: 7px;
  background-color: var(--danger, #EF4444);
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--bg-white, #FFFFFF);
  animation: navBadgePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes navBadgePop {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Responsive Overrides (< 768px) */
@media (max-width: 767px) {
  .mobile-bottom-nav {
    display: flex; /* Make visible on mobile */
  }
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
  /* Hide the legacy dashboard-specific mobile nav completely */
  #panel-customer .customer-mobile-nav,
  .customer-mobile-nav {
    display: none !important;
  }
  /* Ensure dashboard layout accounts for the new padded body height */
  #panel-customer .dashboard-layout {
    padding-bottom: 0 !important;
  }
}

/* ==========================================================================
   ENTERPRISE MOBILE DESIGN SYSTEM V2.1 overrides
   ========================================================================== */

/* Design Tokens for Mobile Layout */
.rara-mobile-layout {
  --mobile-padding: 16px;
  --mobile-gap: 12px;
  --mobile-radius: 18px;
  --mobile-header-height: 118px;
  --mobile-bottom-nav-height: 70px;
  --mobile-card-radius: 18px;
  --mobile-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* Base Body scroll lock when search is focused */
body.search-focused {
  overflow: hidden !important;
  height: 100vh !important;
}

/* Touch targets optimization */
.rara-mobile-layout button,
.rara-mobile-layout select,
.rara-mobile-layout .icon-btn,
.rara-mobile-layout .mobile-nav-item,
.rara-mobile-layout input[type="text"],
.rara-mobile-layout input[type="search"] {
  min-height: 48px !important;
  min-width: 48px;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}
.rara-mobile-layout button,
.rara-mobile-layout select,
.rara-mobile-layout .mobile-nav-item {
  user-select: none !important;
}

/* Overlap spacing priority manager */
.rara-mobile-layout .mobile-bottom-nav {
  display: flex !important;
  height: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom)) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
  box-sizing: border-box !important;
  bottom: 0 !important;
  z-index: 10001 !important;
}

body.rara-mobile-layout {
  padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom)) !important;
}

.rara-mobile-layout .checkout-sticky-mobile-cta {
  bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom)) !important;
}

.rara-mobile-layout .ai-floating-assistant {
  bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 16px) !important;
  z-index: 9999 !important;
}

.rara-mobile-layout .back-to-top-btn {
  bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 76px) !important;
  z-index: 9999 !important;
}

/* 1. Header Layout Overrides */
.rara-mobile-layout .main-header {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: auto auto !important;
  row-gap: var(--mobile-gap) !important;
  column-gap: 8px !important;
  height: var(--mobile-header-height) !important;
  min-height: var(--mobile-header-height) !important;
  padding: 10px var(--mobile-padding) !important;
  align-items: center !important;
  background: var(--bg-white) !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: var(--mobile-shadow) !important;
}

/* Row 1 left: Brand logo */
.rara-mobile-layout .main-header .brand-logo {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  margin: 0 !important;
  gap: 8px !important;
}
.rara-mobile-layout .main-header .brand-logo svg {
  width: 32px !important;
  height: 28px !important;
}
.rara-mobile-layout .main-header .brand-logo span {
  font-size: 1.15rem !important;
}
.rara-mobile-layout .main-header .brand-logo div span:last-child {
  display: none !important; /* Hide subtitle */
}

/* Row 1 right: User actions */
.rara-mobile-layout .main-header .header-user-actions {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  margin: 0 !important;
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}
.rara-mobile-layout .main-header .header-user-actions button[title="Wishlist"],
.rara-mobile-layout .main-header .header-user-account-container {
  display: none !important;
}

@media (max-width: 767px) {
  .main-header .header-user-actions button[title="Wishlist"],
  .main-header .header-user-actions .header-user-account-container {
    display: none !important;
  }
}

/* Row 2: Search Input Wrapper */
.rara-mobile-layout .main-header .global-search-wrapper {
  grid-column: 1 / span 2 !important;
  grid-row: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.rara-mobile-layout .main-header .search-container {
  width: 100% !important;
  background: var(--bg-light) !important;
  height: 48px !important;
  border-radius: 24px !important;
  padding: 2px 4px !important;
  box-sizing: border-box !important;
}
.rara-mobile-layout .main-header .search-input {
  font-size: 0.85rem !important;
  padding-left: 12px !important;
  min-height: auto !important; /* allow container sizing */
}
.rara-mobile-layout .main-header .search-btn {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 20px !important;
  padding: 0 16px !important;
  font-size: 0.85rem !important;
}

/* Shrink header when search is focused */
.rara-mobile-layout.search-focused .main-header {
  height: 68px !important;
  min-height: 68px !important;
}
.rara-mobile-layout.search-focused .main-header .brand-logo,
.rara-mobile-layout.search-focused .main-header .header-user-actions {
  display: none !important; /* Hide logo and user actions during search focus */
}
.rara-mobile-layout.search-focused .main-header .global-search-wrapper {
  grid-row: 1 !important; /* Pull search bar to Row 1 */
}

/* Hide legacy Categories button row */
.rara-mobile-layout .category-nav-row {
  display: none !important;
}

/* 2. Hero Section & Landscape Orientation */
.rara-mobile-layout .home-hero-grid {
  grid-template-columns: 1fr !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.rara-mobile-layout .home-cat-sidebar {
  display: none !important;
}

.rara-mobile-layout .home-center-hero {
  position: absolute !important;
  left: -99999px !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 767px) {
  .home-center-hero {
    position: absolute !important;
    left: -99999px !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

.rara-mobile-layout .hero-slider-box {
  min-height: 220px !important;
  height: 220px !important;
  max-height: 260px !important;
  border-radius: var(--mobile-radius) !important;
  padding: 16px !important;
  margin-bottom: var(--mobile-gap) !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  overflow: hidden !important;
  position: relative !important;
}

.rara-mobile-layout .hero-text-block {
  width: 60% !important;
  max-width: 60% !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  align-items: flex-start !important;
}

.rara-mobile-layout .hero-subtitle {
  font-size: 0.7rem !important;
  margin: 0 !important;
}

.rara-mobile-layout .hero-title {
  font-size: 1.1rem !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.rara-mobile-layout .hero-desc {
  font-size: 0.75rem !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.rara-mobile-layout .hero-cta-group {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  margin-top: 4px !important;
  width: 100% !important;
}

.rara-mobile-layout .hero-cta-group button {
  min-height: 36px !important;
  height: 36px !important;
  font-size: 0.75rem !important;
  padding: 0 12px !important;
  flex: 1 !important;
}

.rara-mobile-layout .hero-render-block {
  width: 35% !important;
  height: 100% !important;
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  padding: 0 !important;
}

.rara-mobile-layout .hero-phone-container {
  transform: scale(0.6) translate(20px, 20px) !important;
  transform-origin: bottom right !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
}

.rara-mobile-layout .hero-bg-blob {
  width: 120px !important;
  height: 120px !important;
  right: -20px !important;
  bottom: -20px !important;
}

.rara-mobile-layout .rara-hero-custom-block {
  width: 35% !important;
  height: 100% !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.rara-mobile-layout .rara-hero-custom-img {
  width: 100% !important;
  height: auto !important;
  max-height: 140px !important;
  object-fit: contain !important;
}

/* Landscape Mode Overrides for Mobile Layout */
@media (max-width: 767px) and (orientation: landscape),
body:has(#app-viewport.mobile.landscape) {
  .rara-mobile-layout .hero-slider-box {
    min-height: 140px !important;
    height: 140px !important;
    max-height: 160px !important;
  }
  .rara-mobile-layout .hero-desc {
    display: none !important;
  }
}

/* 3. Homepage, Sliders, Cards & Floating Offsets */
.rara-mobile-layout .home-upper-layout {
  display: block !important;
  padding: 0 var(--mobile-padding) !important;
  margin: 0 0 var(--mobile-gap) 0 !important;
}

.rara-mobile-layout .home-left-column {
  gap: var(--mobile-gap) !important;
}

.rara-mobile-layout .picks-section {
  padding: var(--mobile-padding) 0 !important;
  margin-bottom: var(--mobile-gap) !important;
}

/* Horizontal swipeable lists for circular categories and sliders */
.rara-mobile-layout .circular-categories-row-horizontal,
.rara-mobile-layout .flash-sales-slider-inner,
.rara-mobile-layout .sponsored-deals-slider-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  gap: var(--mobile-gap) !important;
  padding-bottom: 8px !important;
  scrollbar-width: none !important; /* Hide scrollbar for clean UI */
}

.rara-mobile-layout .circular-categories-row-horizontal::-webkit-scrollbar,
.rara-mobile-layout .flash-sales-slider-inner::-webkit-scrollbar,
.rara-mobile-layout .sponsored-deals-slider-track::-webkit-scrollbar {
  display: none !important;
}

.rara-mobile-layout .circular-categories-row-horizontal > *,
.rara-mobile-layout .flash-sales-slider-inner > *,
.rara-mobile-layout .sponsored-deals-slider-track > * {
  scroll-snap-align: start !important;
  flex: 0 0 auto !important;
}

/* Make grid-6-cols layout a swipeable slider on home page */
.rara-mobile-layout .picks-section .grid-6-cols {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  gap: var(--mobile-gap) !important;
  padding: 4px !important;
  margin: 0 !important;
  scrollbar-width: none !important;
}

.rara-mobile-layout .picks-section .grid-6-cols::-webkit-scrollbar {
  display: none !important;
}

.rara-mobile-layout .picks-section .grid-6-cols > * {
  scroll-snap-align: start !important;
  flex: 0 0 160px !important; /* Fixed width for swipeable items */
  max-width: 160px !important;
}

/* Product Card Styling on Mobile */
.rara-mobile-layout .picks-card {
  border-radius: var(--mobile-card-radius) !important;
  box-shadow: var(--mobile-shadow) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important; /* Equal height */
  overflow: hidden !important;
}

.rara-mobile-layout .picks-card-img-box {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important; /* 1:1 image aspect-ratio */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bg-light) !important;
  overflow: hidden !important;
}

.rara-mobile-layout .picks-card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.rara-mobile-layout .picks-card-body {
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  justify-content: space-between !important;
  gap: 6px !important;
}

.rara-mobile-layout .picks-card-title {
  font-size: 0.8rem !important;
  line-height: 1.3 !important;
  height: 34px !important;
  overflow: hidden !important;
  margin: 0 !important;
}

.rara-mobile-layout .picks-card-btn-box {
  margin-top: auto !important; /* Always aligned Add to Cart */
  width: 100% !important;
}

.rara-mobile-layout .picks-card-btn-box button {
  width: 100% !important;
  min-height: 38px !important;
  height: 38px !important;
  font-size: 0.75rem !important;
  border-radius: 19px !important;
}

/* 2-column grid layout for non-homepage lists (Category page, Search Results, etc.) */
.rara-mobile-layout .picks-grid,
.rara-mobile-layout .wishlist-grid-premium,
.rara-mobile-layout .saved-later-grid-premium,
.rara-mobile-layout .premium-brands-grid,
.rara-mobile-layout .featured-sellers-grid,
.rara-mobile-layout .recently-viewed-grid,
.rara-mobile-layout .pdp-recent-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--mobile-gap) !important;
  padding: 0 !important; /* parent container padding handles outer boundaries */
  width: 100% !important;
}

.rara-mobile-layout .home-right-sidebar {
  display: none !important; /* Hide sponsored deals sidebar on mobile */
}

/* Adjust Section Titles */
.rara-mobile-layout .section-title-row {
  margin-bottom: var(--mobile-gap) !important;
  padding: 0 var(--mobile-padding) !important;
}
.rara-mobile-layout .section-title-main {
  font-size: 1.15rem !important;
}

.rara-mobile-layout .floating-cat-btn {
  position: absolute !important;
  left: -99999px !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

@media (max-width: 767px) {
  .floating-cat-btn {
    position: absolute !important;
    left: -99999px !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
  }
}
.rara-mobile-layout .ai-bubble-btn {
  bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 16px) !important;
}

@media (max-width: 767px) {
  .ai-bubble-btn {
    bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 16px) !important;
  }
}

/* 4. Category Page & Bottom Sheet Filters */
.rara-mobile-layout .category-hero-outer-container {
  padding: 0 !important;
  margin: 0 !important;
}

.rara-mobile-layout .category-premium-hero-wrapper {
  display: none !important;
}

.rara-mobile-layout .category-premium-header-v2 {
  display: block !important;
  padding: var(--mobile-padding) !important;
  background: var(--bg-light) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.rara-mobile-layout .category-header-v2-container {
  display: block !important;
}

.rara-mobile-layout .category-header-v2-right {
  display: none !important;
}

.rara-mobile-layout .category-header-v2-title {
  font-size: 1.35rem !important;
  margin-bottom: 6px !important;
}

.rara-mobile-layout .category-header-v2-desc {
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
  margin-bottom: 10px !important;
}

.rara-mobile-layout .category-header-v2-mini-badges,
.rara-mobile-layout .category-trust-strip,
.rara-mobile-layout .category-promo-bar,
.rara-mobile-layout .quick-searches-row,
.rara-mobile-layout .mega-collections-container {
  display: none !important;
}

.rara-mobile-layout .category-netflix-nav-container {
  padding: 8px var(--mobile-padding) !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.rara-mobile-layout .category-netflix-nav-container::-webkit-scrollbar {
  display: none !important;
}

.rara-mobile-layout .category-netflix-nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}

.rara-mobile-layout .netflix-pill {
  flex-shrink: 0 !important;
  padding: 6px 14px !important;
  font-size: 0.75rem !important;
}

.rara-mobile-layout .category-smart-search-bar {
  padding: 10px var(--mobile-padding) !important;
  margin: 0 !important;
}

/* Sticky Sort Header */
.rara-mobile-layout .category-sort-header {
  position: sticky !important;
  top: var(--mobile-header-height) !important;
  z-index: 100 !important;
  background: var(--bg-white) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 8px var(--mobile-padding) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 0 !important;
  width: 100% !important;
  left: 0 !important;
  transform: none !important;
  box-shadow: var(--mobile-shadow) !important;
}

.rara-mobile-layout .category-sort-header .sort-results-count,
.rara-mobile-layout .category-sort-header .view-mode-buttons {
  display: none !important;
}

.rara-mobile-layout .category-sort-header .sort-controls-box {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
}

.rara-mobile-layout .category-sort-header .sort-controls-box select {
  flex-grow: 1 !important;
  height: 38px !important;
  border-radius: 19px !important;
}

/* Drawer Filters Layout on Mobile */
.rara-mobile-layout .category-page-layout {
  display: block !important;
  padding: 0 !important;
}

/* Drawer Filters Layout on Mobile (Version 2.2 Upgraded Bottom Sheet) */
/* Drawer Filters Layout on Mobile (Version 4.0 Upgraded Bottom Sheet) */
.rara-mobile-layout #category-filter-sidebar,
#app-viewport.mobile #category-filter-sidebar {
  position: fixed !important;
  bottom: 70px !important; /* Sits exactly above the 70px mobile bottom navigation bar */
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: min(85vh, 700px) !important;
  max-height: min(85vh, 700px) !important;
  background: #ffffff !important;
  border-radius: 24px 24px 0 0 !important; /* Premium rounded top corners */
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15) !important;
  z-index: 11000 !important;
  display: block !important; /* Use block to allow position sticky on child elements */
  padding: 0 !important;
  margin: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important; /* Hide scrollbar Firefox */
  transform: translateY(150%) !important; /* Offscreen default */
  opacity: 0 !important;
  transition: transform 220ms cubic-bezier(0.25, 0.8, 0.25, 1), opacity 220ms cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.rara-mobile-layout #category-filter-sidebar.open,
#app-viewport.mobile #category-filter-sidebar.open,
.rara-mobile-layout #category-filter-sidebar.active,
#app-viewport.mobile #category-filter-sidebar.active {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

.rara-mobile-layout #category-filter-sidebar::-webkit-scrollbar,
#app-viewport.mobile #category-filter-sidebar::-webkit-scrollbar {
  display: none !important; /* Hide scrollbar Webkit */
}

/* Landscape Mobile orientation override */
@media (max-height: 500px) {
  .rara-mobile-layout #category-filter-sidebar,
  #app-viewport.mobile #category-filter-sidebar {
    height: 92vh !important;
    max-height: 92vh !important;
  }
}

/* Pull Handle visually representing bottom sheet drawer drag area */
.rara-mobile-layout .mobile-filter-pull-handle,
#app-viewport.mobile .mobile-filter-pull-handle {
  width: 36px !important;
  height: 5px !important;
  border-radius: 3px !important;
  background: #e5e7eb !important;
  margin: 8px auto 4px auto !important;
  display: block !important;
}

/* Sticky Header on Mobile */
.rara-mobile-layout .mobile-filter-header-v4,
#app-viewport.mobile .mobile-filter-header-v4 {
  position: sticky !important;
  top: 0 !important;
  height: 64px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #f3f4f6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 16px !important;
  z-index: 100 !important;
}

.rara-mobile-layout .mobile-filter-back-btn,
#app-viewport.mobile .mobile-filter-back-btn {
  background: none !important;
  border: none !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
  cursor: pointer !important;
  padding: 8px 0 !important;
}

.rara-mobile-layout .mobile-filter-title-wrapper,
#app-viewport.mobile .mobile-filter-title-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.rara-mobile-layout .mobile-filter-title,
#app-viewport.mobile .mobile-filter-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  font-family: var(--font-title) !important;
}

.rara-mobile-layout .mobile-filter-actions,
#app-viewport.mobile .mobile-filter-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.rara-mobile-layout .mobile-filter-clear-btn,
#app-viewport.mobile .mobile-filter-clear-btn {
  background: none !important;
  border: none !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
}

.rara-mobile-layout .mobile-filter-apply-btn,
#app-viewport.mobile .mobile-filter-apply-btn {
  background: none !important;
  border: none !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
  cursor: pointer !important;
}

/* Hide desktop default header on mobile */
.rara-mobile-layout #category-filter-sidebar .filter-sidebar-header,
#app-viewport.mobile #category-filter-sidebar .filter-sidebar-header {
  display: none !important;
}

/* Sticky Footer on Mobile */
.rara-mobile-layout .mobile-filter-footer-v4,
#app-viewport.mobile .mobile-filter-footer-v4 {
  position: sticky !important;
  bottom: 0 !important;
  height: 72px !important;
  background: #ffffff !important;
  border-top: 1px solid #f3f4f6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 16px !important;
  padding-bottom: calc(0px + env(safe-area-inset-bottom)) !important;
  z-index: 100 !important;
}

.rara-mobile-layout .mobile-filter-reset-btn,
#app-viewport.mobile .mobile-filter-reset-btn {
  width: 48% !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: #f3f4f6 !important;
  color: var(--text-dark) !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
}

.rara-mobile-layout .mobile-filter-apply-btn-large,
#app-viewport.mobile .mobile-filter-apply-btn-large {
  width: 48% !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: var(--primary) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
}

/* Hide original sticky footer */
.rara-mobile-layout .mobile-filter-footer-sticky,
#app-viewport.mobile .mobile-filter-footer-sticky {
  display: none !important;
}

/* Accordion Premium Cards */
.rara-mobile-layout #category-filter-sidebar .filter-group-accordion,
#app-viewport.mobile #category-filter-sidebar .filter-group-accordion {
  background: #ffffff !important;
  border: 1px solid #f3f4f6 !important;
  border-radius: 18px !important;
  margin: 12px 16px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  overflow: hidden !important;
  padding: 16px !important;
  transition: none !important;
}

.rara-mobile-layout #category-filter-sidebar .filter-group-header,
#app-viewport.mobile #category-filter-sidebar .filter-group-header {
  padding: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: var(--text-dark) !important;
  background: transparent !important;
  border: none !important;
}

.rara-mobile-layout #category-filter-sidebar .filter-group-header.active,
#app-viewport.mobile #category-filter-sidebar .filter-group-header.active {
  border-bottom: none !important;
}

/* Accordion Open/Collapse Transition */
.rara-mobile-layout #category-filter-sidebar .filter-group-content,
#app-viewport.mobile #category-filter-sidebar .filter-group-content {
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.25s ease-out, opacity 0.25s ease-out !important;
  display: block !important;
  padding: 0 !important;
  visibility: visible !important;
}

.rara-mobile-layout #category-filter-sidebar .filter-group-content.open,
#app-viewport.mobile #category-filter-sidebar .filter-group-content.open {
  max-height: 1000px !important;
  opacity: 1 !important;
  padding-top: 14px !important;
}

/* Backdrop Blur styling */
.rara-mobile-layout .category-filter-backdrop,
#app-viewport.mobile .category-filter-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.25) !important; /* Premium lighter background */
  z-index: 10999 !important;
  backdrop-filter: blur(12px) !important; /* Premium 12px blur */
  -webkit-backdrop-filter: blur(12px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 220ms ease !important;
}

body.mobile-filter-open .category-filter-backdrop {
  opacity: 1 !important;
  pointer-events: auto !important;
  display: block !important;
}

/* Shared Component category view layout offscreen hack when filter open on another page */
body.mobile-filter-open #panel-category:not(.active) {
  display: block !important;
  position: absolute !important;
  left: -99999px !important;
  top: -99999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  z-index: -100 !important;
}


/* 5. Flash Sale Page overrides */
.rara-mobile-layout .flash-sale-main-layout {
  display: block !important;
}

.rara-mobile-layout .flash-sale-sidebar {
  display: block !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.rara-mobile-layout .flash-sale-sidebar::-webkit-scrollbar {
  display: none !important;
}

.rara-mobile-layout .flash-sale-sidebar-title {
  display: none !important;
}

.rara-mobile-layout #flash-sale-categories-list {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  padding: 4px var(--mobile-padding) !important;
  margin: 0 !important;
  list-style: none !important;
}

.rara-mobile-layout .flash-sale-category-item {
  flex-shrink: 0 !important;
  padding: 8px 16px !important;
  background: var(--bg-white) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  font-size: 0.8rem !important;
}

.rara-mobile-layout .flash-sale-category-item.active {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

.rara-mobile-layout .flash-sale-mobile-category-bar {
  display: none !important;
}

.rara-mobile-layout .flash-sale-products-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--mobile-gap) !important;
  padding: 0 !important;
}

.rara-mobile-layout .flash-sale-hero-card {
  padding: 20px 16px !important;
  min-height: 180px !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

.rara-mobile-layout .flash-sale-hero-content {
  gap: 8px !important;
  align-items: flex-start !important;
}

.rara-mobile-layout .flash-sale-hero-graphic {
  display: none !important;
}

.rara-mobile-layout .flash-sale-hero-title {
  font-size: 1.5rem !important;
}

.rara-mobile-layout .flash-sale-hero-desc {
  font-size: 0.8rem !important;
  max-width: 100% !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.rara-mobile-layout .flash-sale-hero-countdown-box {
  margin: 0 !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 8px !important;
}

.rara-mobile-layout .flash-sale-countdown-timer {
  gap: 4px !important;
}

.rara-mobile-layout .flash-sale-time-unit {
  min-width: 44px !important;
  padding: 4px 6px !important;
  border-radius: 8px !important;
}

.rara-mobile-layout .flash-sale-time-unit span {
  font-size: 1rem !important;
}

.rara-mobile-layout .flash-sale-time-unit label {
  font-size: 0.55rem !important;
}

.rara-mobile-layout .flash-sale-time-sep {
  font-size: 1.2rem !important;
}

.rara-mobile-layout .flash-sale-trust-section,
.rara-mobile-layout .flash-sale-faq-section {
  display: none !important;
}

.rara-mobile-layout .flash-sale-control-bar {
  padding: 8px 0 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
}

.rara-mobile-layout .flash-sale-filter-tabs {
  overflow-x: auto !important;
  white-space: nowrap !important;
  scrollbar-width: none !important;
  display: flex !important;
  padding: 4px 0 !important;
  gap: 6px !important;
}

.rara-mobile-layout .flash-sale-filter-tabs::-webkit-scrollbar {
  display: none !important;
}

.rara-mobile-layout .flash-sale-filter-tab {
  flex-shrink: 0 !important;
  padding: 6px 12px !important;
  font-size: 0.75rem !important;
}

.rara-mobile-layout .flash-sale-sort-wrapper {
  justify-content: space-between !important;
  display: flex !important;
  align-items: center !important;
}

/* 6. PDP Stacked Order Flow */
.rara-mobile-layout .pdp-three-col-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 0 var(--mobile-padding) !important;
}

.rara-mobile-layout .pdp-left-column,
.rara-mobile-layout .pdp-center-column,
.rara-mobile-layout .pdp-right-column {
  display: contents !important;
}

.rara-mobile-layout .pdp-gallery-card {
  order: 1 !important;
}

.rara-mobile-layout .pdp-info-card {
  order: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.rara-mobile-layout .pdp-accordion-card {
  order: 3 !important;
}

.rara-mobile-layout .pdp-delivery-card {
  order: 4 !important;
}

.rara-mobile-layout .pdp-seller-card {
  order: 5 !important;
}

.rara-mobile-layout .pdp-return-card {
  order: 6 !important;
}

.rara-mobile-layout .pdp-gallery-card,
.rara-mobile-layout .pdp-info-card,
.rara-mobile-layout .pdp-delivery-card,
.rara-mobile-layout .pdp-seller-card,
.rara-mobile-layout .pdp-return-card,
.rara-mobile-layout .pdp-accordion-card {
  padding: 16px !important;
}

.rara-mobile-layout .pdp-main-preview {
  height: 280px !important;
  border-radius: 12px !important;
}

.rara-mobile-layout .pdp-thumbnails {
  gap: 8px !important;
  padding: 8px 0 !important;
  overflow-x: auto !important;
  justify-content: flex-start !important;
}

.rara-mobile-layout .pdp-thumbnails::-webkit-scrollbar {
  display: none !important;
}

.rara-mobile-layout .pdp-thumbnail-item {
  width: 50px !important;
  height: 50px !important;
  flex-shrink: 0 !important;
}

.rara-mobile-layout .pdp-social-share-section {
  display: none !important;
}

.rara-mobile-layout .pdp-actions-row {
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.rara-mobile-layout .pdp-actions-row button {
  height: 48px !important;
  font-size: 0.9rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 !important;
  border-radius: 24px !important;
}

/* 7. Cart & Checkout overrides */
.rara-mobile-layout .checkout-main-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 0 var(--mobile-padding) !important;
  padding-bottom: 120px !important;
}

.rara-mobile-layout .checkout-forms-col,
.rara-mobile-layout .checkout-summary-col {
  width: 100% !important;
}

.rara-mobile-layout .payment-methods-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.rara-mobile-layout .checkout-sticky-mobile-cta {
  position: fixed !important;
  bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom)) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: var(--bg-white) !important;
  padding: 12px var(--mobile-padding) !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  z-index: 10002 !important;
  border-top: 1px solid var(--border-color) !important;
  box-sizing: border-box !important;
}

.rara-mobile-layout .checkout-sticky-mobile-cta .mobile-cta-total {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.rara-mobile-layout .checkout-sticky-mobile-cta .mobile-cta-total span {
  font-size: 0.75rem !important;
  color: var(--text-muted) !important;
}

.rara-mobile-layout .checkout-sticky-mobile-cta .mobile-cta-total strong {
  font-size: 1.15rem !important;
  color: var(--text-dark) !important;
  font-weight: 800 !important;
}

.rara-mobile-layout .checkout-sticky-mobile-cta .premium-btn {
  flex: 1 !important;
  height: 48px !important;
  border-radius: 24px !important;
  font-size: 0.95rem !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.rara-mobile-layout .cart-main-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 0 var(--mobile-padding) !important;
  padding-bottom: 120px !important;
}

.rara-mobile-layout .cart-main-left,
.rara-mobile-layout .cart-main-right {
  width: 100% !important;
}

.rara-mobile-layout .checkout-actions-v2 {
  position: fixed !important;
  bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom)) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: var(--bg-white) !important;
  padding: 12px var(--mobile-padding) !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  z-index: 10002 !important;
  border-top: 1px solid var(--border-color) !important;
  box-sizing: border-box !important;
}

.rara-mobile-layout .checkout-actions-v2 .checkout-btn-v2 {
  flex: 1 !important;
  height: 48px !important;
  border-radius: 24px !important;
  font-size: 0.95rem !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.rara-mobile-layout .checkout-actions-v2 .continue-btn-v2 {
  display: none !important;
}

.rara-mobile-layout #home-seo-faq-section {
  position: absolute !important;
  left: -99999px !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

@media (max-width: 767px) {
  #home-seo-faq-section {
    position: absolute !important;
    left: -99999px !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
}

/* Hide entire Categories list in Flash Sale page only on mobile, leaving desktop untouched */
.rara-mobile-layout #flash-sale-categories-list,
.rara-mobile-layout .flash-sale-sidebar,
#app-viewport.mobile #flash-sale-categories-list,
#app-viewport.mobile .flash-sale-sidebar,
body:has(#app-viewport.mobile) #flash-sale-categories-list,
body:has(#app-viewport.mobile) .flash-sale-sidebar {
  position: absolute !important;
  left: -99999px !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

@media (max-width: 767px) {
  #flash-sale-categories-list,
  .flash-sale-sidebar {
    position: absolute !important;
    left: -99999px !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
}

/* Responsive adjustments for Hardware & Tools section header on mobile */
.rara-mobile-layout #hardware-tools-section .section-title-row,
#app-viewport.mobile #hardware-tools-section .section-title-row,
body:has(#app-viewport.mobile) #hardware-tools-section .section-title-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

.rara-mobile-layout .hardware-usp-strip,
#app-viewport.mobile .hardware-usp-strip,
body:has(#app-viewport.mobile) .hardware-usp-strip {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  width: 100% !important;
}

@media (max-width: 767px) {
  #hardware-tools-section .section-title-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .hardware-usp-strip {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }
}

/* Hide footer festival banner on mobile layout to save screen real estate */
.rara-mobile-layout #footer-festival-banner,
#app-viewport.mobile #footer-festival-banner,
body:has(#app-viewport.mobile) #footer-festival-banner {
  position: absolute !important;
  left: -99999px !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

@media (max-width: 767px) {
  #footer-festival-banner {
    position: absolute !important;
    left: -99999px !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
}

/* ============================================================
   ⭐ ENTERPRISE MOBILE CATEGORY FILTER UPGRADE (VERSION 2.2) OVERRIDES
   ============================================================ */

/* Hide floating widgets when mobile filter drawer is open */
body.mobile-filter-open .ai-floating-assistant,
body.mobile-filter-open #ai-assistant-widget,
body.mobile-filter-open .back-to-top-btn,
body.mobile-filter-open #back-to-top {
  display: none !important;
}

body.mobile-filter-open {
  overflow: hidden !important;
}

/* Brand search input styling */
.rara-mobile-layout .mobile-brand-search-wrapper,
#app-viewport.mobile .mobile-brand-search-wrapper {
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.rara-mobile-layout .mobile-brand-search-wrapper input,
#app-viewport.mobile .mobile-brand-search-wrapper input {
  width: 100% !important;
  height: 48px !important;
  border-radius: 24px !important;
  border: 1px solid var(--border-color) !important;
  padding: 0 40px 0 40px !important;
  font-size: 0.9rem !important;
  outline: none !important;
  background: var(--bg-light) !important;
  transition: all 0.2s ease !important;
}

.rara-mobile-layout .mobile-brand-search-wrapper input:focus,
#app-viewport.mobile .mobile-brand-search-wrapper input:focus {
  border-color: var(--primary) !important;
  background: var(--bg-white) !important;
}

.rara-mobile-layout .mobile-brand-search-wrapper .search-icon,
#app-viewport.mobile .mobile-brand-search-wrapper .search-icon {
  position: absolute !important;
  left: 16px !important;
  display: flex !important;
  align-items: center !important;
  color: var(--text-muted) !important;
  pointer-events: none !important;
}

.rara-mobile-layout .mobile-brand-search-wrapper .clear-search-btn,
#app-viewport.mobile .mobile-brand-search-wrapper .clear-search-btn {
  position: absolute !important;
  right: 16px !important;
  background: none !important;
  border: none !important;
  font-size: 1rem !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  display: none;
  padding: 4px !important;
}

/* Brand skeleton loader styles */
.rara-mobile-layout .brand-skeleton-item,
#app-viewport.mobile .brand-skeleton-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 0 !important;
}

.rara-mobile-layout .brand-skeleton-circle,
#app-viewport.mobile .brand-skeleton-circle {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
}

.rara-mobile-layout .brand-skeleton-text,
#app-viewport.mobile .brand-skeleton-text {
  height: 16px !important;
  width: 120px !important;
  border-radius: 4px !important;
}

.rara-mobile-layout .skeleton-loading,
#app-viewport.mobile .skeleton-loading {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%) !important;
  background-size: 200% 100% !important;
  animation: skeleton-shimmer-filter 1.5s infinite linear !important;
}

@keyframes skeleton-shimmer-filter {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* iOS Toggle switch styling */
.rara-mobile-layout .toggle-switch-label,
#app-viewport.mobile .toggle-switch-label {
  display: grid !important;
  grid-template-columns: 24px 1fr 51px !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  height: 48px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--text-dark) !important;
  margin-bottom: 8px !important;
  padding: 0 4px !important;
}

.rara-mobile-layout .toggle-switch-label svg,
#app-viewport.mobile .toggle-switch-label svg {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--text-muted) !important;
}

.rara-mobile-layout .toggle-slider,
#app-viewport.mobile .toggle-slider {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: center !important;
  width: 52px !important;
  height: 32px !important;
  background: #e9e9ea !important;
  border-radius: 32px !important;
  position: relative !important;
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.rara-mobile-layout .toggle-slider::before,
#app-viewport.mobile .toggle-slider::before {
  content: '' !important;
  position: absolute !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  top: 2px !important;
  left: 2px !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15) !important;
}

.rara-mobile-layout .toggle-switch-label input:checked + .toggle-slider,
#app-viewport.mobile .toggle-switch-label input:checked + .toggle-slider {
  background: var(--primary) !important; /* Premium Purple active state */
}

.rara-mobile-layout .toggle-switch-label input:checked + .toggle-slider::before,
#app-viewport.mobile .toggle-switch-label input:checked + .toggle-slider::before {
  transform: translateX(20px) !important;
}

/* Color swatch premium check checkmark styling */
.rara-mobile-layout .color-swatch-item,
#app-viewport.mobile .color-swatch-item {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #e5e7eb !important;
  cursor: pointer !important;
}

.rara-mobile-layout .color-swatch-item.active,
#app-viewport.mobile .color-swatch-item.active {
  outline: 2px solid var(--primary) !important; /* Purple ring */
  outline-offset: 2px !important;
  border: 1px solid #ffffff !important;
  box-shadow: none !important;
}

.rara-mobile-layout .color-swatch-item.active::after,
#app-viewport.mobile .color-swatch-item.active::after {
  content: "✓" !important;
  font-size: 16px !important;
  font-weight: bold !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Light/white color swatch checkmark contrast */
.rara-mobile-layout .color-swatch-item.swatch-black.active::after,
.rara-mobile-layout .color-swatch-item.swatch-blue.active::after,
.rara-mobile-layout .color-swatch-item.swatch-red.active::after,
#app-viewport.mobile .color-swatch-item.swatch-black.active::after,
#app-viewport.mobile .color-swatch-item.swatch-blue.active::after,
#app-viewport.mobile .color-swatch-item.swatch-red.active::after {
  color: #ffffff !important;
}

.rara-mobile-layout .color-swatch-item.swatch-white.active::after,
.rara-mobile-layout .color-swatch-item.swatch-silver.active::after,
.rara-mobile-layout .color-swatch-item.swatch-gold.active::after,
.rara-mobile-layout .color-swatch-item.swatch-rose.active::after,
#app-viewport.mobile .color-swatch-item.swatch-white.active::after,
#app-viewport.mobile .color-swatch-item.swatch-silver.active::after,
#app-viewport.mobile .color-swatch-item.swatch-gold.active::after,
#app-viewport.mobile .color-swatch-item.swatch-rose.active::after {
  color: var(--primary) !important;
}

/* Rating filter premium list and active styles */
.rara-mobile-layout .rating-filter-list,
#app-viewport.mobile .rating-filter-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.rara-mobile-layout .rating-filter-item,
#app-viewport.mobile .rating-filter-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 48px !important; /* Touch target 48px */
  padding: 0 16px !important;
  background: var(--bg-light) !important;
  border-radius: 12px !important;
  border: 1px solid var(--border-color) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--text-dark) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.rara-mobile-layout .rating-filter-item.active,
#app-viewport.mobile .rating-filter-item.active {
  background: rgba(124, 58, 237, 0.08) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.rara-mobile-layout .mobile-stars-gold,
#app-viewport.mobile .mobile-stars-gold {
  color: #fbbf24 !important; /* Gold stars */
  font-size: 1.15rem !important;
  letter-spacing: 2px !important;
}

.rara-mobile-layout .mobile-stars-label,
#app-viewport.mobile .mobile-stars-label {
  color: var(--text-dark) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  margin-left: 8px !important;
}

/* Price Slider dual range slider thumb styling */
.rara-mobile-layout .price-slider-container,
#app-viewport.mobile .price-slider-container {
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}

.rara-mobile-layout .dual-range-slider::-webkit-slider-thumb,
#app-viewport.mobile .dual-range-slider::-webkit-slider-thumb {
  width: 30px !important; /* Touch thumb 30px */
  height: 30px !important;
  border-radius: 50% !important;
  background: var(--primary) !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  -webkit-appearance: none !important;
}

.rara-mobile-layout .dual-range-slider::-moz-range-thumb,
#app-viewport.mobile .dual-range-slider::-moz-range-thumb {
  width: 30px !important; /* Touch thumb 30px */
  height: 30px !important;
  border-radius: 50% !important;
  background: var(--primary) !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.rara-mobile-layout .price-range-inputs,
#app-viewport.mobile .price-range-inputs {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 12px !important;
}

.rara-mobile-layout .price-range-inputs input,
#app-viewport.mobile .price-range-inputs input {
  flex-grow: 1 !important;
  height: 48px !important; /* Min / Max boxes 48px height */
  border-radius: 12px !important;
  border: 1px solid var(--border-color) !important;
  text-align: center !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  outline: none !important;
  background: var(--bg-light) !important;
}

/* Premium Mobile Brand Row Presentation (V4.0 style) */
.rara-mobile-layout .mobile-brand-row-v4,
#app-viewport.mobile .mobile-brand-row-v4 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 52px !important; /* Height 52px */
  border-bottom: 1px solid #f9fafb !important;
  padding: 0 4px !important;
  margin: 0 !important;
  cursor: pointer !important;
}

.rara-mobile-layout .brand-row-left,
#app-viewport.mobile .brand-row-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.rara-mobile-layout .brand-logo-wrapper,
#app-viewport.mobile .brand-logo-wrapper {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #f3f4f6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.rara-mobile-layout .brand-logo-img,
#app-viewport.mobile .brand-logo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.rara-mobile-layout .brand-logo-avatar,
#app-viewport.mobile .brand-logo-avatar {
  font-size: 1.1rem !important;
}

.rara-mobile-layout .brand-logo-avatar.initials-avatar,
#app-viewport.mobile .brand-logo-avatar.initials-avatar {
  font-size: 0.9rem !important;
  font-weight: bold !important;
  color: var(--primary) !important;
}

.rara-mobile-layout .brand-name-text,
#app-viewport.mobile .brand-name-text {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--text-dark) !important;
}

.rara-mobile-layout .brand-row-right,
#app-viewport.mobile .brand-row-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.rara-mobile-layout .brand-product-count,
#app-viewport.mobile .brand-product-count {
  font-size: 0.8rem !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
}

.rara-mobile-layout .brand-row-chevron,
#app-viewport.mobile .brand-row-chevron {
  color: #9ca3af !important;
}

/* Category Filter Active count badge on Bottom Nav Categories button */
.mobile-nav-badge {
  position: absolute !important;
  top: 6px !important;
  right: calc(50% - 20px) !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: 8px !important;
  padding: 0 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
  z-index: 10 !important;
}

#app-viewport.mobile .pdp-seller-info-section {
  display: none !important;
}

@media (max-width: 767px) {
  .pdp-seller-info-section {
    display: none !important;
  }

  /* 1. Isolation & Flexbox Re-ordering Layout */
  .rara-mobile-layout #panel-category {
    display: none !important;
  }

  .rara-mobile-layout #panel-category.active {
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: calc(95px + env(safe-area-inset-bottom)) !important;
    background: #f9fafb !important;
  }

  .rara-mobile-layout .category-page-layout {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .rara-mobile-layout .category-main-content {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  /* Set structural order of sections */
  .rara-mobile-layout .category-netflix-nav-container {
    order: 1 !important;
  }
  .rara-mobile-layout .category-smart-search-bar {
    order: 2 !important;
  }
  .rara-mobile-layout .category-page-layout {
    order: 3 !important;
  }

  /* Sub-ordering inside category-main-content */
  .rara-mobile-layout .category-sort-header {
    order: 1 !important;
  }
  .rara-mobile-layout .category-flash-deals-banner {
    order: 2 !important;
  }
  .rara-mobile-layout #category-filtered-grid {
    order: 3 !important;
  }
  .rara-mobile-layout #category-empty-state {
    order: 4 !important;
  }

  /* 2. Hide unwanted mobile category elements */
  .rara-mobile-layout #panel-category .category-hero-outer-container,
  .rara-mobile-layout #panel-category .mega-collections-container,
  .rara-mobile-layout #panel-category .category-promo-bar,
  .rara-mobile-layout #panel-category .sort-results-count,
  .rara-mobile-layout #panel-category .view-mode-buttons,
  .rara-mobile-layout #panel-category .premium-brands-section,
  .rara-mobile-layout #panel-category .featured-sellers-section-premium,
  .rara-mobile-layout #panel-category .ai-recommendations-section,
  .rara-mobile-layout #panel-category .recently-viewed-section-premium,
  .rara-mobile-layout #panel-category .mobile-category-sticky-bar,
  .rara-mobile-layout #panel-category .category-sort-header label[for="category-sort-dropdown"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
  }

  /* 3. Scrollable Category Chips */
  .rara-mobile-layout .category-netflix-nav-container {
    display: block !important;
    background: #ffffff !important;
    padding: 10px 0 !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid #e5e7eb !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    touch-action: pan-x !important;
  }
  .rara-mobile-layout .category-netflix-nav-container::-webkit-scrollbar {
    display: none !important;
  }
  .rara-mobile-layout .category-netflix-nav {
    display: flex !important;
    gap: 8px !important;
    padding: 0 16px !important;
    width: max-content !important;
  }
  .rara-mobile-layout .netflix-pill {
    scroll-snap-align: start !important;
    background: #ffffff !important;
    color: #4b5563 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 20px !important;
    padding: 6px 14px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
  }
  .rara-mobile-layout .netflix-pill.active {
    background: var(--primary, #7c3aed) !important;
    color: #ffffff !important;
    border-color: var(--primary, #7c3aed) !important;
  }

  /* 4. Sticky Search Box */
  .rara-mobile-layout .category-smart-search-bar {
    position: sticky !important;
    top: var(--mobile-header-height, 60px) !important;
    z-index: 90 !important;
    background: #ffffff !important;
    padding: 10px 16px !important;
    margin: 0 0 8px 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
  }
  .rara-mobile-layout .smart-search-container {
    padding: 0 !important;
    margin: 0 !important;
  }
  .rara-mobile-layout .smart-search-input-wrapper {
    height: 48px !important;
    border-radius: 24px !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    padding: 0 44px !important;
    position: relative !important;
  }
  .rara-mobile-layout .search-magnifier {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #9ca3af !important;
    display: flex !important;
    align-items: center !important;
  }
  .rara-mobile-layout #category-search-input {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    font-size: 0.95rem !important;
    color: var(--text-dark) !important;
    padding: 0 !important;
  }
  .rara-mobile-layout .voice-search-btn {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    color: #7c3aed !important;
    padding: 8px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center;
  }

  /* Hide quick links searches on mobile category view */
  .rara-mobile-layout .quick-searches-row {
    display: none !important;
  }

  /* 5. Filter + Sort Row Floating Card */
  .rara-mobile-layout .category-sort-header {
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    height: 56px !important;
    margin: 4px 16px 12px 16px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    overflow: hidden !important;
  }
  .rara-mobile-layout .sort-controls-box {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .rara-mobile-layout .mobile-filter-btn {
    flex: 1 !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    border-right: 1px solid #e5e7eb !important;
    color: var(--text-dark) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
  }
  .rara-mobile-layout .mobile-filter-btn svg {
    width: 16px !important;
    height: 16px !important;
  }
  .rara-mobile-layout #category-sort-dropdown {
    flex: 1 !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--text-dark) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-align-last: center !important;
    padding: 0 12px !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
  }

  /* 6. Compact Flash Sale Strip */
  .rara-mobile-layout .category-flash-deals-banner {
    background: linear-gradient(90deg, #fef2f2, #fff1f2) !important;
    border: 1px solid #ffe4e6 !important;
    border-radius: 16px !important;
    height: 48px !important;
    margin: 0 16px 12px 16px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: hidden !important;
  }
  .rara-mobile-layout .flash-banner-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .rara-mobile-layout .flash-title-block {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .rara-mobile-layout .flash-title-block h3 {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #e11d48 !important;
    margin: 0 !important;
  }
  .rara-mobile-layout .flash-icon-spark {
    font-size: 1rem !important;
    color: #e11d48 !important;
    animation: flashPulse 1.5s infinite alternate !important;
  }
  .rara-mobile-layout .flash-countdown-timer {
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #e11d48 !important;
    margin: 0 !important;
  }
  .rara-mobile-layout .flash-countdown-timer .ends-label {
    display: none !important;
  }
  .rara-mobile-layout .flash-countdown-timer .time-block {
    background: #e11d48 !important;
    color: #ffffff !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    font-size: 0.75rem !important;
    margin: 0 2px !important;
    min-width: 20px !important;
    text-align: center !important;
  }
  .rara-mobile-layout .flash-view-all-btn {
    background: transparent !important;
    border: none !important;
    color: #e11d48 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
  }

  /* 7. Product Grid */
  .rara-mobile-layout #category-filtered-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 16px !important;
    margin: 0 0 24px 0 !important;
  }

  /* 8. Mobile Premium Card Layout */
  .rara-mobile-layout .mobile-picks-card {
    background: #ffffff !important;
    border: 1px solid #f3f4f6 !important;
    border-radius: 18px !important;
    padding: 10px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    position: relative !important;
    cursor: pointer !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  .rara-mobile-layout .mobile-picks-card:active {
    transform: scale(0.98) !important;
  }

  /* Image Box (aspect-ratio 1/1, object-fit contain) */
  .rara-mobile-layout .mobile-picks-card-img-box {
    width: 100% !important;
    aspect-ratio: 1/1 !important;
    background: #f9fafb !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
  }
  .rara-mobile-layout .mobile-picks-card-img-box img {
    max-width: 90% !important;
    max-height: 90% !important;
    object-fit: contain !important;
  }

  /* Floating heart button */
  .rara-mobile-layout .mobile-picks-card-wish-btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #f3f4f6 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 5 !important;
    padding: 0 !important;
    font-size: 1.1rem !important;
    touch-action: manipulation !important;
  }

  /* Discount Badge positioning */
  .rara-mobile-layout .mobile-picks-card .picks-card-badge,
  .rara-mobile-layout .mobile-picks-card .discount-badge-v2 {
    display: inline-block !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    width: fit-content !important;
    margin-bottom: 6px !important;
  }

  /* Title layout rules (clamped 2 lines) */
  .rara-mobile-layout .mobile-picks-card-title {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--text-dark, #1f2937) !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.3 !important;
    height: 34px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Ratings */
  .rara-mobile-layout .mobile-picks-card-ratings {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 6px !important;
    font-size: 0.75rem !important;
  }
  .rara-mobile-layout .mobile-picks-card-reviews-count {
    color: var(--text-muted, #9ca3af) !important;
    font-size: 0.7rem !important;
  }

  /* Price */
  .rara-mobile-layout .mobile-picks-card-price-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin-bottom: 4px !important;
  }
  .rara-mobile-layout .mobile-picks-card-price-current {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--primary, #7c3aed) !important;
  }
  .rara-mobile-layout .mobile-picks-card-price-old {
    font-size: 0.75rem !important;
    text-decoration: line-through !important;
    color: var(--text-muted, #9ca3af) !important;
  }

  /* Stock status count */
  .rara-mobile-layout .mobile-picks-card-stock {
    font-size: 0.7rem !important;
    color: #e11d48 !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
  }

  /* Add to Cart button (pushed to bottom, 44px, purple, rounded) */
  .rara-mobile-layout .mobile-picks-card-add-btn {
    margin-top: auto !important;
    height: 44px !important;
    width: 100% !important;
    background: var(--primary, #7c3aed) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 22px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
  }
  .rara-mobile-layout .mobile-picks-card-add-btn:active {
    background: #6d28d9 !important;
  }

  /* 9. AI Assistant widget adjustment */
  #ai-assistant-widget {
    bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 16px) !important;
    right: 16px !important;
    z-index: 1000 !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* 10. Body Overflow Lock */
  body.mobile-filter-open {
    overflow: hidden !important;
  }
}

@keyframes flashPulse {
  from { opacity: 0.7; }
  to { opacity: 1; }
}

@keyframes flashPulse {
  from { opacity: 0.7; }
  to { opacity: 1; }
}

/* ==========================================================================
   ENTERPRISE MOBILE AI SUPPORT FAB & SAVING SPINNER OPTIMIZATION (VERSION 5.1)
   ========================================================================== */

.address-save-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: address-spin 0.8s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}

@keyframes address-spin {
  to { transform: rotate(360deg); }
}

/* Mobile AI Support FAB Optimization */
@media (max-width: 767px) {
  #ai-assistant-widget {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 10000 !important;
  }
  
  .ai-bubble-btn {
    position: absolute !important;
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    right: 14px !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    animation: ai-float 3s ease-in-out infinite !important;
    pointer-events: auto !important;
  }

  .ai-bubble-btn:hover {
    transform: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }

  .ai-bubble-btn svg {
    width: 24px !important;
    height: 24px !important;
    margin-bottom: 0 !important;
  }

  .ai-bubble-btn .ai-bubble-label {
    font-size: 10px !important;
    line-height: 1.1 !important;
    max-width: 50px !important;
    margin-top: 2px !important;
  }
}

/* Emulator Mobile AI Support FAB Optimization */
#app-viewport.mobile #ai-assistant-widget {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 10000 !important;
}

#app-viewport.mobile .ai-bubble-btn {
  position: absolute !important;
  bottom: calc(78px + env(safe-area-inset-bottom)) !important;
  right: 14px !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  animation: ai-float 3s ease-in-out infinite !important;
  pointer-events: auto !important;
}

#app-viewport.mobile .ai-bubble-btn:hover {
  transform: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

#app-viewport.mobile .ai-bubble-btn svg {
  width: 24px !important;
  height: 24px !important;
  margin-bottom: 0 !important;
}

#app-viewport.mobile .ai-bubble-btn .ai-bubble-label {
  font-size: 10px !important;
  line-height: 1.1 !important;
  max-width: 50px !important;
  margin-top: 2px !important;
}

/* Tablet AI Support FAB Spacing Optimization */
@media (min-width: 768px) and (max-width: 1023px) {
  #ai-assistant-widget {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 10000 !important;
  }
  .ai-bubble-btn {
    position: absolute !important;
    bottom: 26px !important;
    right: 24px !important;
    width: 68px !important;
    height: 68px !important;
    pointer-events: auto !important;
  }
}

/* Emulator Tablet AI Support FAB Spacing Optimization */
#app-viewport.tablet #ai-assistant-widget {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 10000 !important;
}

#app-viewport.tablet .ai-bubble-btn {
  position: absolute !important;
  bottom: 26px !important;
  right: 24px !important;
  width: 68px !important;
  height: 68px !important;
  pointer-events: auto !important;
}

@keyframes ai-float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-bubble-btn,
  #app-viewport.mobile .ai-bubble-btn {
    animation: none !important;
  }
}

/* ==========================================================================
   ENTERPRISE MOBILE AI SUPPORT CHAT UI UPGRADE (VERSION 6.0)
   ========================================================================== */

/* Desktop / Tablet defaults - Hide mobile-only layout elements */
.ai-back-btn,
.ai-avatar,
.ai-status-indicator,
.ai-minimize-btn,
.ai-header-title-mobile,
.ai-attachment-btn,
.ai-voice-btn,
.ai-mobile-empty-state,
.ai-mobile-suggested-questions,
.ai-msg-time {
  display: none !important;
}

.ai-header-title-desktop {
  display: inline !important;
}

.ai-input-pill {
  display: contents; /* transparent pill wrapper on desktop */
}

/* AI Chat Backdrop */
.ai-backdrop {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.45) !important;
  z-index: 9998 !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease !important;
  border-radius: inherit !important;
}
.ai-backdrop.active {
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: opacity 250ms ease !important;
}

#app-viewport.mobile .ai-backdrop {
  border-radius: 24px !important;
}
#app-viewport.tablet .ai-backdrop {
  border-radius: 16px !important;
}

/* AI Chat Window Base Style and Transition overrides */
.ai-chat-window {
  display: flex !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(0.9) translateY(10px) !important;
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1), transform 220ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.ai-chat-window.open,
.ai-chat-window.active {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: scale(1) translateY(0) !important;
  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* AI Floating Bubble Button Hidden State */
.ai-bubble-btn {
  transition: transform 250ms ease, opacity 250ms ease, background 150ms ease !important;
}
.ai-bubble-btn.hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(0.85) !important;
}

/* Mobile & Emulator Viewport overrides */
@media (max-width: 767px), .rara-mobile-layout {
  /* Bottom Sheet Window Layout */
  .ai-chat-window,
  #app-viewport.mobile .ai-chat-window {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 65vh !important; /* Default mobile portrait height */
    min-height: 60vh !important;
    max-height: 75vh !important;
    border-radius: 24px 24px 0 0 !important;
    background: #ffffff !important;
    box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.12) !important;
    z-index: 9999 !important;
    border: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.98) translateY(100%) !important;
    will-change: transform, opacity !important;
    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .ai-chat-window.open,
  .ai-chat-window.active,
  #app-viewport.mobile .ai-chat-window.open,
  #app-viewport.mobile .ai-chat-window.active {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: scale(1) translateY(0) !important;
  }

  /* Dynamic Height Adaptations */
  .ai-chat-window.keyboard-open,
  #app-viewport.mobile .ai-chat-window.keyboard-open {
    height: 45vh !important; /* Keyboard open height */
    min-height: 45vh !important;
    max-height: 45vh !important;
  }

  /* Landscape viewports */
  @media (max-height: 480px) {
    .ai-chat-window,
    #app-viewport.mobile .ai-chat-window {
      height: 85vh !important;
      min-height: 80vh !important;
      max-height: 90vh !important;
    }
  }

  /* Small Screen Viewports (<360px) */
  @media (max-width: 359px) {
    .ai-chat-window,
    #app-viewport.mobile .ai-chat-window {
      height: 72vh !important;
    }
  }

  /* Backdrop Style (No blur filter to prevent blank screen) */
  .ai-backdrop,
  #app-viewport.mobile .ai-backdrop {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.45) !important;
    z-index: 9998 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 220ms ease !important;
    border-radius: inherit !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .ai-backdrop.active,
  #app-viewport.mobile .ai-backdrop.active {
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: opacity 250ms ease !important;
  }

  /* Sliding Bottom Navigation Down */
  body.ai-widget-open .mobile-bottom-nav {
    transform: translateY(100%) !important;
  }

  /* Premium Header Customization */
  .ai-chat-header,
  #app-viewport.mobile .ai-chat-header {
    height: 60px !important;
    max-height: 60px !important;
    min-height: 60px !important;
    background: linear-gradient(135deg, #7C3AED, #6D28D9) !important;
    padding: 0 16px !important;
    padding-top: env(safe-area-inset-top) !important; /* safe area support */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-sizing: border-box !important;
    position: relative !important;
    border-radius: 24px 24px 0 0 !important;
  }

  .ai-back-btn {
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    padding: 0 !important;
    height: 100% !important;
    margin-right: 12px !important;
  }

  .ai-header-main {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    gap: 10px !important;
  }

  .ai-avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  }

  .ai-header-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .ai-header-title-desktop {
    display: none !important;
  }

  .ai-header-title-mobile {
    display: block !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
  }

  .ai-status-indicator {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-top: 1px !important;
  }

  .ai-status-dot {
    width: 7px !important;
    height: 7px !important;
    background: #10B981 !important; /* Premium Emerald green */
    border-radius: 50% !important;
    display: inline-block !important;
    box-shadow: 0 0 6px #10B981 !important;
  }

  .ai-minimize-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 18px !important;
    cursor: pointer !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin-right: 4px !important;
  }

  .ai-header-action-btn {
    position: static !important;
    transform: none !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    z-index: 10 !important;
  }

  /* Chat Body Customization */
  .ai-chat-messages,
  #app-viewport.mobile .ai-chat-messages {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 16px !important;
    background: #FAFAFA !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important; /* Momentum scrolling */
    scrollbar-width: none !important; /* Firefox */
  }

  /* Hide scrollbar */
  .ai-chat-messages::-webkit-scrollbar {
    display: none !important;
  }

  /* Message Bubble Design */
  .ai-msg {
    margin-bottom: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    max-width: 78% !important;
    animation: bubble-in 0.2s ease-out !important;
  }

  @keyframes bubble-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .ai-msg.bot {
    align-self: flex-start !important;
    align-items: flex-start !important;
  }

  .ai-msg.user {
    align-self: flex-end !important;
    align-items: flex-end !important;
  }

  .ai-msg-content {
    padding: 10px 14px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  }

  .ai-msg.bot .ai-msg-content {
    background: #F1F5F9 !important;
    color: #0f172a !important;
    border-radius: 20px 20px 20px 4px !important;
  }

  .ai-msg.user .ai-msg-content {
    background: var(--primary, #7C3AED) !important;
    color: #ffffff !important;
    border-radius: 20px 20px 4px 20px !important;
  }

  .ai-msg-time {
    display: block !important;
    font-size: 11px !important;
    color: #94A3B8 !important;
    margin-top: 4px !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
  }

  /* Empty Welcome State */
  .ai-mobile-empty-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-top: 10px !important;
    margin-bottom: 20px !important;
  }

  .ai-empty-welcome {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    margin-bottom: 6px !important;
    text-align: center !important;
  }

  .ai-empty-subtitle {
    font-size: 14px !important;
    color: #64748B !important;
    margin-bottom: 20px !important;
    text-align: center !important;
  }

  /* Quick Actions Grid */
  .ai-quick-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .ai-quick-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    height: 56px !important; /* Touch target 56px */
    padding: 0 16px !important;
    background: #ffffff !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    box-sizing: border-box !important;
  }

  .ai-quick-card:active {
    background: #F8FAFC !important;
    transform: scale(0.97) !important;
  }

  .card-icon {
    font-size: 18px !important;
  }

  .card-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
  }

  /* Suggested Questions section */
  .ai-mobile-suggested-questions {
    display: block !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }

  .ai-suggested-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #64748B !important;
    margin-bottom: 10px !important;
  }

  .ai-suggested-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .ai-suggested-chip {
    display: inline-block !important;
    background: #ffffff !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 20px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--primary, #7C3AED) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    touch-action: manipulation !important;
  }

  .ai-suggested-chip:active {
    background: rgba(124, 58, 237, 0.08) !important;
    transform: scale(0.96) !important;
  }

  /* Hide welcome/suggested blocks once messages are present */
  #ai-widget-messages-container.has-messages .ai-mobile-empty-state,
  #ai-widget-messages-container.has-messages .ai-mobile-suggested-questions {
    display: none !important;
  }

  /* Input Area Container Styling */
  .ai-chat-input-row,
  #app-viewport.mobile .ai-chat-input-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) 12px !important; /* safe area support */
    background: #ffffff !important;
    border-top: 1px solid #E2E8F0 !important;
    box-sizing: border-box !important;
    height: auto !important;
  }

  .ai-attachment-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    background: rgba(124, 58, 237, 0.1) !important;
    color: var(--primary, #7C3AED) !important;
    border: none !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
  .ai-attachment-btn:active {
    background: rgba(124, 58, 237, 0.2) !important;
  }

  .ai-input-pill {
    display: flex !important;
    flex: 1 !important;
    align-items: center !important;
    background: #F1F5F9 !important;
    border-radius: 28px !important; /* rounded 28px */
    padding: 0 12px 0 16px !important;
    height: 42px !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  }

  .ai-chat-input,
  #app-viewport.mobile .ai-chat-input {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    font-size: 14px !important;
    padding: 0 !important;
    height: 100% !important;
    color: #1E293B !important;
    box-shadow: none !important;
  }

  .ai-voice-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border: none !important;
    background: transparent !important;
    font-size: 16px !important;
    cursor: pointer !important;
    color: #64748B !important;
    padding: 0 !important;
  }

  .ai-chat-send,
  #app-viewport.mobile .ai-chat-send {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    background: var(--primary, #7C3AED) !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 0 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25) !important;
    position: static !important;
    padding: 0 !important;
  }

  .ai-chat-send::before {
    content: "➔" !important;
    font-size: 15px !important;
  }

  .ai-chat-send:active {
    background: #6D28D9 !important;
    transform: scale(0.95) !important;
  }

  /* Typing Dot Animation */
  .ai-typing-indicator {
    display: flex !important;
    align-items: center !important;
    padding: 10px 14px !important;
    width: fit-content !important;
  }

  .ai-typing-dots {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-left: 6px !important;
    margin-top: 2px !important;
  }

  .ai-typing-dots .dot {
    width: 6px !important;
    height: 6px !important;
    background: #64748B !important;
    border-radius: 50% !important;
    animation: ai-pulse 1.2s infinite ease-in-out !important;
    display: inline-block !important;
  }

  .ai-typing-dots .dot:nth-child(2) {
    animation-delay: 0.2s !important;
  }

  .ai-typing-dots .dot:nth-child(3) {
    animation-delay: 0.4s !important;
  }

  @keyframes ai-pulse {
    0%, 100% { transform: scale(0.6); opacity: 0.4; }
    50% { transform: scale(1.2); opacity: 1; }
  }
}

/* Safety Override: Hide Beauty Video Shopping title row on all devices/viewports */
#beauty-video-shopping-section .section-title-row {
  display: none !important;
}

/* ==========================================================================
   BUYER-MODE FOR ALL-CATEGORIES PAGE (CLEAN DIRECTORY)
   ========================================================================== */
#panel-all-categories.buyer-mode .dashboard-layout {
  display: block !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

#panel-all-categories.buyer-mode .dashboard-sidebar {
  display: none !important;
}

#panel-all-categories.buyer-mode .all-categories-sidebar {
  display: none !important;
}

#panel-all-categories.buyer-mode .all-categories-container {
  display: block !important;
  background: transparent !important;
  padding: 32px 24px !important;
}

#panel-all-categories.buyer-mode .all-categories-main {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

#panel-all-categories.buyer-mode .all-categories-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 24px !important;
  margin-top: 32px !important;
}

/* Premium Styling for Buyer Category Cards */
#panel-all-categories.buyer-mode .all-categories-card.buyer-card {
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

#panel-all-categories.buyer-mode .all-categories-card.buyer-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(109, 40, 217, 0.08);
  border-color: rgba(109, 40, 217, 0.25);
}

#panel-all-categories.buyer-mode .all-categories-card-icon {
  width: 72px;
  height: 72px;
  background: rgba(109, 40, 217, 0.06);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  transition: background 0.3s;
}

#panel-all-categories.buyer-mode .all-categories-card.buyer-card:hover .all-categories-card-icon {
  background: rgba(109, 40, 217, 0.1);
}

#panel-all-categories.buyer-mode .all-categories-card-icon-i {
  width: 32px;
  height: 32px;
  color: var(--primary, #7C3AED);
}

#panel-all-categories.buyer-mode .all-categories-card-emoji {
  font-size: 2.2rem;
}

#panel-all-categories.buyer-mode .all-categories-card-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-dark, #1e293b);
  margin: 0;
}

#panel-all-categories.buyer-mode .all-categories-card-btn.buyer-btn {
  background: transparent;
  color: var(--primary, #7C3AED);
  border: 1px solid rgba(109, 40, 217, 0.3);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  width: auto;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
}

#panel-all-categories.buyer-mode .all-categories-card.buyer-card:hover .all-categories-card-btn.buyer-btn {
  background: var(--primary, #7C3AED);
  color: #ffffff;
  border-color: var(--primary, #7C3AED);
}



/* ==========================================================================
   ENTERPRISE DESKTOP CATEGORY PAGE PREMIUM UI UPGRADE
   Scope: @media (min-width: 1024px) — Desktop ONLY
   Safe: Mobile (<768px) and Tablet (768-1023px) are 100% unaffected.
   Version: 1.0 | Non-destructive | Presentation Layer Only
   ========================================================================== */

@media (min-width: 1024px) {

  /* ------------------------------------------------------------------
   * 1. PAGE WRAPPER — Max-Width Container & Background
   * ------------------------------------------------------------------ */
  #panel-category {
    background: var(--bg-light);
    min-height: 100vh;
  }

  /* Outer container centering & max-width */
  #panel-category > .category-hero-outer-container,
  #panel-category > .category-netflix-nav-container,
  #panel-category > .category-promo-bar,
  #panel-category > .category-smart-search-bar,
  #panel-category > .mega-collections-container,
  #panel-category > .category-page-layout {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  /* ------------------------------------------------------------------
   * 2. COMPACT PREMIUM CATEGORY HEADER V2
   *    Max 170px. Left 70% / Right 30%. No oversized hero.
   * ------------------------------------------------------------------ */
  .category-hero-outer-container {
    padding: 20px 32px 0 32px;
  }

  .category-premium-header-v2 {
    max-height: 170px !important;
    height: 170px !important;
    padding: 0 28px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #ffffff 0%, #faf8ff 100%) !important;
    border: 1px solid rgba(109, 40, 217, 0.1) !important;
    box-shadow: 0 4px 24px rgba(109, 40, 217, 0.05), 0 1px 3px rgba(0,0,0,0.04) !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Subtle background accent line */
  .category-premium-header-v2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: 20px 0 0 20px;
  }

  .category-header-v2-container {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
  }

  /* Left section: 70% */
  .category-header-v2-left {
    flex: 0 0 68% !important;
    max-width: 68% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 6px !important;
    padding-left: 16px;
  }

  /* Breadcrumb */
  .category-header-v2-breadcrumb {
    font-size: 0.73rem !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* Title */
  .category-header-v2-title {
    font-family: var(--font-title) !important;
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px;
  }

  /* Description */
  .category-header-v2-desc {
    font-size: 0.81rem !important;
    color: var(--text-muted) !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.45 !important;
    -webkit-line-clamp: 1 !important;
  }

  /* Mini badges row */
  .category-header-v2-mini-badges {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
  }
  .category-header-v2-mini-badges .mini-badge {
    font-size: 0.69rem !important;
    color: #059669 !important;
    font-weight: 700 !important;
    background: rgba(16, 185, 129, 0.08);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(16, 185, 129, 0.15);
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap;
  }

  /* Stats row — glass pill style */
  .category-header-v2-stats {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  .category-header-v2-stats .stat-v2-item {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    background: rgba(109, 40, 217, 0.06) !important;
    border: 1px solid rgba(109, 40, 217, 0.12) !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    white-space: nowrap;
  }

  /* Right section: 30% — illustration + glow */
  .category-header-v2-right {
    flex: 0 0 32% !important;
    max-width: 32% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
  }

  .category-header-v2-illustration {
    max-height: 150px !important;
    max-width: 90% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 6px 20px rgba(109, 40, 217, 0.15)) !important;
    z-index: 3 !important;
    position: relative;
  }

  .category-header-v2-radial-glow {
    width: 160px !important;
    height: 160px !important;
    background: radial-gradient(circle, rgba(109, 40, 217, 0.12) 0%, rgba(109, 40, 217, 0) 70%) !important;
  }

  /* ------------------------------------------------------------------
   * 3. TRUST STRIP — Below header, premium glass cards
   * ------------------------------------------------------------------ */
  .category-trust-strip {
    display: flex !important;
    gap: 10px !important;
    margin-top: 12px !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .category-trust-strip .trust-card {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 9px 14px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.75) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(109, 40, 217, 0.07) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    gap: 7px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    white-space: nowrap;
  }
  .category-trust-strip .trust-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(109, 40, 217, 0.08) !important;
    border-color: rgba(109, 40, 217, 0.18) !important;
  }

  /* ------------------------------------------------------------------
   * 4. CATEGORY PILLS NAVIGATION — Premium horizontal scroll
   * ------------------------------------------------------------------ */
  .category-netflix-nav-container {
    padding: 12px 32px !important;
    background: var(--bg-white) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
  }

  .category-netflix-nav {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .netflix-pill {
    background: var(--bg-white) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-dark) !important;
    font-family: var(--font-sans) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    padding: 7px 18px !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  }
  .netflix-pill:hover {
    background: var(--secondary-light) !important;
    border-color: rgba(109, 40, 217, 0.25) !important;
    color: var(--primary) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 10px rgba(109, 40, 217, 0.1) !important;
  }
  .netflix-pill.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(109, 40, 217, 0.3) !important;
    transform: none !important;
  }

  /* ------------------------------------------------------------------
   * 5. PROMO BAR — Slimmer on desktop
   * ------------------------------------------------------------------ */
  .category-promo-bar {
    font-size: 0.78rem !important;
    padding: 7px 32px !important;
  }

  /* ------------------------------------------------------------------
   * 6. SMART SEARCH BAR — Horizontal toolbar layout on desktop
   * ------------------------------------------------------------------ */
  .category-smart-search-bar {
    padding: 12px 32px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    border-bottom: 1px solid var(--border-color) !important;
  }
  .smart-search-container {
    max-width: 440px !important;
    flex: 1 !important;
  }
  .smart-search-input-wrapper {
    border-radius: 10px !important;
    background: var(--bg-light) !important;
  }
  .quick-searches-row {
    flex-shrink: 0 !important;
  }

  /* ------------------------------------------------------------------
   * 7. MEGA COLLECTIONS — Hide on desktop (too noisy; replaced by pills)
   *    Spec says pills replace sub-nav, collections are optional visual noise
   * ------------------------------------------------------------------ */
  .mega-collections-container {
    display: none !important;
  }

  /* ------------------------------------------------------------------
   * 8. PAGE LAYOUT — Sidebar + Main (Desktop: 320px + auto)
   * ------------------------------------------------------------------ */
  .category-page-layout {
    display: grid !important;
    grid-template-columns: 300px 1fr !important;
    gap: 24px !important;
    padding: 20px 32px !important;
    align-items: start !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* ------------------------------------------------------------------
   * 9. SIDEBAR FILTERS — 300px, sticky, never resize
   * ------------------------------------------------------------------ */
  .filter-sidebar {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    flex-shrink: 0 !important;
    background: var(--bg-white) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 18px !important;
    padding: 20px !important;
    align-self: start !important;
    position: sticky !important;
    top: 80px !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--border-color) transparent !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
    /* Override mobile transform */
    transform: none !important;
    display: block !important;
  }
  .filter-sidebar::-webkit-scrollbar {
    width: 4px;
  }
  .filter-sidebar::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
  }

  /* Sidebar header */
  .filter-sidebar-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--border-color) !important;
  }
  .filter-sidebar-header h3 {
    font-family: var(--font-title) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
  }
  .close-filters-btn {
    display: none !important; /* Hide mobile close button on desktop */
  }
  .clear-all-filters-btn {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
  }

  /* Accordion groups */
  .filter-group-accordion {
    border-bottom: 1px solid var(--border-color) !important;
    margin-bottom: 0 !important;
    padding: 4px 0 12px 0 !important;
  }
  .filter-group-header {
    padding: 10px 2px !important;
    font-size: 0.83rem !important;
    font-weight: 700 !important;
  }
  .filter-group-header:hover {
    color: var(--primary) !important;
  }

  /* Price presets row (add via CSS only — kept minimal) */
  .price-range-inputs input {
    width: 76px !important;
    font-size: 0.72rem !important;
    padding: 5px 6px !important;
    border-radius: 8px !important;
  }

  /* Brand search input */
  .filter-search-box input {
    border-radius: 10px !important;
    padding: 9px 12px !important;
    font-size: 0.78rem !important;
    background: var(--bg-light) !important;
  }
  .filter-search-box input:focus {
    border-color: var(--primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.08) !important;
  }

  /* Rating filter items */
  .rating-filter-item {
    font-size: 0.78rem !important;
    padding: 7px 8px !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
  }
  .rating-filter-item:hover {
    background: var(--secondary-light) !important;
    border-color: rgba(109, 40, 217, 0.1) !important;
  }
  .rating-filter-item.active {
    background: var(--secondary-light) !important;
    border-color: rgba(109, 40, 217, 0.2) !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
  }

  /* Slider thumb */
  .dual-range-slider::-webkit-slider-thumb {
    height: 18px !important;
    width: 18px !important;
  }

  /* ------------------------------------------------------------------
   * 10. SORT TOOLBAR — Premium sticky toolbar (64px)
   * ------------------------------------------------------------------ */
  .category-sort-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    background: var(--bg-white) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
    min-height: 56px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important;
    position: sticky !important;
    top: 76px !important;
    z-index: 80 !important;
    transition: box-shadow 0.3s ease, background 0.3s ease !important;
  }
  .category-sort-header:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
  }

  .sort-results-count {
    font-size: 0.82rem !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
  }
  .sort-results-count #category-results-total {
    font-weight: 800 !important;
    color: var(--text-dark) !important;
  }

  .sort-controls-box {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .sort-controls-box label {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
  }
  .sort-controls-box select {
    padding: 7px 12px !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-color) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    background: var(--bg-light) !important;
    cursor: pointer !important;
  }
  .sort-controls-box select:focus {
    outline: none !important;
    border-color: var(--primary) !important;
  }

  .view-mode-buttons {
    display: flex !important;
    gap: 4px !important;
    background: var(--bg-light) !important;
    border-radius: 10px !important;
    padding: 3px !important;
  }
  .view-mode-btn {
    background: transparent !important;
    border: none !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    padding: 5px 12px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    color: var(--text-muted) !important;
  }
  .view-mode-btn.active {
    background: var(--bg-white) !important;
    color: var(--primary) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
  }

  /* Hide mobile filter button on desktop */
  .mobile-filter-btn {
    display: none !important;
  }

  /* ------------------------------------------------------------------
   * 11. PRODUCT GRID — Desktop: 4 cards (wide: 5 cols)
   * ------------------------------------------------------------------ */
  #category-filtered-grid.picks-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }

  /* ------------------------------------------------------------------
   * 12. PRODUCT CARDS — Premium marketplace design
   * ------------------------------------------------------------------ */
  #panel-category .picks-card {
    background: var(--bg-white) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
    height: 100% !important;
  }

  #panel-category .picks-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 40px rgba(109, 40, 217, 0.1), 0 4px 12px rgba(0,0,0,0.06) !important;
    border-color: rgba(109, 40, 217, 0.15) !important;
  }

  /* Card image area */
  #panel-category .picks-card-img-box {
    height: 190px !important;
    background: var(--bg-light) !important;
    border-bottom: 1px solid var(--border-color) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    transition: background 0.3s ease !important;
  }
  #panel-category .picks-card:hover .picks-card-img-box {
    background: var(--bg-gray) !important;
  }

  /* Image zoom on hover */
  #panel-category .picks-card .picks-card-img,
  #panel-category .picks-card .picks-card-img-box > span {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  #panel-category .picks-card:hover .picks-card-img,
  #panel-category .picks-card:hover .picks-card-img-box > span {
    transform: scale(1.06) !important;
  }

  /* Discount badge */
  #panel-category .picks-card-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    background: linear-gradient(135deg, #EF4444, #DC2626) !important;
    color: #fff !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    z-index: 10 !important;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(239,68,68,0.3) !important;
  }

  /* Wishlist & compare buttons */
  #panel-category .picks-card-wish-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid var(--border-color) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  }
  #panel-category .picks-card-wish-btn:hover {
    background: #FFF1F2 !important;
    border-color: #FCA5A5 !important;
    transform: scale(1.1) !important;
  }

  /* Card body */
  #panel-category .picks-card-body {
    padding: 14px 14px 12px 14px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  /* Title — 2-line clamp */
  #panel-category .picks-card-title {
    font-family: var(--font-sans) !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 36px !important;
    cursor: pointer;
    transition: color 0.2s ease !important;
  }
  #panel-category .picks-card-title:hover {
    color: var(--primary) !important;
  }

  /* Ratings */
  #panel-category .picks-card-ratings {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.73rem !important;
  }

  /* Social proof */
  #panel-category .social-proof-row-card {
    display: flex !important;
    gap: 8px !important;
    font-size: 0.67rem !important;
    color: var(--text-muted) !important;
  }

  /* Add-to-Cart button  */
  #panel-category .picks-card .btn-outline {
    border-radius: 10px !important;
    font-size: 0.73rem !important;
    font-weight: 700 !important;
    padding: 8px 6px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
  }
  #panel-category .picks-card .btn-primary {
    border-radius: 10px !important;
    font-size: 0.73rem !important;
    font-weight: 700 !important;
    padding: 8px 6px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
  }
  #panel-category .picks-card .btn-primary:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
  }

  /* ------------------------------------------------------------------
   * 13. EMPTY STATE — centered, premium
   * ------------------------------------------------------------------ */
  #category-empty-state {
    border-radius: 18px !important;
    padding: 48px 32px !important;
    background: var(--bg-white) !important;
    border: 1px dashed var(--border-color) !important;
    text-align: center !important;
  }

  /* ------------------------------------------------------------------
   * 14. ACTIVE FILTER CHIPS — Subtle, minimal
   * ------------------------------------------------------------------ */
  .active-filter-chips-row {
    border-radius: 12px !important;
    padding: 8px 14px !important;
    margin-bottom: 12px !important;
    background: var(--secondary-light) !important;
    border: 1px solid rgba(109, 40, 217, 0.1) !important;
  }

  /* ------------------------------------------------------------------
   * 15. SECTION SECONDARY AREAS — Flash, Brands, Sellers, AI, Reviews
   * ------------------------------------------------------------------ */
  .category-flash-deals-banner,
  .premium-brands-section,
  .featured-sellers-section-premium,
  .ai-recommendations-section,
  .recently-viewed-section-premium {
    border-radius: 18px !important;
    padding: 20px !important;
    background: var(--bg-white) !important;
    border: 1px solid var(--border-color) !important;
    margin-top: 20px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important;
  }

  /* ------------------------------------------------------------------
   * 16. TRUST STRIP AFTER GRID — Already inside hero outer, ensure visible
   * ------------------------------------------------------------------ */

  /* ------------------------------------------------------------------
   * 17. BACKDROP OVERLAY — Hidden on desktop
   * ------------------------------------------------------------------ */
  .category-filter-backdrop {
    display: none !important;
  }

  /* ------------------------------------------------------------------
   * 18. MOBILE STICKY BAR — Hidden on desktop
   * ------------------------------------------------------------------ */
  .mobile-category-sticky-bar {
    display: none !important;
  }

  /* ------------------------------------------------------------------
   * 19. CATEGORY MAIN CONTENT AREA
   * ------------------------------------------------------------------ */
  .category-main-content {
    min-width: 0 !important;
    flex: 1 !important;
  }

  /* ------------------------------------------------------------------
   * 20. 5-COLUMN BREAKPOINT for very wide screens (≥1440px)
   * ------------------------------------------------------------------ */
}

@media (min-width: 1440px) {
  #category-filtered-grid.picks-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* END ENTERPRISE DESKTOP PREMIUM UPGRADE */

/* Hide duplicate trust strip on desktop (mini-badges inside header already show these) */
@media (min-width: 1024px) {
  .category-hero-outer-container .category-trust-strip {
    display: none !important;
  }
}

/* Hide Featured Brands section from Category page on ALL viewports
   (desktop, tablet, mobile) — Products only, per user request 2026-06-30 */
#panel-category .premium-brands-section {
  display: none !important;
}

/* Remove Flash Sale page categories sidebar, filter tabs, and sort dropdown on desktop
   viewport (width >= 1024px), leaving mobile design untouched per user requirements */
@media (min-width: 1024px) {
  #panel-flash-sale .flash-sale-sidebar {
    display: none !important;
  }
  #panel-flash-sale .flash-sale-control-bar {
    display: none !important;
  }
  #panel-flash-sale .flash-sale-main-layout {
    grid-template-columns: 1fr !important;
  }
}