:root {
  --cream: #f5f5dc;
  --cream-light: #faf9f6;
  --cream-dark: #e8e4d9;
  --brown-light: #d4a574;
  --brown: #c49a72;          /* Light brown — buttons */
  --brown-dark: #8b5a2b;
  --brown-darker: #5d4037;
  --gold: #c9a227;
  --white: #ffffff;
  --text-dark: #3e2723;
  --text-light: #6d4c41;
  --shadow: rgba(139, 90, 43, 0.1);
  --shadow-dark: rgba(139, 90, 43, 0.2);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================
   FLASH SALE SECTION
   ========================================== */
.flash-sale-section {
  position: relative;
  background: linear-gradient(135deg, #fff8f0 0%, #fcecdb 50%, #f7dfc4 100%);
  padding: 56px 0 52px;
  overflow: hidden;
}
.flash-sale-bg-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(201,162,39,0.16) 0%, transparent 60%),
              radial-gradient(ellipse at 15% 85%, rgba(232,199,102,0.22) 0%, transparent 55%);
  pointer-events: none;
}
.flash-sale-bg-glow::before,
.flash-sale-bg-glow::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow:
    40px 30px 0 -1px rgba(201,162,39,0.5),
    120px 80px 0 0px rgba(201,162,39,0.35),
    220px 20px 0 -1px rgba(201,162,39,0.45),
    320px 100px 0 0px rgba(201,162,39,0.3),
    420px 50px 0 -1px rgba(201,162,39,0.5),
    520px 110px 0 0px rgba(201,162,39,0.35),
    620px 35px 0 -1px rgba(201,162,39,0.4),
    720px 90px 0 0px rgba(201,162,39,0.3);
  opacity: 0.7;
  animation: sparkleDrift 6s ease-in-out infinite;
}
.flash-sale-bg-glow::after {
  top: 60%;
  box-shadow:
    60px 20px 0 -1px rgba(232,199,102,0.5),
    160px 60px 0 0px rgba(232,199,102,0.35),
    260px 10px 0 -1px rgba(232,199,102,0.4),
    360px 70px 0 0px rgba(232,199,102,0.3),
    460px 25px 0 -1px rgba(232,199,102,0.45),
    560px 80px 0 0px rgba(232,199,102,0.3);
  animation-delay: 1.5s;
}
@keyframes sparkleDrift {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50%       { opacity: 0.9; transform: translateY(-6px); }
}
.flash-sale-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

/* LEFT */
.flash-sale-left { flex: 1; min-width: 260px; }
.flash-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(120deg, var(--gold), #e8c766);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  padding: 6px 18px;
  border-radius: 30px;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(201,162,39,0.35);
  animation: flashPulse 1.8s ease-in-out infinite;
}
@keyframes flashPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(201,162,39,0.35), 0 0 0 0 rgba(201,162,39,0.4); }
  50%       { box-shadow: 0 4px 14px rgba(201,162,39,0.35), 0 0 0 9px rgba(201,162,39,0); }
}
.flash-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.25;
  margin: 0 0 12px;
}
.flash-title span {
  color: var(--brown-dark);
  background: linear-gradient(120deg, var(--gold), #b8911e);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.flash-desc {
  font-family: 'Poppins', sans-serif;
  color: var(--text-light);
  font-size: 15px;
  margin-bottom: 24px;
}
.btn-flash-shop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 28px;
  border-radius: 50px;
  text-decoration: none;
  transition: var(--transition);
  box-shadow: 0 4px 20px rgba(201,162,39,0.4);
}
.btn-flash-shop:hover {
  background: #b8911e;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(201,162,39,0.5);
}

/* RIGHT - Countdown */
.flash-sale-right {
  flex: 1;
  min-width: 280px;
  text-align: center;
}
.countdown-label {
  font-family: 'Poppins', sans-serif;
  color: var(--text-light);
  font-size: 14px;
  margin-bottom: 16px;
  letter-spacing: 0.5px;
}
.countdown-label i { color: var(--gold); }
.countdown-boxes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}
.countdown-box {
  position: relative;
  background: linear-gradient(165deg, #fffdf9 0%, #fcf1e0 100%);
  border: 1.5px solid rgba(201,162,39,0.25);
  border-radius: 18px;
  padding: 14px 20px;
  min-width: 80px;
  box-shadow: 0 6px 18px rgba(139,90,43,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
  transition: transform 0.15s ease;
  overflow: hidden;
}
.countdown-box::before {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.65), transparent);
  transform: skewX(-20deg);
  animation: shimmerSweep 3.2s ease-in-out infinite;
}
@keyframes shimmerSweep {
  0%   { left: -60%; }
  45%  { left: 130%; }
  100% { left: 130%; }
}
.countdown-box.tick {
  transform: scale(1.06);
  border-color: rgba(201,162,39,0.5);
}
.countdown-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--brown-dark);
  line-height: 1;
}
.countdown-unit {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  color: var(--text-light);
  margin-top: 4px;
  letter-spacing: 0.5px;
}
.countdown-sep {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-top: -10px;
  animation: sepBlink 1s step-start infinite;
}
@keyframes sepBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

/* Progress bar */
.flash-progress-wrap {
  background: rgba(201,162,39,0.15);
  border-radius: 30px;
  height: 8px;
  margin: 0 auto 12px;
  max-width: 320px;
  overflow: hidden;
  border: 1px solid rgba(201,162,39,0.2);
}
.flash-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), #f5c842);
  border-radius: 30px;
  width: 70%;
  transition: width 1s linear;
}
.flash-sold-text {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: var(--text-light);
}
.flash-sold-text strong { color: var(--brown-dark); }

/* Dark mode */
.dark-mode .flash-sale-section {
  background: linear-gradient(135deg, #1a0f0a 0%, #2d1810 40%, #5d3015 100%);
}
.dark-mode .flash-sale-bg-glow {
  background: radial-gradient(ellipse at 70% 50%, rgba(201,162,39,0.18) 0%, transparent 65%),
              radial-gradient(ellipse at 20% 80%, rgba(166,123,91,0.15) 0%, transparent 55%);
}
.dark-mode .flash-title,
.dark-mode .flash-desc,
.dark-mode .countdown-label,
.dark-mode .flash-sold-text {
  color: rgba(255,255,255,0.85);
}
.dark-mode .flash-title span {
  -webkit-text-fill-color: var(--gold);
}
.dark-mode .countdown-box {
  background: linear-gradient(165deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
  border-color: rgba(255,255,255,0.15);
}
.dark-mode .countdown-num { color: #fff; }
.dark-mode .countdown-unit { color: rgba(255,255,255,0.6); }

/* Mobile */
@media (max-width: 768px) {
  .flash-sale-section { padding: 36px 0; }
  .flash-sale-inner { flex-direction: column; text-align: center; gap: 28px; }
  .flash-title { font-size: 1.6rem; }
  .flash-badge { margin: 0 auto 14px; }
  .countdown-boxes { gap: 4px; flex-wrap: nowrap; width: 100%; justify-content: center; }
  .countdown-num { font-size: 1.4rem; }
  .countdown-box { padding: 7px 8px; min-width: 0; flex: 1; max-width: 68px; }
  .countdown-sep { font-size: 1.3rem; margin-top: -8px; }
  .countdown-unit { font-size: 9px; }
}

/* ==========================================
   NAVBAR ALWAYS ON TOP - ALL DEVICES
   Fixed position that works everywhere
   ========================================== */

/* Base navbar styling - FIXED on all devices */
.main-header,
#header,
header.main-header,
header#main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 99999 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 20px rgba(139, 90, 43, 0.1) !important;
    transform: none !important;
    -webkit-transform: none !important;
    transition: box-shadow 0.3s ease !important;
}

/* Scroll shadow enhancement */
.main-header.scrolled,
#header.scrolled {
    box-shadow: 0 4px 30px rgba(139, 90, 43, 0.2) !important;
}

/* Body padding for fixed header (navbar 70px + announcement bar 36px) */
body {
    padding-top: 106px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
}

/* When announcement bar is closed, reduce padding */
body:not(.has-announcement-bar) {
    padding-top: 70px !important;
}

/* Hero slider - NO margin-top needed since body has padding */
.hero-slider {
    margin-top: 0 !important;
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Ensure no parent creates new stacking context */
html, body {
    transform: none !important;
    perspective: none !important;
    filter: none !important;
    overflow-x: hidden !important;
}

/* Mobile specific */
@media (max-width: 992px) {
    body {
        padding-top: 60px !important;
    }

    .main-header,
    #header,
    header.main-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
    }
}

@media (max-width: 768px) {
    body {
        padding-top: 55px !important;
    }
}

@media (max-width: 480px) {
    body {
        padding-top: 50px !important;
    }
}

/* iOS Safari specific */
@supports (-webkit-touch-callout: none) {
    .main-header,
    #header,
    header.main-header {
        position: fixed !important;
        top: 0 !important;
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
    }

    body {
        padding-top: 70px !important;
    }
}

/* Android Chrome specific */
@supports not (-webkit-touch-callout: none) {
    .main-header,
    #header,
    header.main-header {
        position: fixed !important;
    }
}

/* Remove any conflicting sticky/fixed rules from other CSS */
[style*="position: sticky"],
[style*="position:fixed"][style*="top: 0"] {
    position: fixed !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  scroll-padding-top: 80px; /* Offset for sticky navbar */
}

body {
  font-family: "Poppins", sans-serif;
  background: var(--cream-light);
  color: var(--text-dark);
  line-height: 1.6;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Playfair Display", serif;
  font-weight: 600;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  overflow: visible !important;
}

/* Preloader */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--cream-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition:
    opacity 0.5s,
    visibility 0.5s;
}

.preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader {
  position: relative;
  width: 80px;
  height: 80px;
}

.loader .circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top-color: var(--brown);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loader .circle:nth-child(2) {
  width: 60px;
  height: 60px;
  top: 10px;
  left: 10px;
  border-top-color: var(--brown-light);
  animation-duration: 0.8s;
  animation-direction: reverse;
}

.loader .circle:nth-child(3) {
  width: 40px;
  height: 40px;
  top: 20px;
  left: 20px;
  border-top-color: var(--gold);
  animation-duration: 0.6s;
}

.loading-text {
  margin-top: 20px;
  color: var(--brown);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Header - Sticky Navbar */
.main-header {
  background: var(--white);
  position: sticky !important;
  position: -webkit-sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
  box-shadow: 0 2px 20px var(--shadow);
  transition: var(--transition);
}

/* Sticky position with specificity */
header.main-header,
header#main-header.main-header,
body header.main-header,
html body header.main-header {
  position: sticky !important;
  position: -webkit-sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
}

.header-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  gap: 20px;
  overflow: visible !important;
}

/* Equal spacing fix - ensure all sections have consistent gaps */
.header-wrapper > * {
  flex-shrink: 0;
}

.logo h1 {
  font-size: 35px;
  color: var(--brown-dark);
  font-weight: 700;
  letter-spacing: 1.5px;
}

.logo span {
  color: var(--brown-light);
  font-weight: 400;
}

/* Navigation */
.main-nav ul {
  display: flex;
  list-style: none;
  gap: 35px;
}

.nav-menu a {
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 500;
  font-size: 15px;
  transition: var(--transition);
  position: relative;
  padding: 5px 0;
}

.nav-menu a:hover {
  color: var(--brown);
}

.nav-menu a:visited {
  color: var(--text-dark);
  text-decoration: none;
}

.nav-menu a:visited:hover {
  color: var(--brown);
}

/* Logo link - no underline, no purple */
.logo a {
  text-decoration: none !important;
  color: inherit !important;
  border-bottom: none !important;
  outline: none;
}

.logo a:visited,
.logo a:link,
.logo a:hover,
.logo a:active {
  text-decoration: none !important;
  border-bottom: none !important;
  color: inherit !important;
}

.has-dropdown {
  position: relative;
  z-index: 10001 !important;
}

.has-dropdown > a i {
  font-size: 12px;
  margin-left: 5px;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  min-width: 220px;
  box-shadow: 0 10px 40px var(--shadow-dark);
  border-radius: 8px;
  padding: 15px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition);
  border-top: 3px solid var(--brown);
  z-index: 999999 !important;
}

.has-dropdown:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  z-index: 999999 !important;
}

.dropdown li {
  padding: 0;
}

.dropdown a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 25px;
  font-size: 14px;
  transition: var(--transition);
}

.dropdown a:hover {
  background: var(--cream-light);
  padding-left: 30px;
}

.dropdown i {
  color: var(--brown);
  width: 20px;
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Search icon mobile - consistent sizing */
.search-icon-mobile {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 20px;
  color: var(--text-dark);
  cursor: pointer;
  transition: var(--transition);
  border-radius: 50%;
}

.search-icon-mobile:hover {
  color: var(--brown);
  background: var(--cream-light);
}

.search-icon-mobile.active {
  color: var(--brown);
}

/* Search box styles moved to dedicated sections below */

.action-icon {
  position: relative;
  cursor: pointer;
  font-size: 20px;
  color: var(--text-dark);
  transition: var(--transition);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.action-icon:hover {
  color: var(--brown);
  background: var(--cream-light);
  transform: scale(1.05);
}

/* Ensure all icons in action-icon are same size */
.action-icon i,
.action-icon svg {
  font-size: 20px !important;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Language Switcher */
.lang-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--cream-light);
  border: 2px solid var(--cream-dark);
  border-radius: 20px;
  cursor: pointer;
  transition: var(--transition);
  font-size: 13px;
  font-weight: 600;
  color: var(--brown-dark);
  font-family: "Poppins", sans-serif;
  min-width: 60px;
  height: 40px;
}

.lang-switcher:hover {
  background: var(--brown);
  color: var(--white);
  border-color: var(--brown);
}

.lang-switcher i {
  font-size: 16px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lang-switcher span {
  font-weight: 700;
  font-size: 13px;
}

/* RTL Support for Urdu */
body[dir="rtl"] {
  direction: rtl;
}

body[dir="rtl"] .header-wrapper {
  flex-direction: row-reverse;
}

body[dir="rtl"] .main-nav ul {
  flex-direction: row-reverse;
}

body[dir="rtl"] .header-actions {
  flex-direction: row-reverse;
}

body[dir="rtl"] .hero-slider .slide-content {
  direction: rtl;
}

body[dir="rtl"] .features-banner .container {
  direction: rtl;
}

body[dir="rtl"] .feature-item {
  flex-direction: row-reverse;
  text-align: right;
}

body[dir="rtl"] .categories-grid {
  direction: rtl;
}

body[dir="rtl"] .products-grid {
  direction: rtl;
}

body[dir="rtl"] .product-card {
  direction: rtl;
  text-align: right;
}

body[dir="rtl"] .product-price {
  flex-direction: row-reverse;
}

body[dir="rtl"] .product-rating {
  flex-direction: row-reverse;
}

body[dir="rtl"] .shop-layout {
  direction: rtl;
}

body[dir="rtl"] .shop-toolbar {
  flex-direction: row-reverse;
}

body[dir="rtl"] .contact-wrapper {
  direction: rtl;
}

body[dir="rtl"] .contact-info-box {
  text-align: right;
}

body[dir="rtl"] .info-item {
  flex-direction: row-reverse;
  text-align: right;
}

body[dir="rtl"] .footer-grid {
  direction: rtl;
}

body[dir="rtl"] .footer-col {
  text-align: right;
}

body[dir="rtl"] .footer-col h4::after {
  left: auto;
  right: 0;
}

body[dir="rtl"] .newsletter-form {
  flex-direction: row-reverse;
}

body[dir="rtl"] .cart-sidebar {
  right: auto;
  left: -450px;
}

body[dir="rtl"] .cart-sidebar.active {
  right: auto;
  left: 0;
}

body[dir="rtl"] 

body[dir="rtl"] 

body[dir="rtl"] 

body[dir="rtl"] .checkout-content {
  direction: rtl;
}

body[dir="rtl"] .checkout-steps {
  flex-direction: row-reverse;
}

body[dir="rtl"] .checkout-buttons {
  flex-direction: row-reverse;
}

body[dir="rtl"] .form-row {
  direction: rtl;
}

body[dir="rtl"] .review-box {
  text-align: right;
}

body[dir="rtl"] .review-item {
  flex-direction: row-reverse;
}

body[dir="rtl"] .order-summary-final {
  text-align: right;
}

body[dir="rtl"] .summary-row {
  flex-direction: row-reverse;
}

body[dir="rtl"] .sidebar-item {
  flex-direction: row-reverse;
}

body[dir="rtl"] .sidebar-item-info {
  text-align: right;
}

body[dir="rtl"] .sidebar-summary {
  text-align: right;
}

body[dir="rtl"] .testimonials-slider {
  direction: rtl;
}

body[dir="rtl"] .testimonial-card {
  text-align: right;
}

body[dir="rtl"] .customer {
  flex-direction: row-reverse;
}

body[dir="rtl"] .social-platform {
  direction: rtl;
}

body[dir="rtl"] .platform-header {
  flex-direction: row-reverse;
}

body[dir="rtl"] .instagram-grid,
body[dir="rtl"] .facebook-grid,
body[dir="rtl"] .tiktok-grid {
  direction: rtl;
}

/* Mobile RTL */
@media (max-width: 992px) {
  body[dir="rtl"] .header-wrapper {
    flex-direction: row-reverse;
  }

  body[dir="rtl"] .header-actions {
    flex-direction: row-reverse;
  }

  body[dir="rtl"] .mobile-menu {
    left: auto;
    right: -100%;
  }

  body[dir="rtl"] .mobile-menu.active {
    left: auto;
    right: 0;
  }

  body[dir="rtl"] .close-mobile {
    right: auto;
    left: 20px;
  }

  body[dir="rtl"] .cart-sidebar {
    right: auto;
    left: -450px;
  }

  body[dir="rtl"] .cart-sidebar.active {
    right: auto;
    left: 0;
  }
}

.action-icon .badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--brown);
  color: var(--white);
  font-size: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border: 2px solid var(--white);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 20px;
  cursor: pointer;
  color: var(--brown-dark);
  border-radius: 50%;
  transition: var(--transition);
  z-index: 1001;
}

.mobile-menu-toggle:hover {
  background: var(--cream-light);
  color: var(--brown);
}

.mobile-menu-toggle i {
  font-size: 20px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 80%;
  max-width: 320px;
  height: 100vh;
  background: var(--white);
  z-index: 1002;
  padding: 80px 20px 30px;
  transition: all 0.3s ease;
  box-shadow: 5px 0 30px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
}

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

.mobile-menu ul {
  list-style: none;
  padding: 0;
}

.mobile-menu li {
  border-bottom: 1px solid var(--cream-dark);
  margin: 0;
}

.mobile-menu a {
  display: block;
  padding: 15px 0;
  color: var(--text-dark);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.mobile-menu a:hover {
  color: var(--brown);
  padding-left: 10px;
}

.close-mobile {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
  color: var(--brown);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream-light);
  border-radius: 50%;
}

/* Hero Slider */
.hero-slider {
  position: relative;
  height: 600px;
  overflow: hidden;
  z-index: 1;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1s ease,
    visibility 1s;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.slide.active {
  opacity: 1;
  visibility: visible;
}

.slide-content {
  text-align: center;
  color: var(--white);
  max-width: 700px;
  padding: 0 20px;
  z-index: 2;
}

.slide-content h2 {
  font-size: 56px;
  margin-bottom: 20px;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  animation: fadeInUp 1s ease;
}

.slide-content p {
  font-size: 20px;
  margin-bottom: 30px;
  opacity: 0.95;
  animation: fadeInUp 1s ease 0.2s both;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 40px;
  background: var(--brown);
  color: var(--white);
  text-decoration: none;
  border-radius: 30px;
  font-weight: 600;
  transition: var(--transition);
  border: 2px solid var(--brown);
  animation: fadeInUp 1s ease 0.4s both;
}

.btn-primary:hover {
  background: var(--brown-dark);
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.slider-dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: var(--transition);
}

.dot.active {
  background: var(--white);
  width: 30px;
  border-radius: 6px;
}

.slider-arrows {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 10;
}

.slider-arrows button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  font-size: 20px;
  cursor: pointer;
  transition: var(--transition);
  pointer-events: all;
}

.slider-arrows button:hover {
  background: var(--white);
  color: var(--brown);
}

/* Features Banner */
.features-banner {
  padding: 60px 0;
  background: var(--white);
  border-bottom: 1px solid var(--cream-dark);
}

.features-banner .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border-radius: 12px;
  transition: var(--transition);
}

.feature-item:hover {
  background: var(--cream-light);
  transform: translateY(-5px);
}

.feature-item .icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--brown-light), var(--brown));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 20px;
}

.feature-item h4 {
  font-size: 16px;
  color: var(--text-dark);
  margin-bottom: 5px;
}

.feature-item p {
  font-size: 13px;
  color: var(--text-light);
}

/* Section Headers */
.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-header .subtitle {
  display: inline-block;
  color: var(--brown);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 10px;
  position: relative;
}

.section-header .subtitle::before,
.section-header .subtitle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30px;
  height: 1px;
  background: var(--brown-light);
}

.section-header .subtitle::before {
  right: 100%;
  margin-right: 15px;
}

.section-header .subtitle::after {
  left: 100%;
  margin-left: 15px;
}

.section-header h2 {
  font-size: 42px;
  color: var(--brown-dark);
}

/* Categories Section */
.categories-section {
  padding: 80px 0;
  background: var(--cream-light);
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.category-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  height: 320px;
  box-shadow: 0 10px 30px var(--shadow);
}

.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: var(--transition);
}

.category-card:hover img {
  transform: scale(1.1);
}

.category-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, transparent 20%, rgba(93, 64, 55, 0.6));
  padding: 30px;
  color: var(--white);
  transition: var(--transition);
  border-radius: 0 0 20px 20px;
}

.category-card:hover .category-overlay {
  padding-bottom: 40px;
  background: linear-gradient(transparent, transparent 10%, rgba(93, 64, 55, 0.75));
}

.category-overlay h3 {
  font-size: 24px;
  margin-bottom: 5px;
}

.category-overlay span {
  font-size: 14px;
  opacity: 0.9;
}

/* Products Section */
.products-section {
  padding: 80px 0;
}

.products-section.bg-light {
  background: var(--cream);
}

.clear-search-btn {
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: var(--cream-dark);
    border: none;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-light);
    font-size: 12px;
    transition: var(--transition);
    z-index: 10;
    padding: 0;
}

.clear-search-btn:hover {
    background: #e74c3c;
    color: white;
}

.desktop-search .clear-search-btn {
    right: 38px;
}

.mobile-search-dropdown .clear-search-btn {
    right: 58px;
    top: 50%;
    transform: translateY(-50%);
}

/* Show clear button when search has text */
.search-has-text .clear-search-btn {
    display: flex !important;
}

/* Search Active State - sections hidden */
body.search-active #home,
body.search-active #categories,
body.search-active #new-arrivals,
body.search-active #best-sellers,
body.search-active .testimonials-section,
body.search-active .social-feed-section,
body.search-active #contact,
body.search-active .features-banner {
    display: none !important;
}

body.search-active #products {
    display: block !important;
}

body.search-active .shop-sidebar {
    display: none !important;
}

body.search-active .shop-main {
    grid-column: 1 / -1 !important;
}

body.search-active .shop-toolbar {
    display: none !important;
}

/* No results message */
.no-search-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    color: var(--text-light);
}

.no-search-results i {
    font-size: 64px;
    color: var(--brown-light);
    margin-bottom: 20px;
    display: block;
    opacity: 0.5;
}

.no-search-results h3 {
    font-size: 24px;
    color: var(--brown-dark);
    margin-bottom: 10px;
}

.no-search-results p {
    font-size: 16px;
    margin-bottom: 20px;
}

.no-search-results .btn-primary {
    margin-top: 10px;
}

.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px var(--shadow-dark);
}

.product-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: var(--brown);
  color: var(--white);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  z-index: 10;
}

.product-badge.sale {
  background: #e74c3c;
}
.product-badge.new {
  background: #27ae60;
}

/* When a product has more than one badge (e.g. New + Sale), show them
   side-by-side in a single row instead of stacking them vertically. */
.product-badges-stack {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 10;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
}
.product-badges-stack .product-badge {
  position: static;
  top: auto;
  left: auto;
  white-space: nowrap;
}

.product-wishlist {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 3px 10px var(--shadow);
  z-index: 10;
  /* Desktop: hidden until hover */
  opacity: 0;
  transform: translateY(-10px);
}

.product-card:hover .product-wishlist {
  opacity: 1;
  transform: translateY(0);
}

.product-wishlist:hover {
  background: var(--brown);
  color: var(--white);
}

.product-wishlist.active {
  background: #e74c3c;
  color: var(--white);
  opacity: 1;
  transform: translateY(0);
}

.product-image {
  position: relative;
  overflow: hidden;
  height: 280px;
  background: var(--cream-light);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: var(--transition);
}

.product-card:hover .product-image img {
  transform: scale(1.1);
}

/* Desktop: hover action buttons (Eye + Bag icons) */
.product-actions {
  position: absolute;
  bottom: -50px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 15px;
  transition: var(--transition);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}

.product-card:hover .product-actions {
  bottom: 0;
}

.action-btn {
  width: 45px;
  height: 45px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  border: none;
  font-size: 16px;
}

.action-btn:hover {
  background: var(--brown);
  color: var(--white);
  transform: translateY(-3px);
}

.product-info {
  padding: 20px;
  position: relative;
  z-index: 5;
  background: var(--white);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-category {
  font-size: 12px;
  color: var(--brown);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  font-weight: 500;
}

.product-info h3 {
  font-size: 18px;
  color: var(--text-dark);
  margin-bottom: 10px;
  font-weight: 600;
  min-height: 48px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  min-height: 20px;
}

.stars {
  color: var(--gold);
  font-size: 13px;
}

.rating-count {
  font-size: 12px;
  color: var(--text-light);
}

.product-price {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  min-height: 32px;
  flex-wrap: wrap;
}

.current-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--brown-dark);
}

.old-price {
  font-size: 16px;
  color: var(--text-light);
  text-decoration: line-through;
}

.discount {
  font-size: 12px;
  color: #e74c3c;
  font-weight: 600;
}

/* Products Grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
  align-items: stretch;
}

/* Shop Layout */
.shop-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
}

.shop-sidebar {
  position: sticky;
  top: 100px;
  height: fit-content;
}

.filter-widget {
  background: var(--white);
  padding: 25px;
  border-radius: 16px;
  margin-bottom: 25px;
  box-shadow: 0 5px 20px var(--shadow);
  border: 1px solid var(--cream-dark);
}

.filter-widget h4 {
  font-size: 18px;
  color: var(--brown-dark);
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--cream);
}

.filter-list {
  list-style: none;
}

.filter-list li {
  margin-bottom: 12px;
}

.filter-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-light);
  transition: var(--transition);
}

.filter-list label:hover {
  color: var(--brown);
}

.filter-list input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brown);
  cursor: pointer;
}

.price-range {
  padding: 10px 0;
}

.price-range input[type="range"] {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--cream-dark);
  outline: none;
  -webkit-appearance: none;
}

.price-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brown);
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(166, 123, 91, 0.3);
}

.price-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-light);
}

.rating-filter li {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: var(--transition);
}

.rating-filter li:hover {
  background: var(--cream-light);
}

/* Shop Toolbar */
.shop-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 3px 15px var(--shadow);
}

.results-count {
  font-size: 14px;
  color: var(--text-light);
}

.sort-dropdown select {
  padding: 10px 20px;
  border: 2px solid var(--cream-dark);
  border-radius: 8px;
  font-size: 14px;
  background: var(--white);
  cursor: pointer;
  outline: none;
  color: var(--text-dark);
}

/* Testimonials */
.testimonials-section {
  padding: 80px 0;
  background: var(--white);
}

.testimonials-slider {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.testimonial-card {
  background: var(--cream-light);
  padding: 40px;
  border-radius: 20px;
  text-align: center;
  transition: var(--transition);
  border: 1px solid var(--cream-dark);
}

.testimonial-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px var(--shadow);
}

.testimonial-card .stars {
  color: var(--gold);
  margin-bottom: 20px;
  font-size: 16px;
}

.testimonial-card p {
  font-size: 16px;
  color: var(--text-light);
  line-height: 1.8;
  margin-bottom: 25px;
  font-style: italic;
}

.customer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.customer img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--brown-light);
}

.customer h5 {
  font-size: 16px;
  color: var(--brown-dark);
  margin-bottom: 3px;
}

.customer span {
  font-size: 13px;
  color: var(--text-light);
}

/* Social Feed Section */
.social-feed-section {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--cream-light) 0%, var(--cream) 100%);
}

.social-feed-section .section-header {
  margin-bottom: 60px;
}

