/* ==========================================================================
   VIP JEWELLERY - HAUTE JOAILLERIE DESIGN SYSTEM & INTEGRATION CSS
   - Light Mode: Parisian Ivory Elegance (#faf8f5, Warm Gold, Soft Obsidian)
   - Dark Mode: Apple-style Space Black Glass (#0c0c0e, Frosted Glass, Champagne Gold)
   - 100% Text Legibility: All text in Dark Mode is PURE WHITE (#ffffff) or LUXURY GOLD (#c5a059 / #d4af37)
   - Luxury Login, Register, Language, and Currency Switcher Badges
   - Desktop Sticky Header with Solid Background & Compact Search Bar
   - Desktop Hero Slider Height Fix (Zero Grey Gap)
   - Mobile Viewport Fix: Prevent Right Lean/Horizontal Overflow (#admin_bar reset & 100vw constraints)
   - Mobile Floating Island Dock (Centered, Detached from screen edges, Glassmorphism, Elevated Center Button)
   - Mobile Categories: Rectangular Rounded Cards with Tight Gutters
   - Mobile Header: Top Search Bar Hidden
   - Vendor Name (ps-product__vendor) Completely Hidden Globally
   - High-Contrast Luxury Back-To-Top Button
   - Bulletproof Theme Switcher Engine (Desktop & Mobile)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS & ROOTS
   -------------------------------------------------------------------------- */
:root {
  /* Light Mode (Ivory Elegance) */
  --bg-ivory: #faf8f5;
  --bg-surface: #ffffff;
  --bg-surface-glass: rgba(255, 255, 255, 0.88);
  --bg-warm-tint: #f5f1eb;
  --gold-accent: #c5a059;
  --gold-dark: #967432;
  --gold-soft: #ebdcc0;
  --text-main: #201f24;
  --text-body: #55535b;
  --text-muted: #8d8a94;
  --border-subtle: #ece5dc;
  --border-gold: rgba(197, 160, 89, 0.35);
  --font-serif: 'Cormorant Garamond', 'Alexandria', serif;
  --font-sans: 'Alexandria', 'Tajawal', 'Montserrat', sans-serif;
  --radius: 14px;
  --transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  /* Botble Theme Overrides */
  --color-1st: #c5a059 !important;
  --primary-color: #c5a059 !important;
  --color-2nd: #201f24 !important;
  --secondary-color: #201f24 !important;
  --button-text-color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   2. GLOBAL BODY & VIEWPORT RESETS (Desktop Luxury Layout Restored)
   -------------------------------------------------------------------------- */
html {
  overflow-x: hidden;
  width: 100%;
}

body {
  background-color: var(--bg-ivory) !important;
  color: var(--text-main) !important;
  font-family: var(--font-sans) !important;
  line-height: 1.65;
  transition: background-color 0.3s ease, color 0.3s ease;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Fix Botble Admin Bar forcing 960px width on Mobile / Tablet */
@media (max-width: 991px) {
  #admin_bar {
    display: none !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  body.show-admin-bar {
    margin-top: 0 !important;
  }
}

/* Hide reCAPTCHA error badge overflowing on mobile / desktop */
.grecaptcha-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -9999 !important;
}

/* Container Spacing & Dimensions - Original Luxury Proportions Restored */
.ps-container {
  max-width: 1650px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 1681px) {
  .ps-container {
    max-width: 1650px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

@media (max-width: 767px) {
  .ps-container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

.container {
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  box-sizing: border-box !important;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1230px !important;
  }
}

a {
  color: var(--text-main);
  transition: var(--transition);
}
a:hover {
  color: var(--gold-accent);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   3. HIDE VENDOR NAME GLOBALLY (ps-product__vendor)
   -------------------------------------------------------------------------- */
.ps-product__vendor,
a.ps-product__vendor,
p.ps-product__vendor,
span.ps-product__vendor {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --------------------------------------------------------------------------
   4. STORE CATEGORIES TEXT CONTRAST (Pure White on Dark Header)
   -------------------------------------------------------------------------- */
.menu--product-categories .menu__toggle,
.menu--product-categories .menu__toggle span,
.menu--product-categories .menu__toggle i,
.vip-categories-text {
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* --------------------------------------------------------------------------
   5. LUXURY LOGIN, REGISTER, LANGUAGE & CURRENCY SWITCHERS
   -------------------------------------------------------------------------- */
/* Desktop User Block (Login / Register) */
.ps-block--user-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: 12px !important;
}
[dir="rtl"] .ps-block--user-header {
  margin-left: 0 !important;
  margin-right: 12px !important;
}

.ps-block--user-header .ps-block__left i {
  font-size: 24px !important;
  color: #c5a059 !important;
}

.ps-block--user-header .ps-block__right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.ps-block--user-header .ps-block__right a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
}

/* Light Mode: Login / Register */
.ps-block--user-header .ps-block__right a[href*="login"] {
  background: rgba(197, 160, 89, 0.12) !important;
  color: #201f24 !important;
  border: 1.5px solid rgba(197, 160, 89, 0.5) !important;
}
.ps-block--user-header .ps-block__right a[href*="login"]:hover {
  background: #c5a059 !important;
  color: #ffffff !important;
  border-color: #c5a059 !important;
}

.ps-block--user-header .ps-block__right a[href*="register"] {
  background: linear-gradient(135deg, #c5a059 0%, #967432 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #c5a059 !important;
}
.ps-block--user-header .ps-block__right a[href*="register"]:hover {
  background: #201f24 !important;
  color: #ffffff !important;
  border-color: #201f24 !important;
}

/* Logged-in Customer Name & Logout */
.ps-block--user-header .customer-name {
  color: #c5a059 !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
}
.ps-block--user-header a[href*="logout"] {
  color: #d92d20 !important;
  font-size: 12px !important;
  border: 1px solid rgba(217, 45, 32, 0.3) !important;
  padding: 3px 10px !important;
  border-radius: 15px !important;
}

/* Navigation Extra Links (Sell On VIP Now, Track your order) */
.header .navigation .navigation__extra > li > a,
.navigation .navigation__extra > li > a,
.navigation .navigation__extra li a {
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
}

.header .navigation .navigation__extra > li > a:hover,
.navigation .navigation__extra > li > a:hover,
.navigation .navigation__extra li a:hover {
  color: #c5a059 !important;
  text-decoration: none !important;
}

.navigation__extra > li:after {
  background-color: rgba(255, 255, 255, 0.25) !important;
}

/* Luxury Dropdowns: Language & Currency Switchers */
.navigation__extra li .ps-dropdown,
.header__top .ps-dropdown {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
}

.navigation__extra li .ps-dropdown > a,
.header__top .ps-dropdown > a,
.vip-lang-toggle,
.vip-currency-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(197, 160, 89, 0.45) !important;
  color: #ffffff !important;
  background: rgba(197, 160, 89, 0.12) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

.vip-dropdown-arrow {
  font-size: 10px !important;
  color: #c5a059 !important;
  transition: transform 0.25s ease !important;
}

.navigation__extra li .ps-dropdown:hover > a,
.header__top .ps-dropdown:hover > a,
.ps-dropdown:hover .vip-lang-toggle,
.ps-dropdown:hover .vip-currency-toggle {
  border-color: #c5a059 !important;
  background: rgba(197, 160, 89, 0.25) !important;
  color: #ffffff !important;
}

.ps-dropdown:hover .vip-dropdown-arrow {
  transform: rotate(180deg) !important;
}

/* Luxury Dropdown Menu Panel */
.navigation__extra li .ps-dropdown .ps-dropdown-menu,
.ps-dropdown-menu.vip-lang-menu {
  display: none;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: auto !important;
  min-width: 140px !important;
  background-color: #14141a !important;
  border: 1px solid rgba(197, 160, 89, 0.4) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.65) !important;
  padding: 6px 0 !important;
  z-index: 10005 !important;
  list-style: none !important;
  margin: 0 !important;
}

[dir="rtl"] .navigation__extra li .ps-dropdown .ps-dropdown-menu,
[dir="rtl"] .ps-dropdown-menu.vip-lang-menu {
  right: auto !important;
  left: 0 !important;
}

.navigation__extra li .ps-dropdown:hover .ps-dropdown-menu,
.ps-dropdown:hover .vip-lang-menu {
  display: block !important;
  animation: vipDropdownFade 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.navigation__extra li .ps-dropdown .ps-dropdown-menu li,
.vip-lang-menu li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.navigation__extra li .ps-dropdown .ps-dropdown-menu li a,
.vip-lang-menu li a {
  color: #f5f1eb !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.navigation__extra li .ps-dropdown .ps-dropdown-menu li a:hover,
.vip-lang-menu li a:hover,
.vip-lang-menu li.active a {
  background: rgba(197, 160, 89, 0.22) !important;
  color: #c5a059 !important;
}

.vip-lang-active-check {
  font-size: 11px !important;
  color: #c5a059 !important;
}

/* --------------------------------------------------------------------------
   6. DESKTOP HEADER & STICKY HEADER FIXES
   -------------------------------------------------------------------------- */
.header--1,
.header {
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.2) !important;
}
.header .header__top {
  background-color: #ffffff !important;
}
.header .navigation {
  background-color: #201f24 !important;
}
.header .navigation .menu > li > a {
  color: #ffffff !important;
  font-weight: 500 !important;
}
.header .navigation .menu > li > a:hover {
  color: #c5a059 !important;
}

/* Desktop Sticky Header */
.header--1.header--sticky,
.header.header--sticky,
.header--1.header--sticky .header__top,
.header.header--sticky .header__top {
  background: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.25) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  transition: all 0.3s ease !important;
}

/* Compact Luxury Search Bar */
.header .ps-form--quick-search,
.header--1 .ps-form--quick-search {
  max-width: 480px !important;
  margin: 0 auto !important;
  border-radius: 30px !important;
  border: 1.5px solid rgba(197, 160, 89, 0.45) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  background: #ffffff !important;
}

.header .ps-form--quick-search:focus-within,
.header--1 .ps-form--quick-search:focus-within {
  border-color: #c5a059 !important;
  box-shadow: 0 4px 18px rgba(197, 160, 89, 0.25) !important;
}

.header .ps-form--quick-search .form-control,
.header--1 .ps-form--quick-search .form-control {
  height: 42px !important;
  font-size: 13.5px !important;
  background: transparent !important;
}

.header .ps-form--quick-search button,
.header--1 .ps-form--quick-search button {
  height: 42px !important;
  padding: 0 22px !important;
  background: linear-gradient(135deg, #c5a059 0%, #967432 100%) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
}

/* --------------------------------------------------------------------------
   7. DESKTOP HERO SLIDER: ZERO GREY GAP FIX
   -------------------------------------------------------------------------- */
#homepage-1 .ps-home-banner,
.ps-home-banner,
.ps-home-banner .ps-section__left,
.ps-home-banner .owl-slider,
.ps-home-banner .owl-carousel,
.ps-home-banner,
.ps-home-banner .ps-section__left,
.ps-home-banner .owl-slider,
.ps-home-banner .owl-carousel,
.ps-home-banner .owl-stage-outer,
.ps-home-banner .owl-stage,
.ps-home-banner .owl-item,
.ps-home-banner .ps-banner {
  height: 480px !important;
  max-height: 480px !important;
  min-height: 480px !important;
  background: transparent !important;
}

#homepage-1 .ps-home-banner .owl-slider .ps-banner img,
.ps-home-banner .owl-slider .ps-banner img,
.ps-home-banner .ps-banner img {
  height: 480px !important;
  max-height: 480px !important;
  min-height: 480px !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 991px) {
  #homepage-1 .ps-home-banner,
  .ps-home-banner,
  .ps-home-banner .ps-section__left,
  .ps-home-banner .owl-slider,
  .ps-home-banner .owl-carousel,
  .ps-home-banner .owl-stage-outer,
  .ps-home-banner .owl-stage,
  .ps-home-banner .owl-item,
  .ps-home-banner .ps-banner,
  #homepage-1 .ps-home-banner .owl-slider .ps-banner img,
  .ps-home-banner .owl-slider .ps-banner img,
  .ps-home-banner .ps-banner img {
    height: 360px !important;
    max-height: 360px !important;
    min-height: 360px !important;
  }
}

@media (max-width: 767px) {
  #homepage-1 .ps-home-banner,
  .ps-home-banner,
  .ps-home-banner .ps-section__left,
  .ps-home-banner .owl-slider,
  .ps-home-banner .owl-carousel,
  .ps-home-banner .owl-stage-outer,
  .ps-home-banner .owl-stage,
  .ps-home-banner .owl-item,
  .ps-home-banner .ps-banner,
  #homepage-1 .ps-home-banner .owl-slider .ps-banner img,
  .ps-home-banner .owl-slider .ps-banner img,
  .ps-home-banner .ps-banner img {
    height: 220px !important;
    max-height: 220px !important;
    min-height: 220px !important;
  }
}

/* Luxury Hero Slider Content Overlay & Typography */
.ps-home-banner .owl-item {
  display: flex !important;
  justify-content: center !important;
}

.ps-home-banner .ps-banner,
.ps-banner--luxury-slide {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  width: 100% !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

.ps-banner--luxury-slide picture,
.ps-home-banner .ps-banner picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.ps-banner--luxury-slide img,
.ps-home-banner .ps-banner img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.ps-banner--luxury-slide .ps-banner__content-luxury {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  background: linear-gradient(90deg, rgba(12, 12, 14, 0.85) 0%, rgba(12, 12, 14, 0.5) 50%, rgba(12, 12, 14, 0.05) 100%) !important;
  padding: 40px 70px !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

[dir="rtl"] .ps-banner--luxury-slide .ps-banner__content-luxury {
  background: linear-gradient(270deg, rgba(12, 12, 14, 0.88) 0%, rgba(12, 12, 14, 0.52) 50%, rgba(12, 12, 14, 0.05) 100%) !important;
  text-align: right !important;
}

.ps-banner--luxury-slide .ps-banner__inner-content {
  max-width: 650px !important;
  pointer-events: auto !important;
}

.ps-banner__badge-luxury {
  display: inline-block !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: #d4af37 !important;
  margin-bottom: 12px !important;
  background: rgba(197, 160, 89, 0.18) !important;
  padding: 5px 16px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(212, 175, 55, 0.45) !important;
  backdrop-filter: blur(8px) !important;
}

[dir="rtl"] .ps-banner__badge-luxury {
  letter-spacing: 0.5px !important;
}

.ps-banner__title-luxury {
  font-family: var(--font-serif) !important;
  font-size: 38px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 12px !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6) !important;
}

.ps-banner__desc-luxury {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #f5f1eb !important;
  margin-bottom: 22px !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5) !important;
}

.ps-btn--luxury-hero {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 30px !important;
  background: linear-gradient(135deg, #c5a059 0%, #967432 100%) !important;
  color: #ffffff !important;
  border-radius: 30px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 6px 20px rgba(197, 160, 89, 0.45) !important;
  border: none !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.ps-btn--luxury-hero:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(197, 160, 89, 0.65) !important;
  color: #ffffff !important;
}

.ps-banner__overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 5 !important;
}

@media (max-width: 991px) {
  .ps-banner--luxury-slide .ps-banner__content-luxury {
    padding: 24px 35px !important;
  }
  .ps-banner__title-luxury {
    font-size: 26px !important;
  }
  .ps-banner__desc-luxury {
    font-size: 13px !important;
    margin-bottom: 14px !important;
  }
  .ps-btn--luxury-hero {
    padding: 9px 20px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 767px) {
  .ps-banner--luxury-slide .ps-banner__content-luxury {
    padding: 12px 16px !important;
    background: linear-gradient(180deg, rgba(12, 12, 14, 0.1) 0%, rgba(12, 12, 14, 0.82) 100%) !important;
    align-items: flex-end !important;
  }
  .ps-banner--luxury-slide .ps-banner__inner-content {
    max-width: 100% !important;
  }
  .ps-banner__badge-luxury {
    font-size: 8px !important;
    padding: 2px 7px !important;
    margin-bottom: 3px !important;
  }
  .ps-banner__title-luxury {
    font-size: 15px !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
  }
  .ps-banner__desc-luxury {
    font-size: 10px !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .ps-btn--luxury-hero {
    padding: 5px 12px !important;
    font-size: 10.5px !important;
    gap: 5px !important;
  }
}

/* --------------------------------------------------------------------------
   8. MOBILE HEADER & CATEGORIES (Zero Shift, Zero Left Gap, Edge-to-Edge)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .header--mobile .ps-search--mobile,
  .ps-search--mobile {
    display: none !important;
  }
  .header--mobile {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(197, 160, 89, 0.25) !important;
  }
  .header--mobile .navigation--mobile {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 15px !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .header--mobile.header--sticky {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
  }
  .header--mobile.header--sticky .navigation--mobile {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px 15px !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    border-bottom: 1px solid rgba(197, 160, 89, 0.25) !important;
    z-index: 99999 !important;
  }

  .header--mobile .ps-logo img,
  .header--mobile.header--sticky .navigation--mobile .ps-logo img {
    height: 38px !important;
    width: auto !important;
    max-width: 130px !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* Compact Rectangular Categories (NOT Circular) */
  .ps-top-categories {
    padding: 15px 0 10px 0 !important;
  }
  .ps-top-categories .row {
    margin-left: -4px !important;
    margin-right: -4px !important;
  }
  .ps-top-categories .row > [class*="col-"] {
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin-bottom: 8px !important;
  }
  .ps-top-categories .ps-block--category {
    padding: 8px 4px !important;
    margin-bottom: 0 !important;
    border-radius: 12px !important;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(197, 160, 89, 0.18) !important;
    text-align: center;
  }
  .ps-top-categories .ps-block--category .ps-block__thumbnail {
    width: 150px !important;
    max-width: 100% !important;
    height: 150px !important;
    margin: 0 auto 8px auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #fbf9f6;
  }
  .ps-top-categories .ps-block--category .ps-block__thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }
  .ps-top-categories .ps-block--category p {
    font-size: 11px !important;
    line-height: 1.25 !important;
    margin-bottom: 0 !important;
    font-weight: 600 !important;
    color: #201f24;
  }
}

/* --------------------------------------------------------------------------
   9. FLOATING GLASS ISLAND MOBILE DOCK (Centered, No Right Leaning)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .vip-bottom-dock-wrapper {
    display: none !important;
  }
}

@media (max-width: 767px) {
  /* Extra bottom scroll clearance so floating dock and back-to-top button never cover content or action buttons */
  body {
    padding-bottom: 130px !important;
  }
  .ps-footer,
  #homepage-1,
  .ps-page,
  .ps-page--product,
  .ps-page--default {
    padding-bottom: 35px !important;
  }

  .vip-bottom-dock-wrapper {
    display: block !important;
    position: fixed !important;
    bottom: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 28px) !important;
    max-width: 440px !important;
    margin: 0 !important;
    z-index: 99980 !important;
    pointer-events: none;
  }

  .vip-bottom-dock {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 64px;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    border-radius: 36px !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(197, 160, 89, 0.25) !important;
    padding: 0 8px;
  }

  .vip-dock-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #63616a;
    text-decoration: none !important;
    position: relative;
    padding: 4px 2px;
    transition: all 0.25s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }

  .vip-dock-tab .vip-dock-icon {
    font-size: 19px;
    line-height: 1;
    position: relative;
    margin-bottom: 3px;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.25s ease;
  }

  .vip-dock-tab .vip-dock-text {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: color 0.25s ease;
  }

  .vip-dock-tab.active,
  .vip-dock-tab:hover {
    color: #967432 !important;
  }
  .vip-dock-tab.active .vip-dock-icon {
    transform: translateY(-2px) scale(1.1);
    color: #c5a059 !important;
  }

  /* Center Elevated Jewel Action Button (Shopping Cart) */
  .vip-dock-center-slot {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  .vip-dock-center-btn {
    position: relative;
    top: -14px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4af37 0%, #c5a059 50%, #967432 100%) !important;
    box-shadow: 0 6px 20px rgba(197, 160, 89, 0.5), 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    border: 3.5px solid #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    text-decoration: none !important;
    z-index: 10;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .vip-dock-center-btn:active {
    transform: scale(0.92);
  }

  .vip-center-btn-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  .vip-center-btn-inner i {
    font-size: 20px;
    color: #ffffff !important;
  }

  .vip-dock-center-badge {
    position: absolute !important;
    top: 1px !important;
    right: 3px !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 4px !important;
    border-radius: 10px !important;
    background: #e53935 !important;
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
    z-index: 25 !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    letter-spacing: 0 !important;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .vip-dock-center-badge i {
    font-style: normal !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: #ffffff !important;
    line-height: 1 !important;
    display: inline-block !important;
  }

  .vip-dock-center-badge.badge-pop {
    animation: vipBadgePop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  @keyframes vipBadgePop {
    0% { transform: scale(1); }
    50% { transform: scale(1.35); }
    100% { transform: scale(1); }
  }

  html[data-theme="dark"] .vip-dock-center-badge,
  body.dark-mode .vip-dock-center-badge {
    border-color: #1a1a24 !important;
    background: #e53935 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
  }

  html[data-theme="dark"] .vip-dock-center-badge i,
  body.dark-mode .vip-dock-center-badge i {
    color: #ffffff !important;
  }

  /* Gliding Indicator Pip */
  .vip-dock-indicator-pip {
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 20px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #c5a059, #ebdcc0);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
    pointer-events: none;
  }

  /* Theme Switch Tab Specifics in Dock */
  .vip-dock-theme-toggle .vip-theme-icon-wrap {
    position: relative;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .vip-dock-theme-toggle .vip-sun-icon {
    display: none;
    color: #f59e0b !important;
  }
  .vip-dock-theme-toggle .vip-moon-icon {
    display: inline-block;
    color: #63616a;
  }
}

/* --------------------------------------------------------------------------
   10. HIGH-CONTRAST LUXURY BACK-TO-TOP BUTTON
   -------------------------------------------------------------------------- */
#back2top {
  position: fixed !important;
  bottom: 86px !important;
  right: 18px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #c5a059 0%, #967432 100%) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(197, 160, 89, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99970 !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
}

#back2top.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
}

#back2top i {
  font-size: 18px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

#back2top:hover {
  background: #201f24 !important;
  border-color: #c5a059 !important;
  transform: translateY(-3px) scale(1.06) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38) !important;
}

@media (min-width: 768px) {
  #back2top {
    bottom: 35px !important;
    right: 35px !important;
  }
}

/* --------------------------------------------------------------------------
   11. DESKTOP THEME TOGGLE BUTTON
   -------------------------------------------------------------------------- */
.vip-theme-toggle-wrapper {
  display: inline-flex;
  align-items: center;
  margin-right: 12px;
}
[dir="rtl"] .vip-theme-toggle-wrapper {
  margin-right: 0;
  margin-left: 12px;
}

.vip-theme-toggle-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  outline: none !important;
}

.vip-toggle-track {
  width: 48px;
  height: 26px;
  background: #e4e1dc;
  border-radius: 20px;
  position: relative;
  border: 1px solid rgba(197, 160, 89, 0.4);
  transition: background 0.3s ease, border-color 0.3s ease;
  display: block;
}

.vip-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
}