.social-platform {
  margin-bottom: 60px;
  background: var(--white);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 10px 40px var(--shadow);
  transition: var(--transition);
}

.social-platform:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 60px var(--shadow-dark);
}

.platform-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
  padding-bottom: 25px;
  border-bottom: 2px solid var(--cream);
}

.platform-icon {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: white;
  transition: var(--transition);
}

.instagram-header .platform-icon {
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
}

.facebook-header .platform-icon {
  background: linear-gradient(135deg, #1877f2, #0d5cb6);
}

.tiktok-header .platform-icon {
  background: linear-gradient(135deg, #000000, #25f4ee);
  position: relative;
}

.tiktok-header .platform-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #fe2c55, #25f4ee);
  border-radius: 20px;
  opacity: 0.8;
  mix-blend-mode: screen;
}

.platform-info {
  flex: 1;
}

.platform-info h3 {
  font-size: 24px;
  color: var(--brown-dark);
  margin-bottom: 5px;
}

.platform-info span {
  font-size: 14px;
  color: var(--text-light);
}

.btn-follow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--brown);
  color: white;
  text-decoration: none;
  border-radius: 30px;
  font-weight: 600;
  font-size: 14px;
  transition: var(--transition);
  border: 2px solid var(--brown);
}

.btn-follow:hover {
  background: transparent;
  color: var(--brown);
  transform: translateY(-2px);
}

.instagram-header .btn-follow {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743);
  border: none;
}

.instagram-header .btn-follow:hover {
  opacity: 0.9;
  color: white;
}

.facebook-header .btn-follow {
  background: #1877f2;
  border-color: #1877f2;
}

.facebook-header .btn-follow:hover {
  background: transparent;
  color: #1877f2;
}

.tiktok-header .btn-follow {
  background: #000000;
  border-color: #000000;
}

.tiktok-header .btn-follow:hover {
  background: transparent;
  color: #000000;
}

/* Instagram Grid */
.instagram-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
}

.insta-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 16px;
  cursor: pointer;
}

.insta-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.insta-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(166, 123, 91, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--transition);
}

.insta-overlay i {
  color: var(--white);
  font-size: 30px;
  transform: scale(0);
  transition: var(--transition);
}

.insta-item:hover img {
  transform: scale(1.1);
}
.insta-item:hover .insta-overlay {
  opacity: 1;
}
.insta-item:hover .insta-overlay i {
  transform: scale(1);
}

.facebook-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
}

.fb-item {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1/1;
  cursor: pointer;
  box-shadow: 0 5px 20px var(--shadow);
}

.fb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.fb-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 40%, rgba(24, 119, 242, 0.9));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 20px;
  opacity: 0;
  transition: var(--transition);
}

.fb-overlay i {
  color: white;
  font-size: 28px;
  margin-bottom: 10px;
  transform: translateY(20px);
  transition: var(--transition);
}

.fb-overlay span {
  color: white;
  font-size: 14px;
  font-weight: 600;
  transform: translateY(20px);
  transition: var(--transition);
  transition-delay: 0.1s;
}

.fb-item:hover img {
  transform: scale(1.1);
}
.fb-item:hover .fb-overlay {
  opacity: 1;
}
.fb-item:hover .fb-overlay i,
.fb-item:hover .fb-overlay span {
  transform: translateY(0);
}

.tiktok-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
}

.tiktok-item {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1/1;
  cursor: pointer;
  box-shadow: 0 5px 20px var(--shadow);
  background: #000;
}

.tiktok-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
  opacity: 0.9;
}

.tiktok-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.8));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.tiktok-overlay > i {
  position: absolute;
  top: 15px;
  left: 15px;
  color: #25f4ee;
  font-size: 24px;
  text-shadow: 2px 2px #fe2c55;
}

.play-btn {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  transition: var(--transition);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.play-btn:hover {
  background: #fe2c55;
  transform: scale(1.1);
}

.views {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.views i {
  color: #25f4ee;
}
.tiktok-item:hover img {
  transform: scale(1.05);
  opacity: 1;
}
.tiktok-item:hover .play-btn {
  background: #fe2c55;
}

/* Explore More Buttons */
.insta-item.explore-more,
.fb-item.explore-more,
.tiktok-item.explore-more {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  box-shadow: 0 5px 20px var(--shadow);
}

.explore-more-content {
  text-align: center;
  padding: 20px;
  z-index: 2;
}

.explore-more-content i {
  font-size: 36px;
  margin-bottom: 12px;
  display: block;
  transition: var(--transition);
}

.explore-more-content span {
  font-size: 15px;
  font-weight: 600;
  display: block;
  margin-bottom: 5px;
  transition: var(--transition);
}

.explore-more-content small {
  font-size: 12px;
  opacity: 0.9;
  display: block;
  transition: var(--transition);
}

.insta-item.explore-more {
  background: linear-gradient(
    135deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
}

.insta-item.explore-more .explore-more-content {
  color: white;
}

.insta-item.explore-more:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 40px rgba(220, 39, 67, 0.3);
}

.insta-item.explore-more:hover .explore-more-content i {
  transform: scale(1.2) rotate(10deg);
}

.fb-item.explore-more {
  background: linear-gradient(135deg, #1877f2 0%, #0d5cb6 100%);
}

.fb-item.explore-more .explore-more-content {
  color: white;
}

.fb-item.explore-more:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 40px rgba(24, 119, 242, 0.3);
}

.fb-item.explore-more:hover .explore-more-content i {
  transform: scale(1.2);
}

.tiktok-item.explore-more {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  border: 2px solid #25f4ee;
}

.tiktok-item.explore-more .explore-more-content {
  color: white;
}

.tiktok-item.explore-more .explore-more-content i {
  color: #25f4ee;
  text-shadow: 2px 2px #fe2c55;
}

.tiktok-item.explore-more:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 40px rgba(37, 244, 238, 0.2);
  border-color: #fe2c55;
}

.tiktok-item.explore-more:hover .explore-more-content i {
  transform: scale(1.2) rotate(-5deg);
  color: #fe2c55;
  text-shadow: 2px 2px #25f4ee;
}

/* Social Responsive */
@media (max-width: 1200px) {
  .instagram-grid,
  .facebook-grid,
  .tiktok-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .instagram-grid,
  .facebook-grid,
  .tiktok-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .fb-item,
  .tiktok-item,
  .insta-item {
    border-radius: 12px;
  }
  .explore-more-content i {
    font-size: 28px;
  }
  .explore-more-content span {
    font-size: 13px;
  }
  .explore-more-content small {
    font-size: 11px;
  }
  .platform-header {
    flex-wrap: wrap;
    gap: 15px;
  }
  .btn-follow {
    width: 100%;
    justify-content: center;
  }
  .social-platform {
    padding: 25px;
  }
  .platform-icon {
    width: 55px;
    height: 55px;
    font-size: 24px;
  }
  .platform-info h3 {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .instagram-grid,
  .facebook-grid,
  .tiktok-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .explore-more-content {
    padding: 15px;
  }
}

/* Contact Section */
.contact-section {
  padding: 100px 0;
  background:
    linear-gradient(rgba(93, 64, 55, 0.9), rgba(93, 64, 55, 0.9)),
    url("https://images.unsplash.com/photo-1560066984-138dadb4c035?w=1920")
      center/cover fixed;
}

.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.contact-info-box {
  color: var(--white);
}

.contact-info-box .subtitle {
  color: var(--gold);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 15px;
  display: block;
}

.contact-info-box h2 {
  font-size: 42px;
  margin-bottom: 20px;
}

.contact-info-box > p {
  font-size: 16px;
  opacity: 0.9;
  margin-bottom: 40px;
  line-height: 1.8;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.info-item i {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--gold);
}

.info-item h5 {
  font-size: 18px;
  margin-bottom: 5px;
}
.info-item p {
  opacity: 0.8;
  font-size: 15px;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(166, 123, 91, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(166, 123, 91, 0);
  }
}

.contact-form-box {
  background: var(--white);
  padding: 50px;
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

.contact-form-box .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.contact-form-box .form-group {
  margin-bottom: 20px;
}

.contact-form-box input,
.contact-form-box textarea {
  width: 100%;
  padding: 15px 20px;
  border: 2px solid var(--cream-dark);
  border-radius: 12px;
  font-size: 15px;
  transition: var(--transition);
  background: var(--cream-light);
}

.contact-form-box input:focus,
.contact-form-box textarea:focus {
  outline: none;
  border-color: var(--brown-light);
  background: var(--white);
}

/* Go To Top */
.go-to-top {
  position: fixed;
  bottom: 30px;
  right: 105px;
  width: 50px;
  height: 50px;
  background: var(--brown);
  color: var(--white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  box-shadow: 0 5px 20px rgba(166, 123, 91, 0.4);
  z-index: 999999;
  transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.7);
  pointer-events: none;
}

.go-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
}

.go-to-top.visible:hover {
  background: var(--brown-dark);
  transform: scale(1.1);
  box-shadow: 0 10px 30px rgba(166, 123, 91, 0.5);
}

@keyframes bounce-up {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

.go-to-top i {
  animation: bounce-up 2s infinite;
}

/* Footer */
.main-footer {
  background: var(--brown-darker);
  color: var(--cream);
  padding: 80px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 50px;
  margin-bottom: 60px;
}

.footer-col h4 {
  font-size: 20px;
  margin-bottom: 25px;
  color: var(--white);
  position: relative;
  padding-bottom: 15px;
}

.footer-col h4::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--brown-light);
}

.footer-col p {
  line-height: 1.8;
  opacity: 0.8;
  margin-bottom: 25px;
}

.payment-methods {
  display: flex;
  gap: 15px;
  font-size: 28px;
  opacity: 0.7;
}

.footer-col ul {
  list-style: none;
}
.footer-col li {
  margin-bottom: 12px;
}

.footer-col a {
  color: var(--cream);
  text-decoration: none;
  opacity: 0.8;
  transition: var(--transition);
  display: inline-block;
}

.footer-col a:hover {
  opacity: 1;
  color: var(--gold);
  padding-left: 5px;
}

.newsletter-form {
  display: flex;
  gap: 10px;
}

.newsletter-form input {
  flex: 1;
  padding: 15px 20px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-size: 14px;
}

.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.newsletter-form button {
  width: 50px;
  height: 50px;
  background: var(--brown-light);
  border: none;
  border-radius: 10px;
  color: var(--white);
  cursor: pointer;
  transition: var(--transition);
}

.newsletter-form button:hover {
  background: var(--gold);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 25px 0;
  text-align: center;
  opacity: 0.7;
  font-size: 14px;
}

.footer-bottom a {
  color: var(--gold);
  text-decoration: none;
}

/* WhatsApp Float */
.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: #25d366;
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
  z-index: 999;
  transition: var(--transition);
  text-decoration: none;
}

.whatsapp-float:hover {
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 15px 40px rgba(37, 211, 102, 0.5);
}

.whatsapp-float .tooltip {
  position: absolute;
  right: 70px;
  background: var(--brown-dark);
  color: var(--white);
  padding: 8px 15px;
  border-radius: 8px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

.whatsapp-float:hover .tooltip {
  opacity: 1;
  visibility: visible;
  right: 75px;
}

/* ============== FLOATING DARK MODE BUTTON ============== */
/* ── DESKTOP: slide-out tab from right edge ── */
.dark-mode-float {
  position: fixed;
  right: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 72px;
  height: 44px;
  background: #1a1a2e;
  border: 2px solid #8b5a2b;
  border-radius: 30px 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 8px 0 10px;
  cursor: pointer;
  z-index: 998;
  transition: right 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.3s ease;
  box-shadow: -3px 3px 15px rgba(0,0,0,0.25);
}

.dark-mode-float:hover,
.dark-mode-float.peek {
  right: 0px;
  transform: translateY(-50%);
  box-shadow: -5px 5px 20px rgba(0,0,0,0.35);
}

.dark-mode-float .dm-float-inner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #8b5a2b;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
  transition: transform 0.4s ease;
}

.dark-mode-float:hover .dm-float-inner {
  transform: rotate(20deg);
}

.dark-mode-float .dm-float-label {
  font-size: 10px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Light mode state */
.dark-mode-float.light-state {
  background: #fff8f0;
  border-color: #8b5a2b;
}

.dark-mode-float.light-state .dm-float-inner {
  background: #8b5a2b;
}

.dark-mode-float.light-state .dm-float-label {
  color: #5a3e28;
}

/* Scroll hidden — desktop only */
.dark-mode-float.scroll-hidden {
  right: -80px !important;
  opacity: 0;
  transition: right 0.2s ease, opacity 0.2s ease;
}

/* ── MOBILE FIX ──
   Touch devices don't support :hover.
   Button stays fully visible at right:0, label hidden to save space.
   scroll-hidden is blocked so it never disappears.
────────────────────────────────────────── */
@media (max-width: 768px) {
  .dark-mode-float {
    right: 0 !important;
    width: 44px !important;
    border-radius: 22px 0 0 22px !important;
    padding: 0 0 0 9px !important;
    gap: 0 !important;
  }
  .dark-mode-float .dm-float-label {
    display: none !important;
  }
  /* Never hide on scroll on mobile */
  .dark-mode-float.scroll-hidden {
    right: 0 !important;
    opacity: 1 !important;
  }
}

/* Cart Sidebar */
.cart-sidebar {
  position: fixed;
  top: 0;
  right: -450px;
  width: 420px;
  max-width: 90vw;
  height: 100vh;
  background: var(--white);
  box-shadow: -10px 0 40px var(--shadow-dark);
  z-index: 1002;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.cart-sidebar.active {
  right: 0;
}

.cart-header h3 {
  font-size: 20px;
  color: var(--brown-dark);
  display: flex;
  align-items: center;
  gap: 10px;
}

.close-cart {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-light);
  cursor: pointer;
  transition: var(--transition);
}

.close-cart:hover {
  color: var(--brown);
  transform: rotate(90deg);
}

.empty-cart i {
  font-size: 64px;
  opacity: 0.3;
  margin-bottom: 20px;
  display: block;
}

.empty-cart a {
  color: var(--brown);
  text-decoration: none;
  font-weight: 600;
  margin-top: 15px;
  display: inline-block;
}

.cart-item-details h4 {
  font-size: 16px;
  color: var(--text-dark);
  margin-bottom: 5px;
}

.quantity-control button:hover {
  background: var(--brown);
  color: var(--white);
  border-color: var(--brown);
}

.cart-item:hover 

.cart-total-row strong {
  color: var(--brown-dark);
  font-size: 24px;
}

/* Quick View Modal */
.quick-view-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1003;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  padding: 20px;
}

.quick-view-modal.active {
  opacity: 1;
  visibility: visible;
}

.quick-view-content {
  background: var(--white);
  border-radius: 20px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: modalSlide 0.3s ease;
}

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

.close-quick-view {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: var(--cream-light);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  transition: var(--transition);
  z-index: 10;
}

.close-quick-view:hover {
  background: var(--brown);
  color: var(--white);
}

.quick-view-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.quick-view-image {
  padding: 40px;
  background: var(--cream-light);
}
.quick-view-image img {
  width: 100%;
  border-radius: 12px;
}

.quick-view-details {
  padding: 40px;
}
.quick-view-details h2 {
  font-size: 28px;
  color: var(--brown-dark);
  margin-bottom: 15px;
}
.quick-view-details .price {
  font-size: 32px;
  color: var(--brown);
  font-weight: 700;
  margin-bottom: 20px;
}
.quick-view-details .description {
  color: var(--text-light);
  line-height: 1.8;
  margin-bottom: 25px;
}

/* Toast */
.toast-container {
  position: fixed;
  top: 100px;
  right: 30px;
  z-index: 1004;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.toast {
  background: var(--white);
  padding: 20px 25px;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 300px;
  animation: toastSlide 0.3s ease;
  border-left: 4px solid var(--brown);
}

.toast.success {
  border-left-color: #27ae60;
}
.toast.error {
  border-left-color: #e74c3c;
}
.toast i {
  font-size: 24px;
  color: var(--brown);
}
.toast.success i {
  color: #27ae60;
}
.toast.error i {
  color: #e74c3c;
}
.toast-content h4 {
  font-size: 16px;
  color: var(--text-dark);
  margin-bottom: 3px;
}
.toast-content p {
  font-size: 14px;
  color: var(--text-light);
}

@keyframes toastSlide {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  backdrop-filter: blur(5px);
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}

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

/* ==========================================
   MOBILE RESPONSIVENESS
   ========================================== */

@media (max-width: 992px) {
  .mobile-menu-toggle {
    display: block !important;
  }
  .main-nav {
    display: none !important;
  }
  .header-actions .search-box {
    display: none;
  }
  .logo h1 {
    font-size: 24px;
  }
  .categories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px;
  }
  .category-card {
    height: 200px;
  }
  .category-overlay h3 {
    font-size: 18px;
  }
  .shop-layout {
    grid-template-columns: 1fr !important;
  }
  .shop-sidebar {
    display: none;
    position: relative;
    top: 0;
    order: 2;
  }
  .shop-sidebar.mobile-active {
    display: block;
  }
  .shop-main {
    order: 1;
  }
  .contact-wrapper {
    grid-template-columns: 1fr !important;
    gap: 30px;
  }
  .contact-info-box {
    text-align: center;
  }
  .info-list {
    align-items: center;
  }
  .info-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px;
  }
  .quick-view-body {
    grid-template-columns: 1fr !important;
  }
  .quick-view-image {
    height: 250px;
    padding: 20px;
  }
  .quick-view-details {
    padding: 25px;
  }
}

/* ==========================================
   BEAUTIFUL ADD TO CART BUTTON
   Premium gradient with shine effect
   ========================================== */

/* Shine effect */
.add-to-cart::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.6s ease;
}

/* Hover state */
.add-to-cart:hover {
    background-position: 100% 0;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(166, 123, 91, 0.5);
    letter-spacing: 1px;
}

.add-to-cart:hover::before {
    left: 100%;
}

/* Active/Click state */
.add-to-cart:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 2px 10px rgba(166, 123, 91, 0.3);
}

/* Icon styling */
.add-to-cart i {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.add-to-cart:hover i {
    transform: translateX(3px);
}

/* Mobile Add to Cart */
@media (max-width: 768px) {
    .add-to-cart {
        padding: 12px 16px;
        font-size: 13px;
        border-radius: 12px;
        letter-spacing: 0.3px;
    }

    .add-to-cart i {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .add-to-cart {
        padding: 10px 12px;
        font-size: 12px;
        border-radius: 10px;
        gap: 6px;
    }

    .add-to-cart i {
        font-size: 12px;
    }
}

/* Touch device - no hover effects but keep styling */
@media (hover: none) {
    .add-to-cart {
        background: linear-gradient(135deg, var(--brown) 0%, var(--brown-dark) 100%);
    }

    .add-to-cart:active {
        transform: scale(0.97);
        box-shadow: 0 2px 10px rgba(166, 123, 91, 0.4);
    }
}

@media (max-width: 768px) {
  .top-bar {
    display: none;
  }
  .hero-slider {
    height: 400px !important;
  }
  .slide-content h2 {
    font-size: 28px !important;
  }
  .slide-content p {
    font-size: 16px !important;
  }
  .btn-primary {
    padding: 12px 25px;
    font-size: 14px;
  }
  .slider-arrows {
    display: none;
  }
  .slider-dots {
    bottom: 15px;
  }
  .dot {
    width: 10px;
    height: 10px;
  }
  .dot.active {
    width: 25px;
  }
  .features-banner .container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px;
  }
  .feature-item {
    flex-direction: column;
    text-align: center;
    padding: 15px;
  }
  .feature-item .icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px;
  }
  .product-card {
    border-radius: 12px;
    height: 100%;
  }
  .product-image {
    height: 180px;
  }
  .product-info {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .product-info h3 {
    font-size: 14px;
    min-height: 38px;
  }
  .product-price {
    min-height: 26px;
    margin-bottom: 10px;
  }
  .current-price {
    font-size: 16px;
  }
  .add-to-cart {
    padding: 12px 8px;
    font-size: 12px;
    min-height: 44px;
    margin-top: auto;
  }
  .testimonials-slider {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .testimonial-card {
    padding: 25px;
  }
  .section-header h2 {
    font-size: 28px !important;
  }
  .section-header .subtitle {
    font-size: 12px;
  }
  .shop-toolbar {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  .contact-form-box {
    padding: 25px;
  }
  .contact-form-box .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .toast-container {
    top: 80px;
    right: 15px;
    left: 15px;
  }
  .toast {
    min-width: auto;
    width: 100%;
  }
  .go-to-top {
    bottom: 28px;
    right: 100px;
    width: 45px;
    height: 45px;
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .hero-slider {
    height: 350px !important;
  }
  .slide-content h2 {
    font-size: 24px !important;
  }
  .slide-content p {
    font-size: 14px !important;
  }
  .categories-grid,
  .features-banner .container,
  .testimonials-slider {
    grid-template-columns: 1fr !important;
  }
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
  .category-card {
    height: 180px;
  }
  .product-image {
    height: 160px;
  }
  .product-info {
    padding: 10px;
  }
  .product-info h3 {
    font-size: 13px;
  }
  .current-price {
    font-size: 14px;
  }
  .add-to-cart {
    font-size: 11px;
    padding: 10px 6px;
    letter-spacing: 0;
    min-height: 44px;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  .footer-col h4::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .payment-methods {
    justify-content: center;
  }
  .newsletter-form {
    flex-direction: column;
  }
  .cart-sidebar {
    width: 100% !important;
    max-width: 100%;
    right: -100% !important;
  }

  .quick-view-content {
    max-width: 95%;
    margin: 10px;
  }
  .quick-view-image {
    height: 200px;
  }
  .quick-view-details h2 {
    font-size: 20px;
  }
  .quick-view-details .price {
    font-size: 22px;
  }
  body {
    font-size: 14px;
  }
  .container {
    padding: 0 15px;
  }
  section {
    padding: 50px 0 !important;
  }
}

/* Prevent horizontal scroll */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Filter toggle button for mobile */
.filter-toggle-btn {
  display: none;
}

@media (max-width: 992px) {
  .filter-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--brown);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 10px;
  }
}

/* ==========================================
   CHECKOUT MODAL
   ========================================== */
.checkout-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  padding: 20px;
}

.checkout-modal.active {
  opacity: 1;
  visibility: visible;
}

.checkout-content {
  background: var(--white);
  border-radius: 20px;
  max-width: 1000px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 320px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.4s ease;
}

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

.close-checkout {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: var(--cream-light);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-light);
  transition: all 0.3s ease;
  z-index: 10;
}

.close-checkout:hover {
  background: var(--brown);
  color: var(--white);
  transform: rotate(90deg);
}

.checkout-header {
  grid-column: 1 / -1;
  padding: 30px;
  border-bottom: 2px solid var(--cream);
  background: linear-gradient(135deg, var(--cream-light) 0%, var(--white) 100%);
  position: sticky;
  top: 0;
  z-index: 10;
  border-radius: 20px 20px 0 0;
}

.checkout-header h2 {
  font-size: 24px;
  color: var(--brown-dark);
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.checkout-header h2 i {
  color: #27ae60;
}

.checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.step.active {
  opacity: 1;
}
.step.completed {
  opacity: 1;
}
.step.completed .step-number {
  background: #27ae60;
  color: white;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cream-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--text-dark);
  transition: all 0.3s ease;
}

.step.active .step-number {
  background: var(--brown);
  color: var(--white);
  transform: scale(1.1);
}

.step span {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-light);
}

.step-line {
  width: 60px;
  height: 2px;
  background: var(--cream-dark);
  position: relative;
}

.step-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: var(--brown);
  transition: width 0.3s ease;
}

.step.completed + .step-line::after {
  width: 100%;
}

.checkout-body {
  padding: 30px;
}

.checkout-step-content {
  display: none;
}

.checkout-step-content.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

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

.checkout-step-content h3 {
  font-size: 20px;
  color: var(--brown-dark);
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--cream);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--cream-dark);
  border-radius: 12px;
  font-size: 15px;
  transition: var(--transition);
  background: var(--cream-light);
  color: var(--text-dark);
  font-family: "Poppins", sans-serif;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--brown-light);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(166, 123, 91, 0.1);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}

.payment-method-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border: 2px solid var(--cream-dark);
  border-radius: 16px;
  cursor: pointer;
  transition: var(--transition);
  background: var(--white);
  position: relative;
}

.payment-method-card:hover {
  border-color: var(--brown-light);
  transform: translateY(-2px);
  box-shadow: 0 5px 20px var(--shadow);
}

.payment-method-card.active {
  border-color: var(--brown);
  background: linear-gradient(135deg, var(--cream-light) 0%, var(--white) 100%);
}

.payment-radio {
  position: relative;
}
.payment-radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-custom {
  width: 24px;
  height: 24px;
  border: 2px solid var(--cream-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.payment-method-card.active .radio-custom {
  border-color: var(--brown);
  background: var(--brown);
}

.radio-custom::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--white);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.2s ease;
}

.payment-method-card.active .radio-custom::after {
  transform: scale(1);
}

.payment-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--cream) 0%, var(--cream-light) 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--brown);
}

.payment-method-card.active .payment-icon {
  background: linear-gradient(135deg, var(--brown) 0%, var(--brown-dark) 100%);
  color: var(--white);
}

.payment-details h4 {
  font-size: 16px;
  color: var(--text-dark);
  margin-bottom: 4px;
}
.payment-details p {
  font-size: 13px;
  color: var(--text-light);
}

.payment-badge {
  display: inline-block;
  background: #27ae60;
  color: var(--white);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 5px;
}

.payment-check {
  margin-left: auto;
  color: var(--brown);
  font-size: 24px;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;
}

.payment-method-card.active .payment-check {
  opacity: 1;
  transform: scale(1);
}

.cod-info-box {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  padding: 25px;
  border-radius: 16px;
  border: 2px solid #a5d6a7;
}

.cod-info-box h4 {
  color: #2e7d32;
  font-size: 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cod-info-box p {
  color: #1b5e20;
  font-size: 14px;
  margin-bottom: 5px;
}

.checkout-buttons {
  display: flex;
  gap: 15px;
  margin-top: 30px;
}

.btn-continue-checkout,
.btn-place-order {
  flex: 1;
  padding: 16px 30px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-continue-checkout {
  background: var(--brown);
  color: var(--white);
}
.btn-continue-checkout:hover {
  background: var(--brown-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(166, 123, 91, 0.3);
}

.btn-place-order {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  color: var(--white);
}
.btn-place-order:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(39, 174, 96, 0.3);
}

.btn-back {
  padding: 16px 25px;
  background: transparent;
  border: 2px solid var(--cream-dark);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-light);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-back:hover {
  border-color: var(--brown);
  color: var(--brown);
}

.order-review-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.review-box {
  background: var(--cream-light);
  padding: 25px;
  border-radius: 16px;
  border: 2px solid var(--cream-dark);
  position: relative;
}

.review-box h4 {
  font-size: 16px;
  color: var(--brown-dark);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-box h4 i {
  color: var(--brown);
}
.review-box p {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 5px;
}
.review-name {
  font-weight: 600;
  color: var(--text-dark) !important;
  font-size: 16px !important;
}

.btn-edit {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 8px 16px;
  background: var(--white);
  border: 2px solid var(--cream-dark);
  border-radius: 8px;
  font-size: 13px;
  color: var(--brown);
  cursor: pointer;
  transition: var(--transition);
}

.btn-edit:hover {
  border-color: var(--brown);
  background: var(--brown);
  color: var(--white);
}

.order-items-box {
  max-height: 250px;
  overflow-y: auto;
}

.review-item {
  display: flex;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid var(--cream-dark);
}

.review-item:last-child {
  border-bottom: none;
}
.review-item img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  object-fit: cover;
}
.review-item-info {
  flex: 1;
}
.review-item-info h5 {
  font-size: 14px;
  color: var(--text-dark);
  margin-bottom: 5px;
}
.review-item-info p {
  font-size: 13px;
  color: var(--text-light);
}
.review-item-price {
  font-weight: 700;
  color: var(--brown);
  font-size: 15px;
}

.order-summary-final {
  background: var(--brown-dark);
  color: var(--white);
  padding: 25px;
  border-radius: 16px;
  margin-top: 10px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
}

.summary-row.total {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  font-size: 20px;
  font-weight: 700;
}

.checkout-sidebar {
  background: var(--cream-light);
  padding: 30px;
  border-left: 2px solid var(--cream-dark);
  display: flex;
  flex-direction: column;
}

.checkout-sidebar h3 {
  font-size: 18px;
  color: var(--brown-dark);
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--cream-dark);
}

.sidebar-items {
  flex: 1;
  overflow-y: auto;
  max-height: 300px;
  margin-bottom: 20px;
}

.sidebar-item {
  display: flex;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--cream-dark);
}

.sidebar-item img {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  object-fit: cover;
}
.sidebar-item-info {
  flex: 1;
}
.sidebar-item-info h5 {
  font-size: 13px;
  color: var(--text-dark);
  margin-bottom: 3px;
}
.sidebar-item-info p {
  font-size: 12px;
  color: var(--text-light);
}
.sidebar-item-price {
  font-weight: 600;
  color: var(--brown);
  font-size: 14px;
}

.sidebar-summary {
  border-top: 2px solid var(--cream-dark);
  padding-top: 20px;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--text-light);
}

.summary-line.discount {
  color: #e74c3c;
}

.summary-line.total {
  font-size: 18px;
  font-weight: 700;
  color: var(--brown-dark);
  margin-top: 15px;
  padding-top: 15px;
  border-top: 2px solid var(--cream-dark);
}

.secure-checkout-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  padding: 15px;
  background: var(--white);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-light);
}

.secure-checkout-badge i {
  color: #27ae60;
  font-size: 18px;
}

/* Order Success Modal */
.order-success-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  padding: 20px;
}

.order-success-modal.active {
  opacity: 1;
  visibility: visible;
}

.success-content {
  background: var(--white);
  padding: 60px;
  border-radius: 30px;
  text-align: center;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
  animation: successPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes successPop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.success-animation {
  margin-bottom: 30px;
}

.checkmark-circle {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 10px 40px rgba(39, 174, 96, 0.4);
}

.checkmark {
  width: 50px;
  height: 30px;
  border: 5px solid var(--white);
  border-width: 0 0 5px 5px;
  transform: rotate(-45deg);
  margin-top: -5px;
}

.success-content h2 {
  font-size: 28px;
  color: var(--brown-dark);
  margin-bottom: 15px;
}
.success-content > p {
  color: var(--text-light);
  margin-bottom: 25px;
}

.order-number {
  background: var(--cream-light);
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 30px;
  border: 2px solid var(--cream-dark);
}

.order-number span {
  font-size: 24px;
  font-weight: 700;
  color: var(--brown);
  display: block;
  margin-top: 5px;
}

.btn-continue-shopping {
  padding: 16px 40px;
  background: var(--brown);
  color: var(--white);
  border: none;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn-continue-shopping:hover {
  background: var(--brown-dark);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(166, 123, 91, 0.3);
}

/* Customer Service Modal */
.customer-service-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  padding: 20px;
}

.customer-service-modal.active {
  opacity: 1;
  visibility: visible;
}

.customer-service-content {
  background: var(--white);
  border-radius: 24px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.4s ease;
}

.close-customer-service {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: var(--cream-light);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-light);
  transition: var(--transition);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-customer-service:hover {
  background: var(--brown);
  color: var(--white);
  transform: rotate(90deg);
}

.customer-service-header {
  padding: 40px 40px 30px;
  text-align: center;
  background: linear-gradient(135deg, var(--cream-light) 0%, var(--white) 100%);
  border-bottom: 2px solid var(--cream);
}

.customer-service-header > i {
  font-size: 48px;
  color: var(--brown);
  margin-bottom: 15px;
  display: block;
}
.customer-service-header h2 {
  font-size: 28px;
  color: var(--brown-dark);
  margin-bottom: 10px;
}
.customer-service-header p {
  color: var(--text-light);
  font-size: 15px;
}

.customer-service-options {
  padding: 30px 40px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.service-option {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: var(--cream-light);
  border-radius: 16px;
  cursor: pointer;
  transition: var(--transition);
  border: 2px solid transparent;
}

.service-option:hover {
  background: var(--white);
  border-color: var(--brown-light);
  transform: translateX(10px);
  box-shadow: 0 5px 20px var(--shadow);
}

.service-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--brown-light) 0%, var(--brown) 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 20px;
  flex-shrink: 0;
}

.service-info {
  flex: 1;
}
.service-info h4 {
  font-size: 16px;
  color: var(--text-dark);
  margin-bottom: 5px;
}
.service-info p {
  font-size: 13px;
  color: var(--text-light);
}

.customer-service-footer {
  padding: 25px 40px;
  background: var(--cream-light);
  border-top: 2px solid var(--cream);
  text-align: center;
}

.customer-service-footer p {
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text-light);
}
.customer-service-footer a {
  color: var(--brown);
  font-weight: 600;
  text-decoration: none;
}

.service-hours {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--brown);
  font-weight: 500;
}

.service-hours i {
  color: #27ae60;
}

/* Return Modal */
.return-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  padding: 20px;
}

.return-modal.active {
  opacity: 1;
  visibility: visible;
}

.return-content {
  background: var(--white);
  border-radius: 24px;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.4s ease;
}

.close-return {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: var(--cream-light);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-light);
  transition: var(--transition);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-return:hover {
  background: var(--brown);
  color: var(--white);
  transform: rotate(90deg);
}

.return-header {
  padding: 40px 40px 30px;
  text-align: center;
  background: linear-gradient(135deg, var(--cream-light) 0%, var(--white) 100%);
  border-bottom: 2px solid var(--cream);
}

.return-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  padding: 10px 20px;
  border-radius: 30px;
  margin-bottom: 20px;
  border: 2px solid #a5d6a7;
}

.return-badge i {
  font-size: 20px;
  color: #2e7d32;
}
.return-badge span {
  font-size: 14px;
  font-weight: 600;
  color: #2e7d32;
}
.return-header h2 {
  font-size: 28px;
  color: var(--brown-dark);
  margin-bottom: 10px;
}
.return-header p {
  color: var(--text-light);
  font-size: 15px;
}

.return-policy-info {
  padding: 30px 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  background: var(--cream-light);
}

.policy-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.policy-item i {
  width: 50px;
  height: 50px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--brown);
  box-shadow: 0 3px 10px var(--shadow);
}

.policy-item h4 {
  font-size: 14px;
  color: var(--text-dark);
  margin-bottom: 5px;
}
.policy-item p {
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.5;
}

.video-notice-banner {
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
  border-left: 4px solid #e74c3c;
  padding: 20px;
  margin: 20px 40px;
  border-radius: 0 12px 12px 0;
}

.video-notice-content {
  display: flex;
  align-items: center;
  gap: 15px;
}
.video-notice-content i {
  font-size: 28px;
  color: #e74c3c;
}
.video-notice-content h4 {
  color: #c0392b;
  margin-bottom: 5px;
  font-size: 16px;
}
.video-notice-content p {
  color: #922b21;
  font-size: 14px;
  line-height: 1.5;
}

.return-form-section {
  padding: 30px 40px;
}

.return-form-section h3 {
  font-size: 20px;
  color: var(--brown-dark);
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--cream);
}

.return-reasons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reason-option {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: var(--cream-light);
  border-radius: 12px;
  cursor: pointer;
  transition: var(--transition);
  border: 2px solid transparent;
}

.reason-option:hover {
  background: var(--white);
  border-color: var(--brown-light);
}
.reason-option input {
  position: absolute;
  opacity: 0;
}

.reason-radio {
  width: 22px;
  height: 22px;
  border: 2px solid var(--cream-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
}

.reason-option input:checked + .reason-radio {
  border-color: var(--brown);
  background: var(--brown);
}

.reason-radio::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--white);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.2s ease;
}

.reason-option input:checked + .reason-radio::after {
  transform: scale(1);
}

.reason-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.reason-content i {
  font-size: 18px;
  color: var(--brown-light);
}
.reason-content span {
  font-size: 14px;
  color: var(--text-dark);
  font-weight: 500;
}

.video-upload-area {
  position: relative;
  border: 3px dashed #e74c3c;
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  transition: var(--transition);
  cursor: pointer;
  background: linear-gradient(135deg, #ffebee 0%, #fff5f5 100%);
}

.video-upload-area:hover {
  border-color: #c0392b;
  background: var(--white);
}

.video-upload-area input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.video-upload-area .upload-placeholder i {
  font-size: 48px;
  color: #e74c3c;
  margin-bottom: 15px;
  display: block;
}
.video-upload-area .upload-placeholder span {
  display: block;
  font-size: 16px;
  color: #c0392b;
  font-weight: 600;
  margin-bottom: 8px;
}
.video-upload-area .upload-placeholder small {
  display: block;
  font-size: 13px;
  color: #922b21;
  line-height: 1.5;
}

.video-preview {
  position: relative;
  display: none;
  text-align: center;
}
.video-preview video {
  width: 100%;
  max-height: 250px;
  border-radius: 12px;
  box-shadow: 0 5px 20px var(--shadow);
}

.video-success-msg {
  margin-top: 10px;
  padding: 10px;
  background: #e8f5e9;
  border-radius: 8px;
  color: #2e7d32;
  font-size: 13px;
}

.remove-video-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 35px;
  height: 35px;
  background: #e74c3c;
  color: var(--white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.remove-video-btn:hover {
  transform: scale(1.1);
  background: #c0392b;
}
.video-required-tag {
  color: #e74c3c;
  font-weight: 600;
}
.video-instruction {
  font-size: 12px;
  color: #e74c3c;
  margin-top: 10px;
  font-weight: 500;
}

.btn-submit-return {
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: var(--white);
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.btn-submit-return:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.3);
}
.btn-submit-return i {
  font-size: 20px;
}

.return-note {
  padding: 20px 40px 40px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border-top: 2px solid #ffcc80;
}

.return-note i {
  font-size: 20px;
  color: #f57c00;
  flex-shrink: 0;
  margin-top: 2px;
}
.return-note p {
  font-size: 14px;
  color: #e65100;
  line-height: 1.6;
}

/* Policy Modal */
.policy-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  padding: 20px;
}

.policy-modal.active {
  opacity: 1;
  visibility: visible;
}

.policy-content {
  background: var(--white);
  border-radius: 24px;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.4s ease;
}

.close-policy {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: var(--cream-light);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-light);
  transition: var(--transition);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-policy:hover {
  background: var(--brown);
  color: var(--white);
  transform: rotate(90deg);
}

.policy-content h2 {
  padding: 40px 40px 20px;
  font-size: 24px;
  color: var(--brown-dark);
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid var(--cream);
  background: linear-gradient(135deg, var(--cream-light) 0%, var(--white) 100%);
}

.policy-content h2 i {
  color: var(--brown);
}
.policy-body {
  padding: 30px 40px 40px;
}
.policy-section {
  margin-bottom: 30px;
}
.policy-section:last-child {
  margin-bottom: 0;
}

.policy-section h3 {
  font-size: 18px;
  color: var(--brown-dark);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.policy-section h3::before {
  content: "";
  width: 4px;
  height: 20px;
  background: var(--brown);
  border-radius: 2px;
}

.policy-section p {
  font-size: 15px;
  color: var(--text-light);
  line-height: 1.8;
  margin-bottom: 15px;
}
.policy-section ul,
.policy-section ol {
  padding-left: 25px;
  margin-bottom: 15px;
}
.policy-section li {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 10px;
  line-height: 1.6;
}
.policy-section strong {
  color: var(--brown);
  font-weight: 600;
}

.video-policy-section {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border-radius: 16px;
  padding: 25px;
  border: 2px solid #ff9800;
}

.video-policy-section h3 {
  color: #e65100;
  margin-bottom: 20px;
}
.video-policy-section h3 i {
  color: #f57c00;
}

.video-requirement-box {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.video-requirement-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.video-requirement-icon i {
  font-size: 28px;
  color: white;
}
.video-requirement-content h4 {
  color: #e65100;
  font-size: 18px;
  margin-bottom: 10px;
}
.video-requirement-content p {
  color: #bf360c;
  margin-bottom: 10px;
}
.video-requirement-content ul {
  padding-left: 20px;
  margin-bottom: 15px;
}
.video-requirement-content li {
  color: #bf360c;
  margin-bottom: 8px;
}

.video-warning {
  color: #e65100;
  font-weight: 600;
  margin-top: 15px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
}

/* Gift Box Modal */
.gift-box-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  padding: 20px;
}

.gift-box-modal.active {
  opacity: 1;
  visibility: visible;
}

.gift-box-content {
  background: var(--white);
  border-radius: 24px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.4s ease;
}

.close-gift-box {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-dark);
  transition: var(--transition);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-gift-box:hover {
  background: var(--brown);
  color: var(--white);
  transform: rotate(90deg);
}

.gift-box-header {
  padding: 40px 30px 30px;
  text-align: center;
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
  border-bottom: 2px solid #ce93d8;
}

.gift-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 10px 30px rgba(156, 39, 176, 0.3);
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.gift-icon i {
  font-size: 36px;
  color: var(--white);
}
.gift-box-header h2 {
  font-size: 28px;
  color: #4a148c;
  margin-bottom: 10px;
}
.gift-box-header p {
  color: #6a1b9a;
  font-size: 15px;
}

.gift-box-visual {
  padding: 30px 40px;
  background: linear-gradient(135deg, var(--cream-light) 0%, var(--white) 100%);
}

/* Gift Box - Coming Soon */
.gift-box-coming-soon {
  padding: 50px 40px 60px;
  text-align: center;
  background: linear-gradient(135deg, var(--cream-light) 0%, var(--white) 100%);
}

.gift-box-coming-soon i {
  font-size: 48px;
  color: #9c27b0;
  margin-bottom: 18px;
  display: inline-block;
  animation: float 3s ease-in-out infinite;
}

.gift-box-coming-soon h3 {
  font-size: 24px;
  color: #4a148c;
  margin-bottom: 12px;
}

.gift-box-coming-soon p {
  font-size: 15px;
  color: var(--text-dark);
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.6;
}

.gift-box-image-container {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(156, 39, 176, 0.2);
  margin-bottom: 25px;
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gift-box-main-image {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
  display: block;
  border-radius: 20px;
}

.gift-box-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
  color: white;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(156, 39, 176, 0.4);
  animation: pulse-badge 2s infinite;
  z-index: 5;
}

@keyframes pulse-badge {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.gift-box-badge .items-count {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.gift-box-badge .items-text {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.gift-box-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(156, 39, 176, 0.9));
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: white;
  border-radius: 0 0 20px 20px;
}

.gift-box-overlay i {
  font-size: 24px;
}
.gift-box-overlay span {
  font-size: 16px;
  font-weight: 600;
}

.gift-products-strip {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
}

.gift-mini-item {
  flex: 1;
  min-width: 60px;
  background: var(--white);
  border-radius: 12px;
  padding: 15px 10px;
  text-align: center;
  box-shadow: 0 5px 15px var(--shadow);
  transition: var(--transition);
  border: 2px solid transparent;
}

.gift-mini-item:hover {
  transform: translateY(-5px);
  border-color: var(--brown-light);
  box-shadow: 0 10px 25px var(--shadow-dark);
}

.gift-mini-item i {
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, var(--brown-light) 0%, var(--brown) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  margin: 0 auto 8px;
}

.gift-mini-item span {
  display: block;
  font-size: 12px;
  color: var(--text-dark);
  font-weight: 500;
}

.gift-box-summary {
  padding: 30px 40px;
  background: linear-gradient(135deg, var(--cream-light) 0%, var(--white) 100%);
  border-top: 2px solid var(--cream);
}

.gift-total {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}
.gift-total span {
  font-size: 16px;
  color: var(--text-light);
}
.gift-total del {
  font-size: 20px;
  color: #e74c3c;
}
.gift-total strong {
  font-size: 32px;
  color: var(--brown-dark);
}

.gift-savings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  color: #2e7d32;
  padding: 12px 25px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 25px;
  border: 2px solid #a5d6a7;
  width: 100%;
}

.gift-savings i {
  font-size: 16px;
}

.btn-add-gift-box {
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
  color: var(--white);
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-add-gift-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(156, 39, 176, 0.3);
}

/* Sale Nav Links */
.sale-nav-link {
  color: #e74c3c !important;
  font-weight: 600 !important;
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
}

.sale-nav-link i {
  color: #e74c3c;
  font-size: 12px;
}

.sale-nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #e74c3c;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.sale-nav-link:hover::after {
  transform: scaleX(1);
}

.sale-mobile-link {
  color: #e74c3c !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.sale-mobile-link i {
  color: #e74c3c;
}

/* Sale Section */
.sale-section {
  background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%) !important;
  border-top: 3px solid #e74c3c;
  border-bottom: 3px solid #e74c3c;
  position: relative;
}

.sale-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: repeating-linear-gradient(
    45deg,
    #e74c3c,
    #e74c3c 10px,
    #c0392b 10px,
    #c0392b 20px
  );
}

.sale-section .section-header h2 {
  color: #e74c3c !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.sale-section .section-header h2 i {
  color: #e74c3c;
  font-size: 36px;
}
.sale-subtitle {
  color: #c0392b;
  font-size: 16px;
  font-weight: 500;
  margin-top: 10px;
}
.sale-section .subtitle {
  color: #e74c3c !important;
}
.sale-section .subtitle::before,
.sale-section .subtitle::after {
  background: #e74c3c !important;
}

.sale-section .product-card {
  border: 2px solid #e74c3c;
  box-shadow: 0 5px 20px rgba(231, 76, 60, 0.15);
}
.sale-section .product-card:hover {
  box-shadow: 0 15px 40px rgba(231, 76, 60, 0.25);
  transform: translateY(-10px) scale(1.02);
}

@keyframes pulse-sale {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
  }
}

.sale-section .product-badge.sale {
  background: #e74c3c !important;
  animation: pulse-sale 2s infinite;
}
.sale-section .current-price {
  color: #e74c3c !important;
}

.sale-section .discount {
  background: #e74c3c;
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  margin-left: 10px;
}

.back-to-all {
  margin-top: 40px;
}
.back-to-all .btn-primary {
  background: var(--brown) !important;
  border-color: var(--brown) !important;
}
.back-to-all .btn-primary:hover {
  background: var(--brown-dark) !important;
  border-color: var(--brown-dark) !important;
}

.product-badge.sale {
  background: #e74c3c !important;
  animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(231, 76, 60, 0);
  }
}

.footer-col a[onclick*="showSaleProducts"] {
  color: #e74c3c !important;
  font-weight: 600;
}
.footer-col a[onclick*="showSaleProducts"]:hover {
  color: #c0392b !important;
}

/* Mobile Modal Fixes */
@media (max-width: 768px) {
  .customer-service-content,
  .return-content,
  .gift-box-content,
  .policy-content,
  .success-content {
    max-width: 95%;
    margin: 10px;
  }
  .customer-service-header,
  .return-header,
  .gift-box-header {
    padding: 25px;
  }
  .customer-service-header h2,
  .return-header h2,
  .gift-box-header h2 {
    font-size: 22px;
  }
  .customer-service-options,
  .return-form-section,
  .gift-box-items {
    padding: 20px 25px;
  }
  .return-policy-info {
    grid-template-columns: 1fr;
    padding: 20px 25px;
  }
  .policy-item {
    flex-direction: row;
    text-align: left;
  }
  .video-notice-banner {
    margin: 15px 25px;
    padding: 15px;
  }
  .video-notice-content {
    flex-direction: column;
    text-align: center;
  }
  .service-option {
    padding: 15px;
  }
  .service-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  .policy-content h2 {
    padding: 25px;
    font-size: 20px;
  }
  .policy-body {
    padding: 20px 25px;
  }
  .video-requirement-box {
    flex-direction: column;
    text-align: center;
  }
  .success-content {
    padding: 40px 25px;
  }
  .checkmark-circle {
    width: 80px;
    height: 80px;
  }
  .checkmark {
    width: 40px;
    height: 24px;
    border-width: 0 0 4px 4px;
  }
  .success-content h2 {
    font-size: 22px;
  }
  .order-number {
    padding: 15px 20px;
  }
  .order-number span {
    font-size: 18px;
  }
  .return-note {
    padding: 15px 25px 25px;
  }
  .gift-box-summary {
    padding: 20px 25px;
  }
  .customer-service-footer {
    padding: 20px 25px;
  }
  .gift-box-main-image {
    max-height: 300px;
  }
  .gift-box-badge {
    width: 60px;
    height: 60px;
    top: 15px;
    right: 15px;
  }
  .gift-box-badge .items-count {
    font-size: 22px;
  }
  .gift-box-badge .items-text {
    font-size: 9px;
  }
}

@media (max-width: 480px) {
  .reason-content span {
    font-size: 13px;
  }
  .reason-content i {
    display: none;
  }
  .video-upload-area {
    padding: 25px;
  }
  .video-upload-area .upload-placeholder i {
    font-size: 32px;
  }
  .gift-total {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  .gift-box-main-image {
    max-height: 250px;
  }
  .gift-products-strip {
    gap: 8px;
  }
  .gift-mini-item {
    flex: 1 1 calc(50% - 8px);
    padding: 10px 5px;
  }
  .gift-mini-item i {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
  .gift-mini-item span {
    font-size: 9px;
  }
}

/* Scrollbar Styling */
.return-content::-webkit-scrollbar,
.customer-service-content::-webkit-scrollbar,
.gift-box-content::-webkit-scrollbar,
.policy-content::-webkit-scrollbar,
.checkout-content::-webkit-scrollbar {
  width: 8px;
}

.return-content::-webkit-scrollbar-track,
.customer-service-content::-webkit-scrollbar-track,
.gift-box-content::-webkit-scrollbar-track,
.policy-content::-webkit-scrollbar-track,
.checkout-content::-webkit-scrollbar-track {
  background: var(--cream-light);
  border-radius: 4px;
}

.return-content::-webkit-scrollbar-thumb,
.customer-service-content::-webkit-scrollbar-thumb,
.gift-box-content::-webkit-scrollbar-thumb,
.policy-content::-webkit-scrollbar-thumb,
.checkout-content::-webkit-scrollbar-thumb {
  background: var(--brown-light);
  border-radius: 4px;
}

.return-content::-webkit-scrollbar-thumb:hover,
.customer-service-content::-webkit-scrollbar-thumb:hover,
.gift-box-content::-webkit-scrollbar-thumb:hover,
.policy-content::-webkit-scrollbar-thumb:hover,
.checkout-content::-webkit-scrollbar-thumb:hover {
  background: var(--brown);
}

.whatsapp-link {
  color: #25d366;
  font-size: 20px;
  text-decoration: none;
  transition: transform 0.3s;
}

.whatsapp-link:hover {
  transform: scale(1.2);
}

/* Remove backdrop-filter on mobile - causes blank/black screen */
@media (max-width: 768px) {
    .overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(0, 0, 0, 0.7) !important;
    }

    /* Fix cart sidebar for mobile */
    .cart-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        right: -105% !important;
        z-index: 1003 !important;
    }

    .cart-sidebar.active {
        right: 0 !important;
    }

    /* Ensure overlay doesn't block clicks when cart is closed */
    .overlay {
        z-index: 1002 !important;
    }

    /* Fix body scroll lock on mobile */
    body.cart-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    .overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .cart-sidebar {
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Prevent overlay from capturing all touch events when inactive */
.overlay:not(.active) {
    pointer-events: none !important;
}

/* Ensure cart items are scrollable on mobile */
@media (max-width: 768px) {
    
}

    .action-icon:active {
        transform: scale(0.95);
    }
}

/* Tablet: Stack sidebar below main content */
@media (max-width: 992px) {
    .checkout-content {
        grid-template-columns: 1fr !important;
        max-width: 95% !important;
        max-height: 95vh !important;
        margin: 10px !important;
    }

    .checkout-sidebar {
        border-left: none !important;
        border-top: 2px solid var(--cream-dark) !important;
        padding: 20px !important;
    }

    .checkout-sidebar h3 {
        margin-bottom: 15px !important;
        padding-bottom: 10px !important;
    }

    .sidebar-items {
        max-height: 200px !important;
    }

    .checkout-header {
        padding: 20px !important;
    }

    .checkout-header h2 {
        font-size: 20px !important;
        margin-bottom: 15px !important;
    }

    .checkout-steps {
        gap: 10px !important;
    }

    .step-number {
        width: 35px !important;
        height: 35px !important;
        font-size: 14px !important;
    }

    .step span {
        font-size: 11px !important;
    }

    .step-line {
        width: 30px !important;
    }

    .checkout-body {
        padding: 20px !important;
    }

    .form-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .checkout-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .btn-continue-checkout,
    .btn-place-order,
    .btn-back {
        width: 100% !important;
    }

    .payment-method-card {
        padding: 15px !important;
    }

    .payment-icon {
        width: 45px !important;
        height: 45px !important;
        font-size: 20px !important;
    }

    .order-review-section {
        gap: 15px !important;
    }

    .review-box {
        padding: 18px !important;
    }

    .order-summary-final {
        padding: 18px !important;
    }

    .summary-row.total {
        font-size: 18px !important;
    }
}

/* Mobile phones: Full screen modal */
@media (max-width: 768px) {
    .checkout-modal {
        padding: 0 !important;
        align-items: flex-start !important;
    }

    .checkout-content {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        width: 100% !important;
        max-height: 100vh !important;
        height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        animation: none !important;
    }

    .checkout-header {
        padding: 15px 20px !important;
        position: sticky !important;
        top: 0 !important;
        background: linear-gradient(135deg, var(--cream-light) 0%, var(--white) 100%) !important;
        z-index: 10 !important;
    }

    .checkout-header h2 {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }

    .checkout-header h2 i {
        font-size: 20px !important;
    }

    .checkout-steps {
        gap: 8px !important;
    }

    .step {
        gap: 5px !important;
    }

    .step-number {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }

    .step span {
        font-size: 10px !important;
    }

    .step-line {
        width: 20px !important;
    }

    .close-checkout {
        top: 15px !important;
        right: 15px !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }

    .checkout-body {
        padding: 15px 20px !important;
    }

    .checkout-step-content h3 {
        font-size: 17px !important;
        margin-bottom: 18px !important;
        padding-bottom: 10px !important;
    }

    .form-group {
        margin-bottom: 15px !important;
    }

    .form-group label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 12px 14px !important;
        font-size: 16px !important; /* Prevent iOS zoom on focus */
        border-radius: 10px !important;
    }

    .form-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .checkout-buttons {
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 20px !important;
    }

    .btn-continue-checkout,
    .btn-place-order {
        padding: 14px !important;
        font-size: 15px !important;
    }

    .btn-back {
        padding: 12px !important;
        font-size: 13px !important;
        order: 2; /* Back button below continue */
    }

    /* Payment methods mobile */
    .payment-methods-list {
        gap: 10px !important;
    }

    .payment-method-card {
        padding: 14px !important;
        gap: 12px !important;
    }

    .payment-icon {
        width: 42px !important;
        height: 42px !important;
        font-size: 18px !important;
        border-radius: 10px !important;
    }

    .payment-details h4 {
        font-size: 14px !important;
    }

    .payment-details p {
        font-size: 11px !important;
    }

    .payment-badge {
        font-size: 10px !important;
        padding: 2px 8px !important;
    }

    .payment-check {
        font-size: 20px !important;
    }

    /* Digital payment form mobile */
    .digital-payment-form {
        padding: 18px !important;
    }

    .dpf-header {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .account-number-box {
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
        padding: 12px !important;
    }

    .account-number-box .acc-number {
        font-size: 18px !important;
        letter-spacing: 1px !important;
    }

    .txn-input-group {
        flex-direction: column !important;
    }

    .txn-input-group input {
        font-size: 16px !important;
    }

    .txn-input-group button {
        padding: 12px !important;
        font-size: 14px !important;
    }

    .dpf-step {
        font-size: 12px !important;
    }

    .dpf-discount-pill {
        font-size: 12px !important;
        padding: 5px 10px !important;
    }

    /* Order review mobile */
    .order-review-section {
        gap: 12px !important;
    }

    .review-box {
        padding: 15px !important;
    }

    .review-box h4 {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    .review-box h4 i {
        font-size: 14px !important;
    }

    .btn-edit {
        padding: 6px 12px !important;
        font-size: 11px !important;
        top: 12px !important;
        right: 12px !important;
    }

    .review-item {
        gap: 10px !important;
        padding: 10px 0 !important;
    }

    .review-item img {
        width: 50px !important;
        height: 50px !important;
    }

    .review-item-info h5 {
        font-size: 13px !important;
    }

    .review-item-price {
        font-size: 14px !important;
    }

    .order-summary-final {
        padding: 15px !important;
    }

    .summary-row {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }

    .summary-row.total {
        font-size: 16px !important;
        margin-top: 10px !important;
        padding-top: 10px !important;
    }

    /* Sidebar mobile */
    .checkout-sidebar {
        padding: 15px 20px !important;
        border-top: 2px solid var(--cream-dark) !important;
        border-left: none !important;
    }

    .checkout-sidebar h3 {
        font-size: 16px !important;
        margin-bottom: 12px !important;
        padding-bottom: 10px !important;
    }

    .sidebar-items {
        max-height: 180px !important;
        margin-bottom: 15px !important;
    }

    .sidebar-item {
        padding: 10px 0 !important;
        gap: 10px !important;
    }

    .sidebar-item img {
        width: 45px !important;
        height: 45px !important;
    }

    .sidebar-item-info h5 {
        font-size: 12px !important;
    }

    .sidebar-item-price {
        font-size: 13px !important;
    }

    .sidebar-summary {
        padding-top: 15px !important;
    }

    .summary-line {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }

    .summary-line.total {
        font-size: 16px !important;
        margin-top: 10px !important;
        padding-top: 10px !important;
    }

    .secure-checkout-badge {
        margin-top: 15px !important;
        padding: 10px !important;
        font-size: 12px !important;
    }

    /* Discount banner mobile */
    .digital-discount-banner {
        flex-direction: column !important;
        text-align: center !important;
        padding: 14px !important;
        gap: 10px !important;
    }

    .discount-banner-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }

    .discount-banner-text strong {
        font-size: 14px !important;
    }

    .discount-banner-text p {
        font-size: 12px !important;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .checkout-content {
        border-radius: 16px 16px 0 0 !important;
        max-height: 98vh !important;
    }

    .checkout-header {
        padding: 12px 15px !important;
    }

    .checkout-header h2 {
        font-size: 16px !important;
    }

    .checkout-body {
        padding: 12px 15px !important;
    }

    .checkout-step-content h3 {
        font-size: 15px !important;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 10px 12px !important;
        font-size: 16px !important;
    }

    .btn-continue-checkout,
    .btn-place-order {
        padding: 12px !important;
        font-size: 14px !important;
    }

    .payment-method-card {
        padding: 12px !important;
    }

    .payment-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
    }

    .review-box {
        padding: 12px !important;
    }

    .order-summary-final {
        padding: 12px !important;
    }
}

/* Fix for notched phones (iPhone X+) */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .checkout-content {
            padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
        }

        .checkout-body {
            padding-left: max(15px, env(safe-area-inset-left)) !important;
            padding-right: max(15px, env(safe-area-inset-right)) !important;
        }
    }
}