.vip-toggle-thumb .sun-icon {
  font-size: 11px;
  color: #f59e0b;
  display: inline-block;
}
.vip-toggle-thumb .moon-icon {
  font-size: 11px;
  color: #c5a059;
  display: none;
}

/* --------------------------------------------------------------------------
   12. DARK MODE MASTER SUITE (Pure White & Gold Contrast Everywhere)
   -------------------------------------------------------------------------- */
html[data-theme="dark"],
html.dark-mode,
body.dark-mode {
  --bg-ivory: #0c0c0e !important;
  --bg-surface: #141418 !important;
  --bg-surface-glass: rgba(20, 20, 24, 0.88) !important;
  --bg-warm-tint: #1a1a20 !important;
  --gold-accent: #d4af37 !important;
  --gold-dark: #f0c952 !important;
  --text-main: #ffffff !important;
  --text-body: #f5f5f7 !important;
  --text-muted: #d1d1d6 !important;
  --border-subtle: rgba(255, 255, 255, 0.1) !important;
  --border-gold: rgba(212, 175, 55, 0.4) !important;
  background-color: #0c0c0e !important;
  color: #ffffff !important;
}

/* Global Elements in Dark Mode */
html[data-theme="dark"] body,
body.dark-mode {
  background-color: #0c0c0e !important;
  color: #ffffff !important;
}

/* Homepage and Sections Backgrounds */
html[data-theme="dark"] #homepage-1,
html[data-theme="dark"] .ps-page,
html[data-theme="dark"] .ps-page--product,
html[data-theme="dark"] .ps-page--single,
html[data-theme="dark"] .ps-layout--shop,
html[data-theme="dark"] .ps-section,
html[data-theme="dark"] .ps-section--gray,
html[data-theme="dark"] .ps-deal-of-day,
html[data-theme="dark"] .ps-home-categories,
html[data-theme="dark"] .ps-product-list,
html[data-theme="dark"] .ps-container,
html[data-theme="dark"] .container,
body.dark-mode #homepage-1,
body.dark-mode .ps-page,
body.dark-mode .ps-page--product,
body.dark-mode .ps-page--single,
body.dark-mode .ps-layout--shop,
body.dark-mode .ps-section,
body.dark-mode .ps-section--gray,
body.dark-mode .ps-deal-of-day,
body.dark-mode .ps-home-categories,
body.dark-mode .ps-product-list,
body.dark-mode .ps-container,
body.dark-mode .container {
  background-color: transparent !important;
  color: #ffffff !important;
}

/* Fix White Section Header Bars in Dark Mode (Images 2 & 5) */
html[data-theme="dark"] .ps-product-list .ps-section__header,
body.dark-mode .ps-product-list .ps-section__header,
html[data-theme="dark"] .ps-section__header,
body.dark-mode .ps-section__header,
html[data-theme="dark"] .ps-block--products-of-category .ps-block__header,
body.dark-mode .ps-block--products-of-category .ps-block__header {
  background-color: #141418 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px 12px 0 0 !important;
  color: #ffffff !important;
  padding: 14px 20px !important;
}

html[data-theme="dark"] .ps-product-list .ps-section__header h3,
body.dark-mode .ps-product-list .ps-section__header h3,
html[data-theme="dark"] .ps-section__header h3,
body.dark-mode .ps-section__header h3,
html[data-theme="dark"] .ps-section__header h4,
body.dark-mode .ps-section__header h4,
html[data-theme="dark"] .ps-block--products-of-category .ps-block__header h3,
body.dark-mode .ps-block--products-of-category .ps-block__header h3 {
  color: #ffffff !important;
  font-weight: 600 !important;
}

html[data-theme="dark"] .ps-product-list .ps-section__links li a,
body.dark-mode .ps-product-list .ps-section__links li a,
html[data-theme="dark"] .ps-section__links li a,
body.dark-mode .ps-section__links li a {
  color: #d4af37 !important;
  font-weight: 600 !important;
}