/* Ensure mobile menu is ABOVE the overlay */
.mobile-menu {
    z-index: 1010 !important;
}

/* Overlay should be BELOW mobile menu but above everything else */
.overlay {
    z-index: 1005 !important;
}

/* When mobile menu is active, ensure proper stacking */
.mobile-menu.active {
    left: 0 !important;
    z-index: 1010 !important;
    box-shadow: 5px 0 50px rgba(0, 0, 0, 0.5) !important;
}

/* Mobile menu close button should be clickable */
.close-mobile {
    z-index: 1011 !important;
    position: absolute;
    top: 20px;
    right: 20px;
}

/* Ensure mobile menu links are clickable */
.mobile-menu a {
    position: relative;
    z-index: 1010 !important;
    display: block !important;
    pointer-events: all !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(166, 123, 91, 0.2) !important;
}

/* Fix for iOS Safari - prevent overlay from blocking touches */
@supports (-webkit-touch-callout: none) {
    .mobile-menu {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    .overlay {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* Mobile menu list items should be above overlay */
.mobile-menu ul {
    position: relative;
    z-index: 1010 !important;
}

.mobile-menu li {
    position: relative;
    z-index: 1010 !important;
}

.cart-sidebar {
    z-index: 1012 !important;
    background: var(--white) !important;
}

.cart-sidebar.active {
    right: 0 !important;
    z-index: 1012 !important;
}

.cart-header, .cart-items, 

.close-cart {
    z-index: 1014 !important;
    position: relative;
}

/* Overlay when cart is active */
.overlay.active {
    z-index: 1011 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.6) !important;
}

body.cart-open {
    overflow: hidden !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
}

/* Mobile cart */
@media (max-width: 768px) {
    .cart-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        right: -105% !important;
        z-index: 1012 !important;
    }
    .cart-sidebar.active {
        right: 0 !important;
    }
    .overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

@supports (-webkit-touch-callout: none) {
    .cart-sidebar {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-overflow-scrolling: touch !important;
    }
    .overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

.empty-cart, 

/* Base Overlay */
.overlay {
    z-index: 1000 !important;
}
.overlay.active {
    z-index: 1000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.6) !important;
}

/* Mobile Menu */
.mobile-menu {
    z-index: 1001 !important;
    background: var(--white) !important;
}
.mobile-menu.active {
    left: 0 !important;
    z-index: 1001 !important;
    box-shadow: 5px 0 50px rgba(0, 0, 0, 0.5) !important;
}
.close-mobile {
    z-index: 1002 !important;
}
.mobile-menu a, .mobile-menu ul, .mobile-menu li {
    position: relative;
    z-index: 1001 !important;
    display: block !important;
    pointer-events: all !important;
    touch-action: manipulation !important;
}

/* Cart Sidebar */
.cart-sidebar {
    z-index: 1003 !important;
    background: var(--white) !important;
}
.cart-sidebar.active {
    right: 0 !important;
    z-index: 1003 !important;
}
.cart-header, .cart-items, .cart-footer, .empty-cart, 
.close-cart {
    z-index: 1004 !important;
}
.quantity-control button, .remove-item, .btn-checkout, 

/* Quick View Modal */
.quick-view-modal {
    z-index: 1005 !important;
}
.quick-view-modal.active {
    z-index: 1005 !important;
}
.quick-view-content {
    z-index: 1006 !important;
}
.close-quick-view {
    z-index: 1007 !important;
}

/* Checkout Modal */
.checkout-modal {
    z-index: 1008 !important;
}
.checkout-modal.active {
    z-index: 1008 !important;
}
.checkout-content {
    z-index: 1009 !important;
}
.close-checkout {
    z-index: 1010 !important;
}

/* Customer Service Modal */
.customer-service-modal {
    z-index: 1008 !important;
}
.customer-service-modal.active {
    z-index: 1008 !important;
}
.customer-service-content {
    z-index: 1009 !important;
}
.close-customer-service {
    z-index: 1010 !important;
}

/* Return Modal */
.return-modal {
    z-index: 1008 !important;
}
.return-modal.active {
    z-index: 1008 !important;
}
.return-content {
    z-index: 1009 !important;
}
.close-return {
    z-index: 1010 !important;
}

/* Policy Modal */
.policy-modal {
    z-index: 1008 !important;
}
.policy-modal.active {
    z-index: 1008 !important;
}
.policy-content {
    z-index: 1009 !important;
}
.close-policy {
    z-index: 1010 !important;
}

/* Gift Box Modal */
.gift-box-modal {
    z-index: 1008 !important;
}
.gift-box-modal.active {
    z-index: 1008 !important;
}
.gift-box-content {
    z-index: 1009 !important;
}
.close-gift-box {
    z-index: 1010 !important;
}

/* Order Success Modal */
.order-success-modal {
    z-index: 1011 !important;
}
.order-success-modal.active {
    z-index: 1011 !important;
}
.success-content {
    z-index: 1012 !important;
}

/* Toast Notifications */
.toast-container {
    z-index: 1013 !important;
}
.toast {
    z-index: 1014 !important;
}

/* Header should always be above everything except modals */
.main-header {
    z-index: 99999 !important;
    position: fixed !important;
    top: 0 !important;
}

/* Mobile menu toggle button */
.mobile-menu-toggle {
    z-index: 1000 !important;
    position: relative;
}

/* Action icons (cart, wishlist) */
.action-icon {
    z-index: 1000 !important;
    position: relative;
}

/* iOS Safari fixes */
@supports (-webkit-touch-callout: none) {
    .mobile-menu, .cart-sidebar, .quick-view-modal, .checkout-modal, 
    .customer-service-modal, .return-modal, .policy-modal, .gift-box-modal, .order-success-modal {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    .overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Body scroll lock - JS handles position:fixed, CSS only sets overflow */
body.cart-open,
body:has(.mobile-menu.active),
body:has(.checkout-modal.active),
body:has(.quick-view-modal.active),
body:has(.return-modal.active),
body:has(.policy-modal.active),
body:has(.gift-box-modal.active),
body:has(.customer-service-modal.active) {
    overflow: hidden !important;
}

/* Mobile specific */
@media (max-width: 768px) {
    .cart-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        right: -105% !important;
    }
    .cart-sidebar.active {
        right: 0 !important;
    }
}

/* Desktop: Ensure nav menu has consistent spacing */
@media (min-width: 993px) {
  .main-nav ul {
    gap: 30px;
  }

  .nav-menu a {
    font-size: 14px;
    white-space: nowrap;
  }

  /* Ensure logo doesn't shrink */
  .logo {
    flex-shrink: 0;
  }

  /* Header actions fixed width for equal spacing */
  .header-actions {
    min-width: 280px;
    justify-content: flex-end;
  }
}

/* Tablet adjustments */
@media (max-width: 1200px) and (min-width: 993px) {
  .main-nav ul {
    gap: 20px;
  }

  .nav-menu a {
    font-size: 13px;
  }

  .header-actions {
    gap: 12px;
    min-width: auto;
  }

  .search-box input {
    width: 180px;
  }

  .search-box input:focus {
    width: 220px;
  }
}

/* Mobile: Ensure all icons same size */
@media (max-width: 992px) {
  .header-wrapper {
    gap: 10px;
    padding: 10px 0;
  }

  .header-actions {
    gap: 8px;
  }

  .action-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
    padding: 0;
  }

  .action-icon i,
  .action-icon svg {
    font-size: 18px !important;
    width: 18px;
    height: 18px;
  }

  .lang-switcher {
    height: 36px;
    padding: 6px 10px;
    min-width: 50px;
  }

  .lang-switcher i {
    font-size: 14px;
    width: 14px;
    height: 14px;
  }

  .mobile-menu-toggle {
    width: 36px;
    height: 36px;
    font-size: 18px;
    display: flex !important;
  }

  .mobile-menu-toggle i {
    font-size: 18px;
    width: 18px;
    height: 18px;
  }

  .search-icon-mobile {
    display: flex !important;
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .action-icon .badge {
    width: 16px;
    height: 16px;
    font-size: 9px;
    top: 0;
    right: 0;
  }

  .logo h1 {
    font-size: 28px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .header-wrapper {
    gap: 6px;
    padding: 8px 0;
  }

  .header-actions {
    gap: 4px;
  }

  .action-icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .action-icon i,
  .action-icon svg {
    font-size: 16px !important;
    width: 16px;
    height: 16px;
  }

  .lang-switcher {
    height: 32px;
    padding: 4px 8px;
    min-width: 45px;
    font-size: 11px;
  }

  .lang-switcher i {
    font-size: 12px;
    width: 12px;
    height: 12px;
  }

  .mobile-menu-toggle {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .mobile-menu-toggle i {
    font-size: 16px;
    width: 16px;
    height: 16px;
  }

  .search-icon-mobile {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .logo h1 {
    font-size: 24px;
  }

  .action-icon .badge {
    width: 14px;
    height: 14px;
    font-size: 8px;
  }
}

/* Ensure consistent icon sizing across all navbar elements */
.header-actions > * {
  flex-shrink: 0;
}

/* Search box mobile active state */
.search-box.active {
  display: block !important;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  background: var(--white);
  padding: 15px;
  box-shadow: 0 10px 30px var(--shadow-dark);
  z-index: 100;
}

.search-box.active input {
  width: 100% !important;
}
/* Sticky navbar - stays visible on scroll */

/* Desktop Search - Default visible */
.desktop-search {
    display: block;
    position: relative;
}

.desktop-search input {
    width: 250px;
    padding: 10px 40px 10px 15px;
    border: 2px solid var(--cream-dark);
    border-radius: 25px;
    font-size: 14px;
    transition: var(--transition);
    background: var(--cream-light);
}

.desktop-search input:focus {
    outline: none;
    border-color: var(--brown-light);
    width: 300px;
}

.desktop-search button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--brown);
    cursor: pointer;
    padding: 8px;
}

/* Mobile Search Dropdown - Hidden by default */
.mobile-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 15px);
    right: 10px;
    width: 300px;
    background: var(--white);
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.25);
    z-index: 1015;
    border: 2px solid var(--cream-dark);
}

.mobile-search-dropdown.active {
    display: block !important;
    animation: searchSlideDown 0.3s ease;
}

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

.mobile-search-dropdown input {
    width: 100%;
    padding: 12px 40px 12px 15px;
    border: 2px solid var(--cream-dark);
    border-radius: 25px;
    font-size: 16px;
    background: var(--cream-light);
    pointer-events: all;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(166, 123, 91, 0.2);
}

.mobile-search-dropdown input:focus {
    outline: none;
    border-color: var(--brown-light);
}

.mobile-search-dropdown button {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--brown);
    cursor: pointer;
    padding: 8px;
    pointer-events: all;
}

/* Mobile Search Icon */
.search-icon-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 20px;
    color: var(--text-dark);
    cursor: pointer;
    transition: var(--transition);
    border-radius: 50%;
    position: relative;
    z-index: 1014;
    pointer-events: all;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(166, 123, 91, 0.2);
}

.search-icon-mobile:hover {
    color: var(--brown);
    background: var(--cream-light);
}

.search-icon-mobile.active {
    color: var(--brown);
    background: var(--cream-light);
}

/* Mobile breakpoint */
@media (max-width: 992px) {
    .desktop-search {
        display: none !important;
    }

    .search-icon-mobile {
        display: flex !important;
    }

    .mobile-search-dropdown {
        width: 280px;
        right: 5px;
    }
}

@media (max-width: 480px) {
    .mobile-search-dropdown {
        width: 260px;
        right: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .mobile-search-dropdown.active {
        animation: searchSlideDownMobile 0.3s ease;
    }

    @keyframes searchSlideDownMobile {
        from { opacity: 0; transform: translateX(-50%) translateY(-15px); }
        to { opacity: 1; transform: translateX(-50%) translateY(0); }
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .search-box {
        width: 260px;
        right: -10px;
    }
}

/* Ensure header actions container allows absolute positioning */
.header-actions {
    position: relative;
}

/* Sticky navbar behavior */
.main-header,
#header,
header.main-header,
header#main-header,
.main-header[id],
body .main-header,
body #header,
body header.main-header {
  position: sticky !important;
  position: -webkit-sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
}

/* Scroll behavior */
body.scrolled .main-header,
body.scroll-down .main-header,
body.scroll-up .main-header {
  position: sticky !important;
  top: 0 !important;
  box-shadow: 0 4px 30px var(--shadow-dark);
}

/* Ensure header sticks on all devices */

/* Mobile specific - fixed on mobile too */
@media (max-width: 768px) {
  .main-header,
  #header,
  header.main-header {
    position: fixed !important;
    top: 0 !important;
    z-index: 99999 !important;
  }
}

/* iOS Safari specific fix */
@supports (-webkit-touch-callout: none) {
  .main-header {
    position: fixed !important;
    top: 0 !important;
  }
}
.search-suggestions {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 500px;
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    z-index: 1016;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: all 0.3s ease;
    max-height: 400px;
    overflow-y: auto;
    border: 2px solid var(--cream-dark);
}

.search-suggestions.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.search-suggestion-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--cream-dark);
}

.search-suggestion-item:last-child {
    border-bottom: none;
}

.search-suggestion-item:hover {
    background: var(--cream-light);
}

.search-suggestion-item img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.suggestion-info {
    flex: 1;
}

.suggestion-info h5 {
    font-size: 15px;
    color: var(--text-dark);
    margin-bottom: 4px;
    font-weight: 600;
}

.suggestion-info h5 mark {
    background: linear-gradient(135deg, var(--brown-light), var(--brown));
    color: var(--white);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

.suggestion-info span {
    font-size: 13px;
    color: var(--text-light);
}

.search-suggestion-item > i {
    color: var(--brown-light);
    font-size: 14px;
    transition: all 0.2s ease;
}

.search-suggestion-item:hover > i {
    color: var(--brown);
    transform: translateX(3px);
}

.search-suggestion-item.no-results {
    justify-content: center;
    color: var(--text-light);
    padding: 30px;
    gap: 10px;
}

.search-suggestion-item.no-results i {
    font-size: 24px;
    color: var(--brown-light);
}

.search-suggestion-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px;
    background: var(--cream-light);
    cursor: pointer;
    border-top: 2px solid var(--cream-dark);
    color: var(--brown);
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    border-radius: 0 0 14px 14px;
}

.search-suggestion-more:hover {
    background: var(--cream);
}

.search-suggestion-more i {
    font-size: 12px;
    transition: all 0.2s ease;
}

.search-suggestion-more:hover i {
    transform: translateX(3px);
}

/* Mobile search suggestions */
@media (max-width: 992px) {
    .search-suggestions {
        top: 65px;
        width: 95%;
        max-height: 350px;
    }

    .search-suggestion-item {
        padding: 12px 15px;
    }

    .search-suggestion-item img {
        width: 40px;
        height: 40px;
    }

    .suggestion-info h5 {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .search-suggestions {
        top: 60px;
        border-radius: 12px;
    }

    .search-suggestion-item {
        padding: 10px 12px;
        gap: 10px;
    }

    .suggestion-info h5 {
        font-size: 13px;
    }

    .suggestion-info span {
        font-size: 11px;
    }
}

/* Mobile Search Dropdown z-index fix */
.mobile-search-dropdown {
    z-index: 1015;
}

.mobile-search-dropdown.active + .search-suggestions,
.mobile-search-dropdown.active ~ .search-suggestions {
    display: none !important;
}

/* Search Overlay */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 1014;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 1. Remove ALL conflicting position rules and use ONE clean fixed position */

/* 2. Ensure NO parent container creates a new stacking context that breaks fixed */
html, body {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* 3. Fix any containers that might have overflow hidden */
.container,
.header-wrapper,
.wrapper,
.page-wrapper,
.site-wrapper {
  overflow: visible !important;
  transform: none !important;
  perspective: none !important;
  filter: none !important;
}

/* 4. Body padding to account for fixed header height */

/* 5. Scroll offset fix for anchor links */
html {
  scroll-padding-top: 80px !important;
}

/* 6. Mobile adjustments */
@media (max-width: 992px) {
  
  html {
    scroll-padding-top: 70px !important;
  }
}

@media (max-width: 480px) {
  
  html {
    scroll-padding-top: 65px !important;
  }
}

/* 7. Ensure main content starts below fixed header */
main, .main-content, .content, .page-content {
  position: relative !important;
  z-index: 1 !important;
}

/* ==========================================
   CLEAN MOBILE FIX - No conflicting rules
   ========================================== */

/* Base */
html { background: #ffffff; }
body { 
    background: #ffffff; 
    margin: 0; 
    padding: 0;
    overflow-x: hidden;
}

/* Fixed navbar */
.main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    background: #ffffff !important;
}

/* Hero slider gets margin from JS */
.hero-slider {
    position: relative;
    overflow: hidden;
}

/* Content sections background */
section, .features-banner {
    background: #faf9f6;
}

/* Footer background - dark brown (separate to avoid override) */
.main-footer {
    background: var(--brown-darker) !important;
    color: var(--cream) !important;
}

/* Mobile */
@media (max-width: 768px) {
    .hero-slider {
        height: 400px !important;
    }
}

@media (max-width: 480px) {
    .hero-slider {
        height: 350px !important;
    }
}

/* 1. Reset and constrain everything */
html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* 2. Fix container to never exceed viewport */
.container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: hidden !important;
}

/* 3. Fix header - use fixed positioning properly */
.main-header,
#header,
header.main-header,
header#main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    z-index: 99999 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 20px rgba(139, 90, 43, 0.1) !important;
    /* Remove any transform that breaks fixed positioning */
    transform: none !important;
    -webkit-transform: none !important;
}

/* 5. Hero slider fix - no negative margins */
.hero-slider {
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    position: relative;
    overflow: hidden;
}

/* 6. All sections constrained */
section {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* 7. Fix any potential overflow from grids */
.categories-grid,
.products-grid,
.features-banner .container,
.testimonials-slider,
.instagram-grid,
.facebook-grid,
.tiktok-grid,
.footer-grid,
.shop-layout,
.contact-wrapper {
    width: 100% !important;
    max-width: 100% !important;
}

/* 8. Fix images to not overflow */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* 9. Fix header wrapper */
.header-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 0 !important;
}

/* 10. Mobile specific fixes */
@media (max-width: 768px) {
    body {
        padding-top: 60px !important;
    }

    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .hero-slider {
        height: 350px !important;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .features-banner .container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .testimonials-slider {
        grid-template-columns: 1fr !important;
    }

    .instagram-grid,
    .facebook-grid,
    .tiktok-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .contact-wrapper {
        grid-template-columns: 1fr !important;
    }

    .shop-layout {
        grid-template-columns: 1fr !important;
    }

    .slide-content h2 {
        font-size: 24px !important;
    }

    .slide-content p {
        font-size: 14px !important;
    }
}

/* 11. Small mobile */
@media (max-width: 480px) {
    body {
        padding-top: 55px !important;
    }

    .hero-slider {
        height: 300px !important;
    }

    .logo h1 {
        font-size: 22px !important;
    }

    .slide-content h2 {
        font-size: 20px !important;
    }

    .section-header h2 {
        font-size: 24px !important;
    }
}

/* 12. Fix checkout modal on mobile */
@media (max-width: 768px) {
    .checkout-content {
        max-width: 100vw !important;
        width: 100% !important;
        border-radius: 0 !important;
        max-height: 100vh !important;
        height: 100vh !important;
    }

    .cart-sidebar {
        width: 100% !important;
        max-width: 100vw !important;
        right: -105% !important;
    }

    .cart-sidebar.active {
        right: 0 !important;
    }

    .mobile-menu {
        width: 80% !important;
        max-width: 320px !important;
    }
}

/* 13. Prevent any element from causing overflow */
.product-card,
.category-card,
.testimonial-card,
.social-platform,
.contact-form-box,
.review-box {
    max-width: 100% !important;
}

/* 14. Fix quick view modal */
.quick-view-content {
    max-width: 90vw !important;
}

/* 15. Fix gift box modal */
.gift-box-content {
    max-width: 90vw !important;
}

/* 16. Fix return modal */
.return-content {
    max-width: 90vw !important;
}

/* 17. Fix policy modal */
.policy-content {
    max-width: 90vw !important;
}

/* 18. Fix customer service modal */
.customer-service-content {
    max-width: 90vw !important;
}

/* 19. Fix success modal */
.success-content {
    max-width: 90vw !important;
}

/* 20. Ensure no horizontal scroll on any device */
html {
    overflow-x: hidden !important;
    scroll-behavior: smooth;
}

/* 21. Fix search dropdown */
.mobile-search-dropdown {
    max-width: calc(100vw - 20px) !important;
}

/* 22. Fix search suggestions */
.search-suggestions {
    max-width: calc(100vw - 30px) !important;
}

/* 23. Ensure all modals fit screen */
.checkout-modal,
.quick-view-modal,
.return-modal,
.policy-modal,
.gift-box-modal,
.customer-service-modal,
.order-success-modal {
    padding: 10px !important;
}

/* 24. RTL overflow fix */
body[dir="rtl"] {
    overflow-x: hidden !important;
}

/* 25. Remove any potential margin issues */
.main-footer,
.features-banner,
.categories-section,
.products-section,
.testimonials-section,
.social-feed-section,
.contact-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ==========================================
   ADDITIONAL OVERFLOW FIXES
   Based on: 100vw scrollbar overflow issue
   ========================================== */

/* Replace all 100vw with safer alternatives */
.full-width {
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure no element uses 100vw directly */
[style*="100vw"] {
    width: 100% !important;
    max-width: 100% !important;
}

/* Fix for elements that might overflow */
.product-card,
.category-card,
.testimonial-card,
.insta-item,
.fb-item,
.tiktok-item {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Ensure images don't cause overflow */
.product-image img,
.category-card img,
.insta-item img,
.fb-item img,
.tiktok-item img,
.quick-view-image img,
.review-item img,
.sidebar-item img,

/* Fix for long text breaking layout */
.product-info h3,
.category-overlay h3,
.testimonial-card p,
.footer-col p,
.contact-info-box p {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

/* Fix flex/grid children that don't shrink */
.header-wrapper > *,
.features-banner .container > *,
.categories-grid > *,
.products-grid > *,
.testimonials-slider > *,
.instagram-grid > *,
.facebook-grid > *,
.tiktok-grid > *,
.footer-grid > *,
.gift-products-strip > * {
    min-width: 0 !important;
}

/* Fix for mobile menu */
.mobile-menu {
    max-width: 80vw !important;
}

/* Fix for cart sidebar */
.cart-sidebar {
    max-width: 100vw !important;
}

/* Fix for checkout modal */
.checkout-content {
    max-width: 95vw !important;
}

/* Fix for all modals on small screens */
@media (max-width: 768px) {
    .quick-view-content,
    .customer-service-content,
    .return-content,
    .policy-content,
    .gift-box-content,
    .success-content {
        max-width: calc(100vw - 20px) !important;
        margin: 10px !important;
    }

    /* Ensure buttons don't overflow */
    .btn-primary,
    .btn-checkout,
    .btn-continue-checkout,
    .btn-place-order,
    .btn-submit-return,
    .btn-add-gift-box {
        max-width: 100% !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    /* Fix payment method cards */
    .payment-method-card {
        flex-wrap: wrap !important;
    }

    /* Fix form rows */
    .form-row {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Fix review items */
    .review-item {
        flex-wrap: wrap !important;
    }

    /* Fix sidebar items */
    .sidebar-item {
        flex-wrap: wrap !important;
    }
}

/* Debug helper - uncomment to find overflowing elements */
/*
* {
    outline: 1px solid rgba(255, 0, 0, 0.1) !important;
}
*/

/* ==========================================
   BEAUTIFUL ADD TO CART BUTTON - PREMIUM DESIGN
   ========================================== */

/* Shimmer effect overlay */
.add-to-cart::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.6s ease;
    z-index: -1;
}

/* Hover state */
.add-to-cart:hover {
    background: linear-gradient(135deg, var(--brown-dark) 0%, var(--brown-darker) 100%);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 8px 30px rgba(166, 123, 91, 0.4),
        0 12px 40px rgba(166, 123, 91, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    letter-spacing: 1px;
}

.add-to-cart:hover::before {
    left: 100%;
}

/* Active/Click state */
.add-to-cart:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 
        0 2px 10px rgba(166, 123, 91, 0.3),
        inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.1s ease;
}

/* Icon styling */
.add-to-cart i {
    font-size: 16px;
    transition: all 0.3s ease;
    position: relative;
}

.add-to-cart:hover i {
    transform: translateX(-2px) rotate(-5deg);
}

.add-to-cart:active i {
    transform: scale(0.9);
}

/* Added to cart state */
.add-to-cart.added {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    box-shadow: 
        0 4px 15px rgba(39, 174, 96, 0.3),
        0 8px 25px rgba(39, 174, 96, 0.2);
}

.add-to-cart.added i {
    animation: cartBounce 0.5s ease;
}

@keyframes cartBounce {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-5px) rotate(-10deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(-3px) rotate(5deg); }
}

/* Pulse animation on idle */
@keyframes cartPulse {
    0%, 100% { 
        box-shadow: 0 4px 15px rgba(166, 123, 91, 0.3), 0 8px 25px rgba(166, 123, 91, 0.2);
    }
    50% { 
        box-shadow: 0 4px 20px rgba(166, 123, 91, 0.4), 0 8px 35px rgba(166, 123, 91, 0.3);
    }
}

.add-to-cart:hover {
    animation: none;
}

/* Ripple effect on click */
.add-to-cart .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: rippleEffect 0.6s ease-out;
    pointer-events: none;
}

@keyframes rippleEffect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .add-to-cart {
        padding: 12px 16px;
        font-size: 13px;
        border-radius: 12px;
        letter-spacing: 0.3px;
    }

    .add-to-cart i {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .add-to-cart {
        padding: 10px 12px;
        font-size: 12px;
        border-radius: 10px;
        gap: 6px;
    }

    .add-to-cart i {
        font-size: 12px;
    }
}

/* Dark mode is handled manually via the .dark-mode class (toggled by the
   floating button), NOT via OS-level prefers-color-scheme, so the site
   always opens in light mode regardless of the customer's system theme. */

/* Focus state for accessibility */
.add-to-cart:focus-visible {
    outline: 3px solid var(--brown-light);
    outline-offset: 3px;
}

/* Disabled state */
.add-to-cart:disabled {
    background: linear-gradient(135deg, #ccc 0%, #999 100%);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.7;
}

/* ==========================================
   NAVBAR ALWAYS FIXED AT TOP - ALL DEVICES
   ========================================== */

/* Remove ALL conflicting position rules first */
.main-header,
#header,
header.main-header,
header#main-header,
.main-header[id],
body .main-header,
body #header,
body header.main-header,
html body header.main-header,
header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 99999 !important;
    background: var(--white) !important;
    box-shadow: 0 2px 20px var(--shadow) !important;
    /* CRITICAL: Remove any transform that breaks fixed positioning */
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    /* Ensure it stays above everything */
    will-change: auto !important;
}

/* Body padding for fixed header - different sizes for different devices */
body {
    padding-top: 70px !important;
    /* Ensure body doesn't create new stacking context */
    transform: none !important;
    -webkit-transform: none !important;
}

/* Tablet */
@media (max-width: 992px) {
    body {
        padding-top: 65px !important;
    }

    .main-header,
    #header,
    header.main-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    body {
        padding-top: 60px !important;
    }

    .main-header,
    #header,
    header.main-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-height: 60px !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    body {
        padding-top: 55px !important;
    }

    .main-header,
    #header,
    header.main-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-height: 55px !important;
    }

    .header-wrapper {
        padding: 8px 0 !important;
    }

    .logo h1 {
        font-size: 24px !important;
    }
}

/* iOS Safari specific - fixed positioning fix */
@supports (-webkit-touch-callout: none) {
    .main-header,
    #header,
    header.main-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        /* iOS specific: prevent address bar issues */
        -webkit-position: fixed !important;
    }

    body {
        padding-top: 70px !important;
    }
}

/* Ensure no parent creates stacking context that breaks fixed */
html, body, .container, .header-wrapper, .wrapper {
    transform: none !important;
    -webkit-transform: none !important;
    perspective: none !important;
    -webkit-perspective: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
}

/* Scroll behavior - smooth scroll with offset */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px !important;
}

@media (max-width: 992px) {
    html {
        scroll-padding-top: 75px !important;
    }
}

@media (max-width: 768px) {
    html {
        scroll-padding-top: 70px !important;
    }
}

@media (max-width: 480px) {
    html {
        scroll-padding-top: 65px !important;
    }
}

/* Ensure content starts below navbar */
#home,
.hero-slider {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Header shadow on scroll enhancement */
.main-header.scrolled,
#header.scrolled {
    box-shadow: 0 4px 30px rgba(139, 90, 43, 0.2) !important;
}

/* Prevent any overflow from header */
.header-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* Ensure logo and nav don't wrap weirdly */
.logo {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* Mobile menu toggle always visible and clickable */
.mobile-menu-toggle {
    position: relative !important;
    z-index: 1000 !important;
    flex-shrink: 0 !important;
}

/* Header actions always stay in header */
.header-actions {
    flex-shrink: 0 !important;
    position: relative !important;
}

/* Hide Best badge */
.product-badge.best {
    display: none !important;
}

/* ==========================================
   USER REQUESTED FIXES
   1. Beautiful Add to Cart Button
   2. Hide Best Badge
   3. Navbar Always Fixed
   ========================================== */

/* ==========================================
   NAVBAR ALWAYS FIXED AT TOP
   All devices: Laptop, PC, All Mobiles
   ========================================== */

/* Base header styles */
.main-header,
#header,
header.main-header,
header#main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 20px rgba(139, 90, 43, 0.1) !important;
    transform: none !important;
    -webkit-transform: none !important;
    transition: box-shadow 0.3s ease;
}

/* Body padding to account for fixed header */
body {
    padding-top: 70px !important;
    margin: 0 !important;
}

/* Hero slider - no margin needed since body has padding */
.hero-slider {
    margin-top: 0 !important;
}

/* Scroll effect - enhanced shadow */
body.scrolled .main-header,
.main-header.scrolled {
    box-shadow: 0 4px 30px rgba(139, 90, 43, 0.2) !important;
}

/* Desktop */
@media (min-width: 993px) {
    body {
        padding-top: 70px !important;
    }

    .main-header {
        min-height: 70px;
    }
}

/* Tablet */
@media (max-width: 992px) and (min-width: 769px) {
    body {
        padding-top: 65px !important;
    }

    .main-header {
        min-height: 65px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    body {
        padding-top: 60px !important;
    }

    .main-header {
        min-height: 60px;
    }

    .hero-slider {
        height: 400px !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    body {
        padding-top: 55px !important;
    }

    .main-header {
        min-height: 55px;
    }

    .hero-slider {
        height: 350px !important;
    }
}

/* iOS Safari specific fix */
@supports (-webkit-touch-callout: none) {
    .main-header {
        position: fixed !important;
        /* Fix for iOS position: fixed issues */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* Android Chrome fix */
@supports not (-webkit-touch-callout: none) {
    .main-header {
        position: fixed !important;
    }
}

/* Ensure header is above everything */
.main-header {
    will-change: transform;
}

/* Prevent content jump on load */
html {
    scroll-padding-top: 70px;
}

@media (max-width: 768px) {
    html {
        scroll-padding-top: 60px;
    }
}

@media (max-width: 480px) {
    html {
        scroll-padding-top: 55px;
    }
}

/* ==========================================
   HIDE "BEST" BADGE FROM PRODUCTS
   ========================================== */

.product-badge.best {
    display: none !important;
}

/* ==========================================
   PREMIUM ADD TO CART BUTTON
   Beautiful gradient with multiple effects
   ========================================== */

.add-to-cart {
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #a67b5b 0%, #8b5a2b 50%, #6d4c41 100%);
    background-size: 200% 200%;
    color: #ffffff;
    border: none;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 4px 15px rgba(166, 123, 91, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    font-family: "Poppins", sans-serif;
    margin-top: auto;
}

/* Animated gradient shine */
.add-to-cart::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.15) 0%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Sweep shine effect */
.add-to-cart::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.7s ease;
    pointer-events: none;
}

/* Hover effects */
.add-to-cart:hover {
    background-position: right center;
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 15px 40px rgba(166, 123, 91, 0.5),
        0 0 0 4px rgba(166, 123, 91, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

.add-to-cart:hover::before {
    opacity: 1;
}

.add-to-cart:hover::after {
    left: 100%;
}

/* Active/Click effect */
.add-to-cart:active {
    transform: translateY(-1px) scale(0.97);
    box-shadow: 
        0 4px 15px rgba(166, 123, 91, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    transition: all 0.1s ease;
}

/* Icon styling */
.add-to-cart i {
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

.add-to-cart:hover i {
    transform: rotate(-15deg) scale(1.25);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Pulse animation on load */
@keyframes btnPulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(166, 123, 91, 0.35); }
    50% { box-shadow: 0 4px 25px rgba(166, 123, 91, 0.5); }
}

.add-to-cart {
    animation: btnPulse 3s ease-in-out infinite;
}

.add-to-cart:hover {
    animation: none;
}

/* Mobile Add to Cart */
@media (max-width: 768px) {
    .add-to-cart {
        padding: 13px 18px;
        font-size: 13px;
        border-radius: 14px;
        min-height: 48px;
        letter-spacing: 0.6px;
    }

    .add-to-cart i {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .add-to-cart {
        padding: 11px 14px;
        font-size: 12px;
        border-radius: 12px;
        letter-spacing: 0.5px;
        min-height: 44px;
    }

    .add-to-cart i {
        font-size: 13px;
    }
}

/* Touch device optimization */
@media (hover: none) {
    .add-to-cart {
        background: linear-gradient(135deg, #8b5a2b 0%, #a67b5b 100%);
        animation: none;
    }

    .add-to-cart:active {
        transform: scale(0.96);
        box-shadow: 0 2px 12px rgba(166, 123, 91, 0.45);
    }
}

/* ==========================================
   CART ITEM IMAGE SIZE FIX
   Proper sizing for cart sidebar images
   ========================================== */

/* Desktop cart image */

/* Cart item layout improvements */

/* Cart item details */

.cart-item-details h4 {
    font-size: 14px;
    color: var(--text-dark);
    margin-bottom: 4px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Quantity control in cart */

.quantity-control button:hover {
    background: var(--brown);
    color: var(--white);
    border-color: var(--brown);
}

/* Remove item button */

.cart-item:hover 

.remove-item:hover {
    background: #c0392b;
    transform: scale(1.1);
}

/* Mobile cart image */
@media (max-width: 768px) {

    .cart-item-details h4 {
        font-size: 13px;
    }

}

/* Small mobile */
@media (max-width: 480px) {

    .cart-item-details h4 {
        font-size: 12px;
    }
}

/* Cart items container */

/* Empty cart styling */

.empty-cart i {
    font-size: 56px;
    opacity: 0.3;
    margin-bottom: 15px;
    display: block;
    color: var(--brown-light);
}

.empty-cart p {
    font-size: 16px;
    margin-bottom: 15px;
}

.empty-cart a {
    color: var(--brown);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 24px;
    background: var(--cream);
    border-radius: 20px;
    display: inline-block;
    transition: all 0.3s ease;
}

.empty-cart a:hover {
    background: var(--brown);
    color: var(--white);
}

/* ==========================================
   CART SIDEBAR - COMPACT & BEAUTIFUL
   ========================================== */

/* ==========================================
   CART SIDEBAR - COMPACT & BEAUTIFUL FIX
   ========================================== */

/* Cart Sidebar Base */
.cart-sidebar {
    width: 380px !important;
    max-width: 100vw !important;
    right: -400px !important;
}

.cart-sidebar.active {
    right: 0 !important;
}

/* Cart Header */
.cart-header {
    padding: 18px 20px !important;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between !important;
}

.cart-header h3 {
    margin: 0 !important;
}

.cart-header h3 {
    font-size: 16px !important;
    font-weight: 600;
}

/* Cart Items Container */
.cart-items {
    padding: 15px !important;
    flex: 1;
    overflow-y: auto;
}

/* Individual Cart Item - Compact */
.cart-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    background: var(--cream-light);
    border-radius: 12px;
    margin-bottom: 10px !important;
    border: 1px solid var(--cream-dark);
    position: relative;
    transition: all 0.2s ease;
}

.cart-item:hover {
    border-color: var(--brown-light);
    box-shadow: 0 2px 8px rgba(139, 90, 43, 0.08);
}

/* Cart Item Image - Proper Size */
.cart-item-image {
    width: 55px !important;
    height: 55px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    border: 1px solid var(--cream-dark);
}

/* Cart Item Details */
.cart-item-details {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cart-item-details h4 {
    font-size: 14px !important;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 !important;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-item-price {
    font-size: 14px !important;
    font-weight: 700;
    color: var(--brown);
}

/* Quantity Control - Compact */
.quantity-control {
    display: flex;
    align-items: center;
    gap: 8px !important;
    margin-top: 4px !important;
}

.quantity-control button {
    width: 26px !important;
    height: 26px !important;
    border: 1.5px solid var(--cream-dark);
    background: var(--white);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--text-dark);
    transition: all 0.2s ease;
    padding: 0 !important;
}

.quantity-control button:hover {
    background: var(--brown);
    color: var(--white);
    border-color: var(--brown);
}

.quantity-control span {
    font-size: 13px;
    font-weight: 600;
    min-width: 22px;
    text-align: center;
}

/* Remove Item Button */
.remove-item {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 22px !important;
    height: 22px !important;
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s ease;
    padding: 0 !important;
}

.cart-item:hover .remove-item {
    opacity: 1;
}

.remove-item:hover {
    background: #c0392b;
    transform: scale(1.1);
}

/* Cart Footer */
.cart-footer {
    padding: 15px 20px !important;
    border-top: 1px solid var(--cream-dark);
    background: var(--cream-light);
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px !important;
    margin-bottom: 6px !important;
}

.cart-total-row strong {
    font-size: 20px !important;
    color: var(--brown-dark);
}

.shipping-note {
    font-size: 12px !important;
    color: var(--text-light);
    margin-bottom: 12px !important;
}

/* Checkout Button */

/* Empty Cart */
.empty-cart {
    padding: 40px 20px !important;
    text-align: center;
}

.empty-cart i {
    font-size: 48px !important;
    margin-bottom: 15px !important;
}

.empty-cart p {
    font-size: 14px;
    margin-bottom: 10px;
}

.empty-cart a {
    font-size: 14px;
    color: var(--brown);
    text-decoration: none;
    font-weight: 600;
}

/* Mobile Cart Fixes */
@media (max-width: 768px) {
    .cart-sidebar {
        width: 100% !important;
        max-width: 100vw !important;
        right: -105% !important;
    }

    .cart-item-image {
        width: 50px !important;
        height: 50px !important;
        border-radius: 8px !important;
    }

    .cart-item {
        padding: 10px !important;
        gap: 10px !important;
    }

    .cart-item-details h4 {
        font-size: 13px !important;
    }

    .cart-header {
        padding: 15px !important;
    }

    .cart-items {
        padding: 12px !important;
    }

    .cart-footer {
        padding: 12px 15px !important;
    }

    .remove-item {
        opacity: 1 !important;
        width: 20px !important;
        height: 20px !important;
        font-size: 9px;
    }
}

@media (max-width: 480px) {
    .cart-item-image {
        width: 45px !important;
        height: 45px !important;
    }

    .cart-item {
        padding: 8px !important;
        gap: 8px !important;
    }

    .cart-item-details h4 {
        font-size: 12px !important;
    }

    .cart-item-price {
        font-size: 13px !important;
    }

    .quantity-control button {
        width: 24px !important;
        height: 24px !important;
    }

    .quantity-control span {
        font-size: 12px;
    }
}

/* ==========================================
   CART SIDEBAR CENTERED BUTTONS
   ========================================== */

/* Ensure cart sidebar has proper flex layout */
.cart-sidebar {
  display: flex;
  flex-direction: column;
}

/* Cart items take available space */
.cart-items {
  flex: 1;
  overflow-y: auto;
}

/* Footer stays at bottom with centered content */
.cart-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Override for shipping row - must be row */
.cart-footer 

/* Buttons wrapper takes full width */
.cart-buttons-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Mobile cart adjustments */
@media (max-width: 768px) {
  .cart-footer {
    padding: 14px 16px;
  }

  .cart-total-row {
    font-size: 15px;
  }

  .cart-total-row strong {
    font-size: 18px;
  }

  .shipping-note {
    font-size: 11px;
    margin-bottom: 14px;
  }

  .cart-buttons-wrapper {
    gap: 10px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .cart-footer {
    padding: 12px 14px;
  }

  .cart-total-row {
    font-size: 14px;
  }

  .cart-total-row strong {
    font-size: 16px;
  }

}

/* ==========================================
   CART BUTTONS - CHECKOUT & CONTINUE SHOPPING
   SAME EXACT STYLING
   ========================================== */

.btn-checkout,
.btn-continue {
    width: 100%;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: "Poppins", sans-serif;
    border: none;
    margin-bottom: 8px !important;
    background: linear-gradient(135deg, var(--brown) 0%, var(--brown-dark) 100%);
    color: var(--white);
}

.btn-checkout:hover,
.btn-continue:hover {
    background: linear-gradient(135deg, var(--brown-dark) 0%, var(--brown-darker) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(166, 123, 91, 0.4);
}

.btn-checkout:active,
.btn-continue:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 10px rgba(166, 123, 91, 0.3);
}


/* ==========================================
   CART SHIPPING ROW - FIXED
   "Shipping:" left, "PKR/FREE" right same line
   ========================================== */

/* Override parent flex-direction:column */
.cart-footer .cart-shipping-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    font-size: 14px;
    margin-bottom: 10px !important;
}

/* "Shipping:" label - left side */
.cart-footer .cart-shipping-row > span:first-child {
    color: var(--text-light);
    flex-shrink: 0;
}

/* Amount/FREE - right side */
.cart-footer .cart-shipping-row > strong {
    color: var(--text-dark);
    font-weight: 600;
    text-align: right !important;
    margin-left: auto !important;
}

/* FREE text - GREEN color */
.cart-footer .cart-shipping-row .free-text,
.cart-footer .cart-shipping-row strong .free-text {
    color: #27ae60 !important;
    font-weight: 700 !important;
}

/* Also target span with inline style (fallback) */
.cart-footer .cart-shipping-row strong span {
    color: inherit;
}

@media (max-width: 768px) {
    .cart-sidebar {
        transition: none !important;
        -webkit-transition: none !important;
    }
    .cart-sidebar.active {
        transition: none !important;
        -webkit-transition: none !important;
    }
    /* Ensure buttons are immediately visible */
    .cart-footer .btn-continue,
    .cart-footer .btn-checkout {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ==========================================
   MOBILE CART - INSTANT BUTTON VISIBILITY
   Remove all delays for Continue Shopping
   ========================================== */

@media (max-width: 768px) {
    /* Remove all transitions from cart elements */
    .cart-sidebar,
    .cart-sidebar.active,
    .cart-sidebar * {
        transition: none !important;
        -webkit-transition: none !important;
        animation: none !important;
        -webkit-animation: none !important;
    }

    /* Ensure footer buttons are immediately visible */
    .cart-footer {
        opacity: 1 !important;
        transform: none !important;
    }

    .cart-footer .btn-checkout,
    .cart-footer .btn-continue {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        -webkit-animation: none !important;
        transition: background-color 0.2s ease !important;
    }

    /* Remove any slide-in animations */
    @keyframes none {
        from { opacity: 1; transform: none; }
        to { opacity: 1; transform: none; }
    }
}

@media (max-width: 480px) {
    .cart-sidebar,
    .cart-sidebar.active,
    .cart-sidebar * {
        transition: none !important;
        -webkit-transition: none !important;
        animation: none !important;
        -webkit-animation: none !important;
    }
}


/* ==========================================
   MOBILE BUTTON INSTANT RESPONSE
   Remove 300ms tap delay on all buttons
   ========================================== */

@media (max-width: 768px) {
    /* Remove 300ms tap delay on all interactive elements */
    .cart-sidebar,
    .cart-sidebar *,
    .cart-footer,
    .cart-footer *,
    .btn-checkout,
    .btn-continue,
    button,
    a,
    [onclick] {
        touch-action: manipulation !important;
        -webkit-touch-callout: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Instant visibility for cart footer buttons */
    .cart-footer .btn-checkout,
    .cart-footer .btn-continue {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
        -webkit-animation: none !important;
        transition: background-color 0.15s ease, transform 0.1s ease !important;
    }

    /* Ensure text appears immediately */
    .cart-footer .btn-checkout *,
    .cart-footer .btn-continue * {
        opacity: 1 !important;
        visibility: visible !important;
        animation: none !important;
        -webkit-animation: none !important;
    }

    /* Remove any potential delay from parent containers */
    .cart-footer {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
        -webkit-animation: none !important;
    }

    /* Force buttons to show text immediately */
    .btn-continue {
        color: var(--white) !important;
        -webkit-text-fill-color: var(--white) !important;
    }

    .btn-continue::before,
    .btn-continue::after {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .cart-footer .btn-checkout,
    .cart-footer .btn-continue {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
        -webkit-animation: none !important;
    }
}


/* ==========================================
   CART SIDEBAR - INSTANT APPEARANCE (NO SLIDE)
   Mobile: Cart appears instantly, no delay
   ========================================== */

@media (max-width: 768px) {
    /* Override ALL previous cart-sidebar rules */
    .cart-sidebar {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important; /* Dynamic viewport height for mobile */
        background: var(--white) !important;
        z-index: 1012 !important;
        /* NO TRANSITION - appear instantly */
        transition: none !important;
        -webkit-transition: none !important;
        transform: none !important;
        -webkit-transform: none !important;
        will-change: auto !important;
        box-shadow: none !important;
    }

    .cart-sidebar.active {
        right: 0 !important;
        /* NO TRANSITION */
        transition: none !important;
        -webkit-transition: none !important;
        transform: none !important;
        -webkit-transform: none !important;
        animation: none !important;
        -webkit-animation: none !important;
    }

    /* Force all children to be visible immediately */
    .cart-sidebar * {
        transition: none !important;
        -webkit-transition: none !important;
        animation: none !important;
        -webkit-animation: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Cart header */
    .cart-header {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: none !important;
    }

    /* Cart items */
    .cart-items {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: none !important;
    }

    /* Cart footer - buttons container */
    .cart-footer {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        -webkit-animation: none !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Buttons - instant visible */
    .cart-footer .btn-checkout,
    .cart-footer .btn-continue {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: background-color 0.15s ease, color 0.15s ease !important;
        animation: none !important;
        -webkit-animation: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Button text - force visible */
    .cart-footer .btn-checkout span,
    .cart-footer .btn-continue span,
    .cart-footer .btn-checkout i,
    .cart-footer .btn-continue i {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
        -webkit-animation: none !important;
        display: inline !important;
    }

    /* Empty cart */
    .empty-cart {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: none !important;
    }

    /* Remove any potential delay from overlay */
    .overlay {
        transition: none !important;
        -webkit-transition: none !important;
    }

    .overlay.active {
        transition: none !important;
        -webkit-transition: none !important;
    }
}

@media (max-width: 480px) {
    .cart-sidebar,
    .cart-sidebar.active,
    .cart-sidebar * {
        transition: none !important;
        -webkit-transition: none !important;
        animation: none !important;
        -webkit-animation: none !important;
    }

    .cart-footer .btn-checkout,
    .cart-footer .btn-continue {
        transition: background-color 0.15s ease !important;
    }
}


/* Force sale section to be completely hidden by default */
#sale-section,
.sale-section {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Only show when explicitly activated by JS */
#sale-section.active,
.sale-section.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 80px 0 !important;
    margin: 0 !important;
}


/* ==========================================
   FOOTER FIX - Ensure proper colors
   ========================================== */

.main-footer {
    background: var(--brown-darker) !important;
    color: var(--cream) !important;
}

.main-footer .footer-col h4 {
    color: var(--white) !important;
}

.main-footer .footer-col p,
.main-footer .footer-col a,
.main-footer .footer-bottom p,
.main-footer .footer-bottom a {
    color: var(--cream) !important;
}

.main-footer .footer-col a:hover {
    color: var(--gold) !important;
}

.main-footer .newsletter-form input {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--white) !important;
}

.main-footer .newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Ensure all product cards have same height */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    align-items: stretch !important;
}

/* Each product card - force equal height */
.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border-radius: 20px;
    overflow: visible;
    box-shadow: 0 5px 20px var(--shadow);
    transition: var(--transition);
    position: relative;
}

/* Product image - fixed height */
.product-image {
    position: relative;
    overflow: hidden;
    height: 280px;
    background: var(--cream-light);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Product info - takes remaining space */
.product-info {
    padding: 20px;
    position: relative;
    z-index: 5;
    background: var(--white);
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Product name - fixed height with 2 lines */
.product-info h3 {
    font-size: 18px;
    color: var(--text-dark);
    margin-bottom: 10px;
    font-weight: 600;
    min-height: 48px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Product category - fixed position */
.product-category {
    font-size: 12px;
    color: var(--brown);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 500;
}

/* Rating - fixed height */
.product-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    min-height: 20px;
}

/* Price section - fixed height area */
.product-price {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    min-height: 32px;
    flex-wrap: wrap;
}

/* Current price */
.current-price {
    font-size: 22px;
    font-weight: 700;
    color: var(--brown-dark);
}

/* Old price */
.old-price {
    font-size: 16px;
    color: var(--text-light);
    text-decoration: line-through;
}

/* Discount badge */
.discount {
    font-size: 12px;
    color: #e74c3c;
    font-weight: 600;
}

/* Add to cart button - always at bottom */
.add-to-cart {
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #a67b5b 0%, #8b5a2b 50%, #6d4c41 100%);
    background-size: 200% 200%;
    color: #ffffff;
    border: none;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 4px 15px rgba(166, 123, 91, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    font-family: "Poppins", sans-serif;
    margin-top: auto;
}

/* Mobile: 2 columns - ensure equal height */
@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }

    .product-card {
        border-radius: 12px;
    }

    .product-image {
        height: 180px;
    }

    .product-info {
        padding: 12px;
    }

    .product-info h3 {
        font-size: 14px;
        min-height: 38px;
        margin-bottom: 8px;
    }

    .product-price {
        min-height: 26px;
        margin-bottom: 10px;
    }

    .current-price {
        font-size: 16px;
    }

    .old-price {
        font-size: 13px;
    }

    .discount {
        font-size: 10px;
    }

    .add-to-cart {
        padding: 12px 8px;
        font-size: 12px;
        min-height: 44px;
        border-radius: 12px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .products-grid {
        gap: 10px;
    }

    .product-image {
        height: 160px;
    }

    .product-info {
        padding: 10px;
    }

    .product-info h3 {
        font-size: 13px;
        min-height: 34px;
    }

    .current-price {
        font-size: 14px;
    }

    .add-to-cart {
        padding: 10px 6px;
        font-size: 11px;
        letter-spacing: 0;
        min-height: 40px;
    }
}

/* ==========================================
   END: PRODUCT CARDS EQUAL HEIGHT FIX
   ========================================== */

/* ==========================================
   CATEGORIES DROPDOWN - CLICK TO TOGGLE
   ========================================== */

/* Dropdown shown when active class is present */
.has-dropdown.dropdown-active .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 999999 !important;
}

/* Rotate chevron when dropdown is active */
.has-dropdown.dropdown-active .fa-chevron-down {
    transform: rotate(180deg);
}

.has-dropdown .fa-chevron-down {
    transition: transform 0.3s ease;
}

/* Mobile: Ensure dropdown works on mobile too */
@media (max-width: 992px) {
    .has-dropdown .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-top: none;
        display: none;
        min-width: 100%;
        padding: 10px 0;
    }

    .has-dropdown.dropdown-active .dropdown {
        display: block;
        z-index: 10000 !important;
    }
}

/* ==========================================
   FIX: Categories Dropdown Above Hero Image
   ========================================== */

/* Main header - ensure highest stacking */
.main-header,
#header,
header.main-header,
header#main-header {
  z-index: 99999 !important;
}

/* Dropdown container */
.has-dropdown {
  position: relative !important;
  z-index: 999999 !important;
}

/* Dropdown menu - must be above ALL content */
.dropdown,
.has-dropdown:hover .dropdown,
.has-dropdown.dropdown-active .dropdown {
  z-index: 999999 !important;
}

/* Ensure header elements don't clip dropdown */
.main-header,
.main-header .container,
.main-header .header-wrapper,
.main-header .main-nav,
.main-header .nav-menu,
.main-header .has-dropdown {
  overflow: visible !important;
}

/* Hero slider below header */
.hero-slider,
#home.hero-slider,
.hero-slider .slide {
  z-index: 1 !important;
}

/* Slide content below dropdown */
.slide-content {
  z-index: 2 !important;
}

/* Slider controls */
.slider-dots,
.slider-arrows {
  z-index: 3 !important;
}

/* Specific categories dropdown fix */
#categories-dropdown.has-dropdown {
  z-index: 999999 !important;
}

#categories-dropdown .dropdown,
#categories-dropdown.has-dropdown.dropdown-active .dropdown {
  z-index: 999999 !important;
}

/* ==========================================
   REVIEWS SYSTEM - COMPLETE STYLES
   ========================================== */

/* Reviews Modal */
.reviews-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  padding: 20px;
}

.reviews-modal.active {
  opacity: 1;
  visibility: visible;
}

.reviews-content {
  background: var(--white);
  border-radius: 24px;
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
  animation: slideUp 0.4s ease;
}

.close-reviews {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: var(--cream-light);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-light);
  transition: var(--transition);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-reviews:hover {
  background: var(--brown);
  color: var(--white);
  transform: rotate(90deg);
}

/* Reviews Header */
.reviews-header {
  padding: 30px 40px 20px;
  background: linear-gradient(135deg, var(--cream-light) 0%, var(--white) 100%);
  border-bottom: 2px solid var(--cream);
}

.reviews-product-info {
  display: flex;
  gap: 20px;
  align-items: center;
}

.reviews-product-info img {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 16px;
  object-fit: cover;
  border: 3px solid var(--cream-dark);
}

.reviews-product-info .product-meta {
  flex: 1;
  min-width: 0;
  /* Keep text clear of the absolutely-positioned close (X) button
     (44px wide, sitting 20px from the right edge) regardless of name length */
  padding-right: 56px;
}

.reviews-product-info .product-meta h3 {
  font-size: 22px;
  color: var(--brown-dark);
  margin-bottom: 8px;
  overflow-wrap: break-word;
}

.reviews-product-info .product-meta .product-rating-summary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reviews-product-info .product-meta .stars {
  color: var(--gold);
  font-size: 18px;
}

.reviews-product-info .product-meta .rating-number {
  font-size: 18px;
  font-weight: 700;
  color: var(--brown-dark);
}

.reviews-product-info .product-meta .total-reviews {
  font-size: 14px;
  color: var(--text-light);
}

/* Reviews Stats */
.reviews-stats {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  padding: 30px 40px;
  background: var(--cream-light);
  border-bottom: 2px solid var(--cream);
}

.reviews-stats .overall-rating {
  text-align: center;
  padding: 20px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 5px 20px var(--shadow);
}

.reviews-stats .overall-rating .big-rating {
  font-size: 56px;
  font-weight: 700;
  color: var(--brown-dark);
  line-height: 1;
  margin-bottom: 10px;
}

.reviews-stats .overall-rating .stars {
  color: var(--gold);
  font-size: 24px;
  margin-bottom: 10px;
}

.reviews-stats .overall-rating .total-count {
  font-size: 14px;
  color: var(--text-light);
}

.reviews-stats .rating-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

.rating-bar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.rating-bar-item .star-label {
  min-width: 50px;
  color: var(--text-dark);
  font-weight: 500;
}

.rating-bar-item .bar-track {
  flex: 1;
  height: 10px;
  background: var(--cream-dark);
  border-radius: 5px;
  overflow: hidden;
}

.rating-bar-item .bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--brown-light));
  border-radius: 5px;
  transition: width 0.6s ease;
}

.rating-bar-item .bar-count {
  min-width: 40px;
  text-align: right;
  color: var(--text-light);
  font-size: 13px;
}

/* Reviews Filters */
.reviews-filters {
  padding: 25px 40px;
  border-bottom: 2px solid var(--cream);
}

.reviews-filters h4 {
  font-size: 18px;
  color: var(--brown-dark);
  margin-bottom: 15px;
}

.reviews-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.review-filter-btn {
  padding: 10px 18px;
  border: 2px solid var(--cream-dark);
  border-radius: 25px;
  background: var(--white);
  color: var(--text-light);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  font-family: "Poppins", sans-serif;
}

.review-filter-btn:hover {
  border-color: var(--brown-light);
  color: var(--brown);
}

.review-filter-btn.active {
  background: var(--brown);
  border-color: var(--brown);
  color: var(--white);
}

.reviews-sort {
  display: flex;
  justify-content: flex-end;
}

.reviews-sort select {
  padding: 10px 20px;
  border: 2px solid var(--cream-dark);
  border-radius: 10px;
  font-size: 14px;
  background: var(--white);
  cursor: pointer;
  outline: none;
  color: var(--text-dark);
  font-family: "Poppins", sans-serif;
}

/* Reviews List */
.reviews-list {
  padding: 0 40px;
}

.review-item {
  padding: 25px 0;
  border-bottom: 1px solid var(--cream-dark);
  animation: fadeIn 0.3s ease;
}

.review-item:last-child {
  border-bottom: none;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

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

.review-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brown-light), var(--brown));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 20px;
  font-weight: 600;
  flex-shrink: 0;
}

.review-author-info h5 {
  font-size: 15px;
  color: var(--text-dark);
  margin-bottom: 3px;
}

.review-author-info .review-date {
  font-size: 12px;
  color: var(--text-light);
}

.review-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  color: #2e7d32;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.review-verified-badge i {
  font-size: 10px;
}

.review-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.review-rating .stars {
  color: var(--gold);
  font-size: 14px;
}

.review-rating .review-title-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
}

.review-content {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.7;
  margin-bottom: 12px;
}

.review-photos {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.review-photos img {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  object-fit: cover;
  cursor: pointer;
  transition: var(--transition);
  border: 2px solid var(--cream-dark);
}

.review-photos img:hover {
  transform: scale(1.1);
  border-color: var(--brown-light);
}

.review-actions {
  display: flex;
  gap: 20px;
  align-items: center;
}

.review-helpful {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-light);
}

.review-helpful button {
  background: var(--cream-light);
  border: 1px solid var(--cream-dark);
  border-radius: 20px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-light);
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 5px;
}

.review-helpful button:hover {
  background: var(--brown);
  color: var(--white);
  border-color: var(--brown);
}

.review-helpful button.liked {
  background: var(--brown);
  color: var(--white);
  border-color: var(--brown);
}

/* Reviews Form Section */
.reviews-form-section {
  padding: 30px 40px;
  background: linear-gradient(135deg, var(--cream-light) 0%, var(--white) 100%);
  border-top: 2px solid var(--cream);
}

.reviews-form-section h4 {
  font-size: 20px;
  color: var(--brown-dark);
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.reviews-form-section h4 i {
  color: var(--brown);
}

/* Star Rating Input */
.review-rating-input {
  margin-bottom: 20px;
}

.review-rating-input label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.star-rating-input {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.star-rating-input i {
  font-size: 32px;
  color: var(--cream-dark);
  cursor: pointer;
  transition: var(--transition);
}

.star-rating-input i:hover,
.star-rating-input i.hovered,
.star-rating-input i.selected {
  color: var(--gold);
  transform: scale(1.2);
}

.rating-text {
  font-size: 14px;
  color: var(--text-light);
  font-style: italic;
}

/* Review Photo Upload */
.review-photo-upload {
  position: relative;
  border: 3px dashed var(--cream-dark);
  border-radius: 16px;
  padding: 30px;
  text-align: center;
  transition: var(--transition);
  cursor: pointer;
  background: var(--cream-light);
}

.review-photo-upload:hover {
  border-color: var(--brown-light);
  background: var(--white);
}

.review-photo-upload input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.photo-upload-placeholder i {
  font-size: 40px;
  color: var(--brown-light);
  margin-bottom: 10px;
  display: block;
}

.photo-upload-placeholder span {
  display: block;
  font-size: 15px;
  color: var(--text-dark);
  font-weight: 500;
  margin-bottom: 5px;
}

.photo-upload-placeholder small {
  display: block;
  font-size: 12px;
  color: var(--text-light);
}

.photo-preview-grid {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.photo-preview-item {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--cream-dark);
}

.photo-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-preview-item .remove-photo {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Verified Checkbox */
.verified-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-dark);
  font-weight: 500;
}

.verified-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.verified-checkbox .checkmark {
  width: 22px;
  height: 22px;
  border: 2px solid var(--cream-dark);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
  background: var(--white);
}

.verified-checkbox input:checked + .checkmark {
  background: var(--brown);
  border-color: var(--brown);
}

.verified-checkbox input:checked + .checkmark::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--white);
  font-size: 12px;
}