/* Fix Contact Form White Container in Dark Mode (Image 4) */
html[data-theme="dark"] .ps-contact-form,
body.dark-mode .ps-contact-form,
html[data-theme="dark"] .ps-form--contact-us,
body.dark-mode .ps-form--contact-us,
html[data-theme="dark"] .ps-section--contact-us,
body.dark-mode .ps-section--contact-us {
  background-color: #0c0c0e !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .ps-contact-form h3,
body.dark-mode .ps-contact-form h3 {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

/* Form Inputs in Dark Mode */
html[data-theme="dark"] .form-control,
body.dark-mode .form-control,
html[data-theme="dark"] input.form-control,
body.dark-mode input.form-control,
html[data-theme="dark"] textarea.form-control,
body.dark-mode textarea.form-control,
html[data-theme="dark"] select.form-control,
body.dark-mode select.form-control {
  background-color: #16161e !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 10px !important;
}

html[data-theme="dark"] .form-control::placeholder,
body.dark-mode .form-control::placeholder {
  color: #9999a5 !important;
}

html[data-theme="dark"] .form-control:focus,
body.dark-mode .form-control:focus {
  border-color: #d4af37 !important;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.3) !important;
  background-color: #1a1a24 !important;
}

/* Fix Breadcrumbs in Dark Mode (Image 3) */
html[data-theme="dark"] .ps-breadcrumb,
body.dark-mode .ps-breadcrumb {
  background-color: #101014 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .ps-breadcrumb .breadcrumb li,
body.dark-mode .ps-breadcrumb .breadcrumb li,
html[data-theme="dark"] .ps-breadcrumb .breadcrumb li a,
body.dark-mode .ps-breadcrumb .breadcrumb li a {
  color: #d4af37 !important;
  font-weight: 500 !important;
}
html[data-theme="dark"] .ps-breadcrumb .breadcrumb li:last-child,
body.dark-mode .ps-breadcrumb .breadcrumb li:last-child {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Headers in Dark Mode */
html[data-theme="dark"] .header,
html[data-theme="dark"] .header .header__top,
html[data-theme="dark"] .navigation,
body.dark-mode .header,
body.dark-mode .header .header__top,
body.dark-mode .navigation {
  background-color: #101014 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .header--sticky,
html[data-theme="dark"] .header--sticky .header__top,
body.dark-mode .header--sticky,
body.dark-mode .header--sticky .header__top {
  background: #121216 !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6) !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.35) !important;
}

/* Mobile Header in Dark Mode */
html[data-theme="dark"] .header--mobile,
body.dark-mode .header--mobile,
html[data-theme="dark"] .header--mobile .navigation--mobile,
body.dark-mode .header--mobile .navigation--mobile,
html[data-theme="dark"] .header--mobile.header--sticky,
body.dark-mode .header--mobile.header--sticky,
html[data-theme="dark"] .header--mobile.header--sticky .navigation--mobile,
body.dark-mode .header--mobile.header--sticky .navigation--mobile {
  background: #101014 !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.35) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"] .header--mobile .header__actions a i,
body.dark-mode .header--mobile .header__actions a i {
  color: #ffffff !important;
}

/* Typography in Dark Mode: ALL TEXT PURE WHITE OR GOLD */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] strong,
html[data-theme="dark"] b,
html[data-theme="dark"] .ps-section__title,
html[data-theme="dark"] .widget-title,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode strong,
body.dark-mode b,
body.dark-mode .ps-section__title,
body.dark-mode .widget-title {
  color: #ffffff !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] label,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
body.dark-mode p,
body.dark-mode li,
body.dark-mode label,
body.dark-mode td,
body.dark-mode th {
  color: #f5f5f7 !important;
}

html[data-theme="dark"] span:not(.badge):not(.vip-dock-center-badge),
body.dark-mode span:not(.badge):not(.vip-dock-center-badge) {
  color: #f5f5f7 !important;
}

/* Product Cards & Blocks in Dark Mode */
html[data-theme="dark"] .ps-product,
html[data-theme="dark"] .ps-product__container,
html[data-theme="dark"] .ps-product--inner,
html[data-theme="dark"] .ps-block--category,
html[data-theme="dark"] .ps-post,
body.dark-mode .ps-product,
body.dark-mode .ps-product__container,
body.dark-mode .ps-product--inner,
body.dark-mode .ps-block--category,
body.dark-mode .ps-post {
  background-color: #14141a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .ps-product .ps-product__title,
body.dark-mode .ps-product .ps-product__title,
html[data-theme="dark"] .ps-block--category p,
body.dark-mode .ps-block--category p {
  color: #ffffff !important;
}

html[data-theme="dark"] .ps-product .ps-product__price,
body.dark-mode .ps-product .ps-product__price {
  color: #d4af37 !important;
  font-weight: 700 !important;
}

html[data-theme="dark"] .ps-product .ps-product__price del,
body.dark-mode .ps-product .ps-product__price del {
  color: #888890 !important;
}

/* Dark Mode Login / Register Buttons in Header */
html[data-theme="dark"] .ps-block--user-header .ps-block__right a[href*="login"],
body.dark-mode .ps-block--user-header .ps-block__right a[href*="login"] {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(212, 175, 55, 0.6) !important;
}
html[data-theme="dark"] .ps-block--user-header .ps-block__right a[href*="login"]:hover,
body.dark-mode .ps-block--user-header .ps-block__right a[href*="login"]:hover {
  background: #d4af37 !important;
  color: #0c0c0e !important;
  border-color: #d4af37 !important;
}

html[data-theme="dark"] .ps-block--user-header .ps-block__right a[href*="register"],
body.dark-mode .ps-block--user-header .ps-block__right a[href*="register"] {
  background: linear-gradient(135deg, #d4af37 0%, #967432 100%) !important;
  color: #0c0c0e !important;
  border: 1.5px solid #d4af37 !important;
  font-weight: 700 !important;
}
html[data-theme="dark"] .ps-block--user-header .ps-block__right a[href*="register"]:hover,
body.dark-mode .ps-block--user-header .ps-block__right a[href*="register"]:hover {
  background: #ffffff !important;
  color: #0c0c0e !important;
  border-color: #ffffff !important;
}

/* Search Bar in Dark Mode */
html[data-theme="dark"] .ps-form--quick-search,
html[data-theme="dark"] .header .ps-form--quick-search,
html[data-theme="dark"] input.input-search-product,
body.dark-mode .ps-form--quick-search,
body.dark-mode .header .ps-form--quick-search,
body.dark-mode input.input-search-product {
  background-color: #1a1a22 !important;
  border-color: rgba(212, 175, 55, 0.45) !important;
  color: #ffffff !important;
}
html[data-theme="dark"] input.input-search-product::placeholder,
body.dark-mode input.input-search-product::placeholder {
  color: #8e8e93 !important;
}

/* Drawers & Modals in Dark Mode */
html[data-theme="dark"] .ps-panel--sidebar,
html[data-theme="dark"] .ps-panel__content,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .ps-popup__content,
body.dark-mode .ps-panel--sidebar,
body.dark-mode .ps-panel__content,
body.dark-mode .modal-content,
body.dark-mode .ps-popup__content {
  background-color: #141418 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .menu--mobile > li > a,
body.dark-mode .menu--mobile > li > a {
  color: #ffffff !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Mobile Bottom Dock in Dark Mode */
html[data-theme="dark"] .vip-bottom-dock,
body.dark-mode .vip-bottom-dock {
  background: rgba(18, 18, 22, 0.88) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .vip-dock-tab,
body.dark-mode .vip-dock-tab {
  color: #ffffff !important;
}
html[data-theme="dark"] .vip-dock-tab .vip-dock-text,
body.dark-mode .vip-dock-tab .vip-dock-text {
  color: #f5f5f7 !important;
}

html[data-theme="dark"] .vip-dock-tab.active,
html[data-theme="dark"] .vip-dock-tab:hover,
body.dark-mode .vip-dock-tab.active,
body.dark-mode .vip-dock-tab:hover {
  color: #d4af37 !important;
}

html[data-theme="dark"] .vip-dock-center-btn,
body.dark-mode .vip-dock-center-btn {
  border-color: #18181e !important;
  background: linear-gradient(135deg, #d4af37 0%, #a27b20 100%) !important;
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.45) !important;
}

/* Toggle Switch Visual State in Dark Mode */
html[data-theme="dark"] .vip-toggle-track,
body.dark-mode .vip-toggle-track {
  background: #1f1f26 !important;
  border-color: #d4af37 !important;
}

html[data-theme="dark"] .vip-toggle-thumb,
body.dark-mode .vip-toggle-thumb {
  transform: translateX(20px) !important;
  background: #0c0c0e !important;
}

html[data-theme="dark"] .vip-toggle-thumb .sun-icon,
body.dark-mode .vip-toggle-thumb .sun-icon {
  display: none !important;
}
html[data-theme="dark"] .vip-toggle-thumb .moon-icon,
body.dark-mode .vip-toggle-thumb .moon-icon {
  display: inline-block !important;
}

html[data-theme="dark"] .vip-dock-theme-toggle .vip-sun-icon,
body.dark-mode .vip-dock-theme-toggle .vip-sun-icon {
  display: inline-block !important;
}
html[data-theme="dark"] .vip-dock-theme-toggle .vip-moon-icon,
body.dark-mode .vip-dock-theme-toggle .vip-moon-icon {
  display: none !important;
}

/* Footer in Dark Mode */
html[data-theme="dark"] .ps-footer,
body.dark-mode .ps-footer {
  background-color: #08080a !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .ps-footer a,
body.dark-mode .ps-footer a {
  color: #ffffff !important;
}
html[data-theme="dark"] .ps-footer a:hover,
body.dark-mode .ps-footer a:hover {
  color: #d4af37 !important;
}
html[data-theme="dark"] .ps-footer__copyright,
body.dark-mode .ps-footer__copyright {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
  color: #d1d1d6 !important;
}

/* --------------------------------------------------------------------------
   13. OFFCANVAS DRAWER CLOSE BUTTONS & OVERLAY
   -------------------------------------------------------------------------- */
.ps-site-overlay {
  z-index: 99990 !important;
  background-color: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: opacity 0.35s ease, visibility 0.35s ease !important;
}

.ps-panel--sidebar {
  z-index: 100000 !important;
  box-shadow: -5px 0 35px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ps-panel--sidebar.active,
#cart-mobile.ps-panel--sidebar.active {
  z-index: 100005 !important;
}

[dir="rtl"] .ps-panel--sidebar {
  box-shadow: 5px 0 35px rgba(0, 0, 0, 0.3) !important;
}

.ps-panel--sidebar .ps-panel__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.25) !important;
}

.vip-panel-close-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(197, 160, 89, 0.15) !important;
  color: #201f24 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   14. PANEL HEADER & STABLE CLOSE BUTTON (No jump, No spinning)
   -------------------------------------------------------------------------- */
.ps-panel--sidebar .ps-panel__header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  background: var(--primary-color, #c5a059) !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.25) !important;
}

.ps-panel--sidebar .ps-panel__header h3 {
  margin: 0 !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

.ps-panel--sidebar .ps-btn--close,
.vip-panel-close-btn {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.15s ease !important;
  text-decoration: none !important;
  padding: 0 !important;
  border: none !important;
  margin: 0 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  z-index: 99 !important;
  -webkit-tap-highlight-color: transparent !important;
}

.ps-panel--sidebar .ps-btn--close::before,
.ps-panel--sidebar .ps-btn--close::after {
  display: none !important;
}

.ps-panel--sidebar .ps-btn--close:hover,
.ps-panel--sidebar .ps-btn--close:active,
.vip-panel-close-btn:hover,
.vip-panel-close-btn:active {
  background: rgba(255, 255, 255, 0.38) !important;
  color: #ffffff !important;
  transform: scale(0.96) !important;
}

.vip-panel-close-btn i,
.ps-panel--sidebar .ps-btn--close i {
  font-size: 18px !important;
  color: #ffffff !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* --------------------------------------------------------------------------
   15. MOBILE CART BOTTOM SHEET (Opens Bottom to Top with Smooth Luxury Animation)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #cart-mobile.ps-panel--sidebar {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 85vh !important;
    border-radius: 28px 28px 0 0 !important;
    box-shadow: 0 -12px 45px rgba(0, 0, 0, 0.55) !important;
    transform: translateY(100%) !important;
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 100005 !important;
    border: 1px solid rgba(212, 164, 55, 0.35) !important;
    border-bottom: none !important;
    background: var(--bg-surface, #ffffff) !important;
  }

  html[data-theme="dark"] #cart-mobile.ps-panel--sidebar,
  body.dark-mode #cart-mobile.ps-panel--sidebar {
    background: #141418 !important;
    box-shadow: 0 -12px 50px rgba(0, 0, 0, 0.8) !important;
  }

  #cart-mobile.ps-panel--sidebar.active {
    transform: translateY(0) !important;
    z-index: 100005 !important;
  }

  #cart-mobile .ps-panel__header {
    position: relative !important;
    border-radius: 28px 28px 0 0 !important;
    padding-top: 24px !important;
    padding-bottom: 14px !important;
    flex-shrink: 0 !important;
  }

  #cart-mobile .ps-panel__header::before {
    content: "" !important;
    position: absolute !important;
    top: 9px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 44px !important;
    height: 5px !important;
    background: rgba(255, 255, 255, 0.45) !important;
    border-radius: 10px !important;
  }

  #cart-mobile .navigation__content {
    max-height: calc(85vh - 75px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 15px 20px 30px !important;
  }
}

/* --------------------------------------------------------------------------
   16. MOBILE CATEGORIES SQUARE GRID CARDS ("مربعات مثل ماهنن")
   -------------------------------------------------------------------------- */
.vip-mobile-categories-wrapper {
  padding: 16px 14px 60px !important;
}

.vip-categories-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
  width: 100% !important;
}

.vip-category-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: var(--bg-surface, #ffffff) !important;
  border: 1px solid rgba(197, 160, 89, 0.35) !important;
  border-radius: 18px !important;
  padding: 10px !important;
  text-decoration: none !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
  position: relative !important;
  overflow: hidden !important;
}

html[data-theme="dark"] .vip-category-card,
body.dark-mode .vip-category-card {
  background: linear-gradient(145deg, #181820, #101014) !important;
  border-color: rgba(212, 164, 55, 0.3) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.vip-category-card:active,
.vip-category-card:hover {
  transform: translateY(-2px) scale(1.02) !important;
  border-color: #d4af37 !important;
  box-shadow: 0 6px 22px rgba(197, 160, 89, 0.3) !important;
  text-decoration: none !important;
}

.vip-cat-thumb {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  position: relative !important;
  background: #f4ede1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html[data-theme="dark"] .vip-cat-thumb,
body.dark-mode .vip-cat-thumb {
  background: #0a0a0d !important;
}

.vip-cat-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.35s ease !important;
}

.vip-category-card:hover .vip-cat-thumb img,
.vip-category-card:active .vip-cat-thumb img {
  transform: scale(1.08) !important;
}

.vip-cat-icon-fallback {
  font-size: 34px !important;
  color: #c5a059 !important;
}

.vip-cat-title {
  margin-top: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-main, #201f24) !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  line-height: 1.3 !important;
  padding: 2px 4px !important;
}

html[data-theme="dark"] .vip-cat-title,
body.dark-mode .vip-cat-title {
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   17. MOBILE BOTTOM PAGE SPACING & CLUB HIDE
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .ps-newsletter {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   14. SEARCH AUTOCOMPLETE RESULTS STYLING
   -------------------------------------------------------------------------- */
.ps-panel--search-result {
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(197, 160, 89, 0.3) !important;
  overflow: hidden !important;
  background: #ffffff !important;
}
html[data-theme="dark"] .ps-panel--search-result,
body.dark-mode .ps-panel--search-result {
  background: #181820 !important;
  border-color: rgba(212, 175, 55, 0.4) !important;
}

/* --------------------------------------------------------------------------
   18. VIP LUXURY FLOATING QUICK-ADD '+' BUTTON & CARD WISHLIST ACTIONS
   -------------------------------------------------------------------------- */
.ps-product__thumbnail {
  position: relative !important;
}

/* ==========================================================================
   VIP LUXURY PRODUCT CARD ARCHITECTURE (Fixed Actions & Top-Left Wishlist)
   ========================================================================== */

/* 1. Floating Wishlist Heart (ALWAYS Top-Left Corner on Desktop & Mobile) */
.vip-card-wishlist-btn {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(197, 160, 89, 0.28) !important;
  color: #6b5c4c !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 15 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
  text-decoration: none !important;
  font-size: 15px !important;
}

html[dir="rtl"] .vip-card-wishlist-btn,
body[dir="rtl"] .vip-card-wishlist-btn,
html[lang="ar"] .vip-card-wishlist-btn {
  left: 10px !important;
  right: auto !important;
}

.vip-card-wishlist-btn:hover,
.vip-card-wishlist-btn.active {
  background: #ffffff !important;
  color: #e11d48 !important;
  border-color: rgba(225, 29, 72, 0.35) !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.25) !important;
}

/* Dark Mode Heart */
html[data-theme="dark"] .vip-card-wishlist-btn,
body.dark-mode .vip-card-wishlist-btn {
  background: rgba(24, 24, 28, 0.92) !important;
  border: 1px solid rgba(223, 183, 108, 0.3) !important;
  color: #dfb76c !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .vip-card-wishlist-btn:hover,
html[data-theme="dark"] .vip-card-wishlist-btn.active,
body.dark-mode .vip-card-wishlist-btn:hover,
body.dark-mode .vip-card-wishlist-btn.active {
  background: #1f1f24 !important;
  color: #f43f5e !important;
  border-color: rgba(244, 63, 94, 0.4) !important;
  box-shadow: 0 4px 16px rgba(244, 63, 94, 0.4) !important;
}

/* Card Flex Structure & Alignment */
.owl-stage {
  display: flex !important;
}

.owl-item {
  display: flex !important;
  flex: 1 0 auto !important;
}

.ps-product {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding-bottom: 14px !important;
}

.ps-product__thumbnail {
  flex-shrink: 0 !important;
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}

.ps-product__thumbnail img {
  display: block !important;
  width: 100% !important;
}

.ps-product__container {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  justify-content: space-between !important;
  padding-top: 8px !important;
  width: 100% !important;
}

.ps-product__content {
  flex-grow: 1 !important;
  min-height: auto !important;
  padding-bottom: 0 !important;
}

.vip-actions-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 8px !important;
  margin-bottom: 2px !important;
}

/* 2. Unified VIP Fixed Actions Toolbar (Outside Image - Bottom of Card) */
.ps-product__actions.vip-card-actions,
.vip-card-actions {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 4px 6px !important;
  margin: 0 auto !important;
  list-style: none !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(197, 160, 89, 0.3) !important;
  border-radius: 30px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(197, 160, 89, 0.15) !important;
  z-index: 5 !important;
  opacity: 1 !important;
  visibility: visible !important;
  max-width: none !important;
  width: auto !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Stable Hover Micro-Interaction (Subtle Lift, No Jump) */
.ps-product:hover .vip-card-actions,
.ps-product:hover .ps-product__actions.vip-card-actions {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(197, 160, 89, 0.3) !important;
  border-color: rgba(197, 160, 89, 0.55) !important;
}

/* Dark Mode Toolbar */
html[data-theme="dark"] .vip-card-actions,
html[data-theme="dark"] .ps-product__actions.vip-card-actions,
body.dark-mode .vip-card-actions,
body.dark-mode .ps-product__actions.vip-card-actions {
  background: rgba(20, 20, 24, 0.94) !important;
  border: 1px solid rgba(223, 183, 108, 0.35) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 12px rgba(197, 160, 89, 0.2) !important;
}

/* 3. Action Buttons Inside Toolbar */
.ps-product__thumbnail .ps-product__actions li,
.ps-product__actions.vip-card-actions li {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.vip-card-actions .vip-action-btn,
.ps-product__thumbnail .ps-product__actions li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  color: #4a4238 !important;
  background: transparent !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
}

.vip-card-actions .vip-action-btn:hover,
.ps-product__thumbnail .ps-product__actions li a:hover {
  color: #c5a059 !important;
  background: rgba(197, 160, 89, 0.14) !important;
  transform: scale(1.1) !important;
}

/* Dark Mode Action Buttons */
html[data-theme="dark"] .vip-card-actions .vip-action-btn,
html[data-theme="dark"] .ps-product__thumbnail .ps-product__actions li a,
body.dark-mode .vip-card-actions .vip-action-btn,
body.dark-mode .ps-product__thumbnail .ps-product__actions li a {
  color: #dfb76c !important;
}

html[data-theme="dark"] .vip-card-actions .vip-action-btn:hover,
html[data-theme="dark"] .ps-product__thumbnail .ps-product__actions li a:hover,
body.dark-mode .vip-card-actions .vip-action-btn:hover,
body.dark-mode .ps-product__thumbnail .ps-product__actions li a:hover {
  color: #ffffff !important;
  background: rgba(223, 183, 108, 0.25) !important;
}

/* 4. Dedicated Quick-Add '+' Button inside Toolbar */
.vip-card-actions .vip-quick-add-btn,
.vip-quick-add-btn {
  position: static !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #c5a059 0%, #dfb76c 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 2px 8px rgba(197, 160, 89, 0.45) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
  text-decoration: none !important;
}

.vip-quick-add-btn svg,
.vip-quick-add-btn svg * {
  pointer-events: none !important;
}

.vip-card-actions .vip-quick-add-btn:hover,
.vip-quick-add-btn:hover {
  background: linear-gradient(135deg, #b38e48 0%, #d4a959 100%) !important;
  color: #ffffff !important;
  transform: scale(1.12) !important;
  box-shadow: 0 4px 14px rgba(197, 160, 89, 0.65) !important;
}

.vip-card-actions .vip-quick-add-btn:active,
.vip-quick-add-btn:active {
  transform: scale(0.92) !important;
}

/* Dark Mode '+' Button */
html[data-theme="dark"] .vip-card-actions .vip-quick-add-btn,
html[data-theme="dark"] .vip-quick-add-btn,
body.dark-mode .vip-card-actions .vip-quick-add-btn,
body.dark-mode .vip-quick-add-btn {
  background: linear-gradient(135deg, #c5a059 0%, #dfb76c 100%) !important;
  color: #0c0c0e !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 2px 10px rgba(223, 183, 108, 0.5) !important;
}

/* Out of Stock State */
.vip-quick-add-btn.is-out-of-stock {
  background: rgba(120, 120, 120, 0.16) !important;
  border: 1px solid rgba(150, 150, 150, 0.25) !important;
  color: #888888 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Loading State */
.vip-quick-add-btn.is-loading .vip-plus-icon,
.vip-quick-add-btn.button-loading .vip-plus-icon {
  display: none !important;
}

.vip-quick-add-btn.is-loading .vip-btn-spinner,
.vip-quick-add-btn.button-loading .vip-btn-spinner {
  display: inline-block !important;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: vip-spin 0.6s linear infinite;
}

@keyframes vip-spin {
  to { transform: rotate(360deg); }
}

/* Success Checkmark State */
.vip-quick-add-btn.is-success {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  transform: scale(1.15) !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.6) !important;
}

.vip-quick-add-btn.is-success .vip-plus-icon,
.vip-quick-add-btn.is-success .vip-btn-spinner {
  display: none !important;
}

.vip-quick-add-btn.is-success .vip-check-icon {
  display: inline-block !important;
}

/* 5. Mobile Responsiveness */
@media (max-width: 767px) {
  .vip-card-wishlist-btn {
    width: 28px !important;
    height: 28px !important;
    top: 8px !important;
    left: 8px !important;
    right: auto !important;
    font-size: 12px !important;
  }
  html[dir="rtl"] .vip-card-wishlist-btn,
  body[dir="rtl"] .vip-card-wishlist-btn,
  html[lang="ar"] .vip-card-wishlist-btn {
    left: 8px !important;
    right: auto !important;
  }
  .vip-actions-wrapper {
    margin-top: 6px !important;
    margin-bottom: 2px !important;
  }
  .ps-product__actions.vip-card-actions,
  .vip-card-actions {
    padding: 3px 5px !important;
    gap: 4px !important;
  }
  .vip-card-actions .vip-action-btn,
  .ps-product__thumbnail .ps-product__actions li a {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }
  .vip-card-actions .vip-quick-add-btn,
  .vip-quick-add-btn {
    width: 28px !important;
    height: 28px !important;
  }
  .vip-card-actions .vip-quick-add-btn svg,
  .vip-quick-add-btn svg {
    width: 13px !important;
    height: 13px !important;
  }
}

/* ==========================================================================
   ANTI-LAYOUT-SHIFT (CLS) PRODUCT CAROUSEL PRE-LOAD SYNCHRONIZATION
   Prevents products from appearing large during loading and shrinking later.
   ========================================================================== */
.owl-slider:not(.owl-loaded) {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: hidden !important;
  width: 100% !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
}

/* Default Wide Desktop: 7 items */
.owl-slider:not(.owl-loaded) > .ps-product,
.owl-slider:not(.owl-loaded) > div:not(.ps-banner) {
  flex: 0 0 14.285714% !important;
  max-width: 14.285714% !important;
  width: 14.285714% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 1679px) {
  .owl-slider:not(.owl-loaded) > .ps-product,
  .owl-slider:not(.owl-loaded) > div:not(.ps-banner) {
    flex: 0 0 16.666667% !important;
    max-width: 16.666667% !important;
    width: 16.666667% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 1199px) {
  .owl-slider:not(.owl-loaded) > .ps-product,
  .owl-slider:not(.owl-loaded) > div:not(.ps-banner) {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 991px) {
  .owl-slider:not(.owl-loaded) > .ps-product,
  .owl-slider:not(.owl-loaded) > div:not(.ps-banner) {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
    width: 33.333333% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 767px) {
  .owl-slider:not(.owl-loaded) > .ps-product,
  .owl-slider:not(.owl-loaded) > div:not(.ps-banner) {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    min-width: 0 !important;
  }
}

/* ==========================================================================
   20. VIP LUXURY SHOPPING TOOLBAR & FILTER DRAWER & LIST VIEW ENHANCEMENTS
   ========================================================================== */

/* --- 1. Mobile Filter Sidebar Drawer (Dark Mode & Structural Fix) --- */
.ps-layout--shop .ps-layout__left.active {
  z-index: 99999 !important;
}

.ps-layout--shop .ps-layout__left .ps-layout__left-container {
  max-width: 320px !important;
  width: 85% !important;
  box-shadow: 4px 0 32px rgba(0, 0, 0, 0.5) !important;
}

/* Prevent duplicate filter header if AJAX reloads form inside itself */
.ps-layout__left-content .ps-filter__header,
#products-filter-form .ps-filter__header,
.ps-filter__header + .ps-filter__header,
.ps-layout__left-container .ps-layout__left-container .ps-filter__header {
  display: none !important;
}

/* Dark Mode: Filter Drawer Container & Header */
html[data-theme="dark"] .ps-layout--shop .ps-layout__left .ps-layout__left-container,
body.dark-mode .ps-layout--shop .ps-layout__left .ps-layout__left-container {
  background: #141419 !important;
  color: #f5f5f7 !important;
  border-right: 1px solid rgba(197, 160, 89, 0.25) !important;
}

html[data-theme="dark"] .ps-layout--shop .ps-layout__left .ps-filter__header,
body.dark-mode .ps-layout--shop .ps-layout__left .ps-filter__header {
  background: #1b1b24 !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.22) !important;
  padding: 16px 20px !important;
}

html[data-theme="dark"] .ps-layout--shop .ps-layout__left .ps-filter__header h3,
body.dark-mode .ps-layout--shop .ps-layout__left .ps-filter__header h3 {
  color: #d4af37 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}

/* Close button 'X' in dark mode */
html[data-theme="dark"] .ps-layout--shop .ps-layout__left .ps-filter__header .ps-btn--close:before,
html[data-theme="dark"] .ps-layout--shop .ps-layout__left .ps-filter__header .ps-btn--close:after,
body.dark-mode .ps-layout--shop .ps-layout__left .ps-filter__header .ps-btn--close:before,
body.dark-mode .ps-layout--shop .ps-layout__left .ps-filter__header .ps-btn--close:after {
  background-color: #ffffff !important;
}

/* Dark Mode: Filter Widgets */
html[data-theme="dark"] .ps-layout--shop .ps-layout__left .widget_shop,
body.dark-mode .ps-layout--shop .ps-layout__left .widget_shop {
  background: transparent !important;
}

html[data-theme="dark"] .ps-layout--shop .ps-layout__left .widget_shop .widget-title,
body.dark-mode .ps-layout--shop .ps-layout__left .widget_shop .widget-title {
  color: #dfb76c !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
}

/* Dark Mode: Checkboxes & Labels */
html[data-theme="dark"] .ps-layout--shop .ps-layout__left .ps-checkbox label,
body.dark-mode .ps-layout--shop .ps-layout__left .ps-checkbox label,
html[data-theme="dark"] .ps-layout--shop .ps-layout__left .ps-checkbox label span,
body.dark-mode .ps-layout--shop .ps-layout__left .ps-checkbox label span {
  color: #e5e5eb !important;
  font-size: 13px !important;
}

html[data-theme="dark"] .ps-layout--shop .ps-layout__left .ps-checkbox input[type="checkbox"],
body.dark-mode .ps-layout--shop .ps-layout__left .ps-checkbox input[type="checkbox"] {
  accent-color: #d4af37 !important;
  border-color: rgba(197, 160, 89, 0.4) !important;
}

/* Dark Mode: Product Category links */
html[data-theme="dark"] .ps-layout--shop .ps-layout__left .widget-product-categories a,
body.dark-mode .ps-layout--shop .ps-layout__left .widget-product-categories a {
  color: #e5e5eb !important;
}

html[data-theme="dark"] .ps-layout--shop .ps-layout__left .widget-product-categories .current-menu-item > a,
body.dark-mode .ps-layout--shop .ps-layout__left .widget-product-categories .current-menu-item > a,
html[data-theme="dark"] .ps-layout--shop .ps-layout__left .widget-product-categories a:hover,
body.dark-mode .ps-layout--shop .ps-layout__left .widget-product-categories a:hover {
  color: #d4af37 !important;
  font-weight: 700 !important;
}

/* Dark Mode: Price Slider */
html[data-theme="dark"] .ps-layout--shop .ps-layout__left .noUi-target,
body.dark-mode .ps-layout--shop .ps-layout__left .noUi-target {
  background: #252530 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .ps-layout--shop .ps-layout__left .noUi-connect,
body.dark-mode .ps-layout--shop .ps-layout__left .noUi-connect {
  background: linear-gradient(90deg, #c5a059, #dfb76c) !important;
}

html[data-theme="dark"] .ps-layout--shop .ps-layout__left .noUi-handle,
body.dark-mode .ps-layout--shop .ps-layout__left .noUi-handle {
  background: #d4af37 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .ps-layout--shop .ps-layout__left .ps-slider__value,
body.dark-mode .ps-layout--shop .ps-layout__left .ps-slider__value {
  color: #dfb76c !important;
  font-weight: 700 !important;
}

/* Darkened background overlay */
.ps-layout--shop .ps-layout__left.active .screen-darken {
  background-color: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* --- 2. Filter Toolbar & Layout Switcher (.vip-products-toolbar) --- */
.vip-products-toolbar,
.ps-shopping > .bg-light {
  border-radius: 14px !important;
  transition: all 0.25s ease !important;
  padding: 10px 14px !important;
  margin-bottom: 20px !important;
}

/* Light Mode Toolbar */
.vip-products-toolbar,
.ps-shopping > .bg-light {
  background: #ffffff !important;
  border: 1px solid rgba(197, 160, 89, 0.22) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

/* Dark Mode Toolbar */
html[data-theme="dark"] .vip-products-toolbar,
html[data-theme="dark"] .ps-shopping > .bg-light,
body.dark-mode .vip-products-toolbar,
body.dark-mode .ps-shopping > .bg-light {
  background: #14141a !important;
  border: 1px solid rgba(197, 160, 89, 0.25) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
}

/* Filter Button */
#products-filter-sidebar,
.vip-filter-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: 1.5px solid #c5a059 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
}

/* Filter Button in Dark Mode */
html[data-theme="dark"] #products-filter-sidebar,
html[data-theme="dark"] .vip-filter-btn,
body.dark-mode #products-filter-sidebar,
body.dark-mode .vip-filter-btn {
  background: rgba(197, 160, 89, 0.12) !important;
  color: #dfb76c !important;
}
html[data-theme="dark"] #products-filter-sidebar i,
html[data-theme="dark"] .vip-filter-btn i,
body.dark-mode #products-filter-sidebar i,
body.dark-mode .vip-filter-btn i {
  color: #d4af37 !important;
}

/* Filter Button in Light Mode */
#products-filter-sidebar,
.vip-filter-btn {
  background: #fff8ee !important;
  color: #967432 !important;
}
#products-filter-sidebar i,
.vip-filter-btn i {
  color: #967432 !important;
}

/* Sort Select in Dark & Light Mode */
html[data-theme="dark"] .ps-shopping select.form-control,
body.dark-mode .ps-shopping select.form-control {
  background: #1c1c24 !important;
  color: #f5f5f7 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  height: 34px !important;
  font-size: 12px !important;
}

.ps-shopping select.form-control {
  border-radius: 8px !important;
  border: 1px solid #e0e0e0 !important;
  height: 34px !important;
  font-size: 12px !important;
}

/* Grid & List View Toggle Buttons */
.ps-shopping__view .products-layout {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.ps-shopping__view .products-layout li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

/* Dark Mode View Buttons */
html[data-theme="dark"] .ps-shopping__view .products-layout li a,
body.dark-mode .ps-shopping__view .products-layout li a {
  background: #1c1c24 !important;
  color: #888899 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Light Mode View Buttons */
.ps-shopping__view .products-layout li a {
  background: #f2f2f4 !important;
  color: #666677 !important;
  border: 1px solid #e0e0e0 !important;
}

/* Active View Button (Both Modes) */
.ps-shopping__view .products-layout li.active a,
html[data-theme="dark"] .ps-shopping__view .products-layout li.active a,
body.dark-mode .ps-shopping__view .products-layout li.active a {
  background: linear-gradient(135deg, #c5a059 0%, #967432 100%) !important;
  color: #ffffff !important;
  border-color: #c5a059 !important;
  box-shadow: 0 2px 8px rgba(197, 160, 89, 0.35) !important;
}

/* --- 3. Fix List View (.ps-product--wide) - Remove Giant Space & Optimize Proportions --- */
.ps-shopping-product {
  min-height: auto !important;
}

.ps-product.ps-product--wide {
  height: auto !important;
  min-height: auto !important;
  margin-bottom: 24px !important;
  padding: 16px !important;
  border-radius: 16px !important;
  display: flex !important;
  flex-direction: column !important;
}

.ps-product.ps-product--wide .ps-product__thumbnail {
  width: 100% !important;
  height: auto !important;
  max-height: 260px !important;
  margin-bottom: 10px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
}

html[data-theme="dark"] .ps-product.ps-product--wide .ps-product__thumbnail,
body.dark-mode .ps-product.ps-product--wide .ps-product__thumbnail {
  background: #1a1a22 !important;
}

.ps-product.ps-product--wide .ps-product__thumbnail img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 260px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

.ps-product.ps-product--wide .ps-product__container {
  flex-grow: 0 !important;
  justify-content: flex-start !important;
  padding: 4px 0 0 0 !important;
  width: 100% !important;
}

.ps-product.ps-product--wide .ps-product__content {
  flex-grow: 0 !important;
  min-height: auto !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
}

.ps-product.ps-product--wide .ps-product__title {
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  line-height: 1.35 !important;
}

.ps-product.ps-product--wide .ps-product__desc {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  margin-bottom: 10px !important;
  opacity: 0.85;
}

.ps-product.ps-product--wide .ps-product__shopping,
.ps-product--wide .ps-product__shopping {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  flex-basis: 30px !important;
}

.ps-product.ps-product--wide .vip-actions-wrapper {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  justify-content: flex-start !important;
}

@media (min-width: 768px) {
  .ps-product.ps-product--wide {
    flex-direction: row !important;
    align-items: center !important;
  }
  .ps-product.ps-product--wide .ps-product__thumbnail {
    flex-basis: 220px !important;
    max-width: 220px !important;
    min-width: 220px !important;
    height: 220px !important;
    margin-bottom: 0 !important;
    margin-right: 20px !important;
  }
  [dir="rtl"] .ps-product.ps-product--wide .ps-product__thumbnail {
    margin-right: 0 !important;
    margin-left: 20px !important;
  }
  .ps-product.ps-product--wide .ps-product__container {
    flex-grow: 1 !important;
  }
}

/* ==========================================================================
   21. VIP LUXURY SWATCHES, SELECT2 DROPDOWNS & MOBILE PRODUCT FLOATING BAR
   ========================================================================== */

/* --- 1. Product List Mode: Shopping Flex-Basis on Mobile --- */
@media (max-width: 767px) {
  .ps-product--wide .ps-product__shopping,
  .ps-product.ps-product--wide .ps-product__shopping {
    flex-basis: 30px !important;
  }
}

/* --- 2. Dark Mode: Size & Attribute Text Swatches (BY SIZE / .text-swatch) --- */
html[data-theme="dark"] .text-swatches-wrapper .text-swatch li span,
body.dark-mode .text-swatches-wrapper .text-swatch li span,
html[data-theme="dark"] .text-swatch li span,
body.dark-mode .text-swatch li span,
html[data-theme="dark"] .ps-layout__left .text-swatch li span,
body.dark-mode .ps-layout__left .text-swatch li span,
html[data-theme="dark"] .widget-filter-item[data-type="text"] .text-swatch li span,
body.dark-mode .widget-filter-item[data-type="text"] .text-swatch li span {
  background-color: #1a1a24 !important;
  color: #f5f5f7 !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .text-swatch li:hover span,
body.dark-mode .text-swatch li:hover span {
  border-color: #d4af37 !important;
  color: #dfb76c !important;
  background-color: rgba(197, 160, 89, 0.15) !important;
}

html[data-theme="dark"] .text-swatch li input[type="radio"]:checked ~ span,
html[data-theme="dark"] .text-swatch li input[type="checkbox"]:checked ~ span,
body.dark-mode .text-swatch li input[type="radio"]:checked ~ span,
body.dark-mode .text-swatch li input[type="checkbox"]:checked ~ span,
html[data-theme="dark"] .text-swatch li.selected span,
body.dark-mode .text-swatch li.selected span {
  background: linear-gradient(135deg, rgba(197, 160, 89, 0.3) 0%, rgba(150, 116, 50, 0.45) 100%) !important;
  border: 1.5px solid #d4af37 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(197, 160, 89, 0.35) !important;
}

html[data-theme="dark"] .text-swatch li input:checked ~ span:before,
body.dark-mode .text-swatch li input:checked ~ span:before {
  border-bottom-color: #c5a059 !important;
}

/* Also style visual swatches (BY COLOR) subtle border in dark mode */
html[data-theme="dark"] .visual-swatches-wrapper .color-swatch li span,
body.dark-mode .visual-swatches-wrapper .color-swatch li span {
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.2) !important;
}
html[data-theme="dark"] .visual-swatches-wrapper .color-swatch li.selected span,
html[data-theme="dark"] .visual-swatches-wrapper .color-swatch li input:checked ~ span,
body.dark-mode .visual-swatches-wrapper .color-swatch li.selected span,
body.dark-mode .visual-swatches-wrapper .color-swatch li input:checked ~ span {
  box-shadow: 0 0 0 2px #d4af37, 0 2px 8px rgba(212, 175, 55, 0.4) !important;
}

/* --- 3. Dark Mode: Select2 Dropdown & Sort Menus --- */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--single {
  background-color: #1a1a24 !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 8px !important;
  height: 34px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #f5f5f7 !important;
  line-height: 32px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding-left: 10px !important;
  padding-right: 24px !important;
}

[dir="rtl"] html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[dir="rtl"] body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 24px !important;
  padding-right: 10px !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow,
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 32px !important;
  right: 6px !important;
}

[dir="rtl"] html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow,
[dir="rtl"] body.dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow {
  right: auto !important;
  left: 6px !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b,
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #dfb76c transparent transparent transparent !important;
}

html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
body.dark-mode .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #dfb76c transparent !important;
}

/* Select2 Dropdown Overlay Menu */
html[data-theme="dark"] .select2-dropdown,
body.dark-mode .select2-dropdown {
  background: #161620 !important;
  border: 1px solid rgba(197, 160, 89, 0.35) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75) !important;
  overflow: hidden !important;
  z-index: 999999 !important;
}

html[data-theme="dark"] .select2-results__option,
body.dark-mode .select2-results__option {
  background: transparent !important;
  color: #e5e5eb !important;
  font-size: 13px !important;
  padding: 8px 14px !important;
  transition: all 0.15s ease !important;
}

html[data-theme="dark"] .select2-results__option--highlighted[aria-selected],
body.dark-mode .select2-results__option--highlighted[aria-selected],
html[data-theme="dark"] .select2-results__option:hover,
body.dark-mode .select2-results__option:hover {
  background: rgba(197, 160, 89, 0.2) !important;
  color: #dfb76c !important;
}

html[data-theme="dark"] .select2-results__option[aria-selected="true"],
body.dark-mode .select2-results__option[aria-selected="true"] {
  background: linear-gradient(135deg, rgba(197, 160, 89, 0.3) 0%, rgba(150, 116, 50, 0.4) 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

html[data-theme="dark"] .select2-search--dropdown .select2-search__field,
body.dark-mode .select2-search--dropdown .select2-search__field {
  background: #111118 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px !important;
}

/* --- 4. Mobile: Single Product Floating Bar (.navigation--mobile-product) Raised Above Bottom Dock --- */
@media (max-width: 767px) {
  nav.navigation--mobile-product,
  .navigation--mobile-product {
    position: fixed !important;
    bottom: 88px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 28px) !important;
    max-width: 440px !important;
    height: auto !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 5px !important;
    gap: 8px !important;
    z-index: 99970 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    border: none !important;
  }

  /* Buttons inside navigation--mobile-product */
  nav.navigation--mobile-product > .ps-btn,
  .navigation--mobile-product > * {
    flex: 1 1 50% !important;
    width: 50% !important;
    height: 42px !important;
    line-height: 42px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    border: none !important;
  }

  /* Dark Mode Floating Product Bar */
  html[data-theme="dark"] nav.navigation--mobile-product,
  html[data-theme="dark"] .navigation--mobile-product,
  body.dark-mode nav.navigation--mobile-product,
  body.dark-mode .navigation--mobile-product {
    background: rgba(18, 18, 24, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(197, 160, 89, 0.35) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65) !important;
  }

  html[data-theme="dark"] nav.navigation--mobile-product > button.ps-btn--black,
  html[data-theme="dark"] .navigation--mobile-product > button[name="add_to_cart"],
  body.dark-mode nav.navigation--mobile-product > button.ps-btn--black,
  body.dark-mode .navigation--mobile-product > button[name="add_to_cart"] {
    background: #232330 !important;
    color: #dfb76c !important;
    border: 1px solid rgba(197, 160, 89, 0.3) !important;
  }

  html[data-theme="dark"] nav.navigation--mobile-product > button[name="checkout"],
  body.dark-mode nav.navigation--mobile-product > button[name="checkout"] {
    background: linear-gradient(135deg, #c5a059 0%, #967432 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(197, 160, 89, 0.35) !important;
  }

  /* Light Mode Floating Product Bar */
  nav.navigation--mobile-product,
  .navigation--mobile-product {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(197, 160, 89, 0.25) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
  }

  nav.navigation--mobile-product > button.ps-btn--black,
  .navigation--mobile-product > button[name="add_to_cart"] {
    background: #1c1c24 !important;
    color: #ffffff !important;
  }

  nav.navigation--mobile-product > button[name="checkout"],
  .navigation--mobile-product > button[name="checkout"] {
    background: linear-gradient(135deg, #c5a059 0%, #967432 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(197, 160, 89, 0.3) !important;
  }

  /* Single Product Page Bottom Clearance so content is never covered */
  body#product-page,
  .ps-page--product {
    padding-bottom: 170px !important;
  }
}

/* ==========================================================================
   22. VIP PRODUCT PAGE ENHANCEMENTS: BACK ARROW & LUXURY SERVICE FEATURES
   ========================================================================== */

/* --- 1. Mobile Product Header: Back Arrow Visibility (Dark & Light Modes) --- */
.header--mobile-product .header__back {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

.header--mobile-product .header__back i {
  font-size: 22px !important;
  vertical-align: middle !important;
  transition: all 0.2s ease !important;
  margin-right: 10px !important;
}

[dir="rtl"] .header--mobile-product .header__back i {
  margin-right: 0 !important;
  margin-left: 10px !important;
}

/* Back Arrow in Dark Mode: Radiant Gold or Crisp White */
html[data-theme="dark"] .header--mobile-product .header__back,
body.dark-mode .header--mobile-product .header__back,
html[data-theme="dark"] .header--mobile-product .header__back strong,
body.dark-mode .header--mobile-product .header__back strong {
  color: #ffffff !important;
}

html[data-theme="dark"] .header--mobile-product .header__back i,
body.dark-mode .header--mobile-product .header__back i {
  color: #dfb76c !important;
}

html[data-theme="dark"] .header--mobile-product .header__back:hover i,
body.dark-mode .header--mobile-product .header__back:hover i,
html[data-theme="dark"] .header--mobile-product .header__back:hover strong,
body.dark-mode .header--mobile-product .header__back:hover strong {
  color: #ffffff !important;
}

/* Back Arrow in Light Mode */
.header--mobile-product .header__back,
.header--mobile-product .header__back strong {
  color: #141419 !important;
}

.header--mobile-product .header__back i {
  color: #967432 !important;
}

/* --- 2. Product Features Card (.widget_features / Services & Policies) --- */
.widget_features,
.widget_product.widget_features {
  border-radius: 16px !important;
  padding: 22px 20px !important;
  margin-bottom: 30px !important;
  transition: all 0.3s ease !important;
}

.widget_features p {
  position: relative !important;
  margin-bottom: 18px !important;
  line-height: 1.55 !important;
  font-size: 13px !important;
}

.widget_features p:last-child {
  margin-bottom: 0 !important;
}

.widget_features p i {
  font-size: 24px !important;
  line-height: 1 !important;
}

/* LTR layout for widget_features */
[dir="ltr"] .widget_features p,
html[lang="en"] .widget_features p {
  padding-left: 42px !important;
  padding-right: 0 !important;
  text-align: left !important;
}
[dir="ltr"] .widget_features p i,
html[lang="en"] .widget_features p i {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: 2px !important;
}

/* RTL layout for widget_features */
[dir="rtl"] .widget_features p,
html[lang="ar"] .widget_features p {
  padding-right: 42px !important;
  padding-left: 0 !important;
  text-align: right !important;
}
[dir="rtl"] .widget_features p i,
html[lang="ar"] .widget_features p i {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  top: 2px !important;
}

/* Dark Mode: Luxury Obsidian & Gold Service Card */
html[data-theme="dark"] .widget_features,
html[data-theme="dark"] .widget_product.widget_features,
body.dark-mode .widget_features,
body.dark-mode .widget_product.widget_features {
  background: #14141a !important;
  border: 1px solid rgba(197, 160, 89, 0.28) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .widget_features p,
body.dark-mode .widget_features p {
  color: #e5e5eb !important;
}

html[data-theme="dark"] .widget_features p i,
body.dark-mode .widget_features p i {
  color: #dfb76c !important;
}

/* Light Mode: Warm Ivory & Subtle Gold Service Card */
.widget_features,
.widget_product.widget_features {
  background: #fbf9f5 !important;
  border: 1px solid rgba(197, 160, 89, 0.22) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

.widget_features p {
  color: #2b2b36 !important;
}

.widget_features p i {
  color: #967432 !important;
}

/* ==========================================================================
   23. MOBILE DRAWER Z-INDEX HIERARCHY & PRODUCT ACTION BAR INTEGRATION
   ========================================================================== */
/* Ensure Mobile Cart & All Sidebar Drawers Always Open Over Product Action Bar & Bottom Dock */
#cart-mobile.ps-panel--sidebar,
.ps-panel--sidebar {
  z-index: 100000 !important;
}

#cart-mobile.ps-panel--sidebar.active,
.ps-panel--sidebar.active {
  z-index: 100005 !important;
}

/* When cart or any drawer is open, keep action buttons beneath and prevent interaction bleed */
body.panel-open .navigation--mobile-product,
.ps-site-overlay.active ~ .navigation--mobile-product,
#cart-mobile.active ~ .navigation--mobile-product {
  z-index: 99970 !important;
  pointer-events: none !important;
}

/* Ensure overlay stays behind active drawers but in front of floating action buttons */
.ps-site-overlay {
  z-index: 99990 !important;
  background-color: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}