/* Submit Review Button */
.btn-submit-review {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, var(--brown) 0%, var(--brown-dark) 100%);
  color: var(--white);
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: "Poppins", sans-serif;
}

.btn-submit-review:hover {
  background: linear-gradient(135deg, var(--brown-dark) 0%, var(--brown-darker) 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(166, 123, 91, 0.3);
}

/* Reviews Pagination */
.reviews-pagination {
  padding: 20px 40px;
  display: flex;
  justify-content: center;
  gap: 8px;
  border-top: 2px solid var(--cream);
}

.reviews-pagination button {
  width: 40px;
  height: 40px;
  border: 2px solid var(--cream-dark);
  border-radius: 10px;
  background: var(--white);
  color: var(--text-dark);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.reviews-pagination button:hover {
  border-color: var(--brown-light);
  color: var(--brown);
}

.reviews-pagination button.active {
  background: var(--brown);
  border-color: var(--brown);
  color: var(--white);
}

.reviews-pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Product Card Reviews Link */
.product-reviews-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--brown);
  cursor: pointer;
  margin-bottom: 10px;
  font-weight: 500;
  transition: var(--transition);
  position: relative;
  z-index: 10;
  pointer-events: all !important;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.product-reviews-link:hover {
  color: var(--brown-dark);
}

.product-reviews-link i {
  font-size: 11px;
}

/* Review Count Badge on Product Card */
.review-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-light);
  margin-left: 8px;
}

.review-count-badge i {
  color: var(--gold);
  font-size: 10px;
}

/* Mobile Reviews */
@media (max-width: 768px) {
  .reviews-modal {
    align-items: flex-start !important;
    padding: 0 !important;
  }
  .reviews-content {
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0 !important;
    margin: 0 !important;
    position: relative;
    bottom: auto;
    animation: none !important;
    overflow-y: auto;
  }
    padding: 20px 20px 15px;
  }

  .reviews-product-info img {
    width: 60px;
    height: 60px;
  }

  .reviews-product-info .product-meta h3 {
    font-size: 18px;
  }

  .reviews-stats {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
  }

  .reviews-filters {
    padding: 20px;
  }

  .reviews-filter-buttons {
    gap: 8px;
  }

  .review-filter-btn {
    padding: 8px 14px;
    font-size: 12px;
  }

  .reviews-list {
    padding: 0 20px;
  }

  .review-item {
    padding: 20px 0;
  }

  .reviews-form-section {
    padding: 20px;
  }

  .star-rating-input i {
    font-size: 28px;
  }

  .reviews-pagination {
    padding: 15px 20px;
  }
}

@media (max-width: 480px) {
  .reviews-content {
    border-radius: 0 !important;
  }

  .reviews-header {
    padding: 15px 15px 10px;
  }

  .reviews-product-info {
    gap: 12px;
  }

  .reviews-product-info img {
    width: 50px;
    height: 50px;
  }

  .reviews-product-info .product-meta h3 {
    font-size: 16px;
  }

  .reviews-stats {
    padding: 15px;
  }

  .reviews-stats .overall-rating .big-rating {
    font-size: 42px;
  }

  .reviews-filters {
    padding: 15px;
  }

  .reviews-list {
    padding: 0 15px;
  }

  .review-avatar {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .review-author-info h5 {
    font-size: 14px;
  }

  .reviews-form-section {
    padding: 15px;
  }

  .star-rating-input i {
    font-size: 24px;
  }

  .photo-upload-placeholder i {
    font-size: 32px;
  }
}

/* Reviews Section on Homepage */
.home-reviews-section {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--cream-light) 0%, var(--cream) 100%);
}

.home-reviews-section .section-header {
  margin-bottom: 50px;
}

.home-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.home-review-card {
  background: var(--white);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px var(--shadow);
  transition: var(--transition);
  border: 1px solid var(--cream-dark);
}

.home-review-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px var(--shadow-dark);
}

.home-review-card .review-stars {
  color: var(--gold);
  font-size: 16px;
  margin-bottom: 15px;
}

.home-review-card .review-text {
  font-size: 15px;
  color: var(--text-light);
  line-height: 1.8;
  margin-bottom: 20px;
  font-style: italic;
}

.home-review-card .reviewer-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.home-review-card .reviewer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brown-light), var(--brown));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 18px;
  font-weight: 600;
}

.home-review-card .reviewer-details h5 {
  font-size: 15px;
  color: var(--text-dark);
  margin-bottom: 3px;
}

.home-review-card .reviewer-details .verified-tag {
  font-size: 12px;
  color: #27ae60;
  display: flex;
  align-items: center;
  gap: 4px;
}

.home-review-card .reviewer-details .verified-tag i {
  font-size: 10px;
}

.home-review-card .review-product {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--cream-dark);
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-review-card .review-product img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}

.home-review-card .review-product span {
  font-size: 13px;
  color: var(--text-light);
  font-weight: 500;
}

@media (max-width: 992px) {
  .home-reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .home-reviews-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .home-review-card {
    padding: 25px;
  }
}

/* Reviews z-index fix */
.reviews-modal {
  z-index: 1015 !important;
}

.reviews-modal.active {
  z-index: 1015 !important;
}

.reviews-content {
  z-index: 1016 !important;
}

.close-reviews {
  z-index: 1017 !important;
}

/* Fix for body scroll lock when reviews modal is open */
body:has(.reviews-modal.active) {
  overflow: hidden !important;
}
/* ==========================================
   DARK MODE SYSTEM - 3 Colors Only
   Black, White, Brown
   ========================================== */

/* Dark Mode Variables */
[data-theme="dark"] {
  --black: #000000;
  --white: #ffffff;
  --brown: #8b5a2b;
  --brown-light: #a67b5b;
  --brown-dark: #5d4037;
  --cream-light: #000000;
  --cream-dark: #1a1a1a;
  --gold: #8b5a2b;
  --text-dark: #ffffff;
  --text-light: #ffffff;
  --shadow: rgba(139, 90, 43, 0.2);
  --shadow-dark: rgba(139, 90, 43, 0.3);
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #000000;
  border: 2px solid #8b5a2b;
  cursor: pointer;
  transition: var(--transition);
  color: #ffffff;
  font-size: 18px;
  position: relative;
  overflow: hidden;
}

.dark-mode-toggle:hover {
  background: #8b5a2b;
  color: #ffffff;
  border-color: #8b5a2b;
  transform: rotate(15deg) scale(1.1);
}

.dark-mode-toggle i {
  transition: all 0.3s ease;
}

.dark-mode-toggle.active {
  background: #8b5a2b;
  color: #ffffff;
  border-color: #8b5a2b;
}

.dark-mode-toggle.active i {
  transform: rotate(360deg);
}

/* ============== DARK MODE - ALL ELEMENTS ============== */

[data-theme="dark"] body {
  background: #000000 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .main-header,
[data-theme="dark"] #header,
[data-theme="dark"] header.main-header,
[data-theme="dark"] header#main-header {
  background: #000000 !important;
  box-shadow: 0 2px 20px rgba(139, 90, 43, 0.2) !important;
}

[data-theme="dark"] .mobile-menu {
  background: #000000 !important;
  box-shadow: 5px 0 30px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .mobile-menu a {
  color: #ffffff;
  border-bottom-color: #1a1a1a;
}

[data-theme="dark"] .mobile-menu a:hover {
  color: #8b5a2b;
}

[data-theme="dark"] .close-mobile {
  background: #1a1a1a;
  color: #8b5a2b;
}

[data-theme="dark"] .dropdown {
  background: #000000;
  border-top-color: #8b5a2b;
  box-shadow: 0 10px 40px rgba(139, 90, 43, 0.3);
}

[data-theme="dark"] .dropdown a {
  color: #ffffff;
}

[data-theme="dark"] .dropdown a:hover {
  background: #1a1a1a;
  color: #8b5a2b;
}

[data-theme="dark"] .nav-menu a {
  color: #ffffff;
}

[data-theme="dark"] .nav-menu a:hover {
  color: #8b5a2b;
}

[data-theme="dark"] .logo h1 {
  color: #ffffff;
}

[data-theme="dark"] .logo span {
  color: #8b5a2b;
}

[data-theme="dark"] .action-icon {
  color: #ffffff;
}

[data-theme="dark"] .action-icon:hover {
  color: #8b5a2b;
  background: #1a1a1a;
}

[data-theme="dark"] .lang-switcher {
  background: #000000;
  border-color: #8b5a2b;
  color: #ffffff;
}

[data-theme="dark"] .lang-switcher:hover {
  background: #8b5a2b;
  color: #ffffff;
  border-color: #8b5a2b;
}

/* ===== Product Cards ===== */
[data-theme="dark"] .product-card {
  background: #000000;
  box-shadow: 0 5px 20px rgba(139, 90, 43, 0.15);
  border: 1px solid #1a1a1a;
}

[data-theme="dark"] .product-card:hover {
  box-shadow: 0 15px 40px rgba(139, 90, 43, 0.25);
}

[data-theme="dark"] .product-info {
  background: #000000;
}

[data-theme="dark"] .product-info h3 {
  color: #ffffff;
}

[data-theme="dark"] .product-image {
  background: #0a0a0a;
}

[data-theme="dark"] .product-category {
  color: #8b5a2b;
}

[data-theme="dark"] .current-price {
  color: #ffffff;
}

[data-theme="dark"] .old-price {
  color: #666666;
}

[data-theme="dark"] .discount {
  color: #8b5a2b;
}

[data-theme="dark"] .stars {
  color: #8b5a2b;
}

[data-theme="dark"] .rating-count {
  color: #ffffff;
}

[data-theme="dark"] .product-wishlist {
  background: #000000;
  color: #ffffff;
  border: 1px solid #8b5a2b;
}

[data-theme="dark"] .product-wishlist:hover,
[data-theme="dark"] .product-wishlist.active {
  background: #8b5a2b;
  color: #ffffff;
}

/* ===== Buttons ===== */
[data-theme="dark"] .add-to-cart {
  background: linear-gradient(135deg, #8b5a2b 0%, #5d4037 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(139, 90, 43, 0.4);
}

[data-theme="dark"] .add-to-cart:hover {
  background: linear-gradient(135deg, #a67b5b 0%, #8b5a2b 100%);
  box-shadow: 0 8px 30px rgba(139, 90, 43, 0.5);
}

[data-theme="dark"] .btn-primary {
  background: #8b5a2b;
  color: #ffffff;
  border-color: #8b5a2b;
}

[data-theme="dark"] .btn-primary:hover {
  background: #a67b5b;
  color: #ffffff;
}

[data-theme="dark"] .action-btn {
  background: #000000;
  color: #ffffff;
  border: 1px solid #8b5a2b;
}

[data-theme="dark"] .action-btn:hover {
  background: #8b5a2b;
  color: #ffffff;
}

/* ===== Sections ===== */
[data-theme="dark"] .features-banner {
  background: #000000;
  border-color: #1a1a1a;
}

[data-theme="dark"] .feature-item:hover {
  background: #1a1a1a;
}

[data-theme="dark"] .feature-item h4 {
  color: #ffffff;
}

[data-theme="dark"] .feature-item p {
  color: #ffffff;
}

[data-theme="dark"] .feature-item .icon {
  background: linear-gradient(135deg, #8b5a2b, #5d4037);
}

[data-theme="dark"] .categories-section {
  background: #000000;
}

[data-theme="dark"] .products-section {
  background: #000000;
}

[data-theme="dark"] .products-section.bg-light {
  background: #0a0a0a;
}

[data-theme="dark"] .section-header h2 {
  color: #ffffff;
}

[data-theme="dark"] .section-header .subtitle {
  color: #8b5a2b;
}

[data-theme="dark"] .section-header .subtitle::before,
[data-theme="dark"] .section-header .subtitle::after {
  background: #8b5a2b;
}

[data-theme="dark"] .category-overlay {
  background: linear-gradient(transparent, transparent 20%, rgba(0, 0, 0, 0.85));
}

[data-theme="dark"] .category-card:hover .category-overlay {
  background: linear-gradient(transparent, transparent 10%, rgba(0, 0, 0, 0.95));
}

/* ===== Shop / Filters ===== */
[data-theme="dark"] .filter-widget {
  background: #000000;
  border-color: #1a1a1a;
  box-shadow: 0 5px 20px rgba(139, 90, 43, 0.1);
}

[data-theme="dark"] .filter-widget h4 {
  color: #ffffff;
  border-bottom-color: #1a1a1a;
}

[data-theme="dark"] .filter-list label {
  color: #ffffff;
}

[data-theme="dark"] .filter-list label:hover {
  color: #8b5a2b;
}

[data-theme="dark"] .shop-toolbar {
  background: #000000;
  box-shadow: 0 3px 15px rgba(139, 90, 43, 0.1);
}

[data-theme="dark"] .results-count {
  color: #ffffff;
}

[data-theme="dark"] .sort-dropdown select {
  background: #000000;
  color: #ffffff;
  border-color: #1a1a1a;
}

/* ===== Testimonials ===== */
[data-theme="dark"] .testimonials-section {
  background: #000000;
}

[data-theme="dark"] .testimonial-card {
  background: #0a0a0a;
  border-color: #1a1a1a;
}

[data-theme="dark"] .testimonial-card:hover {
  box-shadow: 0 20px 40px rgba(139, 90, 43, 0.15);
}

[data-theme="dark"] .testimonial-card p {
  color: #ffffff;
}

[data-theme="dark"] .customer h5 {
  color: #ffffff;
}

[data-theme="dark"] .customer span {
  color: #ffffff;
}

/* ===== Social Feed ===== */
[data-theme="dark"] .social-feed-section {
  background: linear-gradient(135deg, #000000 0%, #0a0a0a 100%);
}

[data-theme="dark"] .social-platform {
  background: #000000;
  box-shadow: 0 10px 40px rgba(139, 90, 43, 0.1);
}

[data-theme="dark"] .platform-info h3 {
  color: #ffffff;
}

[data-theme="dark"] .platform-info span {
  color: #ffffff;
}

[data-theme="dark"] .btn-follow {
  background: #8b5a2b;
  color: #ffffff;
  border-color: #8b5a2b;
}

[data-theme="dark"] .btn-follow:hover {
  background: transparent;
  color: #8b5a2b;
}

/* ===== Contact ===== */
[data-theme="dark"] .contact-section {
  background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)),
    url("https://images.unsplash.com/photo-1560066984-138dadb4c035?w=1920")
      center/cover fixed;
}

[data-theme="dark"] .contact-form-box {
  background: #000000;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .contact-form-box input,
[data-theme="dark"] .contact-form-box textarea {
  background: #0a0a0a;
  border-color: #1a1a1a;
  color: #ffffff;
}

[data-theme="dark"] .contact-form-box input:focus,
[data-theme="dark"] .contact-form-box textarea:focus {
  background: #000000;
  border-color: #8b5a2b;
  box-shadow: 0 0 0 4px rgba(139, 90, 43, 0.2);
}

[data-theme="dark"] .contact-info-box .subtitle {
  color: #8b5a2b;
}

[data-theme="dark"] .contact-info-box h2 {
  color: #ffffff;
}

[data-theme="dark"] .contact-info-box > p {
  color: #ffffff;
}

[data-theme="dark"] .info-item i {
  background: rgba(139, 90, 43, 0.2);
  color: #8b5a2b;
}

[data-theme="dark"] .info-item h5 {
  color: #ffffff;
}

[data-theme="dark"] .info-item p {
  color: #ffffff;
}

/* ===== Cart Sidebar ===== */
[data-theme="dark"] .cart-sidebar {
  background: #000000;
  box-shadow: -10px 0 40px rgba(139, 90, 43, 0.2);
}

[data-theme="dark"] .cart-header h3 {
  color: #ffffff;
}

[data-theme="dark"] .close-cart {
  color: #ffffff;
}

[data-theme="dark"] .close-cart:hover {
  color: #8b5a2b;
}

[data-theme="dark"] .cart-item {
  background: #0a0a0a;
  border-color: #1a1a1a;
}

[data-theme="dark"] .cart-item:hover {
  border-color: #8b5a2b;
}

[data-theme="dark"] .cart-item-details h4 {
  color: #ffffff;
}

[data-theme="dark"] .cart-item-price {
  color: #8b5a2b;
}

[data-theme="dark"] .quantity-control button {
  background: #000000;
  border-color: #1a1a1a;
  color: #ffffff;
}

[data-theme="dark"] .quantity-control button:hover {
  background: #8b5a2b;
  color: #ffffff;
  border-color: #8b5a2b;
}

[data-theme="dark"] .quantity-control span {
  color: #ffffff;
}

[data-theme="dark"] .cart-footer {
  background: #0a0a0a;
  border-color: #1a1a1a;
}

[data-theme="dark"] .cart-total-row {
  color: #ffffff;
}

[data-theme="dark"] .cart-total-row strong {
  color: #ffffff;
}

[data-theme="dark"] .shipping-note {
  color: #ffffff;
}

[data-theme="dark"] .btn-checkout,
[data-theme="dark"] .btn-continue {
  background: linear-gradient(135deg, #8b5a2b 0%, #5d4037 100%);
  color: #ffffff;
}

[data-theme="dark"] .btn-checkout:hover,
[data-theme="dark"] .btn-continue:hover {
  background: linear-gradient(135deg, #a67b5b 0%, #8b5a2b 100%);
}

[data-theme="dark"] .empty-cart i {
  color: #8b5a2b;
}

[data-theme="dark"] .empty-cart p {
  color: #ffffff;
}

[data-theme="dark"] .empty-cart a {
  color: #8b5a2b;
}

/* ===== Quick View Modal ===== */
[data-theme="dark"] .quick-view-modal {
  background: rgba(0, 0, 0, 0.9) !important;
}

[data-theme="dark"] .quick-view-modal.active {
  background: #000000 !important;
}

[data-theme="dark"] .quick-view-content {
  background: #000000 !important;
}

[data-theme="dark"] .quick-view-image {
  background: #0a0a0a !important;
}

[data-theme="dark"] .quick-view-details h2 {
  color: #ffffff;
}

[data-theme="dark"] .quick-view-details .price {
  color: #8b5a2b;
}

[data-theme="dark"] .quick-view-details .description {
  color: #ffffff;
}

[data-theme="dark"] .close-quick-view {
  background: #1a1a1a;
  color: #ffffff;
}

[data-theme="dark"] .close-quick-view:hover {
  background: #8b5a2b;
  color: #ffffff;
}

/* ===== Toast ===== */
[data-theme="dark"] .toast {
  background: #000000;
  border-left-color: #8b5a2b;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .toast.success {
  border-left-color: #8b5a2b;
}

[data-theme="dark"] .toast i {
  color: #8b5a2b;
}

[data-theme="dark"] .toast-content h4 {
  color: #ffffff;
}

[data-theme="dark"] .toast-content p {
  color: #ffffff;
}

/* ===== Checkout Modal ===== */
[data-theme="dark"] .checkout-modal {
  background: rgba(0, 0, 0, 0.9);
}

[data-theme="dark"] .checkout-content {
  background: #000000;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .checkout-header {
  background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
  border-color: #1a1a1a;
}

[data-theme="dark"] .checkout-header h2 {
  color: #ffffff;
}

[data-theme="dark"] .checkout-steps .step span {
  color: #ffffff;
}

[data-theme="dark"] .step-number {
  background: #1a1a1a;
  color: #ffffff;
}

[data-theme="dark"] .step.active .step-number {
  background: #8b5a2b;
  color: #ffffff;
}

[data-theme="dark"] .step-line {
  background: #1a1a1a;
}

[data-theme="dark"] .step-line::after {
  background: #8b5a2b;
}

[data-theme="dark"] .checkout-step-content h3 {
  color: #ffffff;
  border-color: #1a1a1a;
}

[data-theme="dark"] .form-group label {
  color: #ffffff;
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .form-group select {
  background: #0a0a0a;
  border-color: #1a1a1a;
  color: #ffffff;
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group textarea:focus,
[data-theme="dark"] .form-group select:focus {
  background: #000000;
  border-color: #8b5a2b;
  box-shadow: 0 0 0 4px rgba(139, 90, 43, 0.2);
}

/* Payment Methods */
[data-theme="dark"] .payment-method-card {
  background: #000000;
  border-color: #1a1a1a;
}

[data-theme="dark"] .payment-method-card:hover {
  border-color: #8b5a2b;
  box-shadow: 0 5px 20px rgba(139, 90, 43, 0.15);
}

[data-theme="dark"] .payment-method-card.active {
  background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
  border-color: #8b5a2b;
}

[data-theme="dark"] .payment-icon {
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  color: #8b5a2b;
}

[data-theme="dark"] .payment-method-card.active .payment-icon {
  background: linear-gradient(135deg, #8b5a2b 0%, #5d4037 100%);
  color: #ffffff;
}

[data-theme="dark"] .payment-details h4 {
  color: #ffffff;
}

[data-theme="dark"] .payment-details p {
  color: #ffffff;
}

[data-theme="dark"] .payment-badge {
  background: #8b5a2b;
  color: #ffffff;
}

[data-theme="dark"] .radio-custom {
  border-color: #1a1a1a;
}

[data-theme="dark"] .payment-method-card.active .radio-custom {
  border-color: #8b5a2b;
  background: #8b5a2b;
}

[data-theme="dark"] .payment-check {
  color: #8b5a2b;
}

[data-theme="dark"] .cod-info-box {
  background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
  border-color: #8b5a2b;
}

[data-theme="dark"] .cod-info-box h4 {
  color: #8b5a2b;
}

[data-theme="dark"] .cod-info-box p {
  color: #ffffff;
}

/* Checkout Buttons */
[data-theme="dark"] .btn-continue-checkout {
  background: #8b5a2b;
  color: #ffffff;
}

[data-theme="dark"] .btn-continue-checkout:hover {
  background: #a67b5b;
}

[data-theme="dark"] .btn-place-order {
  background: linear-gradient(135deg, #8b5a2b 0%, #5d4037 100%);
  color: #ffffff;
}

[data-theme="dark"] .btn-back {
  background: transparent;
  border-color: #1a1a1a;
  color: #ffffff;
}

[data-theme="dark"] .btn-back:hover {
  border-color: #8b5a2b;
  color: #8b5a2b;
}

/* Review Box */
[data-theme="dark"] .review-box {
  background: #0a0a0a;
  border-color: #1a1a1a;
}

[data-theme="dark"] .review-box h4 {
  color: #ffffff;
}

[data-theme="dark"] .review-box h4 i {
  color: #8b5a2b;
}

[data-theme="dark"] .review-box p {
  color: #ffffff;
}

[data-theme="dark"] .review-name {
  color: #ffffff !important;
}

[data-theme="dark"] .btn-edit {
  background: #000000;
  border-color: #1a1a1a;
  color: #8b5a2b;
}

[data-theme="dark"] .btn-edit:hover {
  background: #8b5a2b;
  color: #ffffff;
}

[data-theme="dark"] .review-item-info h5 {
  color: #ffffff;
}

[data-theme="dark"] .review-item-info p {
  color: #ffffff;
}

[data-theme="dark"] .review-item-price {
  color: #8b5a2b;
}

[data-theme="dark"] .order-summary-final {
  background: #0a0a0a;
  color: #ffffff;
}

[data-theme="dark"] .summary-row.total {
  border-color: #1a1a1a;
}

/* Checkout Sidebar */
[data-theme="dark"] .checkout-sidebar {
  background: #0a0a0a;
  border-color: #1a1a1a;
}

[data-theme="dark"] .checkout-sidebar h3 {
  color: #ffffff;
  border-color: #1a1a1a;
}

[data-theme="dark"] .sidebar-item {
  border-color: #1a1a1a;
}

[data-theme="dark"] .sidebar-item-info h5 {
  color: #ffffff;
}

[data-theme="dark"] .sidebar-item-info p {
  color: #ffffff;
}

[data-theme="dark"] .sidebar-item-price {
  color: #8b5a2b;
}

[data-theme="dark"] .sidebar-summary {
  border-color: #1a1a1a;
}

[data-theme="dark"] .summary-line {
  color: #ffffff;
}

[data-theme="dark"] .summary-line.total {
  color: #ffffff;
}

[data-theme="dark"] .secure-checkout-badge {
  background: #000000;
  color: #ffffff;
}

[data-theme="dark"] .secure-checkout-badge i {
  color: #8b5a2b;
}

/* ===== Order Success Modal ===== */
[data-theme="dark"] .order-success-modal {
  background: rgba(0, 0, 0, 0.9);
}

[data-theme="dark"] .success-content {
  background: #000000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .checkmark-circle {
  background: linear-gradient(135deg, #8b5a2b 0%, #5d4037 100%);
  box-shadow: 0 10px 40px rgba(139, 90, 43, 0.4);
}

[data-theme="dark"] .success-content h2 {
  color: #ffffff;
}

[data-theme="dark"] .success-content > p {
  color: #ffffff;
}

[data-theme="dark"] .order-number {
  background: #0a0a0a;
  border-color: #1a1a1a;
}

[data-theme="dark"] .order-number span {
  color: #8b5a2b;
}

[data-theme="dark"] .btn-continue-shopping {
  background: #8b5a2b;
  color: #ffffff;
}

[data-theme="dark"] .btn-continue-shopping:hover {
  background: #a67b5b;
}

/* ===== Customer Service Modal ===== */
[data-theme="dark"] .customer-service-modal {
  background: rgba(0, 0, 0, 0.9);
}

[data-theme="dark"] .customer-service-content {
  background: #000000;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .customer-service-header {
  background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
  border-color: #1a1a1a;
}

[data-theme="dark"] .customer-service-header > i {
  color: #8b5a2b;
}

[data-theme="dark"] .customer-service-header h2 {
  color: #ffffff;
}

[data-theme="dark"] .customer-service-header p {
  color: #ffffff;
}

[data-theme="dark"] .service-option {
  background: #0a0a0a;
}

[data-theme="dark"] .service-option:hover {
  background: #000000;
  border-color: #8b5a2b;
}

[data-theme="dark"] .service-icon {
  background: linear-gradient(135deg, #8b5a2b 0%, #5d4037 100%);
}

[data-theme="dark"] .service-info h4 {
  color: #ffffff;
}

[data-theme="dark"] .service-info p {
  color: #ffffff;
}

[data-theme="dark"] .customer-service-footer {
  background: #0a0a0a;
  border-color: #1a1a1a;
}

[data-theme="dark"] .customer-service-footer p {
  color: #ffffff;
}

[data-theme="dark"] .customer-service-footer a {
  color: #8b5a2b;
}

[data-theme="dark"] .service-hours {
  color: #8b5a2b;
}

/* ===== Return Modal ===== */
[data-theme="dark"] .return-modal {
  background: rgba(0, 0, 0, 0.9);
}

[data-theme="dark"] .return-content {
  background: #000000;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .return-header {
  background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
  border-color: #1a1a1a;
}

[data-theme="dark"] .return-badge {
  background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
  border-color: #8b5a2b;
}

[data-theme="dark"] .return-badge i {
  color: #8b5a2b;
}

[data-theme="dark"] .return-badge span {
  color: #8b5a2b;
}

[data-theme="dark"] .return-header h2 {
  color: #ffffff;
}

[data-theme="dark"] .return-header p {
  color: #ffffff;
}

[data-theme="dark"] .return-policy-info {
  background: #0a0a0a;
}

[data-theme="dark"] .policy-item i {
  background: #000000;
  color: #8b5a2b;
  box-shadow: 0 3px 10px rgba(139, 90, 43, 0.2);
}

[data-theme="dark"] .policy-item h4 {
  color: #ffffff;
}

[data-theme="dark"] .policy-item p {
  color: #ffffff;
}

[data-theme="dark"] .video-notice-banner {
  background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
  border-color: #8b5a2b;
}

[data-theme="dark"] .video-notice-content i {
  color: #8b5a2b;
}

[data-theme="dark"] .video-notice-content h4 {
  color: #ffffff;
}

[data-theme="dark"] .video-notice-content p {
  color: #ffffff;
}

[data-theme="dark"] .return-form-section h3 {
  color: #ffffff;
  border-color: #1a1a1a;
}

[data-theme="dark"] .reason-option {
  background: #0a0a0a;
}

[data-theme="dark"] .reason-option:hover {
  background: #000000;
  border-color: #8b5a2b;
}

[data-theme="dark"] .reason-content i {
  color: #8b5a2b;
}

[data-theme="dark"] .reason-content span {
  color: #ffffff;
}

[data-theme="dark"] .reason-radio {
  border-color: #1a1a1a;
}

[data-theme="dark"] .reason-option input:checked + .reason-radio {
  border-color: #8b5a2b;
  background: #8b5a2b;
}

[data-theme="dark"] .video-upload-area {
  background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
  border-color: #8b5a2b;
}

[data-theme="dark"] .video-upload-area:hover {
  background: #000000;
}

[data-theme="dark"] .upload-placeholder i {
  color: #8b5a2b;
}

[data-theme="dark"] .upload-placeholder span {
  color: #ffffff;
}

[data-theme="dark"] .upload-placeholder small {
  color: #ffffff;
}

[data-theme="dark"] .video-success-msg {
  background: #0a0a0a;
  color: #8b5a2b;
}

[data-theme="dark"] .remove-video-btn {
  background: #8b5a2b;
}

[data-theme="dark"] .btn-submit-return {
  background: linear-gradient(135deg, #8b5a2b 0%, #5d4037 100%);
}

[data-theme="dark"] .return-note {
  background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
  border-color: #1a1a1a;
}

[data-theme="dark"] .return-note i {
  color: #8b5a2b;
}

[data-theme="dark"] .return-note p {
  color: #ffffff;
}

/* ===== Policy Modal ===== */
[data-theme="dark"] .policy-modal {
  background: rgba(0, 0, 0, 0.9);
}

[data-theme="dark"] .policy-content {
  background: #000000;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .policy-content h2 {
  background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
  border-color: #1a1a1a;
  color: #ffffff;
}

[data-theme="dark"] .policy-content h2 i {
  color: #8b5a2b;
}

[data-theme="dark"] .policy-section h3 {
  color: #ffffff;
}

[data-theme="dark"] .policy-section h3::before {
  background: #8b5a2b;
}

[data-theme="dark"] .policy-section p,
[data-theme="dark"] .policy-section li {
  color: #ffffff;
}

[data-theme="dark"] .policy-section strong {
  color: #8b5a2b;
}

[data-theme="dark"] .video-policy-section {
  background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
  border-color: #8b5a2b;
}

[data-theme="dark"] .video-policy-section h3 {
  color: #ffffff;
}

[data-theme="dark"] .video-policy-section h3 i {
  color: #8b5a2b;
}

[data-theme="dark"] .video-requirement-icon {
  background: linear-gradient(135deg, #8b5a2b 0%, #5d4037 100%);
}

[data-theme="dark"] .video-requirement-content h4 {
  color: #ffffff;
}

[data-theme="dark"] .video-requirement-content p,
[data-theme="dark"] .video-requirement-content li {
  color: #ffffff;
}

[data-theme="dark"] .video-warning {
  color: #ffffff;
  background: #0a0a0a;
}

/* ===== Gift Box Modal ===== */
[data-theme="dark"] .gift-box-modal {
  background: rgba(0, 0, 0, 0.9);
}

[data-theme="dark"] .gift-box-content {
  background: #000000;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .gift-box-header {
  background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
  border-color: #1a1a1a;
}

[data-theme="dark"] .gift-icon {
  background: linear-gradient(135deg, #8b5a2b 0%, #5d4037 100%);
  box-shadow: 0 10px 30px rgba(139, 90, 43, 0.3);
}

[data-theme="dark"] .gift-box-header h2 {
  color: #ffffff;
}

[data-theme="dark"] .gift-box-header p {
  color: #ffffff;
}

[data-theme="dark"] .gift-box-visual {
  background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
}

[data-theme="dark"] .gift-box-coming-soon {
  background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
}

[data-theme="dark"] .gift-box-coming-soon h3 {
  color: #ce93d8;
}

[data-theme="dark"] .gift-box-coming-soon p {
  color: #ffffff;
}

[data-theme="dark"] .gift-box-image-container {
  background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
}

[data-theme="dark"] .gift-box-badge {
  background: linear-gradient(135deg, #8b5a2b 0%, #5d4037 100%);
  box-shadow: 0 10px 30px rgba(139, 90, 43, 0.4);
}

[data-theme="dark"] .gift-box-overlay {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
}

[data-theme="dark"] .gift-mini-item {
  background: #0a0a0a;
  border-color: #1a1a1a;
}

[data-theme="dark"] .gift-mini-item:hover {
  border-color: #8b5a2b;
}

[data-theme="dark"] .gift-mini-item i {
  background: linear-gradient(135deg, #8b5a2b 0%, #5d4037 100%);
}

[data-theme="dark"] .gift-mini-item span {
  color: #ffffff;
}

[data-theme="dark"] .gift-box-summary {
  background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
  border-color: #1a1a1a;
}

[data-theme="dark"] .gift-total span {
  color: #ffffff;
}

[data-theme="dark"] .gift-total del {
  color: #666666;
}

[data-theme="dark"] .gift-total strong {
  color: #ffffff;
}

[data-theme="dark"] .gift-savings {
  background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
  border-color: #8b5a2b;
  color: #8b5a2b;
}

[data-theme="dark"] .btn-add-gift-box {
  background: linear-gradient(135deg, #8b5a2b 0%, #5d4037 100%);
}

[data-theme="dark"] .btn-add-gift-box:hover {
  background: linear-gradient(135deg, #a67b5b 0%, #8b5a2b 100%);
}

/* ===== Sale Section ===== */
[data-theme="dark"] .sale-section {
  background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%) !important;
  border-color: #8b5a2b;
}

[data-theme="dark"] .sale-section::before {
  background: repeating-linear-gradient(
    45deg,
    #8b5a2b,
    #8b5a2b 10px,
    #5d4037 10px,
    #5d4037 20px
  );
}

[data-theme="dark"] .sale-section .section-header h2 {
  color: #8b5a2b !important;
}

[data-theme="dark"] .sale-subtitle {
  color: #8b5a2b;
}

[data-theme="dark"] .sale-section .subtitle {
  color: #8b5a2b !important;
}

[data-theme="dark"] .sale-section .subtitle::before,
[data-theme="dark"] .sale-section .subtitle::after {
  background: #8b5a2b !important;
}

[data-theme="dark"] .sale-section .product-card {
  border-color: #8b5a2b;
}

[data-theme="dark"] .sale-section .current-price {
  color: #8b5a2b !important;
}

[data-theme="dark"] .sale-section .discount {
  background: #8b5a2b;
  color: #ffffff;
}

[data-theme="dark"] .product-badge.sale {
  background: #8b5a2b !important;
}

[data-theme="dark"] .back-to-all .btn-primary {
  background: #8b5a2b !important;
  border-color: #8b5a2b !important;
}

/* ===== Footer ===== */
[data-theme="dark"] .main-footer {
  background: #000000 !important;
  color: #ffffff !important;
  border-top: 1px solid #1a1a1a;
}

[data-theme="dark"] .footer-col h4 {
  color: #ffffff !important;
}

[data-theme="dark"] .footer-col h4::after {
  background: #8b5a2b;
}

[data-theme="dark"] .footer-col p,
[data-theme="dark"] .footer-col a,
[data-theme="dark"] .footer-bottom p,
[data-theme="dark"] .footer-bottom a {
  color: #ffffff !important;
}

[data-theme="dark"] .footer-col a:hover {
  color: #8b5a2b !important;
}

[data-theme="dark"] .newsletter-form input {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border: 1px solid #1a1a1a;
}

[data-theme="dark"] .newsletter-form input::placeholder {
  color: #666666 !important;
}

[data-theme="dark"] .newsletter-form button {
  background: #8b5a2b;
}

[data-theme="dark"] .newsletter-form button:hover {
  background: #a67b5b;
}

[data-theme="dark"] .footer-bottom {
  border-color: #1a1a1a;
}

/* ===== Search ===== */
[data-theme="dark"] .search-box input,
[data-theme="dark"] .desktop-search input {
  background: #0a0a0a;
  border-color: #1a1a1a;
  color: #ffffff;
}

[data-theme="dark"] .search-box input:focus,
[data-theme="dark"] .desktop-search input:focus {
  border-color: #8b5a2b;
}

[data-theme="dark"] .mobile-search-dropdown {
  background: #000000;
  border-color: #1a1a1a;
}

[data-theme="dark"] .mobile-search-dropdown input {
  background: #0a0a0a;
  border-color: #1a1a1a;
  color: #ffffff;
}

[data-theme="dark"] .search-suggestions {
  background: #000000;
  border-color: #1a1a1a;
}

[data-theme="dark"] .search-suggestion-item {
  border-color: #1a1a1a;
}

[data-theme="dark"] .search-suggestion-item:hover {
  background: #0a0a0a;
}

[data-theme="dark"] .suggestion-info h5 {
  color: #ffffff;
}

[data-theme="dark"] .suggestion-info span {
  color: #ffffff;
}

[data-theme="dark"] .search-suggestion-more {
  background: #0a0a0a;
  border-color: #1a1a1a;
  color: #8b5a2b;
}

[data-theme="dark"] .search-suggestion-more:hover {
  background: #000000;
}

[data-theme="dark"] .no-search-results h3 {
  color: #ffffff;
}

[data-theme="dark"] .no-search-results p {
  color: #ffffff;
}

/* ===== Preloader ===== */
[data-theme="dark"] .preloader {
  background: #000000;
}

[data-theme="dark"] .loading-text {
  color: #8b5a2b;
}

[data-theme="dark"] .loader .circle {
  border-top-color: #8b5a2b;
}

[data-theme="dark"] .loader .circle:nth-child(2) {
  border-top-color: #a67b5b;
}

[data-theme="dark"] .loader .circle:nth-child(3) {
  border-top-color: #5d4037;
}

/* ===== Go To Top ===== */
[data-theme="dark"] .go-to-top {
  background: #8b5a2b;
  color: #ffffff;
  box-shadow: 0 5px 20px rgba(139, 90, 43, 0.4);
}

[data-theme="dark"] .go-to-top.visible:hover {
  background: #a67b5b;
}

/* ===== Overlay ===== */
[data-theme="dark"] .overlay {
  background: rgba(0, 0, 0, 0.8) !important;
}

/* ===== Slider ===== */
[data-theme="dark"] .slider-arrows button {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(139, 90, 43, 0.5);
}

[data-theme="dark"] .slider-arrows button:hover {
  background: #8b5a2b;
  color: #ffffff;
}

[data-theme="dark"] .dot {
  background: rgba(139, 90, 43, 0.5);
}

[data-theme="dark"] .dot.active {
  background: #8b5a2b;
}

/* ===== WhatsApp Float ===== */
[data-theme="dark"] .whatsapp-float {
  background: #8b5a2b;
  box-shadow: 0 10px 30px rgba(139, 90, 43, 0.4);
}

[data-theme="dark"] .whatsapp-float:hover {
  box-shadow: 0 15px 40px rgba(139, 90, 43, 0.5);
}

[data-theme="dark"] .whatsapp-float .tooltip {
  background: #0a0a0a;
  color: #ffffff;
}

[data-theme="dark"] .dark-mode-float {
  background: #0d0d1a;
  border-color: #c49a6c;
}

[data-theme="dark"] .dark-mode-float .dm-float-inner {
  background: #c49a6c;
}

[data-theme="dark"] .dark-mode-float .dm-float-label {
  color: #e0c9a6;
}

/* ===== Reviews System ===== */
[data-theme="dark"] .reviews-modal {
  background: rgba(0, 0, 0, 0.9);
}

[data-theme="dark"] .reviews-content {
  background: #000000;
}

[data-theme="dark"] .reviews-header {
  background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
  border-color: #1a1a1a;
}

[data-theme="dark"] .reviews-product-info .product-meta h3 {
  color: #ffffff;
}

[data-theme="dark"] .reviews-product-info .product-meta .rating-number {
  color: #ffffff;
}

[data-theme="dark"] .reviews-product-info .product-meta .total-reviews {
  color: #ffffff;
}

[data-theme="dark"] .reviews-stats {
  background: #0a0a0a;
}

[data-theme="dark"] .reviews-stats .overall-rating {
  background: #000000;
  box-shadow: 0 5px 20px rgba(139, 90, 43, 0.1);
}

[data-theme="dark"] .reviews-stats .overall-rating .big-rating {
  color: #ffffff;
}

[data-theme="dark"] .reviews-stats .overall-rating .total-count {
  color: #ffffff;
}

[data-theme="dark"] .rating-bar-item .star-label {
  color: #ffffff;
}

[data-theme="dark"] .rating-bar-item .bar-track {
  background: #1a1a1a;
}

[data-theme="dark"] .rating-bar-item .bar-count {
  color: #ffffff;
}

[data-theme="dark"] .reviews-filters {
  border-color: #1a1a1a;
}

[data-theme="dark"] .reviews-filters h4 {
  color: #ffffff;
}

[data-theme="dark"] .review-filter-btn {
  background: #000000;
  border-color: #1a1a1a;
  color: #ffffff;
}

[data-theme="dark"] .review-filter-btn:hover {
  border-color: #8b5a2b;
  color: #8b5a2b;
}

[data-theme="dark"] .review-filter-btn.active {
  background: #8b5a2b;
  border-color: #8b5a2b;
  color: #ffffff;
}

[data-theme="dark"] .reviews-sort select {
  background: #000000;
  border-color: #1a1a1a;
  color: #ffffff;
}

[data-theme="dark"] .review-item {
  border-color: #1a1a1a;
}

[data-theme="dark"] .review-author-info h5 {
  color: #ffffff;
}

[data-theme="dark"] .review-author-info .review-date {
  color: #ffffff;
}

[data-theme="dark"] .review-rating .review-title-text {
  color: #ffffff;
}

[data-theme="dark"] .review-content {
  color: #ffffff;
}

[data-theme="dark"] .review-helpful {
  color: #ffffff;
}

[data-theme="dark"] .review-helpful button {
  background: #0a0a0a;
  border-color: #1a1a1a;
  color: #ffffff;
}

[data-theme="dark"] .review-helpful button:hover {
  background: #8b5a2b;
  color: #ffffff;
  border-color: #8b5a2b;
}

[data-theme="dark"] .reviews-form-section {
  background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
  border-color: #1a1a1a;
}

[data-theme="dark"] .reviews-form-section h4 {
  color: #ffffff;
}

[data-theme="dark"] .star-rating-input i {
  color: #1a1a1a;
}

[data-theme="dark"] .star-rating-input i.hovered,
[data-theme="dark"] .star-rating-input i.selected {
  color: #8b5a2b;
}

[data-theme="dark"] .rating-text {
  color: #ffffff;
}

[data-theme="dark"] .review-photo-upload {
  background: #0a0a0a;
  border-color: #1a1a1a;
}

[data-theme="dark"] .review-photo-upload:hover {
  background: #000000;
  border-color: #8b5a2b;
}

[data-theme="dark"] .photo-upload-placeholder i {
  color: #8b5a2b;
}

[data-theme="dark"] .photo-upload-placeholder span {
  color: #ffffff;
}

[data-theme="dark"] .photo-upload-placeholder small {
  color: #ffffff;
}

[data-theme="dark"] .verified-checkbox {
  color: #ffffff;
}

[data-theme="dark"] .verified-checkbox .checkmark {
  background: #000000;
  border-color: #1a1a1a;
}

[data-theme="dark"] .verified-checkbox input:checked + .checkmark {
  background: #8b5a2b;
  border-color: #8b5a2b;
}

[data-theme="dark"] .btn-submit-review {
  background: linear-gradient(135deg, #8b5a2b 0%, #5d4037 100%);
}

[data-theme="dark"] .btn-submit-review:hover {
  background: linear-gradient(135deg, #a67b5b 0%, #8b5a2b 100%);
}

[data-theme="dark"] .reviews-pagination {
  border-color: #1a1a1a;
}

[data-theme="dark"] .reviews-pagination button {
  background: #000000;
  border-color: #1a1a1a;
  color: #ffffff;
}

[data-theme="dark"] .reviews-pagination button:hover {
  border-color: #8b5a2b;
  color: #8b5a2b;
}

[data-theme="dark"] .reviews-pagination button.active {
  background: #8b5a2b;
  border-color: #8b5a2b;
  color: #ffffff;
}

[data-theme="dark"] .product-reviews-link {
  color: #8b5a2b;
}

[data-theme="dark"] .review-count-badge {
  color: #ffffff;
}

[data-theme="dark"] .home-reviews-section {
  background: linear-gradient(135deg, #000000 0%, #0a0a0a 100%);
}

[data-theme="dark"] .home-review-card {
  background: #000000;
  border-color: #1a1a1a;
}

[data-theme="dark"] .home-review-card .review-text {
  color: #ffffff;
}

[data-theme="dark"] .home-review-card .reviewer-details h5 {
  color: #ffffff;
}

[data-theme="dark"] .home-review-card .review-product span {
  color: #ffffff;
}

/* ===== Home Page Reviews Link ===== */
[data-theme="dark"] .product-reviews-link {
  color: #8b5a2b;
}

/* ===== Smooth Theme Transition ===== */
body, .main-header, .product-card, .cart-sidebar, .checkout-content,
.testimonial-card, .social-platform, .contact-form-box, .mobile-menu,
.filter-widget, .shop-toolbar, .feature-item, .category-card,
.review-box, .service-option, .return-policy-info, .policy-item,
.video-upload-area, .gift-box-visual, .home-review-card,
.reviews-content, .customer-service-content, .return-content,
.policy-content, .gift-box-content, .quick-view-content,
.order-success-modal .success-content, .dropdown, .toast,
.form-group input, .form-group textarea, .form-group select,
.newsletter-form input, .search-box input, .mobile-search-dropdown input {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Mobile Dark Mode Toggle */
@media (max-width: 992px) {
  .dark-mode-toggle {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .dark-mode-toggle {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
}



/* ==========================================
   CART SIDEBAR - FULL BLACK BACKGROUND FIX
   ========================================== */

/* Force entire cart sidebar black */
[data-theme="dark"] .cart-sidebar,
[data-theme="dark"] .cart-sidebar * {
  background-color: #000000 !important;
}

/* Cart items area - ensure black */
[data-theme="dark"] .cart-items {
  background: #000000 !important;
}

/* Cart item individual - black bg */
[data-theme="dark"] .cart-item {
  background: #0a0a0a !important;
  border-color: #1a1a1a !important;
}

/* Cart footer - black */
[data-theme="dark"] .cart-footer {
  background: #000000 !important;
  border-color: #1a1a1a !important;
}

/* Cart header - black */
[data-theme="dark"] .cart-header {
  background: #000000 !important;
  border-color: #1a1a1a !important;
}

/* Empty cart - black bg */
[data-theme="dark"] .empty-cart {
  background: #000000 !important;
}

/* Shipping row - black */
[data-theme="dark"] .cart-shipping-row,
[data-theme="dark"] .cart-footer .cart-shipping-row {
  background: #000000 !important;
}

/* Subtotal row - black */
[data-theme="dark"] .cart-total-row {
  background: #000000 !important;
}

/* Ensure no white gaps in cart */
[data-theme="dark"] .cart-sidebar .cart-items:empty,
[data-theme="dark"] .cart-sidebar .cart-items:empty::before {
  background: #000000 !important;
}

/* Fix any potential white backgrounds in cart */
[data-theme="dark"] .cart-sidebar > div,
[data-theme="dark"] .cart-sidebar > section {
  background: #000000 !important;
}

/* ==========================================
   CHECKOUT MODAL - FULL BLACK FIX
   ========================================== */

/* Checkout modal background */
[data-theme="dark"] .checkout-modal {
  background: rgba(0, 0, 0, 0.95) !important;
}

/* Checkout content - full black */
[data-theme="dark"] .checkout-content,
[data-theme="dark"] .checkout-content > div,
[data-theme="dark"] .checkout-content > section {
  background: #000000 !important;
}

/* Checkout header */
[data-theme="dark"] .checkout-header {
  background: #000000 !important;
  border-color: #1a1a1a !important;
}

/* Checkout body */
[data-theme="dark"] .checkout-body {
  background: #000000 !important;
}

/* Checkout sidebar */
[data-theme="dark"] .checkout-sidebar {
  background: #000000 !important;
  border-color: #1a1a1a !important;
}

/* All checkout step content */
[data-theme="dark"] .checkout-step-content,
[data-theme="dark"] .checkout-step-content.active {
  background: #000000 !important;
}

/* Payment methods area */
[data-theme="dark"] .payment-methods {
  background: #000000 !important;
}

/* Order review section */
[data-theme="dark"] .order-review-section {
  background: #000000 !important;
}

/* Review boxes */
[data-theme="dark"] .review-box {
  background: #0a0a0a !important;
  border-color: #1a1a1a !important;
}

/* Order items box */
[data-theme="dark"] .order-items-box {
  background: #000000 !important;
}

/* Order summary final */
[data-theme="dark"] .order-summary-final {
  background: #0a0a0a !important;
}

/* Sidebar items container */
[data-theme="dark"] .sidebar-items {
  background: #000000 !important;
}

/* Sidebar item */
[data-theme="dark"] .sidebar-item {
  background: #000000 !important;
  border-color: #1a1a1a !important;
}

/* Sidebar summary */
[data-theme="dark"] .sidebar-summary {
  background: #000000 !important;
  border-color: #1a1a1a !important;
}

/* Summary line */
[data-theme="dark"] .summary-line {
  background: #000000 !important;
}

/* Secure checkout badge */
[data-theme="dark"] .secure-checkout-badge {
  background: #0a0a0a !important;
  border: 1px solid #1a1a1a;
}

/* Form groups */
[data-theme="dark"] .form-group {
  background: #000000 !important;
}

/* Checkout buttons container */
[data-theme="dark"] .checkout-buttons {
  background: #000000 !important;
}

/* COD info box */
[data-theme="dark"] .cod-info-box {
  background: #0a0a0a !important;
  border-color: #1a1a1a !important;
}

/* Digital payment form if exists */
[data-theme="dark"] .digital-payment-form,
[data-theme="dark"] .dpf-header,
[data-theme="dark"] .account-number-box,
[data-theme="dark"] .txn-input-group {
  background: #000000 !important;
}

/* ==========================================
   GLOBAL WHITE BACKGROUND KILLER
   ========================================== */

/* Kill any remaining white backgrounds in dark mode */
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color: #fff"] {
  background: #000000 !important;
  background-color: #000000 !important;
}

/* Ensure all children of cart and checkout are black */
[data-theme="dark"] .cart-sidebar,
[data-theme="dark"] .cart-sidebar *,
[data-theme="dark"] .checkout-content,
[data-theme="dark"] .checkout-content * {
  --override-bg: #000000;
}
/* ==========================================
   ANNOUNCEMENT BAR
   ========================================== */

.announcement-bar {
  position: relative;
  width: 100%;
  height: 36px;
  background: linear-gradient(90deg, var(--brown-dark) 0%, var(--brown) 50%, var(--brown-dark) 100%);
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  transition: height 0.3s ease, opacity 0.3s ease;
}

.announcement-bar.hidden {
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.announcement-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: announcementScroll 28s linear infinite;
  gap: 0;
  padding-right: 40px;
}

.announcement-bar:hover .announcement-track {
  animation-play-state: paused;
}

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

.announcement-item {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.announcement-item i {
  font-size: 11px;
  opacity: 0.9;
}

.announcement-sep {
  font-size: 9px;
  opacity: 0.5;
  flex-shrink: 0;
}

.announcement-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
  z-index: 2;
}

.announcement-close:hover {
  background: rgba(255,255,255,0.3);
}

/* Push body down when bar is visible */
body.has-announcement-bar {
  padding-top: calc(70px + 36px) !important;
}

@media (max-width: 992px) {
    body.has-announcement-bar { padding-top: calc(60px + 30px) !important; }
    body:not(.has-announcement-bar) { padding-top: 60px !important; }
    .announcement-item { font-size: 11px; padding: 0 20px; }
}

@media (max-width: 768px) {
    body.has-announcement-bar { padding-top: calc(55px + 30px) !important; }
    body:not(.has-announcement-bar) { padding-top: 55px !important; }
    .announcement-bar { height: 30px; }
    .announcement-item { font-size: 10.5px; padding: 0 16px; }
}

@media (max-width: 480px) {
    body.has-announcement-bar { padding-top: calc(50px + 28px) !important; }
    body:not(.has-announcement-bar) { padding-top: 50px !important; }
    .announcement-bar { height: 28px; }
    .announcement-item { font-size: 10px; padding: 0 14px; }
}

/* Dark mode */
[data-theme="dark"] .announcement-bar {
  background: linear-gradient(90deg, #1a110b 0%, #2e1f15 50%, #1a110b 100%);
  border-bottom: 1px solid #2e1f15;
}

/* ==========================================
   LIVE CHAT WIDGET
   ========================================== */

.live-chat-widget {
  position: fixed;
  bottom: 30px;
  right: 24px;
  z-index: 99990;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
  width: auto;
  height: auto;
}

/* Sirf actual button aur open popup pe clicks allow */
.live-chat-widget .chat-bubble-btn,
.live-chat-widget .chat-popup.open,
.live-chat-widget .chat-popup.open * {
  pointer-events: all;
}

/* Bubble Button */
.chat-bubble-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  flex-shrink: 0;
}

.chat-bubble-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.6);
}

.chat-bubble-btn:active {
  transform: scale(0.96);
}

.chat-bubble-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* Notification dot */
.chat-notif-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  background: #e74c3c;
  border-radius: 50%;
  border: 2px solid #fff;
  animation: notifPop 2s ease-in-out infinite;
}

@keyframes notifPop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}

/* Chat Popup Panel */
.chat-popup {
  width: 320px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  overflow: hidden;
  transform: scale(0.85) translateY(20px);
  transform-origin: bottom right;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
}

.chat-popup.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}

/* Header */
.chat-popup-header {
  background: #25d366;
  padding: 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chat-agent-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-agent-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  position: relative;
  flex-shrink: 0;
}

.agent-online-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid #25d366;
}

.agent-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 2px;
}

.agent-status {
  font-size: 11px;
  color: rgba(255,255,255,0.9);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.online-pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: onlinePulse 1.8s ease-in-out infinite;
}

@keyframes onlinePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.chat-close-btn {
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}

.chat-close-btn:hover {
  background: rgba(255,255,255,0.35);
}

/* Body */
.chat-popup-body {
  padding: 16px;
  background: #f0f4f8;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-greeting-bubble {
  background: #fff;
  border-radius: 14px 14px 14px 4px;
  padding: 12px 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}

.chat-greeting-bubble p {
  font-size: 13px;
  color: #2d2d2d;
  margin: 0 0 5px;
  line-height: 1.5;
}

.chat-greeting-bubble p:last-child {
  margin: 0;
}

.chat-quick-options {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.chat-option-btn {
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 24px;
  padding: 9px 16px;
  font-size: 12.5px;
  color: #1a1a1a;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: all 0.2s ease;
  font-family: "Poppins", sans-serif;
}

.chat-option-btn i {
  color: #25d366;
  font-size: 13px;
  flex-shrink: 0;
}

.chat-option-btn:hover {
  border-color: #25d366;
  background: #f0fdf4;
  transform: translateX(3px);
}

/* Footer */
.chat-popup-footer {
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
}

.chat-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 11px;
  background: #25d366;
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.2s, transform 0.15s;
}

.chat-wa-btn i {
  font-size: 18px;
}

.chat-wa-btn:hover {
  background: #1ebe5d;
  transform: translateY(-1px);
}

/* Mobile */
@media (max-width: 480px) {
  .live-chat-widget {
    bottom: 20px;
    right: 16px;
  }
  .chat-popup {
    width: 290px;
  }
  .chat-bubble-btn {
    width: 54px;
    height: 54px;
    font-size: 24px;
  }
}

/* Dark mode */
[data-theme="dark"] .chat-popup {
  background: #1a110b;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

[data-theme="dark"] .chat-popup-body {
  background: #0d0906;
}

[data-theme="dark"] .chat-greeting-bubble {
  background: #1a110b;
  box-shadow: 0 1px 6px rgba(0,0,0,0.3);
}

[data-theme="dark"] .chat-greeting-bubble p {
  color: #f5ede6;
}

[data-theme="dark"] .chat-option-btn {
  background: #1a110b;
  border-color: #2e1f15;
  color: #f5ede6;
}

[data-theme="dark"] .chat-option-btn:hover {
  border-color: #25d366;
  background: #0d1f12;
}

[data-theme="dark"] .chat-popup-footer {
  background: #1a110b;
  border-color: #2e1f15;
}

[data-theme="dark"] .announcement-bar {
  background: linear-gradient(90deg, #150e09 0%, #241710 50%, #150e09 100%);
}
/* ==========================================
   SHADE / VARIANT SELECTOR
   ========================================== */

/* Product card must not clip swatches */
.product-card {
    overflow: visible !important;
}

/* But product image still clips internally */
.product-image {
    overflow: hidden !important;
    border-radius: 20px 20px 0 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* product-info stays clean */
.product-info {
    overflow: visible !important;
    border-radius: 0 0 20px 20px;
}

.shade-selector {
    margin: 8px 0 10px;
}

.shade-label {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 7px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.shade-label .selected-shade-name {
    color: var(--brown-dark);
    font-weight: 600;
}

.shade-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.shade-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    padding: 0;
    outline: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    position: relative;
    flex-shrink: 0;
}

.shade-swatch:hover {
    transform: scale(1.22);
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}

.shade-swatch.active {
    border-color: var(--brown-dark);
    box-shadow: 0 0 0 3px rgba(139,90,43,0.25), 0 2px 8px rgba(0,0,0,0.22);
    transform: scale(1.12);
}

.shade-swatch.active::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.75);
    pointer-events: none;
}

/* Quick View shade selector — bigger swatches */
.qv-shade-selector {
    margin: 14px 0 18px;
}

.qv-shade-selector .shade-swatch {
    width: 32px;
    height: 32px;
}

.qv-shade-selector .shade-label {
    font-size: 14px;
    margin-bottom: 10px;
}

/* Cart item shade display */
.cart-item-shade {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-light);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    margin: 2px 0 4px;
}

.cart-shade-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.15);
    flex-shrink: 0;
}

/* Checkout/review sidebar shade */
.sidebar-item-shade {
    font-size: 11px;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

/* Mobile: ensure swatches visible */
@media (max-width: 768px) {
    .shade-swatch {
        width: 26px;
        height: 26px;
    }
    .shade-selector {
        margin: 6px 0 8px;
    }
}

/* ==========================================
   RTL (URDU) - FLOATING WIDGETS FIX
   ========================================== */

body[dir="rtl"] .live-chat-widget {
    right: 24px !important;
    left: auto !important;
    align-items: flex-end !important;
}

body[dir="rtl"] .chat-popup {
    transform-origin: bottom right !important;
}

body[dir="rtl"] .dark-mode-float {
    right: -28px !important;
    left: auto !important;
    border-radius: 30px 0 0 30px !important;
    padding: 0 8px 0 10px !important;
}

body[dir="rtl"] .dark-mode-float:hover,
body[dir="rtl"] .dark-mode-float.peek {
    right: 0px !important;
    left: auto !important;
}

/* ==========================================
   ALL FIXES - PERMANENT
   ========================================== */

/* QUICK VIEW - FULL SCREEN (dark mode aware) */
.quick-view-modal {
  background: var(--white) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.quick-view-modal.active {
  background: var(--white) !important;
}
@media (max-width: 768px) {
  .quick-view-modal {
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--white) !important;
  }
  .quick-view-content {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow-y: auto !important;
    box-shadow: none !important;
  }
  .quick-view-body {
    grid-template-columns: 1fr !important;
  }
  .quick-view-image {
    padding: 20px !important;
    height: 220px !important;
    border-radius: 0 !important;
  }
  .quick-view-image img {
    height: 100% !important;
    object-fit: contain !important;
  }
  .quick-view-details {
    padding: 20px !important;
  }
}
@media (max-width: 480px) {
  .quick-view-modal {
    background: var(--white) !important;
    padding: 0 !important;
  }
  .quick-view-content {
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
  .quick-view-image {
    height: 200px !important;
    padding: 16px !important;
  }
  .quick-view-details {
    padding: 16px !important;
  }
}

/* 2. RATING STARS - UPAR, REVIEW NEECHE */
.product-rating {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  margin-bottom: 10px !important;
  overflow: visible !important;
}
.stars {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  letter-spacing: -0.5px;
  color: var(--gold) !important;
}
.rating-count {
  display: block !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  color: var(--text-light) !important;
}
@media (max-width: 480px) {
  .stars { font-size: 10px !important; letter-spacing: -1px !important; }
  .stars i { font-size: 10px !important; }
  .rating-count { font-size: 10px !important; }
}
/* ==========================================
   ALL FIXES - PERMANENT
   ========================================== */

/* 1. REVIEWS MODAL - TOP SE START, NO MARGIN */
@media (max-width: 768px) {
  .reviews-modal {
    padding: 0 !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }
  .reviews-content {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow-y: auto !important;
    box-shadow: none !important;
    animation: none !important;
  }
}
@media (max-width: 480px) {
  .reviews-modal {
    padding: 0 !important;
    align-items: flex-start !important;
  }
  .reviews-content {
    border-radius: 0 !important;
    max-height: 100vh !important;
    height: 100vh !important;
  }
}

/* 2. QUICK VIEW - FULL SCREEN (dark mode aware) */
.quick-view-modal {
  background: var(--white) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.quick-view-modal.active {
  background: var(--white) !important;
}
@media (max-width: 768px) {
  .quick-view-modal {
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--white) !important;
  }
  .quick-view-content {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow-y: auto !important;
    box-shadow: none !important;
  }
  .quick-view-body {
    grid-template-columns: 1fr !important;
  }
  .quick-view-image {
    padding: 20px !important;
    height: 220px !important;
    border-radius: 0 !important;
  }
  .quick-view-image img {
    height: 100% !important;
    object-fit: contain !important;
  }
  .quick-view-details {
    padding: 20px !important;
  }
}
@media (max-width: 480px) {
  .quick-view-modal {
    background: var(--white) !important;
    padding: 0 !important;
  }
  .quick-view-content {
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
  .quick-view-image {
    height: 200px !important;
    padding: 16px !important;
  }
  .quick-view-details {
    padding: 16px !important;
  }
}

/* 3. RATING - STARS UPAR, REVIEW NEECHE */
.product-rating {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  margin-bottom: 10px !important;
  overflow: visible !important;
}
.stars {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  letter-spacing: -0.5px;
  color: var(--gold) !important;
}
.rating-count {
  display: block !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  color: var(--text-light) !important;
}
@media (max-width: 480px) {
  .stars { font-size: 10px !important; letter-spacing: -1px !important; }
  .stars i { font-size: 10px !important; }
  .rating-count { font-size: 10px !important; }
}

/* 4. CONFIRM / CANCEL ORDER BUTTONS */
/* ==========================================
   WHATSAPP-STYLE CONFIRM / CANCEL CARD
   ========================================== */
.wa-confirm-card {
  background: #e9eaec;
  border-radius: 14px;
  padding: 16px 18px 6px;
  margin: 20px 0 14px;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  font-family: 'Poppins', sans-serif;
}
.wa-confirm-text {
  position: relative;
  color: #3c4146;
  font-size: 14px;
  line-height: 1.55;
  padding-right: 58px;
  margin-bottom: 12px;
}
.wa-confirm-text strong { color: #15191c; }
.wa-confirm-time {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #6b7278;
  font-size: 11px;
  white-space: nowrap;
}
.wa-divider {
  height: 1px;
  background: transparent;
  margin: 8px -18px 0;
}
.wa-confirm-btn,
.wa-cancel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: #ffffff;
  border-radius: 8px;
  border: none;
  padding: 13px 0;
  margin-bottom: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.wa-confirm-btn { color: #00a85f; }
.wa-cancel-btn { color: #6b7278; }
.wa-confirm-btn:hover,
.wa-cancel-btn:hover {
  background: #f4f5f6;
}
.wa-confirm-btn i,
.wa-cancel-btn i {
  font-size: 14px;
}
.wa-confirm-btn:disabled,
.wa-cancel-btn:disabled {
  cursor: not-allowed;
}
.wa-confirm-btn.is-done { color: #00d57a; }
.wa-cancel-btn.is-done { color: #ff6b6b; }

/* ==========================================
   ORDER CONFIRM TIMER
   ========================================== */
.order-confirm-timer {
  background: linear-gradient(135deg, #fff8f0 0%, #fef3e2 100%);
  border: 2px solid #f39c12;
  border-radius: 16px;
  padding: 16px 20px;
  margin: 16px 0 10px;
  text-align: center;
}
.order-confirm-timer.warning {
  border-color: #e74c3c;
  background: linear-gradient(135deg, #fff5f5 0%, #fde8e8 100%);
  animation: pulse-warning 1.5s ease-in-out infinite;
}
.order-confirm-timer.expired {
  border-color: #ccc;
  background: #f9f9f9;
  opacity: 0.7;
}
@keyframes pulse-warning {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60,0.3); }
  50% { box-shadow: 0 0 0 8px rgba(231,76,60,0); }
}
.timer-icon { font-size: 22px; margin-bottom: 4px; }
.timer-label {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: #7f6a3e;
  font-weight: 500;
  margin-bottom: 6px;
}
.timer-countdown {
  font-family: 'Courier New', monospace;
  font-size: 32px;
  font-weight: 700;
  color: #d35400;
  letter-spacing: 3px;
  line-height: 1;
  margin-bottom: 5px;
}
.order-confirm-timer.warning .timer-countdown { color: #e74c3c; }
.order-confirm-timer.expired .timer-countdown { color: #999; }
.timer-note {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  color: #a08050;
}
.order-expired-msg {
  background: #fff5f5;
  border: 2px solid #e74c3c;
  border-radius: 12px;
  padding: 14px 18px;
  margin: 10px 0;
  color: #c0392b;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.order-expired-msg small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #e74c3c;
  margin-top: 4px;
}
@media (max-width: 480px) {
  .timer-countdown { font-size: 26px; }
  .order-confirm-timer { padding: 12px 14px; }
}
@media (max-width: 480px) {
  .wa-confirm-card { padding: 14px 14px 4px; }
  .wa-confirm-text { font-size: 13px; padding-right: 50px; }
  .wa-confirm-btn,
  .wa-cancel-btn { font-size: 13px; padding: 12px 0; }
}
/* ==========================================
   VARIANT THUMBNAILS - DARAZ STYLE
   ========================================== */

/* Color Variant Swatches (Blush Stick Collection & any color-variant product) */
.color-variant-thumbs {
    flex-direction: column !important;
    gap: 4px !important;
    align-items: flex-start !important;
    overflow-x: visible !important;
    flex-wrap: wrap !important;
}
.variant-color-label {
    font-size: 12px;
    color: #6d4c41;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    margin-bottom: 2px;
    display: block;
}
.variant-color-label .selected-variant-name {
    color: #8b5a2b;
    font-weight: 700;
}
.variant-swatches-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.variant-color-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    padding: 0;
    outline: none;
    box-shadow: 0 1px 5px rgba(0,0,0,0.28);
    flex-shrink: 0;
    display: inline-block;
}
.variant-color-swatch:hover {
    transform: scale(1.28);
    box-shadow: 0 3px 12px rgba(0,0,0,0.35);
}
.variant-color-swatch.active {
    border-color: #8b5a2b !important;
    box-shadow: 0 0 0 3px rgba(139,90,43,0.25), 0 2px 8px rgba(0,0,0,0.22) !important;
    transform: scale(1.18);
}
[data-theme="dark"] .variant-color-label {
    color: #d4a0a0;
}
[data-theme="dark"] .variant-color-label .selected-variant-name {
    color: #e8b88a;
}

/* Product Card - variant thumb strip */
.variant-thumbs {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 0;
}
.variant-thumbs::-webkit-scrollbar { display: none; }

.variant-thumb {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 2px solid var(--cream-dark);
    background: var(--cream-light);
    padding: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
}
.variant-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 5px;
}
.variant-thumb.active {
    border-color: var(--brown);
    box-shadow: 0 0 0 1px var(--brown);
}
.variant-thumb:hover {
    border-color: var(--brown-light);
}

/* Quick View - variant gallery strip */
.qv-variant-gallery {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 0;
}
.qv-variant-gallery::-webkit-scrollbar { display: none; }

.qv-variant-thumb {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 70px;
    background: var(--cream-light);
    border: 2px solid var(--cream-dark);
    border-radius: 10px;
    padding: 6px 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.qv-variant-thumb img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 6px;
}
.qv-variant-thumb span {
    font-size: 9px;
    color: var(--text-light);
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.qv-variant-thumb.active {
    border-color: var(--brown);
    background: var(--white);
    box-shadow: 0 0 0 1px var(--brown);
}
.qv-variant-thumb.active span {
    color: var(--brown);
}
.qv-variant-thumb:hover {
    border-color: var(--brown-light);
}

/* QV Color Variant Gallery */
.qv-color-variant-gallery {
    flex-direction: column !important;
    align-items: flex-start !important;
    overflow-x: visible !important;
}

/* Smooth image fade transition */
#qv-main-img-7,
[id^="card-img-"] {
    transition: opacity 0.15s ease;
}

/* Dark mode */
[data-theme="dark"] .variant-thumb {
    border-color: #2a2a2a;
    background: #111;
}
[data-theme="dark"] .variant-thumb.active {
    border-color: var(--brown);
    box-shadow: 0 0 0 1px var(--brown);
}
[data-theme="dark"] .qv-variant-thumb {
    background: #111;
    border-color: #2a2a2a;
}
[data-theme="dark"] .qv-variant-thumb.active {
    background: #1a1a1a;
    border-color: var(--brown);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .variant-thumb {
        width: 38px;
        height: 38px;
        border-radius: 6px;
    }
    .qv-variant-thumb {
        width: 60px;
    }
    .qv-variant-thumb img {
        width: 42px;
        height: 42px;
    }
}
/* ==========================================
   ORDER REMINDER POPUP SYSTEM
   ========================================== */
.aurevyn-reminder-popup {
    position: fixed;
    bottom: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: min(420px, calc(100vw - 24px));
    z-index: 99999;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.28);
    transition: bottom 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
}

.aurevyn-reminder-popup.reminder-visible {
    bottom: 24px;
}

/* Normal (first reminder) */
.aurevyn-reminder-popup.reminder-normal {
    background: linear-gradient(135deg, #fff9f5, #fff3eb);
    border: 2px solid #e8c99a;
}

/* Warning (10 min reminder) */
.aurevyn-reminder-popup.reminder-warning {
    background: linear-gradient(135deg, #fffbeb, #fff3c4);
    border: 2px solid #f0c040;
}

/* Urgent (last reminder) */
.aurevyn-reminder-popup.reminder-urgent {
    background: linear-gradient(135deg, #fff5f5, #ffe8e8);
    border: 2px solid #e74c3c;
    animation: reminder-pulse 1.2s ease-in-out infinite;
}

@keyframes reminder-pulse {
    0%, 100% { box-shadow: 0 20px 60px rgba(0,0,0,0.28); }
    50% { box-shadow: 0 20px 70px rgba(231, 76, 60, 0.45); }
}

.reminder-inner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px 18px 18px;
    position: relative;
}

.reminder-emoji {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.reminder-body {
    flex: 1;
    min-width: 0;
}

.reminder-title {
    font-size: 14px;
    font-weight: 700;
    color: #2c1a0e;
    margin-bottom: 5px;
    line-height: 1.3;
}

.reminder-urgent .reminder-title {
    color: #c0392b;
    font-size: 13.5px;
}

.reminder-msg {
    font-size: 12.5px;
    color: #5a3e2b;
    line-height: 1.5;
    margin-bottom: 12px;
}

.reminder-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.reminder-confirm-btn {
    flex: 1;
    min-width: 140px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    letter-spacing: 0.3px;
}

.reminder-confirm-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
}

.reminder-urgent .reminder-confirm-btn {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    animation: btn-bounce 0.8s ease-in-out infinite;
}

@keyframes btn-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

.reminder-later-btn {
    background: transparent;
    border: 1.5px solid #c9a87c;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    color: #8b5a2b;
    cursor: pointer;
    transition: background 0.15s ease;
}

.reminder-later-btn:hover {
    background: rgba(139, 90, 43, 0.08);
}

.reminder-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 16px;
    color: #999;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
    font-family: sans-serif;
}

.reminder-close:hover {
    background: rgba(0,0,0,0.08);
    color: #555;
}

/* Dark mode support */
[data-theme="dark"] .aurevyn-reminder-popup.reminder-normal,
[data-theme="dark"] .aurevyn-reminder-popup.reminder-warning {
    background: linear-gradient(135deg, #2a1f14, #1e1610);
    border-color: #6b4c2a;
}

[data-theme="dark"] .aurevyn-reminder-popup.reminder-urgent {
    background: linear-gradient(135deg, #2a1414, #1e1010);
    border-color: #c0392b;
}

[data-theme="dark"] .reminder-title { color: #f5d5b0; }
[data-theme="dark"] .reminder-msg { color: #c9a87c; }
[data-theme="dark"] .reminder-later-btn { color: #c9a87c; border-color: #6b4c2a; }

@media (max-width: 480px) {
    .aurevyn-reminder-popup.reminder-visible {
        bottom: 16px;
    }
    .reminder-title { font-size: 13px; }
    .reminder-msg { font-size: 12px; }
    .reminder-confirm-btn { font-size: 12px; }
}
/* ==========================================
   FULL-SCREEN MODALS (no background page visible)
   Applies on mobile AND desktop/laptop, for every
   modal/popup on the site: Quick View, Checkout,
   Customer Service, Return, Policy, Gift Box,
   Order Success, Reviews.
   ========================================== */

.quick-view-modal,
.checkout-modal,
.customer-service-modal,
.return-modal,
.policy-modal,
.gift-box-modal,
.order-success-modal,
.reviews-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(20, 14, 10, 0.97) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
}

.quick-view-content,
.checkout-content,
.customer-service-content,
.return-content,
.policy-content,
.gift-box-content,
.success-content,
.reviews-content {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow-y: auto !important;
}

/* ==========================================
   NEW ARRIVALS — Redesigned Carousel
   ========================================== */

/* Section background & spacing */
#new-arrivals {
  background: linear-gradient(160deg, #fffbf5 0%, #fdf3e7 60%, #faf0e8 100%);
  padding: 80px 0 90px;
  position: relative;
  overflow: hidden;
}

/* Subtle decorative bg circles */
#new-arrivals::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,110,0.10) 0%, transparent 70%);
  top: -150px;
  right: -100px;
  pointer-events: none;
}

#new-arrivals::after {
  content: '';
  position: absolute;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(237,217,180,0.18) 0%, transparent 70%);
  bottom: -80px;
  left: -60px;
  pointer-events: none;
}

/* Carousel wrapper — scroll container with nav buttons */
.na-carousel-wrapper {
  position: relative;
  margin: 0 -10px;
}

/* Scroll track */
.na-scroll-track {
  display: flex;
  align-items: stretch;
  gap: 24px;
  padding: 16px 10px 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.na-scroll-track::-webkit-scrollbar { display: none; }

/* Each card in carousel */
.na-scroll-track .product-card {
  scroll-snap-align: start;
  flex: 0 0 260px;
  min-width: 260px;
  max-width: 260px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(139,90,43,0.10);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #ffffff;
}

.na-scroll-track .product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(139,90,43,0.18);
}

/* Image area */
.na-scroll-track .product-image {
  height: 240px;
  background: #fdf8f3;
  border-radius: 0;
  overflow: hidden;
}

.na-scroll-track .product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.na-scroll-track .product-card:hover .product-image img {
  transform: scale(1.07);
}

/* Info area */
.na-scroll-track .product-info {
  padding: 16px 18px 18px;
  background: #fff;
}

.na-scroll-track .product-info h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  min-height: 40px;
  line-height: 1.35;
  margin-bottom: 8px;
  -webkit-line-clamp: 2;
}

.na-scroll-track .product-rating {
  margin-bottom: 8px;
}

.na-scroll-track .product-price {
  margin-bottom: 14px;
}

.na-scroll-track .current-price {
  font-size: 18px;
}

/* Compact add-to-cart button */
.na-scroll-track .add-to-cart {
  padding: 10px 16px;
  font-size: 12px;
  letter-spacing: 0.5px;
  border-radius: 12px;
  gap: 7px;
  background: linear-gradient(135deg, var(--brown-light) 0%, var(--brown) 100%);
  box-shadow: 0 4px 12px rgba(196,154,114,0.30);
  animation: none;
}

.na-scroll-track .add-to-cart:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 20px rgba(196,154,114,0.40);
}

.na-scroll-track .add-to-cart i {
  font-size: 13px;
}

/* Prev / Next arrow buttons */
.na-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid var(--champagne, #EDD9B4);
  color: var(--brown-dark);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  box-shadow: 0 4px 16px rgba(139,90,43,0.14);
  transition: all 0.25s ease;
  padding: 0;
}

.na-arrow:hover {
  background: var(--brown);
  color: #fff;
  border-color: var(--brown);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 6px 20px rgba(196,154,114,0.35);
}

.na-arrow-prev { left: -20px; }
.na-arrow-next { right: -20px; }

/* Dot indicators */
.na-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.na-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--champagne, #EDD9B4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
}

.na-dot.active {
  background: var(--brown);
  width: 24px;
  border-radius: 4px;
}

/* Hide arrows on mobile — swipe naturally */
@media (max-width: 640px) {
  .na-arrow { display: none; }
  .na-scroll-track {
    gap: 16px;
  }
  .na-scroll-track .product-card {
    /* Exactly 2 full cards fit the screen width; swipe/scroll for the rest */
    flex: 0 0 calc(50vw - 23px);
    min-width: calc(50vw - 23px);
    max-width: calc(50vw - 23px);
  }
  .na-scroll-track .product-image { height: 200px; }

  /* On narrow cards, a discounted product's price row (current + old price)
     could wrap to a 2nd line while a non-discounted product's stays on 1 —
     making that card taller than its neighbours. Force a single line and
     hide the redundant -% badge so every card's price row is the same height. */
  .na-scroll-track .product-price {
    flex-wrap: nowrap;
    min-height: 22px;
  }
  .na-scroll-track .current-price {
    font-size: 15px;
    white-space: nowrap;
  }
  .na-scroll-track .old-price {
    font-size: 12px;
    white-space: nowrap;
  }
  .na-scroll-track .discount {
    display: none;
  }
}

/* Dark mode */
[data-theme="dark"] #new-arrivals {
  background: linear-gradient(160deg, #1a1208 0%, #140e06 60%, #100c05 100%);
}
[data-theme="dark"] .na-scroll-track .product-card {
  background: #1e1610;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
[data-theme="dark"] .na-scroll-track .product-info { background: #1e1610; }
[data-theme="dark"] .na-scroll-track .product-image { background: #160f08; }
[data-theme="dark"] .na-arrow {
  background: #2a1f12;
  border-color: #5d4037;
  color: #e8d5b0;
}
[data-theme="dark"] .na-arrow:hover {
  background: var(--brown);
  color: #fff;
}
[data-theme="dark"] .na-dot { background: #3d2b0c; }
[data-theme="dark"] .na-dot.active { background: var(--brown); }
/* ==========================================
   IMAGE LIGHTBOX / ZOOM OVERLAY
   ========================================== */
#img-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.28s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
#img-lightbox-overlay.active {
    opacity: 1;
}
#img-lightbox-inner {
    position: relative;
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.82);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#img-lightbox-overlay.active #img-lightbox-inner {
    transform: scale(1);
}
#img-lightbox-img {
    max-width: 88vw;
    max-height: 88vh;
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
    object-fit: contain;
    display: block;
    user-select: none;
}
#img-lightbox-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: #3e2723;
    border: none;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    transition: background 0.2s, transform 0.2s;
    z-index: 1;
    line-height: 1;
}
#img-lightbox-close:hover {
    background: #8b5a2b;
    color: #fff;
    transform: scale(1.12);
}

/* Zoom hint icon on quick view image */
.quick-view-image {
    position: relative;
}
.qv-zoom-hint {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(139, 90, 43, 0.75);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s ease;
}
.quick-view-image:hover .qv-zoom-hint {
    opacity: 1;
}