/*
Theme Name: Shine Jewelers (Luxury Edition)
Description: Custom premium theme for Shine Jewelers with 'Hip-Hop' luxury aesthetic.
Author: R.a.mohan
Version: 3.1.0 (Final)
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shine-luxury
Domain Path: /languages
*/

/**
 * Theme Credits
 * Design & Development: R.a.mohan
 * 
 * This is a standalone theme with no parent theme dependencies.
 * Fully independent from Bijoux theme.
 */

/* ===== CSS VARIABLES ===== */
:root {
  /* Colors */
  --bg-primary: #0b0b0b;
  --bg-secondary: #121212;
  --bg-card: #1a1a1a;
  --accent-gold: #d4af37;
  --accent-gold-light: #e6c866;
  --text-primary: #f5f5f5;
  --text-secondary: #b8b8b8;
  --text-muted: #888888;
  --border-subtle: #2a2a2a;
  --border-gold: rgba(212, 175, 55, 0.3);

  /* Typography */
  --font-serif: 'Playfair Display', 'Georgia', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1400px;
  --border-radius: 8px;
  --transition: all 0.3s ease;
}

/* ===== GLOBAL RESET & BASE ===== */
* {
  box-sizing: border-box;
}

body {
  background-color: var(--bg-primary) !important;
  /* Vantablack Vibe: Deep, rich black with subtle noise */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"), 
                    radial-gradient(circle at center, #1a1a1a 0%, #000000 100%);
  background-blend-mode: overlay;
  color: var(--text-primary) !important;
  font-family: var(--font-sans) !important;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Override any existing styles */
body,
body * {
  background-color: transparent;
  color: inherit;
}

/* ===== TYPOGRAPHY ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-serif) !important;
  color: var(--text-primary) !important;
  font-weight: 800; /* Bolder */
  line-height: 1.2;
  margin: 0 0 var(--space-md) 0;
  text-transform: uppercase; /* All caps for impact */
  letter-spacing: 1px;
}

h1, .hero-title, h2 {
  /* Gold Gradient & Glow */
  background: linear-gradient(to bottom, #fbf5b7 0%, #bf953f 40%, #b38728 50%, #fbf5b7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); /* Subtle glow */
  border-bottom: none; /* Remove any default borders */
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4.5rem); /* Slightly larger */
  letter-spacing: 2px;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  /* Optional: Keep H3 gold or make it white/silver? Let's keep it standard white for hierarchy, or maybe silver */
  background: none;
  -webkit-text-fill-color: initial;
  color: var(--text-primary) !important;
  text-shadow: none;
}
}

h4 {
  font-size: 1.25rem;
}

p {
  color: var(--text-secondary) !important;
  margin: 0 0 var(--space-md) 0;
  font-size: 1rem;
}

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

a:hover {
  color: var(--accent-gold-light);
}

/* Navigation links should be creamy white, not gold */
.desktop-nav a,
.nav-menu a,
.nav-link,
.nav-link-mega {
  color: #e5e5bf !important;
}

.desktop-nav a:hover,
.nav-menu a:hover,
.nav-link:hover,
.nav-link-mega:hover {
  color: var(--accent-gold) !important;
}

/* Cart and Account links - gold color */
.cart-link,
.account-link {
  color: var(--accent-gold) !important;
}

/* ===== LAYOUT CONTAINERS ===== */
.container,
.elementor-container {
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 0 var(--space-md) !important;
}

.wide-container {
  max-width: var(--container-wide) !important;
}

/* ===== HEADER OVERRIDE ===== */
/* ===== HEADER & NAVIGATION ===== */
.site-header {
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.header-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

/* Logo */
.logo-wrapper {
  flex-shrink: 0;
}

.site-title {
  margin: 0;
  font-family: var(--font-serif);
  color: var(--accent-gold);
}

.site-title a {
  color: inherit;
  text-decoration: none;
}

.custom-logo {
  max-height: 60px;
  width: auto;
}

/* Desktop Navigation */
.desktop-nav {
  display: flex;
  align-items: center;
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-xl);
}

.nav-menu a {
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--space-sm) 0;
  border-bottom: 2px solid transparent;
  transition: var(--transition);
}

.nav-menu a:hover {
  color: var(--accent-gold);
  border-bottom-color: var(--accent-gold);
}

/* Desktop Actions */
.desktop-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.header-btn {
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.9rem;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius);
  transition: var(--transition);
}

.header-btn:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

.product-card {
  position: relative;
  background: #111;
  border: 1px solid #222;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(212, 175, 55, 0.2); /* Gold glow */
  border-color: var(--accent-gold);
}

/* Mobile Toggle - Hidden by default */
.mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
  width: 40px;
  height: 40px;
}

.mobile-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  background: var(--text-primary);
  margin: 3px 0;
  transition: 0.3s;
  border-radius: 2px;
}

/* ===== MAIN CONTENT AREA ===== */
#main,
.site-main,
main {
  background-color: var(--bg-primary) !important;
  min-height: 100vh;
  padding: var(--space-xl) 0 !important;
  margin-top: 80px !important;
}

/* ===== HOMEPAGE HERO EXCEPTION - adjust so background can reach navbar but content clears it ===== */
body.page-template-default main,
body.page-id-2 main {
  /* keep the main content area offset so the sticky navbar doesn't overlap content */
  margin-top: 80px !important;
}

/* ===== ELEMENTOR OVERRIDES ===== */
.elementor-section {
  background-color: transparent !important;
}

.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4,
.elementor-widget-heading h5,
.elementor-widget-heading h6 {
  color: var(--text-primary) !important;
  font-family: var(--font-serif) !important;
}

.elementor-widget-text-editor {
  color: var(--text-secondary) !important;
}

.elementor-button {
  background-color: var(--accent-gold) !important;
  color: var(--bg-primary) !important;
  border: none !important;
  padding: var(--space-sm) var(--space-lg) !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-radius: var(--border-radius) !important;
  transition: var(--transition) !important;
}

.elementor-button:hover {
  background-color: var(--accent-gold-light) !important;
  transform: translateY(-2px) !important;
}

/* ===== WOOCOMMERCE OVERRIDES ===== */
.woocommerce {
  background-color: var(--bg-primary) !important;
  margin-top: 80px !important;
}

/* Product Grid */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: var(--space-xl) !important;
  list-style: none !important;
  padding: 0 !important;
  margin: var(--space-xl) 0 !important;
}

.woocommerce ul.products li.product {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--border-radius) !important;
  padding: var(--space-md) !important;
  transition: var(--transition) !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.woocommerce ul.products li.product:hover {
  border-color: var(--border-gold) !important;
  transform: translateY(-4px) !important;
}

.woocommerce ul.products li.product:hover img {
  filter: brightness(1) contrast(1) saturate(1.2) !important;
  transform: scale(1.02) !important;
}

.woocommerce ul.products li.product img {
  width: 100% !important;
  height: 250px !important;
  object-fit: cover !important;
  border-radius: var(--border-radius) !important;
  margin-bottom: var(--space-md) !important;
  filter: brightness(0.9) contrast(0.95) saturate(1.1) !important;
  transition: var(--transition) !important;
}

.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--text-primary) !important;
  font-family: var(--font-serif) !important;
  font-size: 1.1rem !important;
  margin-bottom: var(--space-sm) !important;
  min-height: 2.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.woocommerce ul.products li.product .price {
  color: var(--accent-gold) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  margin-bottom: auto !important;
  padding-bottom: var(--space-md) !important;
}

/* Add to Cart Button */
.woocommerce ul.products li.product .button,
.woocommerce .single-product .button,
.add_to_cart_button {
  background-color: var(--accent-gold) !important;
  color: var(--bg-primary) !important;
  border: none !important;
  padding: var(--space-sm) var(--space-lg) !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-radius: var(--border-radius) !important;
  transition: var(--transition) !important;
  width: 100% !important;
  margin-top: auto !important;
  align-self: flex-end !important;
}

.woocommerce ul.products li.product .button:hover,
.add_to_cart_button:hover {
  background-color: var(--accent-gold-light) !important;
  transform: translateY(-2px) !important;
}

/* ===== FOOTER ===== */
#footer,
.site-footer,
footer {
  background-color: var(--bg-secondary) !important;
  border-top: 1px solid var(--border-subtle) !important;
  padding: var(--space-3xl) 0 var(--space-xl) 0 !important;
  margin-top: var(--space-3xl) !important;
}

.footer-content {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: var(--space-xl) !important;
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 0 var(--space-md) !important;
}
 

.footer-section h3 {
  color: var(--accent-gold) !important;
  font-family: var(--font-serif) !important;
  margin-bottom: var(--space-md) !important;
}

.footer-section p,
.footer-section a {
  color: var(--text-secondary) !important;
  font-size: 0.9rem !important;
}

.footer-section a:hover {
  color: var(--accent-gold) !important;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Mobile Menu - Hidden by default */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9998;
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100vh;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-subtle);
  z-index: 9999;
  transition: right 0.3s ease;
  padding: var(--space-xl) var(--space-lg);
  overflow-y: auto;
}

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

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

.mobile-menu li {
  margin-bottom: var(--space-lg);
}

.mobile-menu a {
  color: var(--text-primary);
  font-size: 1.1rem;
  text-decoration: none;
  display: block;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.mobile-menu a:hover {
  color: var(--accent-gold);
  padding-left: var(--space-sm);
}

.mobile-close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.5rem;
  cursor: pointer;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Tablet Styles */
@media (max-width: 1024px) {
  .nav-menu {
    gap: var(--space-lg);
  }

  .header-btn {
    font-size: 0.85rem;
    padding: var(--space-xs);
  }
}

/* Mobile Styles */
@media (max-width: 768px) {
  .header-container {
    height: 70px;
    padding: 0 var(--space-md);
  }

  /* Hide desktop elements */
  .desktop-nav {
    display: none;
  }

  .desktop-actions {
    display: none;
  }

  /* Show mobile toggle */
  .mobile-toggle {
    display: flex;
  }

  /* Show mobile menu */
  .mobile-menu {
    display: block;
  }
}

/* Mobile Hero */
.luxury-hero {
  min-height: 80vh !important;
  padding: 0 !important;
}

/* Force hero section to have no padding on mobile */
@media (max-width: 768px) {
  .luxury-hero {
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    top: 0 !important;
  }

  /* Ensure hero video background has no spacing */
  .hero-video-bg {
    margin: 0 !important;
    padding: 0 !important;
    top: 0 !important;
  }

  .hero-video-bg video {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Force hero to be right under navbar */
  .luxury-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

.hero-title {
  font-size: clamp(2rem, 8vw, 3.5rem) !important;
  margin-bottom: var(--space-lg) !important;
}

.hero-subtitle {
  font-size: 1rem !important;
  margin-bottom: var(--space-xl) !important;
}

.hero-cta {
  flex-direction: column !important;
  gap: var(--space-md) !important;
  align-items: center !important;
}

.luxury-btn {
  width: 100% !important;
  max-width: 280px !important;
  text-align: center !important;
}

/* Mobile Grids */
.woocommerce ul.products,
.collections-grid,
.products-grid {
  grid-template-columns: 1fr !important;
  gap: var(--space-lg) !important;
}

/* Mobile Cards */
.luxury-card {
  margin-bottom: var(--space-lg) !important;
}

.product-card img {
  height: 200px !important;
}

/* Mobile Brand Story */
.brand-story>.container>div {
  grid-template-columns: 1fr !important;
  gap: var(--space-xl) !important;
  text-align: center !important;
}

.story-visual {
  order: -1 !important;
}

/* Mobile Footer */
.footer-content {
  grid-template-columns: 1fr !important;
  gap: var(--space-xl) !important;
  text-align: center !important;
}

/* Mobile Typography */
h1 {
  font-size: clamp(2rem, 6vw, 3rem) !important;
}

h2 {
  font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
}

h3 {
  font-size: clamp(1.2rem, 4vw, 1.8rem) !important;
}

/* Mobile Spacing */
.container {
  padding: 0 var(--space-md) !important;
}

section {
  padding: var(--space-2xl) 0 !important;
}
}

/* Small Mobile Styles */
@media (max-width: 480px) {
  :root {
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
  }

  .hero-title {
    font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
  }

  .luxury-btn {
    padding: var(--space-sm) var(--space-lg) !important;
    font-size: 0.9rem !important;
  }

  .product-card,
  .luxury-card {
    padding: var(--space-md) !important;
  }

  .mobile-menu {
    width: 280px !important;
  }
}

/* ===== FORCE NO GAP BETWEEN BRAND STORY AND FOOTER ===== */
.brand-story {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

footer#shine-footer.shine-footer {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* Ensure no gap on all screen sizes */
@media (max-width: 768px) {
  .brand-story {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  footer#shine-footer.shine-footer {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (min-width: 769px) {
  .brand-story {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  footer#shine-footer.shine-footer {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Force hero section to start immediately after navbar */
@media (min-width: 769px) {
  .luxury-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Ensure brand story grid aligns items to the top so visual elements don't create extra bottom space */
.brand-story > .container > div,
.brand-story .container > div {
  align-items: start !important;
}

/* ===== HOMEPAGE: NO GAP BETWEEN EXPLORE COLLECTIONS (brand-story) AND FOOTER ===== */
body.home .brand-story {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.home .brand-story > .container > div,
body.home .brand-story .container > div {
  align-items: start !important; /* ensure left column sits at top */
}

body.home #shine-footer,
body.home .site-footer {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* remove any remaining footer internals gap on homepage */
body.home .footer-main {
  margin-bottom: 0 !important;
}

/* Increase top padding for footer columns (but keep logo position unchanged) */
.footer-main > .footer-section,
.footer-main > .footer-newsletter {
  padding-top: 30px; /* moves Contact Us / About Us / Newsletter down without moving logo */
}

/* Slightly reduce on small screens so layout stays balanced */
@media (max-width: 768px) {
  .footer-main > .footer-section,
  .footer-main > .footer-newsletter {
    padding-top: 20px;
  }
}


@media (max-width: 768px) {
  .luxury-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
    top: 0 !important;
  }
}

.bg-card {
  background-color: var(--bg-card) !important;
}

.border-gold {
  border-color: var(--accent-gold) !important;
}

.font-serif {
  font-family: var(--font-serif) !important;
}

.font-sans {
  font-family: var(--font-sans) !important;
}

/* Force override any conflicting styles */
body * {
  box-sizing: border-box !important;
}

/* Hide broken elements temporarily */
.broken-element,
.legacy-widget {
  display: none !important;
}

/* ===== L
UXURY NAVIGATION BAR ===== */
.luxury-navbar {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.navbar-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

/* Brand Logo */
.navbar-brand {
  flex-shrink: 0;
}

.brand-link {
  text-decoration: none;
  color: var(--accent-gold);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  transition: var(--transition);
}

.brand-link:hover {
  color: var(--accent-gold-light);
}

.brand-text {
  color: inherit;
}

.custom-logo {
  max-height: 50px;
  width: auto;
}

/* Desktop Menu */
.navbar-menu {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.nav-link {
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius);
  transition: var(--transition);
  position: relative;
}

.nav-link:hover {
  color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.1);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent-gold);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-link:hover::after {
  width: 80%;
}

/* Desktop Actions */
.navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.action-btn {
  display: block;
  padding: var(--space-sm);
  font-size: 0.9rem;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--border-subtle);
  border-radius: 25px;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.action-btn:hover {
  border-color: var(--accent-gold);
  margin-top: 8px;
  color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.1);
}

/* Buttons - "Solid Gold" Style */
.btn-primary,
.button,
button[type="submit"],
.hero-btn {
  display: inline-block;
  background: linear-gradient(45deg, #FFD700, #FDB931, #bf953f, #FDB931);
  background-size: 200% auto;
  color: #000 !important; /* Black text on gold */
  border: 1px solid #fff; /* Diamond cut edge */
  padding: 16px 36px;
  font-family: var(--font-sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-radius: 4px; /* Sharper corners */
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
  text-decoration: none;
  animation: shine 3s infinite linear; /* Subtle constant shimmer */
}

.btn-primary:hover,
.button:hover,
button[type="submit"]:hover,
.hero-btn:hover {
  background-position: right center; /* change the direction of the change here */
  color: #000 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(212, 175, 55, 0.6);
}

/* Secondary Button (Outline) - "White Gold" */
.btn-secondary {
  background: transparent;
  color: #fff !important;
  border: 2px solid #fff;
  padding: 14px 34px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: #fff;
  color: #000 !important;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

@keyframes shine {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.cart-btn {
  background: var(--accent-gold);
  color: var(--bg-primary);
  border-color: var(--accent-gold);
}

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

/* Mobile Hamburger */
.mobile-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  width: 50px;
  height: 50px;
  border-radius: var(--border-radius);
  transition: var(--transition);
  position: relative;
  z-index: 1001;
}

.mobile-hamburger:hover {
  background: rgba(212, 175, 55, 0.1);
}

.mobile-hamburger:active {
  background: rgba(212, 175, 55, 0.2);
}

.hamburger-line {
  width: 25px;
  height: 3px;
  background: var(--text-primary);
  margin: 3px 0;
  transition: 0.3s;
  border-radius: 2px;
}

.mobile-hamburger.active .hamburger-line:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.mobile-hamburger.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-hamburger.active .hamburger-line:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

/* Mobile Dropdown */
.mobile-dropdown {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out;
  position: relative;
  z-index: 999;
  width: 100%;
}

.mobile-dropdown.active {
  max-height: 600px !important;
}

.mobile-menu-content {
  padding: var(--space-lg);
}

.mobile-nav-link {
  display: block;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-subtle);
  transition: var(--transition);
}

.mobile-nav-link:hover {
  color: var(--accent-gold);
  padding-left: var(--space-sm);
}

.mobile-nav-link:last-of-type {
  border-bottom: none;
}

.mobile-actions {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.mobile-action-btn {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-primary);
  text-decoration: none;
  padding: var(--space-md);
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius);
  transition: var(--transition);
  text-align: center;
  justify-content: center;
}

.mobile-action-btn:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.1);
}

/* Responsive Visibility Classes */
.desktop-only {
  display: flex;
}

.mobile-only {
  display: none;
}

/* ===== RESPONSIVE NAVIGATION ===== */
@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: flex !important;
  }

  .mobile-dropdown {
    display: block !important;
    position: relative !important;
  }

  .navbar-container {
    height: 70px;
  }

  /* Ensure mobile hamburger is clickable */
  .mobile-hamburger {
    display: flex !important;
    z-index: 1001 !important;
    position: relative !important;
  }
}

@media (max-width: 480px) {
  .navbar-container {
    padding: 0 var(--space-sm);
    height: 65px;
  }

  .brand-link {
    font-size: 1.3rem;
  }
}

/ * CSS-only mobile menu fallback */ @media (max-width: 768px) {
  .mobile-hamburger:focus+.mobile-dropdown,
  .mobile-hamburger:active+.mobile-dropdown {
    max-height: 500px !important;
    display: block !important;
  }

  /* Improve button accessibility */
  .mobile-hamburger:focus {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
  }
}

/* Fix CTA button text contrast */
.luxury-btn.primary {
  background: var(--accent-gold) !important;
  color: #000000 !important;
}

.luxury-btn.primary:hover {
  background: var(--accent-gold-light) !important;
  color: #000000 !important;
}

/*
 Mobile Menu Debug & Fixes */
@media (max-width: 768px) {

  /* Force hamburger visibility */
  .mobile-hamburger {
    display: flex !important;
    background: rgba(212, 175, 55, 0.1) !important;
    border: 2px solid var(--accent-gold) !important;
  }

  /* Force dropdown availability */
  .mobile-dropdown {
    display: block !important;
    position: relative !important;
  }

  /* CSS hover fallback */
  .mobile-hamburger:hover+.mobile-dropdown {
    max-height: 600px !important;
  }

  /* Active state */
  .mobile-dropdown.active {
    max-height: 600px !important;
    opacity: 1 !important;
  }
}

/* Hamburger animation fix */
.hamburger-line {
  width: 25px !important;
  height: 3px !important;
  background: var(--text-primary) !important;
  margin: 4px 0 !important;
  transition: 0.3s !important;
  border-radius: 2px !important;
  display: block !important;
}

/ *=====SIMPLE WORKING NAVIGATION=====*/ .main-header {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.header-wrapper {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}

.logo a {
  color: var(--accent-gold);
  text-decoration: none;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
}

.desktop-nav {
  display: flex;
  gap: var(--space-xl);
}

.desktop-nav a {
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--space-sm) var(--space-md);
  position: relative;
  transition: var(--transition);
}

.desktop-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent-gold);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.desktop-nav a:hover {
  color: var(--accent-gold);
}

.desktop-nav a:hover::after {
  width: 80%;
}

.desktop-actions {
  display: flex;
  gap: var(--space-md);
}

.desktop-actions a {
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.9rem;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--border-subtle);
  border-radius: 25px;
  transition: var(--transition);
}

.desktop-actions a:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.1);
}

/* Mobile Menu Button */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  width: 50px;
  height: 50px;
}

.mobile-menu-btn span {
  display: block;
  width: 25px;
  height: 3px;
  background: var(--text-primary);
  margin: 3px 0;
  transition: 0.3s;
  border-radius: 2px;
}

.mobile-menu-btn.active span:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

/* Mobile-specific: remove the heavy mega HTML from mobile menus and
   ensure the hamburger transforms to a simple cross (no extra icon). */
@media (max-width: 768px) {
  /* Hide the full mobile mega menu content — show only a toggle link */
  .mobile-collections-mega,
  .premium-mega-menu,
  .nav-item-with-mega .premium-mega-menu {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
  }

  /* Make the mobile menu button look like a plain hamburger that turns into a cross */
  .mobile-menu-btn {
    background: transparent !important;
    border: none !important;
    width: 40px !important;
    height: 40px !important;
    padding: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Remove any pseudo-elements or icons that might be added elsewhere */
  .mobile-menu-btn::before,
  .mobile-menu-btn::after {
    display: none !important;
    content: none !important;
  }

  /* Ensure only the three span lines are visible and form the cross when active */
  .mobile-menu-btn span {
    background: #ffffff !important;
    width: 22px !important;
    height: 2px !important;
    margin: 3px 0 !important;
    border-radius: 1px !important;
  }

  .mobile-menu-btn.active span:nth-child(1),
  .mobile-menu-btn.active span:nth-child(3) {
    transform-origin: center !important;
  }

  /* Provide a clear cross without extra translation that looks like × */
  .mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) !important;
    margin-top: 0 !important;
  }

  .mobile-menu-btn.active span:nth-child(2) {
    opacity: 0 !important;
  }

  .mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) !important;
    margin-bottom: 0 !important;
  }

  /* --- Premium cross enhancements --- */
  /* Add a subtle circular gold backdrop and refined line styling when active */
  .mobile-menu-btn.active {
    position: relative !important;
    width: 46px !important;
    height: 46px !important;
    padding: 6px !important;
    border-radius: 50% !important;
    background: rgba(212,175,55,0.04) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.45), 0 2px 8px rgba(212,175,55,0.03) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Circular outline (use ::before even if other rules hide pseudo-elements) */
  .mobile-menu-btn.active::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(212,175,55,0.12) !important;
    box-shadow: 0 4px 14px rgba(212,175,55,0.04) !important;
    pointer-events: none !important;
  }

  /* Make the cross lines feel premium: slightly thicker, rounded, gold gradient */
  .mobile-menu-btn.active span {
    background: linear-gradient(90deg, rgba(212,175,55,1), rgba(244,208,63,1)) !important;
    height: 3px !important;
    width: 20px !important;
    border-radius: 3px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.45) !important;
  }

  /* Slightly adjust rotated positions so cross centers perfectly */
  .mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) !important;
    transform-origin: center !important;
    margin-top: 0 !important;
  }

  .mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) !important;
    transform-origin: center !important;
    margin-bottom: 0 !important;
  }
}

/* Mobile Menu */
.mobile-menu {
  display: none;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-lg);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 999;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.mobile-menu a {
  display: block;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-subtle);
  transition: var(--transition);
}

.mobile-menu a:hover {
  color: var(--accent-gold);
  padding-left: var(--space-sm);
}

.mobile-menu a:last-child {
  border-bottom: none;
}

/* Responsive */
@media (max-width: 768px) {

  .desktop-nav,
  .desktop-actions {
    display: none;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .header-wrapper {
    height: 55px;
  }
}

/* Mo
bile Menu Visibility Fix */
@media (max-width: 768px) {
  .main-header {
    position: relative !important;
  }

  .mobile-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-subtle) !important;
    z-index: 999 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
  }

  .mobile-menu[style*="display: block"] {
    display: block !important;
  }

  .mobile-menu a {
    display: block !important;
    padding: 15px 20px !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    font-size: 1.1rem !important;
  }

  .mobile-menu a:hover {
    background: rgba(212, 175, 55, 0.1) !important;
    color: var(--accent-gold) !important;
  }
}

/ *=====NATURAL IMAGE STYLING=====*/
/* General product images */
.product-image img,
.woocommerce-product-gallery img,
.attachment-woocommerce_thumbnail,
.attachment-shop_catalog,
.attachment-shop_single {
  filter: brightness(0.92) contrast(0.96) saturate(1.05) !important;
  transition: filter 0.3s ease !important;
}

/* Hover state for natural enhancement */
.product-image:hover img,
.woocommerce-product-gallery:hover img,
.product:hover .attachment-woocommerce_thumbnail,
.product:hover .attachment-shop_catalog {
  filter: brightness(0.98) contrast(1.02) saturate(1.15) !important;
}

/* Ensure images don't get blown out */
img {
  max-width: 100% !important;
  height: auto !important;
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
}

/* Specific fixes for overexposed images */
.wp-post-image,
.woocommerce img,
.product-thumbnail img {
  filter: brightness(0.88) contrast(0.94) saturate(1.08) hue-rotate(2deg) !important;
  transition: all 0.3s ease !important;
}

/* Natural color correction for jewelry photos */
.jewelry-image,
.product-category-jewelry img,
[class*="jewelry"] img {
  filter: brightness(0.85) contrast(0.92) saturate(1.12) sepia(0.05) !important;
}

/* Prevent image washing out on hover */
.product:hover .wp-post-image,
.product:hover .woocommerce img {
  filter: brightness(0.94) contrast(1) saturate(1.2) hue-rotate(1deg) !important;
}

/* ===== PREMIUM MEGA MENU ===== */
.nav-item-with-mega {
  position: relative;
  display: inline-block;
}

.nav-link-mega {
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius);
  transition: var(--transition);
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-link-mega:hover {
  color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.1);
}

.mega-arrow {
  font-size: 0.7rem;
  transition: transform 0.3s ease;
}

.nav-item-with-mega:hover .mega-arrow {
  transform: rotate(180deg);
}

.premium-mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  background: linear-gradient(145deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(212, 175, 55, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-10px);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 1000;
  margin-top: 10px;
}

.nav-item-with-mega:hover .premium-mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-menu-container {
  padding: var(--space-xl);
  display: grid;
  align-items: start;
  /* slightly narrower actions column so buttons sit closer to center */
  grid-template-columns: 1fr 1fr 220px;
  gap: var(--space-xl);
}

.mega-section {
  position: relative;
}

.mega-section-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--accent-gold);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid rgba(212, 175, 55, 0.3);
  text-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

/* Categories Grid */
.mega-categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.mega-category-item {
  display: block;
  padding: var(--space-md);
  background: rgba(26, 26, 26, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.mega-category-item:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: var(--accent-gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Removed category icon styling - using plain text now */

.category-info {
  display: flex;
  flex-direction: column;
}

.category-name {
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.category-count {
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.85rem;
}

.mega-category-item:hover .category-name {
  color: var(--accent-gold);
}

/* Featured Collections */
.mega-featured {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.mega-featured-item {
  display: block;
  padding: var(--space-lg);
  background: linear-gradient(135deg, rgba(26, 26, 26, 0.8) 0%, rgba(18, 18, 18, 0.9) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  text-decoration: none;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.mega-featured-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
  transition: left 0.6s ease;
}

.mega-featured-item:hover::before {
  left: 100%;
}

.mega-featured-item:hover {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(26, 26, 26, 0.9) 100%);
  border-color: var(--accent-gold);
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

/* Improve layout for Featured Collections so cards align and don't overflow */
.mega-featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  align-items: start;
}

.mega-featured-item {
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 8px;
  overflow: hidden;
}

.featured-content {
  display: block;
}

.mega-actions {
  max-width: 260px;
}

/* Removed featured icon styling - using plain text now */

.featured-content h4 {
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 0.5rem 0;
  transition: color 0.3s ease;
}

.featured-content p {
  display: none; /* hide secondary description to keep featured tiles compact */
}

/* If user wants description visible on hover, reveal it then (optional UX) */
.mega-featured-item:hover .featured-content p {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.mega-featured-item:hover .featured-content h4 {
  color: var(--accent-gold);
}

/* Quick Actions - FIXED OVERFLOW */
.mega-actions {
  border-left: 1px solid var(--border-subtle);
  padding-left: var(--space-md);
  padding-right: 0; /* keep button from shifting toward the right edge */
  max-width: 260px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.mega-quick-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.mega-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  background: transparent;
  border: 2px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
  transition: all 0.3s ease;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-height: 44px;
  box-sizing: border-box;
}

.mega-action-btn:hover {
  border-color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.1);
  color: var(--accent-gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.mega-action-btn.primary {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: #000000;
  font-weight: 700;
  /* keep primary quick-action compact and left-aligned */
  max-width: 160px;
  width: auto;
  padding: 8px 12px;
  margin: 0; /* remove auto-centering */
  align-self: flex-start; /* align left within its flex container */
}

.mega-action-btn.primary:hover {
  background: var(--accent-gold-light);
  color: #000000;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

/* Removed action icon styling - using plain text now */

/* Responsive Mega Menu */
@media (max-width: 1200px) {
  .premium-mega-menu {
    width: 800px;
  }
}

/* Fix mega menu responsiveness between ~700px and 1100px */
@media (min-width: 700px) and (max-width: 1100px) {
  .premium-mega-menu {
    width: calc(100% - 40px) !important; /* keep inside viewport */
    max-width: 900px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    border-radius: 12px;
  }

  .mega-menu-container {
    grid-template-columns: 1fr 1fr 260px; /* preserve 3-column feel but narrower */
    align-items: start;
    gap: var(--space-lg);
    padding: var(--space-lg);
  }

  /* Ensure featured and actions column fit and wrap cleanly */
  .mega-featured, .mega-actions {
    min-width: 0;
  }

  .mega-featured-item {
    padding: calc(var(--space-md) / 1.2);
  }
}

/* Stronger handling for 700-1100 to avoid overflow and allow scrolling */
@media (min-width: 700px) and (max-width: 1100px) {
  .premium-mega-menu {
    /* Use fixed positioning to avoid parent overflow clipping and ensure centering in viewport */
    position: fixed !important;
    top: calc(60px + 12px) !important; /* header height (60px) + offset */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 40px) !important;
    max-width: 920px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    max-height: calc(100vh - (60px + 48px)) !important; /* leave room for header and bottom */
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 20000 !important;
  }

  .mega-menu-container {
    display: grid !important;
    /* Keep three columns but make the actions column narrow so layout fits half-screen */
    grid-template-columns: 1fr 1fr 220px !important;
    gap: 18px !important;
    padding: 18px !important;
    align-items: start !important;
  }

  /* Prevent featured column from pushing layout horizontally */
  .mega-featured {
    min-width: 0 !important;
  }

  /* Keep Quick Actions as the third column but compact and top-aligned */
  .mega-actions {
    grid-column: auto !important;
    border-left: 1px solid var(--border-subtle) !important;
    border-top: none !important;
    padding-left: var(--space-lg) !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    max-width: 220px !important;
    overflow: visible !important;
    align-self: start !important;
  }

  .mega-quick-actions {
    flex-direction: column !important;
    gap: var(--space-sm) !important;
  }

  .mega-action-btn {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  /* Make category boxes smaller to fit */
  .mega-category-item {
    padding: 10px !important;
  }

  /* Slightly reduce featured item size */
  .mega-featured-item {
    padding: 12px !important;
    border-radius: 10px !important;
  }

  /* Ensure the arrow indicator doesn't push outside viewport */
  .premium-mega-menu::before {
    left: 50% !important;
    transform: translateX(-50%) rotate(45deg) !important;
  }

  /* If still too narrow, fallback to 2 columns for categories */
  /* If still too narrow, fallback to 2 columns for categories - handled by global rules below */
}

/* Extra safeguard: when menu is active, prevent header wrapper from clipping it */
.nav-item-with-mega {
  z-index: 19999;
}

/* When fixed, ensure small screen behavior preserves accessibility */
@media (max-width: 900px) {
  .premium-mega-menu {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: calc(60px + 8px) !important;
    width: calc(100% - 20px) !important;
    max-width: none !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 1024px) {
  .premium-mega-menu {
    width: 700px;
  }

  .mega-menu-container {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    padding: var(--space-lg);
    align-items: start;
  }

  .mega-actions {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid var(--border-subtle);
    padding-left: 0;
    padding-top: var(--space-lg);
    margin-top: var(--space-lg);
  }

  .mega-quick-actions {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-sm);
  }

  .mega-action-btn {
    flex: 1;
    text-align: center;
    padding: var(--space-sm) var(--space-md);
    font-size: 0.8rem;
    min-width: 0;
  }
}

@media (max-width: 900px) {
  .premium-mega-menu {
    width: 600px;
  }

  .mega-categories {
    grid-template-columns: 1fr;
  }

  .mega-category-item {
    padding: var(--space-sm) var(--space-md);
  }
}

@media (max-width: 768px) {
  .nav-item-with-mega {
    display: none;
  }
  .premium-mega-menu {
    position: static;
    width: 100%;
    transform: none;
    opacity: 1;
    visibility: visible;
    border-radius: 0;
    box-shadow: none;
    background: var(--bg-secondary);
    border: none;
    border-top: 1px solid var(--border-subtle);
    padding: 0; /* reduce outer padding on mobile */
  }

  /* Keep two columns on tablet/mobile landscape so categories don't become one long column */
  .mega-menu-container {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    padding: var(--space-md) var(--space-sm);
    align-items: start;
  }

  /* Make categories grid tighter on mobile */
  .mega-categories {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
  }

  .mega-actions {
    border-left: none;
    border-top: 1px solid var(--border-subtle);
    padding-left: 0;
    display: block; /* ensure quick actions are visible */
    width: 100%;
    box-sizing: border-box;
  }

  .mega-quick-actions {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .mega-action-btn {
    width: 100%;
    justify-content: center;
    padding: calc(var(--space-sm) / 1.2) var(--space-md);
    font-size: 0.9rem;
  }
}

/* Additional targeted reductions for small screens to keep the mega ratio */
@media (max-width: 600px) {
  .mega-menu-container {
    grid-template-columns: 1fr 1fr; /* keep two columns until very small */
    gap: 12px;
    padding: 12px;
  }

  .mega-featured-item {
    padding: 10px !important;
    min-height: 64px !important;
    border-radius: 8px !important;
  }

  .mega-featured {
    gap: 10px;
  }

  .featured-content h4 {
    font-size: 0.98rem;
  }

  .featured-content p {
    font-size: 0.78rem;
  }

  .premium-mega-menu {
    width: calc(100% - 20px) !important;
    margin: 0 10px;
    border-radius: 8px;
  }
}

/* On very small phones stack into one column, but keep compact sizing */
@media (max-width: 420px) {
  .mega-menu-container {
    grid-template-columns: 1fr;
    padding: 10px;
    gap: 10px;
  }

  .mega-categories {
    grid-template-columns: 1fr;
  }

  .mega-featured-item {
    padding: 10px !important;
    min-height: 60px !important;
  }
}

/* ===== HERO NAVBAR OVERLAP FIX ===== */
/* Ensure hero content clears the sticky navbar on desktop/tablet widths
   Background should still reach the navbar; this only pushes the inner
   content downward so it's not hidden under the header. */
@media (min-width: 769px) {
  .luxury-hero {
    /* header is 80px tall (see .navbar-container). Add a bit of breathing room. */
    /* default desktop padding to ensure hero content isn't tightly under header */
    padding-top: calc(80px + 20px) !important;
  }

  /* Defensive: if hero content is absolutely positioned, ensure top is not zero */
  .luxury-hero .hero-content,
  .luxury-hero .hero-title,
  .luxury-hero .hero-subtitle {
    margin-top: 0 !important;
    position: relative !important;
  }
}

/* Homepage: let hero background reach the top while keeping content below the sticky navbar */
@media (min-width: 769px) {
  body.home .luxury-hero {
    margin-top: -80px !important; /* pull background up */
    padding-top: calc(80px + 100px) !important; /* push content down so it clears the 80px header */
  }
}


@media (max-width: 600px) {
  .premium-mega-menu {
    margin: 0 -1rem;
  }

  .mega-menu-container {
    padding: var(--space-md);
  }

  .mega-categories {
    gap: var(--space-xs);
  }

  .mega-category-item {
    padding: var(--space-sm);
  }

  .category-name {
    font-size: 0.9rem;
  }

  .category-count {
    font-size: 0.75rem;
  }

  .mega-featured-item {
    padding: var(--space-md);
  }

  .featured-content h4 {
    font-size: 1rem;
  }

  .featured-content p {
    font-size: 0.8rem;
  }
}

/* Mega Menu Animation Enhancement */
.premium-mega-menu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-bottom: none;
  border-right: none;
  transform: translateX(-50%) rotate(45deg);
}

/* Hover delay for better UX */
.nav-item-with-mega {
  transition: all 0.2s ease;
}

.nav-item-with-mega:hover .premium-mega-menu {
  transition-delay: 0.1s;
}

.premium-mega-menu:hover {
  opacity: 1;
  visibility: visible;
}

/* ===== 
MOBILE SUBMENU STYLING ===== */
.mobile-submenu-item {
  position: relative;
}

.mobile-submenu-toggle {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: var(--text-primary) !important;
  text-decoration: none !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  padding: var(--space-md) 0 !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  transition: var(--transition) !important;
}

.mobile-submenu-toggle:hover {
  color: var(--accent-gold) !important;
  padding-left: var(--space-sm) !important;
}

.mobile-arrow {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.mobile-submenu {
  background: rgba(18, 18, 18, 0.95) !important;
  border-left: 3px solid var(--accent-gold) !important;
  margin-left: var(--space-md) !important;
  padding-left: var(--space-md) !important;
  margin-top: var(--space-sm) !important;
  border-radius: 0 8px 8px 0 !important;
}

.mobile-submenu a {
  display: block !important;
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  font-size: 1rem !important;
  padding: var(--space-sm) 0 !important;
  border-bottom: 1px solid rgba(42, 42, 42, 0.5) !important;
  transition: var(--transition) !important;
}

.mobile-submenu a:hover {
  color: var(--accent-gold) !important;
  padding-left: var(--space-sm) !important;
}

.mobile-submenu a:last-child {
  border-bottom: none !important;
}

.view-all-mobile {
  color: var(--accent-gold) !important;
  font-weight: 600 !important;
  margin-top: var(--space-sm) !important;
  padding-top: var(--space-sm) !important;
  border-top: 1px solid var(--border-subtle) !important;
}

/* Enhanced mobile menu styling */
@media (max-width: 768px) {
  .mobile-menu {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-subtle) !important;
    padding: var(--space-lg) !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px) !important;
  }
}

/* =
==== MOBILE MEGA MENU ===== */
@media (max-width: 768px) {

  /* Mobile Collections Mega Menu */
  .mobile-collections-mega {
    display: none;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
    margin: var(--space-md) 0;
    border-radius: 12px;
    overflow: hidden;
  }

  .mobile-collections-mega.active {
    display: block;
  }

  .mobile-mega-section {
    padding: var(--space-lg) var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
  }

  .mobile-mega-section:last-child {
    border-bottom: none;
  }

  .mobile-mega-title {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--accent-gold);
    margin-bottom: var(--space-md);
    text-align: center;
  }

  .mobile-mega-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
  }

  .mobile-mega-category {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: rgba(26, 26, 26, 0.6);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  .mobile-mega-category:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--accent-gold);
  }

  .mobile-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    background: var(--accent-gold);
    color: #000000;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.6rem;
    border-radius: 50%;
  }

  .mobile-category-name {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
  }

  .mobile-mega-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .mobile-mega-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: transparent;
    border: 2px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
  }

  .mobile-mega-btn:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    background: rgba(212, 175, 55, 0.1);
  }

  .mobile-mega-btn.primary {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: #000000;
  }

  .mobile-mega-btn.primary:hover {
    background: var(--accent-gold-light);
  }
}

/* Enhanced mobile submenu with better spacing */
@media (max-width: 480px) {
  .mobile-mega-categories {
    grid-template-columns: 1fr;
  }

  .mobile-mega-category {
    justify-content: flex-start;
  }

  .mobile-category-name {
    font-size: 0.9rem;
  }
}

/* ===== P
REMIUM MEGA MENU ===== */
.nav-item-with-mega {
  position: relative;
  display: inline-block;
}

.nav-link-mega {
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius);
  transition: var(--transition);
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-link-mega:hover {
  color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.1);
}

.mega-arrow {
  font-size: 0.7rem;
  transition: transform 0.3s ease;
}

.nav-item-with-mega:hover .mega-arrow {
  transform: rotate(180deg);
}

.premium-mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  background: linear-gradient(145deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(212, 175, 55, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-10px);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 1000;
  margin-top: 10px;
}

.nav-item-with-mega:hover .premium-mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-menu-container {
  padding: var(--space-xl);
  display: grid;
  grid-template-columns: 1fr 1fr 300px;
  gap: var(--space-xl);
}

.mega-section {
  position: relative;
}

.mega-section-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--accent-gold);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid rgba(212, 175, 55, 0.3);
  text-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

/* Categories Grid */
.mega-categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.mega-category-item {
  display: block;
  padding: var(--space-md);
  background: rgba(26, 26, 26, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.mega-category-item:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: var(--accent-gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.category-info {
  display: flex;
  flex-direction: column;
}

.category-name {
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.category-count {
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.85rem;
}

.mega-category-item:hover .category-name {
  color: var(--accent-gold);
}

/* Featured Collections */
.mega-featured {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.mega-featured-item {
  display: block;
  padding: var(--space-lg);
  background: linear-gradient(135deg, rgba(26, 26, 26, 0.8) 0%, rgba(18, 18, 18, 0.9) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  text-decoration: none;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.mega-featured-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
  transition: left 0.6s ease;
}

.mega-featured-item:hover::before {
  left: 100%;
}

.mega-featured-item:hover {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(26, 26, 26, 0.9) 100%);
  border-color: var(--accent-gold);
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

.featured-content h4 {
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: 1.1rem;
  margin: 0 0 0.5rem 0;
  transition: color 0.3s ease;
}

.featured-content p {
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.4;
}

.mega-featured-item:hover .featured-content h4 {
  color: var(--accent-gold);
}

/* Quick Actions - FIXED VISIBILITY AND OVERFLOW */
.mega-actions {
  border-left: 1px solid var(--border-subtle);
  padding-left: var(--space-xl);
}

.mega-quick-actions {
  border-left: 1px solid var(--border-subtle);
  padding-left: var(--space-lg);
  /* ensure the quick actions column aligns to the top */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-md);
}

.mega-action-btn {
  display: block;
  padding: var(--space-md);
  background: transparent;
  border: 2px solid var(--border-subtle);
  border-radius: 12px;
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.85rem;
  transition: all 0.3s ease;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.mega-action-btn:hover {
  border-color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.1);
  color: var(--accent-gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* FIXED: Primary button with proper contrast */
.mega-action-btn.primary {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: #000000 !important;
  /* Force black text on gold background */
  font-weight: 600;
}

.mega-action-btn.primary:hover {
  background: var(--accent-gold-light);
  color: #000000 !important;
  /* Keep black text on hover */
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

/* Responsive Mega Menu */
@media (max-width: 1200px) {
  .premium-mega-menu {
    width: 800px;
  }
}

@media (max-width: 1024px) {
  .premium-mega-menu {
    width: 700px;
  }

  .mega-menu-container {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    padding: var(--space-lg);
  }

  .mega-actions {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid var(--border-subtle);
    padding-left: 0;
    padding-top: var(--space-lg);
    margin-top: var(--space-lg);
  }

  .mega-quick-actions {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-sm);
  }

  .mega-action-btn {
    flex: 1;
    text-align: center;
    padding: var(--space-sm);
    font-size: 0.75rem;
    min-width: 0;
  }
}

@media (max-width: 900px) {
  .premium-mega-menu {
    width: 600px;
  }

  .mega-categories {
    grid-template-columns: 1fr;
  }

  .mega-category-item {
    padding: var(--space-sm) var(--space-md);
  }
}

@media (max-width: 768px) {
  .nav-item-with-mega {
    display: none;
  }
}

/* Mega Menu Animation Enhancement */
.premium-mega-menu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-bottom: none;
  border-right: none;
  transform: translateX(-50%) rotate(45deg);
}

/* Hover delay for better UX */
.nav-item-with-mega {
  transition: all 0.2s ease;
}

.nav-item-with-mega:hover .premium-mega-menu {
  transition-delay: 0.1s;
}

.premium-mega-menu:hover {
  opacity: 1;
  visibility: visible;
}

/* ===== ME
GA MENU OVERFLOW FIX ===== */
/* Fix Quick Actions overflow in desktop mega menu */
@media (min-width: 769px) {
  .premium-mega-menu {
    width: 850px !important;
  }

  .mega-menu-container {
    grid-template-columns: 1fr 1fr 260px !important;
    gap: var(--space-lg) !important;
  }

  .mega-actions {
    padding-left: var(--space-md) !important;
    max-width: 260px !important;
  }

  .mega-action-btn {
    font-size: 0.85rem !important;
    padding: 10px 14px !important;
    line-height: 1.2 !important;
    min-height: 40px !important;
  }

  .mega-section-title {
    font-size: 1.1rem !important;
    margin-bottom: var(--space-md) !important;
  }
}

/* Ensure no horizontal overflow */
.premium-mega-menu * {
  box-sizing: border-box !important;
}

/* =
==== MEGA MENU BUTTON OVERFLOW FIX - FINAL SOLUTION ===== */

/* Override all previous mega menu styles */
@media (min-width: 769px) {
  .premium-mega-menu {
    width: 780px !important;
    max-width: 90vw !important;
    overflow: hidden !important;
  }

  .mega-menu-container {
    grid-template-columns: 1fr 1fr 200px !important;
    gap: var(--space-sm) !important;
    padding: var(--space-md) !important;
  }

  .mega-actions {
    padding-left: var(--space-xs) !important;
    max-width: 200px !important;
    width: 200px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .mega-quick-actions {
    gap: 6px !important;
    overflow: hidden !important;
  }

  .mega-action-btn {
    font-size: 0.8rem !important;
    padding: 8px 12px !important;
    line-height: 1.2 !important;
    min-height: 38px !important;
  }

  .mega-section-title {
    font-size: 0.9rem !important;
    margin-bottom: 8px !important;
  }
}

/* Large screens */
@media (min-width: 1200px) {
  .premium-mega-menu {
    width: 850px !important;
  }

  .mega-menu-container {
    grid-template-columns: 1fr 1fr 220px !important;
  }

  .mega-actions {
    max-width: 220px !important;
    width: 220px !important;
  }

  .mega-action-btn {
    font-size: 0.85rem !important;
    padding: 10px 14px !important;
    min-height: 40px !important;
  }
}

/* Medium screens */
@media (min-width: 1024px) and (max-width: 1199px) {
  .premium-mega-menu {
    width: 750px !important;
  }

  .mega-actions {
    max-width: 180px !important;
    width: 180px !important;
  }

  .mega-action-btn {
    font-size: 0.75rem !important;
    padding: 8px 10px !important;
    min-height: 36px !important;
  }
}

/* Smaller screens */
@media (min-width: 900px) and (max-width: 1023px) {
  .premium-mega-menu {
    width: 680px !important;
  }

  .mega-menu-container {
    grid-template-columns: 1fr 1fr 160px !important;
  }

  .mega-actions {
    max-width: 160px !important;
    width: 160px !important;
  }

  .mega-action-btn {
    font-size: 0.7rem !important;
    padding: 6px 8px !important;
    min-height: 34px !important;
  }
}

/* Force containment */
.premium-mega-menu,
.mega-menu-container,
.mega-actions,
.mega-quick-actions,
.mega-action-btn {
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Prevent any text from breaking out */
.mega-action-btn {
  word-break: break-word !important;
  hyphens: auto !important;
}

/* ===== 
CUSTOM LUXURY CURSOR ===== */

/* Hide default cursor and create custom one */
*,
/* ===== MEGA-MENU QUICK ACTIONS - FINAL OVERRIDE ===== */
@media (min-width: 769px) {
  /* Force the actions column to be a stable left-aligned column */
  .premium-mega-menu .mega-actions {
    transform: none !important;
    padding-left: 18px !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* left align buttons */
    justify-content: flex-start !important;
    width: auto !important;
    max-width: 260px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Ensure the primary button is left-aligned and doesn't get nudged right */
  .premium-mega-menu .mega-action-btn.primary {
    align-self: flex-start !important;
    margin-left: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    white-space: nowrap !important;
  }

  /* Defensive: remove any right padding that might come from other rules */
  .premium-mega-menu .mega-actions[style] { padding-right: 0 !important; }
}

/* Only hide the native cursor when the custom cursor is explicitly enabled on the body
   (prevents the previous global rule from blocking native cursors like grab/grabbing) */
body.use-custom-cursor *:hover,
body.use-custom-cursor *:focus {
  cursor: none !important;
}

/* Extra-specific final alignment to ensure Quick Actions and primary button sit on the left side */
@media (min-width: 769px) {
  .premium-mega-menu .mega-section.mega-actions,
  .premium-mega-menu .mega-section.mega-actions .mega-quick-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-left: 18px !important;
    padding-right: 18px !important; /* keep breathing room from right edge */
    box-sizing: border-box !important;
  }

  .premium-mega-menu .mega-section.mega-actions .mega-action-btn.primary {
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    position: relative !important;
    left: 0 !important;
    max-width: 180px !important;
    box-sizing: border-box !important;
  }
}


/* EXCEPTIONS: Show grab cursor for draggable sliders and cards */
.trending-slider,
.featured-slider,
.antique-slider,
.trending-slider *,
.featured-slider *,
.antique-slider *,
.trending-card,
.featured-card,
.antique-card,
.trending-card *,
.featured-card *,
.antique-card * {
  cursor: grab !important;
}

/* FORCE grab cursor to override everything on product cards */
.trending-slider .trending-card,
.featured-slider .featured-card,
.antique-slider .antique-card,
.trending-slider .trending-card *,
.featured-slider .featured-card *,
.antique-slider .antique-card * {
  cursor: grab !important;
}

.trending-slider.active,
.featured-slider.active,
.antique-slider.active,
.trending-slider:active,
.featured-slider:active,
.antique-slider:active,
.trending-slider.active *,
.featured-slider.active *,
.antique-slider.active *,
.trending-slider:active *,
.featured-slider:active *,
.antique-slider:active *,
.trending-slider.active .trending-card,
.featured-slider.active .featured-card,
.antique-slider.active .antique-card,
.trending-slider:active .trending-card,
.featured-slider:active .featured-card,
.antique-slider:active .antique-card,
.trending-slider.active .trending-card *,
.featured-slider.active .featured-card *,
.antique-slider.active .antique-card *,
.trending-slider:active .trending-card *,
.featured-slider:active .featured-card *,
.antique-slider:active .antique-card * {
  cursor: grabbing !important;
}

/* Smooth native grab/grabbing support -------------------------------------------------
   Provide cross-browser grab/grabbing cursors and a strong override when the page
   is in a dragging state. We toggle `body.is-grabbing` via JS during pointer down,
   and this ensures the native grabbing cursor appears even when a custom cursor
   is active (`body.use-custom-cursor`).
*/

/* Apply grab by default on slider/draggable containers */
.swiper-container,
.luxuryv2-slider-container,
.luxuryv2-swiper,
.normalmainswiper,
.grid-swiper,
.experiences-slider,
.big-slider-card,
.luxuryv2-card,
.trending-card,
.featured-card,
.antique-card,
.bestseller-card,
.card,
.big-slider-card .big-slider-image,
.luxuryv2-image,
.service-wishlist{
  cursor: -webkit-grab !important;
  cursor: grab !important;
}

/* When dragging (class set on body), show grabbing cursor */
body.is-grabbing .swiper-container,
body.is-grabbing .luxuryv2-slider-container,
body.is-grabbing .luxuryv2-swiper,
body.is-grabbing .normalmainswiper,
body.is-grabbing .grid-swiper,
body.is-grabbing .experiences-slider,
body.is-grabbing .big-slider-card,
body.is-grabbing .luxuryv2-card,
body.is-grabbing .trending-card,
body.is-grabbing .featured-card,
body.is-grabbing .antique-card,
body.is-grabbing .bestseller-card,
body.is-grabbing .card,
body.is-grabbing .big-slider-card .big-slider-image,
body.is-grabbing .luxuryv2-image,
body.is-grabbing .service-wishlist{
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
}

/* Make sure grabbing overrides custom cursor hiding (higher specificity) */
body.use-custom-cursor.is-grabbing *:hover,
body.use-custom-cursor.is-grabbing *:focus {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
}

/* Optional small visual hint transition - doesn't animate cursor but avoids
   flash when toggling class. */
.swiper-container,
.luxuryv2-slider-container {
  -webkit-user-select: none;
  user-select: none;
}

/* Exception for View Details buttons */
.trending-link,
.featured-link,
.antique-link {
  cursor: pointer !important;
}

/* ===== SLIDERS & CARDS: Force grab/grabbing cursor and ensure controls visible ===== */
@media (min-width: 0px) {
  /* Force grab cursor on cards and their children */
  -ms-overflow-style: none !important;
  /* Remove hard-coded end padding and enable scroll snap */
  padding-right: 0 !important;
  padding-left: 0 !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x mandatory !important;
  .antique-card,
  .trending-card *,
  .featured-card *,
  .antique-card * {
    cursor: grab !important;
  }

  /* When slider is active (dragging), show grabbing cursor */
  .trending-slider.active .trending-card,
  .featured-slider.active .featured-card,
  .antique-slider.active .antique-card,
  .trending-slider:active .trending-card,
  .featured-slider:active .featured-card,
  .antique-slider:active .antique-card {
    cursor: grabbing !important;
  }

  /* Ensure view/details links remain pointer */
  .trending-link,
  .featured-link,
  .antique-link {
    cursor: pointer !important;
  }

  /* Ensure slider controls are visible and interactive at all sizes */
  .trending-slider-controls,
  .featured-slider-controls,
  .antique-slider-controls {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
  }

  .trending-slider-controls .slider-btn,
  .featured-slider-controls .slider-btn,
  .antique-slider-controls .slider-btn {
    display: flex !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
  }
}

/* Custom cursor container */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: var(--accent-gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  mix-blend-mode: difference;
  transition: none;
  will-change: transform, background, border;
  transform-origin: center;
  display: block;
  opacity: 1;
}

/* Cursor trail effect */
.cursor-trail {
  position: fixed;
  width: 6px;
  height: 6px;
  background: var(--accent-gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.7;
  transition: none;
  will-change: transform, opacity;
}

/* Removed CSS hover/click classes - now handled via JS for smoother performance */

/* Different cursor states for different elements */
a:hover~.custom-cursor,
button:hover~.custom-cursor,
.luxury-btn:hover~.custom-cursor {
  transform: scale(1.5);
  background: transparent;
  border: 2px solid var(--accent-gold);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

/* Text selection cursor */
h1:hover~.custom-cursor,
h2:hover~.custom-cursor,
h3:hover~.custom-cursor,
p:hover~.custom-cursor {
  transform: scale(0.5);
  background: var(--accent-gold-light);
}

/* Input field cursor */
input:hover~.custom-cursor,
textarea:hover~.custom-cursor {
  transform: scaleX(0.3) scaleY(1.5);
  border-radius: 2px;
}

/* Sparkle effect on hover */
.cursor-sparkle {
  position: fixed;
  width: 4px;
  height: 4px;
  background: var(--accent-gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9997;
  animation: sparkleAnimation 0.6s ease-out forwards;
}

@keyframes sparkleAnimation {
  0% {
    opacity: 1;
    transform: scale(0) rotate(0deg);
  }

  50% {
    opacity: 0.8;
    transform: scale(1) rotate(180deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.5) rotate(360deg);
  }
}

/* Cursor for different sections */
.luxury-hero:hover~.custom-cursor {
  background: rgba(212, 175, 55, 0.8);
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.6);
}

.mega-menu:hover~.custom-cursor,
.premium-mega-menu:hover~.custom-cursor {
  background: var(--accent-gold-light);
  transform: scale(1.2);
}

/* Product card hover cursor */
.product-card:hover~.custom-cursor,
.luxury-card:hover~.custom-cursor {
  background: transparent;
  border: 3px solid var(--accent-gold);
  transform: scale(2.5);
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.7);
}

/* Mobile cursor adjustments */
@media (max-width: 768px) {

  .custom-cursor,
  .cursor-trail {
    display: none;
  }
}

/* 
===== HOMEPAGE COLLECTIONS RESPONSIVE ===== */
@media (max-width: 768px) {
  .collections-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-lg) !important;
  }

  .collection-card .card-image {
    height: 280px !important;
  }
}

@media (max-width: 480px) {
  .collections-grid {
    padding: 0 var(--space-sm) !important;
  }

  .collection-card .card-content {
    padding: var(--space-lg) !important;
  }
}

/* 
===== FORCE 2-COLUMN LAYOUT FOR COLLECTIONS ===== */

/* Homepage collections grid */
.featured-collections .collections-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--space-2xl) !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
}

.featured-collections .collections-grid .luxury-card {
  width: 100% !important;
  max-width: none !important;
}

/* Collections page grid */
.collections-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 2.5rem !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
}

.luxury-collection-card {
  width: 100% !important;
  max-width: none !important;
}

/* Override any conflicting auto-fit rules */
.collections-grid:not(.products-grid) {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* Mobile responsive - single column */
@media (max-width: 768px) {

  .featured-collections .collections-grid,
  .collections-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-lg) !important;
    padding: 0 var(--space-md) !important;
  }
}

/* Tablet - keep 2 columns */
@media (min-width: 769px) and (max-width: 1024px) {

  .featured-collections .collections-grid,
  .collections-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-lg) !important;
  }
}

/* Desktop - 2 columns */
@media (min-width: 1025px) {

  .featured-collections .collections-grid,
  .collections-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2.5rem !important;
  }
}

/* ===== SP
ECIFIC 2-COLUMN GRID FIXES ===== */

.homepage-collections-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.5rem !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.collections-page-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2rem !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  width: 100% !important;
  padding: 0 1rem !important;
}

.homepage-collections-grid>*,
.collections-page-grid>* {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
}

/* Force grid behavior */
.homepage-collections-grid,
.collections-page-grid {
  display: grid !important;
}

/* Mobile override */
@media (max-width: 768px) {

  .homepage-collections-grid,
  .collections-page-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* =====BUTTON TEXT VISIBILITY FIXES===== */
/
/* Homepage card links */
.card-link {
  color: var(--accent-gold) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.3s ease !important;
}

.card-link:hover {
  color: var(--accent-gold-light) !important;
  text-shadow: 0 2px 8px rgba(212, 175, 55, 0.6) !important;
}

/* Collections page buttons */
.luxury-collection-btn {
  background: var(--accent-gold) !important;
  color: #000000 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  border: 2px solid var(--accent-gold) !important;
}

.luxury-collection-btn:hover {
  background: var(--accent-gold-light) !important;
  color: #000000 !important;
  border-color: var(--accent-gold-light) !important;
  transform: translateY(-2px) !important;
}

/* Ensure all button text is visible */
.luxury-collection-btn span {
  color: #000000 !important;
  font-weight: 700 !important;
}

/* Premium button styling for collections */
.premium-btn {
  background: var(--accent-gold) !important;
  color: #000000 !important;
  font-weight: 600 !important;
  border: none !important;
}

.premium-btn:hover {
  background: var(--accent-gold-light) !important;
  color: #000000 !important;
}

/* Wider cards styling */
.homepage-collections-grid {
  max-width: 1200px !important;
  gap: 1.5rem !important;
}

.collections-page-grid {
  max-width: 1200px !important;
  gap: 2rem !important;
}

.homepage-collections-grid .luxury-card,
.collections-page-grid .luxury-collection-card {
  min-height: 500px !important;
  width: 100% !important;
}

.homepage-collections-grid .card-image,
.collections-page-grid .luxury-collection-image {
  height: 300px !important;
}

/* Enhanced cursor trail visibility */
.cursor-trail {
  position: fixed;
  width: 6px;
  height: 6px;
  background: var(--accent-gold) !important;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  opacity: 0.6 !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.4) !important;
  display: block;
  will-change: transform, opacity;
}

/* =====CURSOR DEBUG AND FIXES===== */
/* Force cursor visibility */
.custom-cursor {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 20px !important;
  height: 20px !important;
  background: #d4af37 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 999999 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.cursor-trail {
  position: fixed !important;
  width: 6px !important;
  height: 6px !important;
  background: #d4af37 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 999998 !important;
  display: block !important;
  opacity: 0.6 !important;
  visibility: visible !important;
}

/*
 ===== FORCE WIDER CARDS ===== */

/* Homepage collections */
.featured-collections .collections-grid,
.homepage-collections-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.5rem !important;
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Collections page */
.collections-page-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2rem !important;
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Force card width */
.luxury-collection-card,
.collection-card {
  width: 100% !important;
  max-width: none !important;
}

/* =
==== LUXURY CATEGORY ANIMATIONS ===== */

@keyframes luxuryGlow {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

/* Category card hover effects */
.luxury-collection-card:hover .luxury-collection-image>div:first-child>div:first-child {
  animation-duration: 2s !important;
}

.luxury-collection-card:hover .luxury-collection-image>div:first-child>div:nth-child(2) {
  transform: scale(1.1) !important;
  text-shadow: 0 6px 30px rgba(212, 175, 55, 0.6) !important;
}

.luxury-collection-card:hover .luxury-collection-image>div:first-child>div:nth-child(3) {
  color: var(--accent-gold-light) !important;
  text-shadow: 0 4px 15px rgba(212, 175, 55, 0.5) !important;
}

/* Force card consistency - Override any conflicting styles */
.trending-card,
.antique-card,
.product-card {
  min-height: 380px !important;
  max-height: 380px !important;
  padding: 20px !important;
}

/* ===== FEATURED PRODUCTS SECTION FIX ===== */
/* Fix last card being cut off in featured products only */
.featured-products .featured-slider {
  padding-right: 50px !important;
  /* Reduced from 100px to prevent cutoff */
  margin-right: -20px !important;
  /* Add negative margin to compensate */
}

/* Ensure featured slider container has proper overflow handling */
.featured-products .featured-slider-container {
  overflow: visible !important;
  padding-right: 20px !important;
}

/* Featured products specific spacing */
.featured-products .featured-slide {
  min-width: 320px !important;
  width: 320px !important;
  flex-shrink: 0 !important;
  padding: 0 15px !important;
  box-sizing: border-box !important;
}

/* Ensure featured cards are fully visible */
.featured-products .featured-card {
  width: 100% !important;
  margin: 0 !important;
}

/* Mobile responsive for featured products */
@media (max-width: 768px) {
  .featured-products .featured-slider {
    padding-right: 20px !important;
    margin-right: -10px !important;
  }

  .featured-products .featured-slider-container {
    padding-right: 10px !important;
  }

  /* Mobile card behavior - ALLOW SCROLLING */
  .trending-card,
  .featured-card,
  .antique-card {
    pointer-events: none !important;
    /* Disable card clicks */
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    touch-action: pan-x !important;
    /* Allow horizontal scrolling */
    position: relative !important;
    z-index: 1 !important;
  }

  /* Disable drag on mobile sliders - but allow touch scrolling */
  .trending-slider,
  .featured-slider,
  .antique-slider {
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    touch-action: pan-x !important;
    /* Allow horizontal scrolling */
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  /* ONLY buttons should be clickable on mobile */
  .trending-link,
  .featured-link,
  .antique-link {
    pointer-events: auto !important;
    /* Enable button clicks */
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(212, 175, 55, 0.3) !important;
    position: relative !important;
    z-index: 10 !important;
    display: inline-block !important;
    padding: 8px 16px !important;
    background: var(--accent-gold) !important;
    color: #000000 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
  }
}

.trending-image img,
.antique-image img,
.product-image img {
  height: 200px !important;
}

.trending-image,
.antique-image,
.product-image {
  margin-bottom: 15px !important;
}

/* Full-viewport sliding slider
   Make the slider span the full viewport horizontally and allow it to
   translate across the screen based on scroll position. Targets featured
   and trending sliders used on homepage sections. */
.full-screen-slider-wrapper {
  position: relative;
  overflow: visible !important;
}

.full-screen-slider,
.featured-products .featured-slider,
.trending-products .trending-slider {
  position: relative;
  width: 100vw !important;
  left: 0;
  box-sizing: border-box;
  will-change: transform;
  /* start off-screen to the right by default */
  transform: translateX(100vw);
}

/* ensure individual slides remain inline and scrollable inside the slider */
.full-screen-slider .featured-slide,
.featured-products .featured-slide,
.trending-products .trending-card {
  display: inline-block !important;
}

/* reduce pointer interference when slider is moving */
.full-screen-slider.moving *,
.featured-products .featured-slider.moving *,
.trending-products .trending-slider.moving * {
  pointer-events: auto;
}

.trending-card h4,
.antique-card h4,
.product-card h4 {
  font-size: 1.1rem !important;
  margin-bottom: 8px !important;
}

.trending-price,
.antique-price,
.product-price {
  font-size: 1.2rem !important;
  margin-bottom: 15px !important;
}

.trending-link,
.antique-link,
.product-link {
  padding: 8px 16px !important;
  font-size: 0.75rem !important;
  border-radius: 6px !important;
}

.product-name-overlay h3 {
  font-size: 1.2rem !important;
  padding: 0 15px !important;
}

/* Ensure all sections have identical card styling */
.trending-products .luxury-card,
.featured-products .luxury-card,
.antique-slider-container .luxury-card {
  min-height: 380px !important;
  max-height: 380px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* ===== CHECKOUT PAGE STYLING ===== */
.woocommerce-checkout {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Checkout form styling */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
  background: var(--bg-card) !important;
  padding: 30px !important;
  border-radius: var(--border-radius) !important;
  margin-bottom: 30px !important;
  border: 1px solid var(--border-subtle) !important;
}

/* Input field styling */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  background-color: var(--bg-secondary) !important;
  border: 2px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  padding: 15px !important;
  border-radius: var(--border-radius) !important;
  font-size: 1rem !important;
  transition: var(--transition) !important;
  width: 100% !important;
}

.woocommerce-checkout input[type="text"]:focus,
.woocommerce-checkout input[type="email"]:focus,
.woocommerce-checkout input[type="tel"]:focus,
.woocommerce-checkout input[type="password"]:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--accent-gold) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1) !important;
  outline: none !important;
}

/* Label styling */
.woocommerce-checkout label {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Required field asterisk */
.woocommerce-checkout .required {
  color: var(--accent-gold) !important;
}

/* Order review section */
.woocommerce-checkout-review-order {
  background: var(--bg-card) !important;
  padding: 30px !important;
  border-radius: var(--border-radius) !important;
  border: 1px solid var(--border-subtle) !important;
}

.woocommerce-checkout-review-order-table {
  background: transparent !important;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
  padding: 15px !important;
}

.woocommerce-checkout-review-order-table .order-total {
  background: var(--bg-secondary) !important;
  font-weight: 700 !important;
}

.woocommerce-checkout-review-order-table .order-total .amount {
  color: var(--accent-gold) !important;
  font-size: 1.2rem !important;
}

/* Payment methods */
.woocommerce-checkout-payment {
  background: var(--bg-card) !important;
  padding: 30px !important;
  border-radius: var(--border-radius) !important;
  border: 1px solid var(--border-subtle) !important;
  margin-top: 30px !important;
}

.woocommerce-checkout-payment .payment_methods {
  background: transparent !important;
}

.woocommerce-checkout-payment .payment_method_paypal,
.woocommerce-checkout-payment .payment_method_stripe,
.woocommerce-checkout-payment .payment_method_cod {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--border-radius) !important;
  margin-bottom: 15px !important;
  padding: 20px !important;
}

.woocommerce-checkout-payment .payment_method_paypal label,
.woocommerce-checkout-payment .payment_method_stripe label,
.woocommerce-checkout-payment .payment_method_cod label {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

/* Place order button */
.woocommerce-checkout #place_order {
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-light)) !important;
  color: #000000 !important;
  border: none !important;
  padding: 18px 40px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-radius: 30px !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  width: 100% !important;
  margin-top: 20px !important;
}

.woocommerce-checkout #place_order:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4) !important;
}

/* Checkout headings */
.woocommerce-checkout h2,
.woocommerce-checkout h3 {
  color: var(--text-primary) !important;
  font-family: var(--font-serif) !important;
  margin-bottom: 20px !important;
  border-bottom: 2px solid var(--accent-gold) !important;
  padding-bottom: 10px !important;
}

/* Error messages */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-left: 4px solid var(--accent-gold) !important;
  padding: 15px !important;
  border-radius: var(--border-radius) !important;
}

/* Checkbox styling */
.woocommerce-checkout input[type="checkbox"] {
  accent-color: var(--accent-gold) !important;
  margin-right: 10px !important;
}

/* Select dropdown styling */
.woocommerce-checkout select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
  background-size: 16px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* Mobile responsive */
@media (max-width: 768px) {

  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-shipping-fields,
  .woocommerce-checkout .woocommerce-additional-fields,
  .woocommerce-checkout-review-order,
  .woocommerce-checkout-payment {
    padding: 20px !important;
    margin-bottom: 20px !important;
  }

  .woocommerce-checkout input[type="text"],
  .woocommerce-checkout input[type="email"],
  .woocommerce-checkout input[type="tel"],
  .woocommerce-checkout input[type="password"],
  .woocommerce-checkout select,
  .woocommerce-checkout textarea {
    padding: 12px !important;
    font-size: 16px !important;
    /* Prevents zoom on iOS */
  }
}

/* ===== FOOTER MOBILE RESPONSIVE FIXES ===== */

/* Fix 1: Legal links inline on mobile with small text */
@media (max-width: 768px) {
  .footer-legal {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
    align-items: center !important;
  }

  .footer-legal a {
    font-size: 11px !important;
    color: #999 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .footer-legal a:hover {
    color: var(--accent-gold) !important;
  }
}

/* Fix 2: Reduce gap between Subscribe button and copyright on mobile */
@media (max-width: 768px) {
  .footer-newsletter {
    margin-bottom: 10px !important;
    /* Further reduced from 20px */
  }

  .footer-bottom {
    padding-top: 10px !important;
    /* Further reduced from 20px to 10px */
    margin-top: 0 !important;
  }

  #newsletter-form {
    margin-bottom: 5px !important;
    /* Further reduced from 10px to 5px */
  }
}

/* Fix 3: Restore sensible gap between collections section and footer */
.featured-collections,
.collections-section,
.explore-collections,
.story-section {
  margin-bottom: 20px;
}

/* Target the specific collections section on homepage */
.brand-story,
.story-content {
  margin-bottom: 20px;
}

@media (max-width: 768px) {

  .featured-collections,
  .collections-section,
  .explore-collections,
  .story-section,
  .brand-story {
    margin-bottom: 15px;
  }

  /* Keep footer top padding reduction scoped to footer only */
  #shine-footer,
  .site-footer {
    padding-top: 15px !important;
  }

  /* reasonable mobile spacing for story and buttons */
  .story-content {
    margin-bottom: 10px;
  }

  .explore-btn {
    margin-bottom: 10px;
  }
}

/* Fix 4: Reduce footer logo bottom margin on mobile */
@media (max-width: 768px) {
  .footer-logo {
    margin-bottom: 15px !important;
    /* Reduced from default spacing */
  }

  .footer-brand {
    margin-bottom: 25px !important;
    /* Reduce overall brand section spacing */
  }

  .footer-brand p {
    margin-bottom: 15px !important;
    /* Reduce tagline bottom margin */
  }

  .footer-contact {
    margin-top: 15px !important;
    /* Reduce contact section top margin */
  }
}

/* Additional mobile footer improvements */
@media (max-width: 480px) {
  .footer-legal {
    gap: 10px !important;
  }

  .footer-legal a {
    font-size: 10px !important;
  }

  .footer-copyright p {
    font-size: 11px !important;
    text-align: center !important;
  }

  .footer-bottom {
    padding-top: 15px !important;
    gap: 15px !important;
  }
}

/* ===== CONSISTENT HAMBURGER MENU POSITIONING ===== */
/* Fix hamburger menu positioning inconsistency between homepage and other pages */
@media (max-width: 768px) {
  .main-header .header-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 20px !important;
    position: relative !important;
    height: 60px !important;
    width: 100% !important;
  }

  .main-header .logo {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    order: 1 !important;
    flex: 0 0 auto !important;
    z-index: 10 !important;
  }

  .main-header .mobile-menu-btn {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    padding: 8px !important;
    order: 999 !important;
    z-index: 1000 !important;
  }

  .main-header .mobile-menu-btn span {
    width: 25px !important;
    height: 3px !important;
    background: #ffffff !important;
    margin: 3px 0 !important;
    display: block !important;
    border-radius: 2px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.3s ease !important;
  }

  .main-header .mobile-menu-btn:hover span {
    background: #d4af37 !important;
  }

  /* Hide desktop navigation on mobile */
  .main-header .desktop-nav,
  .main-header .desktop-actions {
    display: none !important;
  }
}

/* ===== ENHANCED CHECKOUT PAGE STYLING ===== */

/* Main checkout container */
.woocommerce-checkout {
  background: var(--bg-primary) !important;
  min-height: 100vh !important;
  padding: 120px 0 60px !important;
}

/* Checkout form wrapper */
.woocommerce-checkout .woocommerce {
  background: var(--bg-primary) !important;
}

/* All input fields - override white backgrounds */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-checkout .select2-container .select2-selection--single,
.woocommerce-checkout .select2-container .select2-selection--multiple {
  background: var(--bg-card) !important;
  border: 2px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  border-radius: var(--border-radius) !important;
  padding: 15px !important;
  font-size: 1rem !important;
  transition: var(--transition) !important;
  box-shadow: none !important;
}

/* Input focus states */
.woocommerce-checkout input[type="text"]:focus,
.woocommerce-checkout input[type="email"]:focus,
.woocommerce-checkout input[type="tel"]:focus,
.woocommerce-checkout input[type="password"]:focus,
.woocommerce-checkout input[type="number"]:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--accent-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1) !important;
}

/* Labels */
.woocommerce-checkout label {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Required field asterisk */
.woocommerce-checkout .required {
  color: var(--accent-gold) !important;
}

/* Checkout sections */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
  background: var(--bg-card) !important;
  padding: 30px !important;
  border-radius: 15px !important;
  margin-bottom: 30px !important;
  border: 1px solid var(--border-subtle) !important;
}

/* Order review section */
.woocommerce-checkout-review-order {
  background: var(--bg-card) !important;
  padding: 30px !important;
  border-radius: 15px !important;
  border: 1px solid var(--border-subtle) !important;
}

/* Payment section */
.woocommerce-checkout-payment {
  background: var(--bg-card) !important;
  padding: 30px !important;
  border-radius: 15px !important;
  margin-top: 30px !important;
  border: 1px solid var(--border-subtle) !important;
}

/* Coupon section styling */
.woocommerce-form-coupon-toggle,
.checkout_coupon {
  background: var(--bg-card) !important;
  padding: 20px !important;
  border-radius: 10px !important;
  margin-bottom: 20px !important;
  border: 1px solid var(--border-subtle) !important;
}

.woocommerce-form-coupon-toggle .woocommerce-info,
.checkout_coupon .woocommerce-info {
  background: transparent !important;
  color: var(--text-primary) !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.checkout_coupon input[type="text"] {
  background: var(--bg-primary) !important;
  border: 2px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  padding: 12px 15px !important;
  border-radius: 8px !important;
  margin-right: 10px !important;
}

.checkout_coupon .button {
  background: linear-gradient(135deg, var(--accent-gold), #f4d03f) !important;
  color: #000 !important;
  border: none !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
}

.checkout_coupon .button:hover {
  background: linear-gradient(135deg, #f4d03f, var(--accent-gold)) !important;
  transform: translateY(-2px) !important;
}

/* Order table styling */
.woocommerce-checkout-review-order-table {
  background: transparent !important;
  border: none !important;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  background: transparent !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 15px 0 !important;
}

/* Payment methods */
.woocommerce-checkout-payment .payment_methods {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.woocommerce-checkout-payment .payment_method_paypal,
.woocommerce-checkout-payment .payment_method_stripe,
.woocommerce-checkout-payment .payment_method_cod {
  background: var(--bg-primary) !important;
  border: 2px solid var(--border-subtle) !important;
  border-radius: 10px !important;
  padding: 20px !important;
  margin-bottom: 15px !important;
}

/* Payment method labels */
.woocommerce-checkout-payment .payment_methods label {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

/* Place order button */
.woocommerce-checkout #place_order {
  background: linear-gradient(135deg, var(--accent-gold), #f4d03f) !important;
  color: #000 !important;
  border: none !important;
  padding: 18px 40px !important;
  border-radius: 30px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  width: 100% !important;
  margin-top: 20px !important;
}

.woocommerce-checkout #place_order:hover {
  background: linear-gradient(135deg, #f4d03f, var(--accent-gold)) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4) !important;
}

/* Error message styling */
.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error {
  background: rgba(231, 76, 60, 0.1) !important;
  border-left: 4px solid #e74c3c !important;
  color: #e74c3c !important;
  padding: 15px !important;
  border-radius: 8px !important;
  margin-bottom: 20px !important;
}

/* Success message styling */
.woocommerce-checkout .woocommerce-message {
  background: rgba(46, 204, 113, 0.1) !important;
  border-left: 4px solid #2ecc71 !important;
  color: #2ecc71 !important;
  padding: 15px !important;
  border-radius: 8px !important;
  margin-bottom: 20px !important;
}

/* No payment methods message */
.woocommerce-checkout .woocommerce-info {
  background: rgba(52, 152, 219, 0.1) !important;
  border-left: 4px solid #3498db !important;
  color: var(--text-primary) !important;
  padding: 20px !important;
  border-radius: 10px !important;
  margin-bottom: 20px !important;
}

/* Select2 dropdown styling for country/state fields */
.select2-container--default .select2-selection--single {
  background: var(--bg-card) !important;
  border: 2px solid var(--border-subtle) !important;
  border-radius: var(--border-radius) !important;
  height: 50px !important;
  line-height: 46px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary) !important;
  padding-left: 15px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px !important;
  right: 15px !important;
}

.select2-dropdown {
  background: var(--bg-card) !important;
  border: 2px solid var(--border-subtle) !important;
  border-radius: var(--border-radius) !important;
}

.select2-container--default .select2-results__option {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  padding: 12px 15px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--accent-gold) !important;
  color: #000 !important;
}

/* Mobile responsive enhancements */
@media (max-width: 768px) {
  .woocommerce-checkout {
    padding: 100px 15px 40px !important;
  }

  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-shipping-fields,
  .woocommerce-checkout .woocommerce-additional-fields,
  .woocommerce-checkout-review-order,
  .woocommerce-checkout-payment {
    padding: 20px !important;
    margin-bottom: 20px !important;
  }
}

/* ===== FIX CHECKOUT ICON OVERLAPPING ISSUES ===== */

/* Coupon toggle link styling */
.woocommerce-form-coupon-toggle .woocommerce-info {
  position: relative !important;
  padding-left: 50px !important;
  line-height: 1.6 !important;
}

.woocommerce-form-coupon-toggle .woocommerce-info::before {
  content: "🎫" !important;
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 1.2rem !important;
  color: var(--accent-gold) !important;
}

/* Payment methods message styling */
.woocommerce-checkout .woocommerce-info {
  position: relative !important;
  padding-left: 50px !important;
  line-height: 1.6 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.woocommerce-checkout .woocommerce-info::before {
  content: "ℹ️" !important;
  position: absolute !important;
  left: 15px !important;
  top: 15px !important;
  font-size: 1.2rem !important;
  color: var(--accent-gold) !important;
}

/* Ensure text doesn't overlap with icons */
.woocommerce-info a {
  color: var(--accent-gold) !important;
  text-decoration: underline !important;
  word-break: break-word !important;
}

.woocommerce-info a:hover {
  color: #f4d03f !important;
}

/* Mobile responsive for checkout messages */
@media (max-width: 768px) {

  .woocommerce-form-coupon-toggle .woocommerce-info,
  .woocommerce-checkout .woocommerce-info {
    padding-left: 45px !important;
    font-size: 0.9rem !important;
  }

  .woocommerce-form-coupon-toggle .woocommerce-info::before,
  .woocommerce-checkout .woocommerce-info::before {
    left: 12px !important;
    font-size: 1rem !important;
  }
}

/* ===== CATEGORY PAGE VIEW DETAILS BUTTON FIX ===== */
.woocommerce .btn-view:hover,
.woocommerce-page .btn-view:hover,
.tax-product_cat .btn-view:hover,
body.woocommerce .btn-view:hover,
body.woocommerce-page .btn-view:hover {
  background: #d4af37 !important;
  color: #000000 !important;
  border-color: #d4af37 !important;
}

/* Force black text on all View Details buttons when hovered */
.btn-view:hover,
.btn-view:hover span,
.btn-view:hover a,
.btn-view:focus,
.btn-view:active {
  color: #000000 !important;
}

/* ===== MEGA ACTION BUTTON FIX - PROPER TEXT CENTERING ===== */
.mega-action-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
  line-height: 1.2 !important;
}

.mega-action-btn.primary {
  font-weight: 700 !important;
  color: #000000 !important;
}

/* Ensure proper centering on all screen sizes */
@media (min-width: 769px) {
  .mega-action-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    font-size: 0.8rem !important;
  }
}

@media (min-width: 1200px) {
  .mega-action-btn {
    font-size: 0.85rem !important;
    min-height: 42px !important;
  }
}

/* ===== FORCE GRAB CURSOR ON SLIDERS - FINAL OVERRIDE ===== */
body.cursor-auto {
  cursor: auto !important;
}

body.cursor-auto .trending-slider,
body.cursor-auto .featured-slider,
body.cursor-auto .antique-slider {
  cursor: grab !important;
}

body.cursor-auto .trending-slider *,
body.cursor-auto .featured-slider *,
body.cursor-auto .antique-slider * {
  cursor: grab !important;
}

body.cursor-auto .trending-slider.active,
body.cursor-auto .featured-slider.active,
body.cursor-auto .antique-slider.active,
body.cursor-auto .trending-slider:active,
body.cursor-auto .featured-slider:active,
body.cursor-auto .antique-slider:active {
  cursor: grabbing !important;
}

body.cursor-auto .trending-slider.active *,
body.cursor-auto .featured-slider.active *,
body.cursor-auto .antique-slider.active *,
body.cursor-auto .trending-slider:active *,
body.cursor-auto .featured-slider:active *,
body.cursor-auto .antique-slider:active * {
  cursor: grabbing !important;
}

/* ===== MOBILE RESPONSIVE - MATCH TRENDING & ANTIQUE TO FEATURED STYLING ===== */
@media (max-width: 768px) {

  /* Make trending and antique sections match featured section layout */
  .trending-products .trending-slider,
  .antique-collection .antique-slider {
    padding-right: 20px !important;
    margin-right: -10px !important;
  }

  .trending-products .trending-slider-container,
  .antique-collection .antique-slider-container {
    padding-right: 10px !important;
  }

  /* Card sizing - match featured cards exactly */
  .trending-slide,
  .antique-slide {
    min-width: 320px !important;
    width: 320px !important;
    flex-shrink: 0 !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }

  .trending-card,
  .antique-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--border-radius) !important;
    overflow: hidden !important;
    text-align: center !important;
    padding: 12px !important;
    position: relative !important;
    height: 380px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  /* Image styling - match featured exactly */
  .trending-image,
  .antique-image {
    margin-bottom: 8px !important;
    overflow: hidden !important;
    border-radius: var(--border-radius) !important;
    position: relative !important;
  }

  .trending-image img,
  .antique-image img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    user-drag: none !important;
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
  }

  /* Title styling - match featured exactly */
  .trending-card h4,
  .antique-card h4 {
    font-family: var(--font-serif) !important;
    font-size: 1.1rem !important;
    color: var(--text-primary) !important;
    margin-bottom: 4px !important;
    height: 2.4em !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    line-height: 1.2em !important;
  }

  /* Price section styling - match featured exactly */
  .trending-price-section,
  .antique-price-section {
    display: flex !important;
    gap: 0.8em !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    justify-content: center !important;
  }

  .trending-price-original,
  .antique-price-original {
    font-size: 0.85em !important;
    font-weight: 600 !important;
    color: #ff0000 !important;
    text-decoration: line-through !important;
  }

  .trending-price-sale,
  .antique-price-sale {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--accent-gold) !important;
  }

  /* Button styling - match featured exactly */
  .trending-link,
  .antique-link {
    display: inline-block !important;
    background: #d4af37 !important;
    color: #000000 !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    font-size: 0.75rem !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    margin-top: auto !important;
  }

  .trending-link:hover,
  .antique-link:hover {
    background: #f4d03f !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important;
  }

  /* Slider container styling - match featured exactly */
  .trending-slider-container,
  .antique-slider-container {
    position: relative !important;
    margin-bottom: var(--space-xl) !important;
    height: 450px !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .trending-slider,
  .antique-slider {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;

  }
/* Ensure individual cards snap to the start of the viewport */
.trending-card,
.trending-slide,
.antique-slide {
  scroll-snap-align: start !important;
}

/* ===== Ensure native grab/grabbing cursor shows during drags ===== */
/* Broad selector list targets common sliders/cards used across theme */
.swiper-container,
.luxuryv2-slider-container,
.luxuryv2-swiper,
.normalmainswiper,
.grid-swiper,
.experiences-slider,
.trending-slider,
.featured-slider,
.antique-slider,
.big-slider-card,
.luxuryv2-card,
.trending-card,
.bestseller-card,
.card,
.big-slider-card .big-slider-image,
.luxuryv2-image,
.service-wishlist {
  cursor: -webkit-grab !important;
  cursor: grab !important;
}

/* --- Mobile fixes: ensure sliders and cards can grow to fit content --- */
@media (max-width: 768px) {
  .trending-slider-container,
  .antique-slider-container,
  .featured-slider-container {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .trending-slider,
  .antique-slider,
  .featured-slider {
    height: auto !important;
    overflow: visible !important;
    display: block !important;
  }

  /* Remove any forced fixed card heights left in this file */
  .trending-card,
  .featured-card,
  .antique-card,
  .product-card {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }
}

/* While actively dragging, force grabbing cursor */
body.is-grabbing .swiper-container,
body.is-grabbing .luxuryv2-slider-container,
body.is-grabbing .luxuryv2-swiper,
body.is-grabbing .normalmainswiper,
body.is-grabbing .grid-swiper,
body.is-grabbing .experiences-slider,
body.is-grabbing .trending-slider,
body.is-grabbing .featured-slider,
body.is-grabbing .antique-slider,
body.is-grabbing .big-slider-card,
body.is-grabbing .luxuryv2-card,
body.is-grabbing .trending-card,
body.is-grabbing .bestseller-card,
body.is-grabbing .card,
body.is-grabbing .big-slider-card .big-slider-image,
body.is-grabbing .luxuryv2-image,
body.is-grabbing .service-wishlist,
body.is-grabbing .trending-slider *,
body.is-grabbing .featured-slider *,
body.is-grabbing .antique-slider * {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
}

/* If a custom cursor hides native cursors via `body.use-custom-cursor`,
   allow grabbing to win when we add `is-grabbing` */
body.use-custom-cursor.is-grabbing *:hover,
body.use-custom-cursor.is-grabbing *:focus,
body.use-custom-cursor.is-grabbing * {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
}

/* Utility: prefer no text selection while dragging sliders */
.swiper-container, .trending-slider, .featured-slider, .antique-slider,
.grid-swiper, .normalmainswiper {
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* Strong override: show open-hand (grab) cursor on product cards and slider items,
   but keep pointer on interactive controls (links, buttons, inputs) */
.trending-card, .antique-card, .featured-card, .product-card, .big-slider-card, .luxuryv2-card, .card {
  cursor: -webkit-grab !important;
  cursor: grab !important;
}

/* Apply grab to non-interactive descendants of cards (but not anchors/buttons/inputs) */
.trending-card *:not(a):not(button):not(input):not(select):not(textarea):not([role="button"]) ,
.antique-card *:not(a):not(button):not(input):not(select):not(textarea):not([role="button"]),
.featured-card *:not(a):not(button):not(input):not(select):not(textarea):not([role="button"]),
.product-card *:not(a):not(button):not(input):not(select):not(textarea):not([role="button"]),
.big-slider-card *:not(a):not(button):not(input):not(select):not(textarea):not([role="button"]),
.luxuryv2-card *:not(a):not(button):not(input):not(select):not(textarea):not([role="button"]),
.card *:not(a):not(button):not(input):not(select):not(textarea):not([role="button"]) {
  cursor: -webkit-grab !important;
  cursor: grab !important;
}

/* Ensure interactive elements keep pointer cursor */
.trending-card a, .trending-card button,
.antique-card a, .antique-card button,
.featured-card a, .featured-card button,
.product-card a, .product-card button,
.big-slider-card a, .big-slider-card button,
.luxuryv2-card a, .luxuryv2-card button,
.card a, .card button {
  cursor: pointer !important;
}

/* Force open-hand (grab) cursor for anchors inside slider/card containers
   to match draggable affordance. Keep pointer for clear CTA elements. */
.swiper-container a:not(.slider-btn):not(.button):not(.view-details):not(.mega-action-btn),
.trending-slider a:not(.slider-btn):not(.button):not(.view-details):not(.mega-action-btn),
.featured-slider a:not(.slider-btn):not(.button):not(.view-details):not(.mega-action-btn),
.antique-slider a:not(.slider-btn):not(.button):not(.view-details):not(.mega-action-btn),
.grid-swiper a:not(.slider-btn):not(.button):not(.view-details):not(.mega-action-btn) {
  cursor: -webkit-grab !important;
  cursor: grab !important;
}

/* Keep explicit CTA buttons/links using pointer */
.swiper-container a.slider-btn,
.swiper-container a.button,
.swiper-container a.view-details,
.trending-slider a.slider-btn,
.trending-slider a.button,
.trending-slider a.view-details,
.featured-slider a.slider-btn,
.featured-slider a.button,
.featured-slider a.view-details {
  cursor: pointer !important;
}

/* Specific override: trending cards use `.trending-link` as the clickable wrapper.
   Make the wrapper show grab cursor (open hand), but keep internal CTA buttons pointer. */
.trending-card > .trending-link,
.trending-slider .trending-card > .trending-link {
  cursor: -webkit-grab !important;
  cursor: grab !important;
}

.trending-card > .trending-link *:not(.trending-link):not(.view-details):not(.trending-link .button) {
  cursor: -webkit-grab !important;
  cursor: grab !important;
}

/* Ensure the View Details CTA remains pointer */
.trending-card .view-details,
.trending-card .trending-link .view-details,
.trending-card .trending-link .button {
  cursor: pointer !important;
}

/* Super-specific override for inspected element `div.trending-card.category-card` */
div.trending-card.category-card,
div.trending-card.category-card * {
  cursor: -webkit-grab !important;
  cursor: grab !important;
}

/* Keep CTA and interactive elements as pointer inside these cards */
div.trending-card.category-card a.view-details,
div.trending-card.category-card button,
div.trending-card.category-card a.trending-link,
div.trending-card.category-card .slider-btn,
div.trending-card.category-card .button,
div.trending-card.category-card [role="button"] {
  cursor: pointer !important;
}

    scroll-behavior: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-right: 100px !important;
    box-sizing: content-box !important;
  }

  /* Hide scrollbars */
  .trending-slider::-webkit-scrollbar,
  .antique-slider::-webkit-scrollbar {
    display: none !important;
  }

  /* Controls styling - match featured exactly */
  .trending-slider-controls,
  .featured-slider-controls,
  .antique-slider-controls,
  .featured-controls {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 40px !important;
    gap: 20px !important;
  }

  .trending-slider-controls .slider-btn,
  .featured-slider-controls .slider-btn,
  .antique-slider-controls .slider-btn,
  .featured-controls .slider-btn,
  .featured-controls .featured-prev,
  .featured-controls .featured-next {
    background: linear-gradient(135deg, #d4af37, #f4d03f) !important;
    border: none !important;
    color: #000 !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3) !important;
  }

  /* Ensure JS-inserted controls (inserted after swiper container) are centered */
  .myFeaturedSwiper + .featured-controls,
  .myTrendingSwiper + .trending-controls,
  .myAntiqueSwiper + .antique-controls {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 20px !important;
    gap: 18px !important;
  }
  .featured-controls,
  .trending-controls,
  .antique-controls {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
  }

  .trending-slider-controls .slider-btn:hover,
  .antique-slider-controls .slider-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4) !important;
  }
}

/* ===== Mega Actions: Force top alignment and compact buttons ===== */
.premium-mega-menu .mega-actions {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important; /* center buttons horizontally in actions column */
  padding-top: 0 !important;
  margin-top: 0 !important;
  padding-left: var(--space-lg) !important;
  max-width: 300px !important;
}

.premium-mega-menu .mega-action-btn {
  margin-top: 8px !important;
  padding: 8px 12px !important;
  white-space: normal !important;
}

.premium-mega-menu .mega-action-btn:first-child {
  margin-top: 0 !important;
}

  /* Fix: prevent 'COLLECTIONS' word wrapping and keep the button left-aligned */
  .premium-mega-menu .mega-actions {
    /* place breathing room on the left instead so buttons sit toward left/center */
    padding-right: 0 !important;
    padding-left: 18px !important;
  }

  .premium-mega-menu .mega-action-btn.primary {
    white-space: nowrap !important;
    font-size: 0.82rem !important;
    padding: 6px 10px !important;
    max-width: 200px !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    align-self: center !important; /* center the primary button */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Nudge the quick-actions column left on wide desktop to avoid overlap with the mega menu border */
  @media (min-width: 1100px) {
    .premium-mega-menu .mega-actions {
      /* remove right-side nudge so quick-action buttons sit left/center
         instead of being visually pushed toward the right edge */
      transform: none !important;
      padding-right: 0 !important;
      padding-left: 18px !important;
    }
  }


/* ===== Fix: Ensure grab cursor on slider cards except CTAs =====
   Some pages were still showing the pointer cursor over featured/antique
   slides because interactive elements used broad selectors. The rules below
   enforce an open-hand grab cursor for the card areas while keeping CTA
   buttons/links as pointer. This block is intentionally appended here so it
   overrides earlier pointer rules when present. */

/* Apply grab to all card containers and their non-interactive descendants */
.swiper.myFeaturedSwiper .featured-card,
.swiper.myFeaturedSwiper .featured-card *,
.swiper.myAntiqueSwiper .antique-card,
.swiper.myAntiqueSwiper .antique-card *,
.swiper.myTrendingSwiper .trending-card,
.swiper.myTrendingSwiper .trending-card * {
  cursor: -webkit-grab !important;
  cursor: grab !important;
}

/* When dragging, show grabbing cursor */
body.is-grabbing .swiper.myFeaturedSwiper .featured-card,
body.is-grabbing .swiper.myAntiqueSwiper .antique-card,
body.is-grabbing .swiper.myTrendingSwiper .trending-card {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
}

/* Keep explicit CTA links/buttons as pointer only (View Details) */
.swiper.myFeaturedSwiper .product-link,
.swiper.myAntiqueSwiper .product-link,
.swiper.myTrendingSwiper .product-link,
.swiper.myFeaturedSwiper .product-link *,
.swiper.myAntiqueSwiper .product-link *,
.swiper.myTrendingSwiper .product-link * {
  cursor: pointer !important;
}



/* =====================================================
   HOMEPAGE SLIDER FIXES - Mobile overflow & Premium cards
   ===================================================== */

/* Prevent horizontal overflow on mobile */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden !important;
  }
  
  .trending-products,
  .featured-products,
  .antique-products {
    overflow: hidden !important;
    max-width: 100vw !important;
  }
  
  .trending-products .container,
  .featured-products .container,
  .antique-products .container {
    overflow: hidden !important;
    max-width: 100% !important;
    padding: 0 15px !important;
  }
  
  .myTrendingSwiper,
  .myFeaturedSwiper,
  .myAntiqueSwiper {
    overflow: hidden !important;
    max-width: 100% !important;
  }
  
  .swiper-wrapper {
    overflow: hidden !important;
  }
}

/* Premium card styling - wider and more luxurious */
.trending-card,
.featured-card,
.antique-card {
  max-width: 320px !important;
  min-width: 280px !important;
  height: 450px !important;
  border-radius: 20px !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 5px 15px rgba(212, 175, 55, 0.1) !important;
}

/* Ensure grab cursor on all slider elements */
.myTrendingSwiper,
.myFeaturedSwiper,
.myAntiqueSwiper,
.trending-card,
.featured-card,
.antique-card,
.trending-image,
.featured-image,
.antique-image,
.trending-content,
.featured-content,
.antique-content {
  cursor: grab !important;
  cursor: -webkit-grab !important;
}

body.is-grabbing .myTrendingSwiper,
body.is-grabbing .myFeaturedSwiper,
body.is-grabbing .myAntiqueSwiper,
body.is-grabbing .trending-card,
body.is-grabbing .featured-card,
body.is-grabbing .antique-card {
  cursor: grabbing !important;
  cursor: -webkit-grabbing !important;
}

/* Navigation buttons - ensure visibility and clickability */
.slider-controls,
.trending-controls,
.featured-controls,
.antique-controls {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 100 !important;
}

.slider-btn,
.trending-prev,
.trending-next,
.featured-prev,
.featured-next,
.antique-prev,
.antique-next {
  cursor: pointer !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}


/* Hero Our Story Button - Gold glass effect with white border */
.hero-btn-ourstory,
.hero-btn-ourstory:link,
.hero-btn-ourstory:visited,
a.hero-btn-ourstory,
a.luxury-btn.hero-btn-ourstory {
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(184, 134, 11, 0.1) 50%, rgba(212, 175, 55, 0.15) 100%) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    inset 0 -1px 1px rgba(0, 0, 0, 0.1),
    0 4px 15px rgba(212, 175, 55, 0.15) !important;
}

.hero-btn-ourstory:hover,
.hero-btn-ourstory:focus,
.hero-btn-ourstory:active,
a.hero-btn-ourstory:hover,
a.luxury-btn.hero-btn-ourstory:hover,
.hero-cta a.hero-btn-ourstory:hover {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.3) 0%, rgba(184, 134, 11, 0.25) 50%, rgba(212, 175, 55, 0.3) 100%) !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.3),
    inset 0 -1px 1px rgba(0, 0, 0, 0.1),
    0 8px 25px rgba(212, 175, 55, 0.25),
    0 0 20px rgba(212, 175, 55, 0.15) !important;
}

.hero-btn-ourstory:hover span,
.hero-btn-ourstory:focus span,
a.hero-btn-ourstory:hover span,
.hero-cta a.hero-btn-ourstory:hover span {
  color: #ffffff !important;
}


/* =====================================================
   NAVBAR - Animated traveling light effect
   ===================================================== */

.main-header {
  position: relative;
  overflow: visible !important; /* CRITICAL: Allow mega menu to show */
}

/* Light sweep animation - use clip-path instead of overflow */
.main-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 60px; /* Limit to header height only */
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 30%,
    rgba(255, 255, 255, 0.03) 40%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 60%,
    transparent 70%,
    transparent 100%
  );
  animation: navbar-light-sweep 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes navbar-light-sweep {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  50.01% {
    left: -100%;
  }
  100% {
    left: -100%;
  }
}

/* Subtle glow line at bottom */
.main-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.1) 20%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(212, 175, 55, 0.1) 80%,
    transparent 100%
  );
  animation: navbar-bottom-glow 4s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes navbar-bottom-glow {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.8;
  }
}

/* =====================================================
   HERO EXPLORE BUTTON - Glass effect on hover
   ===================================================== */

.hero-cta a.luxury-btn:first-child,
.hero-cta .luxury-btn.secondary:first-of-type {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-cta a.luxury-btn:first-child:hover,
.hero-cta .luxury-btn.secondary:first-of-type:hover {
  background: rgba(212, 175, 55, 0.15) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  box-shadow: 
    0 8px 32px rgba(212, 175, 55, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(212, 175, 55, 0.6) !important;
  transform: translateY(-3px);
}

/* Shimmer effect on Explore button hover */
.hero-cta a.luxury-btn:first-child::after,
.hero-cta .luxury-btn.secondary:first-of-type::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  transition: left 0.6s ease;
  z-index: 1;
  pointer-events: none;
}

.hero-cta a.luxury-btn:first-child:hover::after,
.hero-cta .luxury-btn.secondary:first-of-type:hover::after {
  left: 100%;
}


/* =====================================================
   TRENDING PRODUCTS V2 - Edge-to-Edge Design
   ===================================================== */

.trending-products-v2 {
  background: var(--bg-primary) !important;
  padding: 60px 0 80px !important;
  overflow: visible !important;
}

.trending-products-v2 .section-header {
  text-align: left !important;
  margin-bottom: 40px;
  padding-left: 0;
}

.trending-products-v2 .section-title {
  color: #ffffff !important;
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.trending-products-v2 .section-desc {
  color: var(--text-secondary) !important;
  font-size: 1rem;
}

/* Swiper wrapper - extends to right edge */
.trending-swiper-wrapper {
  position: relative;
  width: 100%;
  padding-left: calc((100vw - var(--container-max)) / 2 + 20px);
  margin-left: 0;
  overflow: visible !important;
}

.trending-products-v2 .myTrendingSwiper {
  overflow: visible !important;
  width: 100% !important;
  padding: 10px 0 !important;
}

.trending-products-v2 .myTrendingSwiper .swiper-wrapper {
  display: flex !important;
  align-items: flex-start !important;
  overflow: visible !important;
}

.trending-products-v2 .myTrendingSwiper .swiper-slide {
  width: 280px !important;
  height: auto !important;
  flex-shrink: 0;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  user-select: none;
  -webkit-user-select: none;
}

/* Card V2 Styles */
.trending-card-v2 {
  background: var(--bg-card);
  border-radius: 0;
  overflow: visible;
  transition: all 0.3s ease;
  height: auto;
  display: flex;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
}

.trending-image-v2 {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #1a1a1a;
}

/* Prevent image dragging */
.trending-image-v2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

.trending-image-v2 .primary-img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.trending-image-v2 .hover-img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
}

.trending-card-v2:hover .primary-img {
  opacity: 0;
}

.trending-card-v2:hover .hover-img {
  opacity: 1;
  z-index: 1;
}

/* Sale Badge */
.trending-image-v2 .sale-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: #c9a050;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  letter-spacing: 0.5px;
  z-index: 10;
}

/* Hover Action Buttons - INSIDE the image container */
.trending-hover-actions {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%) translateY(15px);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 10;
  pointer-events: none;
  width: auto;
}

.trending-card-v2:hover .trending-hover-actions {
  opacity: 1;
  transform: translate(-50%, 50%) translateY(0);
  pointer-events: auto;
}

.trending-hover-actions .action-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  text-decoration: none;
}

.trending-hover-actions .action-btn:hover {
  background: #c9a050;
  color: #ffffff;
  transform: scale(1.1);
}

.trending-hover-actions .action-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Content V2 */
.trending-content-v2 {
  padding: 8px 5px 5px 5px;
  text-align: center;
  background: var(--bg-card);
}

.trending-title-v2 {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: #c9a050;
  text-decoration: none;
  margin-bottom: 5px;
  transition: color 0.2s ease;
}

.trending-title-v2:hover {
  color: #e6c866;
}

.trending-price-v2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
}

.trending-price-v2 .current-price {
  color: #ffffff;
  font-weight: 600;
}

.trending-price-v2 .original-price {
  color: #666;
  text-decoration: line-through;
  font-size: 13px;
}

/* Navigation V2 - Consistent positioning across all sections */
.trending-nav-v2 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 20;
  /* Fixed pixel positioning - left arrow at 140px from left edge */
  left: 140px !important;
  right: 10px !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.trending-nav-v2 button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(26, 26, 26, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
  color: #c9a050;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  flex-shrink: 0;
}

.trending-nav-v2 button:hover {
  background: #c9a050;
  border-color: #c9a050;
  color: #000;
}

.trending-nav-v2 button svg {
  width: 24px;
  height: 24px;
}

/* Left arrow */
.trending-prev-v2,
.featured-prev-v2,
.antique-prev-v2 {
  margin-left: 0 !important;
}

/* Right arrow */
.trending-next-v2,
.featured-next-v2,
.antique-next-v2 {
  margin-right: 0 !important;
}

/* Force consistent positioning for all sections */
.trending-products .trending-nav-v2,
.trending-products-v2 .trending-nav-v2,
.featured-section-v2 .trending-nav-v2,
.antique-section-v2 .trending-nav-v2 {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: 140px !important;
  right: 10px !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Responsive */
@media (max-width: 1200px) {
  .trending-swiper-wrapper {
    padding-left: 40px;
  }
}

@media (max-width: 768px) {
  .trending-products-v2 {
    padding: 30px 0 15px !important;
  }
  
  .trending-swiper-wrapper {
    padding-left: 20px;
  }
  
  /* ALL SWIPERS - Same width on tablet */
  .trending-products-v2 .myTrendingSwiper .swiper-slide,
  .myTrendingSwiper .swiper-slide,
  .featured-products-v2 .swiper-slide,
  .antique-products-v2 .swiper-slide,
  .featured-section-v2 .swiper-slide,
  .antique-section-v2 .swiper-slide,
  .myFeaturedSwiper .swiper-slide,
  .myAntiqueSwiper .swiper-slide {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    flex: 0 0 180px !important;
  }
  
  .trending-products-v2 .section-title {
    font-size: 1.8rem;
  }
  
  .trending-nav-v2,
  .featured-section-v2 .trending-nav-v2,
  .antique-section-v2 .trending-nav-v2 {
    display: none !important;
  }
  
  .trending-hover-actions {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }
}

@media (max-width: 480px) {
  .trending-swiper-wrapper {
    padding-left: 15px;
  }
  
  /* ALL SWIPERS - Same width on mobile */
  .trending-products-v2 .myTrendingSwiper .swiper-slide,
  .myTrendingSwiper .swiper-slide,
  .featured-products-v2 .swiper-slide,
  .antique-products-v2 .swiper-slide,
  .featured-section-v2 .swiper-slide,
  .antique-section-v2 .swiper-slide,
  .myFeaturedSwiper .swiper-slide,
  .myAntiqueSwiper .swiper-slide {
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    flex: 0 0 160px !important;
  }
  
  .trending-hover-actions .action-btn {
    width: 35px;
    height: 35px;
  }
  
  .trending-hover-actions .action-btn svg {
    width: 14px;
    height: 14px;
  }
}


/* =====================================================
   TRENDING V2 - Force Visibility Overrides
   ===================================================== */

/* Force trending v2 swiper to be visible */
.trending-products-v2 .swiper,
.trending-products-v2 .myTrendingSwiper,
.trending-products-v2 .swiper-wrapper,
.trending-products-v2 .swiper-slide {
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.trending-products-v2 .myTrendingSwiper {
  overflow: visible !important;
}

.trending-products-v2 .swiper-slide {
  display: flex !important;
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
}

.trending-card-v2 {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Override any conflicting old trending styles */
.trending-products.trending-products-v2 .trending-slider,
.trending-products.trending-products-v2 .trending-card {
  all: unset;
}

/* Ensure the swiper wrapper has proper layout */
.trending-swiper-wrapper {
  overflow: visible !important;
}

.trending-swiper-wrapper .swiper-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
}

/* Prevent image dragging in trending v2 */
.trending-products-v2 img,
.trending-card-v2 img {
  -webkit-user-drag: none !important;
  -khtml-user-drag: none !important;
  -moz-user-drag: none !important;
  -o-user-drag: none !important;
  user-drag: none !important;
  pointer-events: none !important;
  -webkit-touch-callout: none !important;
}

/* Ensure swiper can be swiped properly */
.trending-products-v2 .myTrendingSwiper {
  touch-action: pan-y pinch-zoom !important;
}

.trending-products-v2 .swiper-slide {
  touch-action: pan-y pinch-zoom !important;
}

/* Hide the empty button placeholders that appear below cards */
.trending-card-v2 > .trending-hover-actions:not(.trending-image-v2 .trending-hover-actions) {
  display: none !important;
}


/* =====================================================
   TRENDING V2 - Fix Action Buttons with Grey Overlay
   ===================================================== */

/* Ensure hover actions are positioned inside the image */
.trending-image-v2 {
  position: relative !important;
}

/* Grey overlay on hover */
.trending-image-v2::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 5;
  pointer-events: none;
}

.trending-card-v2:hover .trending-image-v2::after {
  opacity: 1;
}

.trending-image-v2 .trending-hover-actions {
  position: absolute !important;
  bottom: 50% !important;
  left: 50% !important;
  transform: translate(-50%, 50%) translateY(15px) !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
  opacity: 0 !important;
  transition: all 0.3s ease !important;
  z-index: 15 !important;
  pointer-events: none !important;
  width: auto !important;
}

.trending-card-v2:hover .trending-image-v2 .trending-hover-actions {
  opacity: 1 !important;
  transform: translate(-50%, 50%) translateY(0) !important;
  pointer-events: auto !important;
}

/* Ensure SVG icons are visible */
.trending-hover-actions .action-btn svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* Make sure buttons have proper styling */
.trending-image-v2 .trending-hover-actions .action-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #333 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  text-decoration: none !important;
  padding: 0 !important;
}

.trending-image-v2 .trending-hover-actions .action-btn:hover {
  background: #c9a050 !important;
  color: #ffffff !important;
}

/* Mobile - Keep buttons side by side */
@media (max-width: 768px) {
  .trending-hover-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .trending-image-v2 .trending-hover-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
  }
  
  .trending-image-v2 .trending-hover-actions .action-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex-shrink: 0 !important;
  }
  
  .trending-hover-actions .action-btn svg {
    width: 16px !important;
    height: 16px !important;
  }
  
  .trending-hover-actions .action-btn {
    flex-shrink: 0 !important;
    display: inline-flex !important;
  }
}


/* =====================================================
   PRODUCT CARDS V2 - Dark Theme (Featured & Antique)
   ===================================================== */

.featured-products-v2,
.antique-products-v2 {
  background: var(--bg-primary) !important;
  padding: 60px 0 !important;
  overflow: visible !important;
}

.product-swiper-wrapper-v2 {
  position: relative;
  width: 100%;
  padding-left: calc((100vw - var(--container-max)) / 2 + 20px);
  margin-left: 0;
  overflow: visible !important;
}

.featured-products-v2 .myFeaturedSwiper,
.antique-products-v2 .myAntiqueSwiper {
  overflow: visible !important;
  width: 100% !important;
  padding: 10px 0 !important;
}

.featured-products-v2 .swiper-slide,
.antique-products-v2 .swiper-slide,
.featured-section-v2 .swiper-slide,
.antique-section-v2 .swiper-slide,
.myFeaturedSwiper .swiper-slide,
.myAntiqueSwiper .swiper-slide {
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  height: auto !important;
  flex: 0 0 280px !important;
  flex-shrink: 0 !important;
  user-select: none;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Dark Card Styles */
.product-card-v2.dark {
  background: var(--bg-card);
  border-radius: 0;
  overflow: visible;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  user-select: none;
}

.product-image-v2 {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #1a1a1a;
}

.product-image-v2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.product-image-v2 .primary-img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.product-image-v2 .hover-img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
}

.product-card-v2:hover .primary-img {
  opacity: 0;
}

.product-card-v2:hover .hover-img {
  opacity: 1;
  z-index: 1;
}

/* Sale Badge - Dark */
.product-image-v2 .sale-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: #c9a050;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  letter-spacing: 0.5px;
  z-index: 10;
}

/* Hover Actions - Dark */
.product-hover-actions {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(15px);
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 10;
  pointer-events: none;
}

.product-card-v2:hover .product-hover-actions {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.product-hover-actions .action-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  text-decoration: none;
}

.product-hover-actions .action-btn:hover {
  background: #c9a050;
  color: #ffffff;
  transform: scale(1.1);
}

.product-hover-actions .action-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Content - Dark */
.product-content-v2 {
  padding: 20px 5px;
  text-align: center;
  background: var(--bg-card);
}

.product-title-v2 {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: #c9a050;
  text-decoration: none;
  margin-bottom: 8px;
  transition: color 0.2s ease;
}

.product-title-v2:hover {
  color: #e6c866;
}

.product-price-v2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
}

.product-price-v2 .current-price {
  color: #ffffff;
  font-weight: 600;
}

.product-price-v2 .original-price {
  color: #666;
  text-decoration: line-through;
  font-size: 13px;
}

/* Navigation - Dark */
.product-nav-v2 {
  position: absolute;
  top: 50%;
  left: calc((100vw - var(--container-max)) / 2);
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 20;
}

.product-nav-v2.dark button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(26, 26, 26, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.3s ease;
  color: #c9a050;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.product-nav-v2.dark button:hover {
  background: #c9a050;
  border-color: #c9a050;
  color: #000;
}

.product-nav-v2 button svg {
  width: 24px;
  height: 24px;
}

/* Responsive - Dark Cards */
@media (max-width: 1200px) {
  .product-swiper-wrapper-v2 {
    padding-left: 40px;
  }
  
  .product-nav-v2 {
    left: 20px;
  }
}

@media (max-width: 768px) {
  .featured-products-v2,
  .antique-products-v2 {
    padding: 30px 0 !important;
    position: relative !important;
    margin-top: 0 !important;
  }
  
  /* Hide navigation arrows on mobile - all sections consistent */
  .trending-nav-v2,
  .featured-section-v2 .trending-nav-v2,
  .antique-section-v2 .trending-nav-v2 {
    display: none !important;
  }
  
  .product-nav-v2 {
    display: none;
  }
  
  .product-hover-actions {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }
}

@media (max-width: 480px) {
  /* Nothing specific needed - inherits from trending-products-v2 */
}


/* =====================================================
   ALL V2 SECTIONS - Consistent Dark Styling
   ===================================================== */

/* All three sections use the same dark background */
.trending-products-v2,
.featured-section-v2,
.antique-section-v2 {
  background: var(--bg-primary) !important;
}

/* =====================================================
   SECTION DESCRIPTIONS - Left Align
   ===================================================== */

/* Force all section descriptions to align left */
.trending-products-v2 .section-desc,
.featured-section-v2 .section-desc,
.antique-section-v2 .section-desc {
  text-align: left !important;
  max-width: 600px;
  margin: 0 !important;
}

/* Ensure section headers are left aligned */
.trending-products-v2 .section-header,
.featured-section-v2 .section-header,
.antique-section-v2 .section-header {
  text-align: left !important;
}

/* Ensure section titles are left aligned */
.trending-products-v2 .section-title,
.featured-section-v2 .section-title,
.antique-section-v2 .section-title {
  text-align: left !important;
  margin-bottom: 10px;
}


/* =====================================================
   FEATURED & ANTIQUE - FORCE SAME SIZE AS TRENDING
   This MUST be at the end to override all other styles
   ===================================================== */

/* Mobile - Force exact same size as Trending */
@media (max-width: 768px) {
  .featured-section-v2 .swiper-slide,
  .antique-section-v2 .swiper-slide,
  .featured-section-v2 .myFeaturedSwiper .swiper-slide,
  .antique-section-v2 .myAntiqueSwiper .swiper-slide,
  section.featured-section-v2 .swiper-slide,
  section.antique-section-v2 .swiper-slide {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    flex: 0 0 180px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }
  
  .featured-section-v2 .trending-card-v2,
  .antique-section-v2 .trending-card-v2 {
    width: 180px !important;
    max-width: 180px !important;
  }
  
  .featured-section-v2 .trending-image-v2,
  .antique-section-v2 .trending-image-v2 {
    width: 180px !important;
    height: 180px !important;
  }
}

@media (max-width: 480px) {
  .featured-section-v2 .swiper-slide,
  .antique-section-v2 .swiper-slide,
  .featured-section-v2 .myFeaturedSwiper .swiper-slide,
  .antique-section-v2 .myAntiqueSwiper .swiper-slide,
  section.featured-section-v2 .swiper-slide,
  section.antique-section-v2 .swiper-slide {
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    flex: 0 0 160px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }
  
  .featured-section-v2 .trending-card-v2,
  .antique-section-v2 .trending-card-v2 {
    width: 160px !important;
    max-width: 160px !important;
  }
  
  .featured-section-v2 .trending-image-v2,
  .antique-section-v2 .trending-image-v2 {
    width: 160px !important;
    height: 160px !important;
  }
}


/* =====================================================
   MOBILE - Reduce card bottom gap & increase footer gap
   ===================================================== */
@media (max-width: 768px) {
  /* Reduce bottom padding of card content */
  .trending-content-v2 {
    padding: 6px 5px 2px 5px !important;
  }
  
  .trending-title-v2 {
    margin-bottom: 3px !important;
    font-size: 12px !important;
  }
  
  .trending-price-v2 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    font-size: 12px !important;
  }
  
  /* Remove any extra space at bottom of cards */
  .trending-card-v2 {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  
  /* Reduce swiper wrapper bottom padding */
  .trending-swiper-wrapper {
    padding-bottom: 10px !important;
  }
  
  .myTrendingSwiper,
  .myFeaturedSwiper,
  .myAntiqueSwiper {
    padding-bottom: 5px !important;
  }
}

@media (max-width: 480px) {
  .trending-content-v2 {
    padding: 5px 3px 2px 3px !important;
  }
  
  .trending-title-v2 {
    margin-bottom: 2px !important;
    font-size: 11px !important;
  }
  
  .trending-price-v2 {
    font-size: 11px !important;
  }
}


/* =====================================================
   TODO FIXES - December 2025
   ===================================================== */

/* ==========================================================
   TODO 1: Mobile Card Tap-to-Show Actions
   - On mobile, tapping a card shows View/Cart buttons
   - Buttons stay visible until tapping elsewhere
   ========================================================== */
@media (max-width: 768px) {
  /* Reset default hover behavior on mobile */
  .trending-card-v2:hover .trending-image-v2::after,
  .trending-card-v2:hover .trending-image-v2 .trending-hover-actions {
    /* Don't auto-show on hover for mobile - use tap instead */
  }
  
  /* Mobile: Hide actions by default */
  .trending-image-v2 .trending-hover-actions {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, 50%) translateY(15px) !important;
  }
  
  .trending-image-v2::after {
    opacity: 0 !important;
  }
  
  /* Mobile: Show actions when card has 'mobile-active' class */
  .trending-card-v2.mobile-active .trending-image-v2::after {
    opacity: 1 !important;
  }
  
  .trending-card-v2.mobile-active .trending-image-v2 .trending-hover-actions {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate(-50%, 50%) translateY(0) !important;
  }
}

/* ==========================================================
   TODO 2: Reduce Gap Between Featured and Antique Sections
   - Both mobile and desktop
   ========================================================== */

/* Desktop - Reduce section gaps */
.trending-products-v2,
.featured-section-v2,
.antique-section-v2 {
  padding: 20px 0 10px 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Reduce section header margins */
.trending-products-v2 .section-header,
.featured-section-v2 .section-header,
.antique-section-v2 .section-header {
  margin-bottom: 15px !important;
}

/* Mobile - Even tighter spacing */
@media (max-width: 768px) {
  .trending-products-v2,
  .featured-section-v2,
  .antique-section-v2 {
    padding: 15px 0 8px 0 !important;
  }
  
  .trending-products-v2 .section-header,
  .featured-section-v2 .section-header,
  .antique-section-v2 .section-header {
    margin-bottom: 12px !important;
  }
  
  .section-title {
    font-size: 1.5rem !important;
    margin-bottom: 5px !important;
  }
  
  .section-desc {
    font-size: 0.9rem !important;
    margin-bottom: 0 !important;
  }
}

/* ==========================================================
   TODO 3: Add Gap Between Explore Collection Button and Footer
   - Mobile fix for overlapping
   ========================================================== */

/* Mobile - Add proper spacing before footer */
@media (max-width: 768px) {
  .brand-story {
    margin-bottom: 80px !important;
    padding-bottom: 30px !important;
  }
  .brand-story .explore-btn {
    margin-bottom: 20px !important;
  }
  
  /* Ensure footer has proper top spacing */
  #shine-footer,
  .shine-footer,
  .site-footer,
  footer {
    margin-top: 40px !important;
  }
}

@media (max-width: 480px) {
  .brand-story {
    margin-bottom: 100px !important;
    padding-bottom: 40px !important;
  }
}

/* Desktop - Maintain reasonable gap */
@media (min-width: 769px) {
  .brand-story {
    margin-bottom: 80px !important;
    padding-bottom: 40px !important;
  }
}

/* ==========================================================
   TODO 4: Fix Mega Menu Not Showing on Hover (Desktop)
   - Collections dropdown should appear on hover
   ========================================================== */

/* Desktop mega menu - ensure hover works */
@media (min-width: 769px) {
  .nav-item-with-mega {
    position: relative !important;
  }
  
  .premium-mega-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    z-index: 10000 !important;
    margin-top: 0 !important;
  }
  
  /* Show on hover of parent */
  .nav-item-with-mega:hover .premium-mega-menu,
  .nav-item-with-mega:focus-within .premium-mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  
  /* Also show when menu itself is hovered (for moving mouse into menu) */
  .premium-mega-menu:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  
  /* Add a bridge element to prevent menu from closing when moving mouse */
  .nav-item-with-mega::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    height: 20px !important;
    background: transparent !important;
  }
}

/* ==========================================================
   TODO 5: Fix Mobile Menu Cut-Off
   - Mobile hamburger menu not showing properly
   ========================================================== */

@media (max-width: 768px) {
  /* Ensure header doesn't clip the menu */
  .main-header {
    overflow: visible !important;
  }
  
  .header-wrapper {
    overflow: visible !important;
  }
  
  /* Mobile menu - proper positioning and visibility */
  .mobile-menu {
    display: none !important;
    position: absolute !important;
    top: 60px !important; /* Height of header */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
    background: rgba(18, 18, 18, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-top: 1px solid rgba(212, 175, 55, 0.2) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    z-index: 99998 !important;
    padding: 0 !important;
  }
  
  /* Show mobile menu when active */
  .mobile-menu.active {
    display: block !important;
  }
  
  /* Mobile menu links */
  .mobile-menu a {
    display: block !important;
    padding: 18px 25px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease !important;
  }
  
  .mobile-menu a:hover,
  .mobile-menu a:active {
    background: rgba(212, 175, 55, 0.15) !important;
    color: #d4af37 !important;
    padding-left: 35px !important;
  }
  
  .mobile-menu a:last-child {
    border-bottom: none !important;
  }
  
  /* Hamburger button styling */
  .mobile-menu-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    z-index: 99999 !important;
    position: relative !important;
  }
  
  .mobile-menu-btn span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #ffffff !important;
    margin: 3px 0 !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
  }
  
  /* Hamburger to X animation */
  .mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
  }
  
  .mobile-menu-btn.active span:nth-child(2) {
    opacity: 0 !important;
  }
  
  .mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px) !important;
  }
  
  /* Admin bar adjustment */
  .admin-bar .mobile-menu {
    top: 106px !important; /* 60px header + 46px admin bar */
    max-height: calc(100vh - 106px) !important;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .mobile-menu {
    top: 60px !important;
  }
  
  .mobile-menu a {
    padding: 16px 20px !important;
    font-size: 1rem !important;
  }
  
  .admin-bar .mobile-menu {
    top: 106px !important;
  }
}


/* ==========================================================
   TODO 4 (Additional): Mega Menu Active State via JavaScript
   - Support for .active class toggled by JS
   ========================================================== */

@media (min-width: 769px) {
  /* When JS adds .active class to parent */
  .nav-item-with-mega.active .premium-mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: block !important;
  }
}

/* Hide mega menu on mobile - use mobile menu instead */
@media (max-width: 768px) {
  .premium-mega-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  .nav-item-with-mega.active .premium-mega-menu {
    display: none !important;
  }
}


/* =====================================================
   CRITICAL FIXES - Mobile Menu Gap & Desktop Mega Menu
   ===================================================== */

/* ==========================================================
   FIX: Mobile Menu - Remove Gap Between Navbar and Menu
   ========================================================== */
@media (max-width: 768px) {
  /* Header must not have overflow hidden */
  .main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 60px !important;
    z-index: 99999 !important;
    background: #0b0b0b !important;
    overflow: visible !important;
  }
  
  .header-wrapper {
    height: 60px !important;
    overflow: visible !important;
  }
  
  /* Mobile menu - NO GAP, directly attached to header */
  .mobile-menu {
    display: none;
    position: fixed !important;
    top: 60px !important; /* Exactly at header bottom */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
    background: #0b0b0b !important;
    border-top: none !important; /* Remove border that might cause visual gap */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
    z-index: 99998 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .mobile-menu.active {
    display: block !important;
  }
  
  /* Mobile menu links - clean styling */
  .mobile-menu > a {
    display: block !important;
    padding: 18px 25px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #0b0b0b !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
  }
  
  .mobile-menu > a:first-child {
    border-top: 1px solid rgba(212, 175, 55, 0.3) !important; /* Gold line at top */
  }
  
  .mobile-menu > a:hover,
  .mobile-menu > a:active {
    background: rgba(212, 175, 55, 0.1) !important;
    color: #d4af37 !important;
    padding-left: 35px !important;
  }
  
  .mobile-menu > a:last-child {
    border-bottom: none !important;
  }
  
  /* Hide mobile collections mega submenu */
  .mobile-collections-mega {
    display: none !important;
  }
  
  /* Hamburger button - proper X styling */
  .mobile-menu-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    z-index: 100000 !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .mobile-menu-btn span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #ffffff !important;
    margin: 3px 0 !important;
    border-radius: 1px !important;
    transition: all 0.3s ease !important;
    transform-origin: center !important;
  }
  
  /* X animation when menu is open */
  .mobile-menu-btn.active {
    background: rgba(212, 175, 55, 0.1) !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
  }
  
  .mobile-menu-btn.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
    background: #d4af37 !important;
  }
  
  .mobile-menu-btn.active span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  
  .mobile-menu-btn.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
    background: #d4af37 !important;
  }
  
  /* Admin bar adjustments */
  .admin-bar .main-header {
    top: 46px !important;
  }
  
  .admin-bar .mobile-menu {
    top: 106px !important; /* 60px header + 46px admin bar */
    max-height: calc(100vh - 106px) !important;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .mobile-menu > a {
    padding: 16px 20px !important;
    font-size: 1rem !important;
  }
}

/* ==========================================================
   FIX: Desktop Mega Menu - Show on Hover
   ========================================================== */
@media (min-width: 769px) {
  /* Parent container */
  .nav-item-with-mega {
    position: relative !important;
    display: inline-block !important;
  }
  
  /* Mega menu hidden by default */
  .premium-mega-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 750px !important;
    max-width: 90vw !important;
    background: rgba(11, 11, 11, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
    z-index: 10000 !important;
    margin-top: 10px !important;
    padding: 0 !important;
  }
  
  /* Bridge to prevent gap issues */
  .nav-item-with-mega::before {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: -20px !important;
    right: -20px !important;
    height: 15px !important;
    background: transparent !important;
  }
  
  /* Show on hover */
  .nav-item-with-mega:hover .premium-mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  
  /* Also show when JS adds active class */
  .nav-item-with-mega.active .premium-mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  
  /* Keep visible when hovering the menu itself */
  .premium-mega-menu:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  
  /* Arrow indicator */
  .mega-arrow {
    display: inline-block !important;
    font-size: 0.7rem !important;
    margin-left: 4px !important;
    transition: transform 0.3s ease !important;
  }
  
  .nav-item-with-mega:hover .mega-arrow {
    transform: rotate(180deg) !important;
  }
}

/* Hide mega menu completely on mobile */
@media (max-width: 768px) {
  .premium-mega-menu,
  .nav-item-with-mega .premium-mega-menu,
  .nav-item-with-mega:hover .premium-mega-menu,
  .nav-item-with-mega.active .premium-mega-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  .mega-arrow {
    display: none !important;
  }
}


/* ==========================================================
   FIX: Ensure Mobile Menu Covers Hero Content
   ========================================================== */
@media (max-width: 768px) {
  /* When mobile menu is active, add overlay to cover page content */
  body.mobile-menu-open::before {
    content: '' !important;
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    z-index: 99997 !important;
    pointer-events: auto !important;
  }
  
  .admin-bar body.mobile-menu-open::before {
    top: 106px !important;
  }
  
  /* Ensure mobile menu is fully opaque */
  .mobile-menu {
    background: #0b0b0b !important;
    backdrop-filter: none !important;
  }
  
  .mobile-menu.active {
    background: #0b0b0b !important;
  }
}


/* =====================================================
   FINAL FIXES - Mega Menu & Mobile Menu
   These rules have highest specificity to override all others
   ===================================================== */

/* ==========================================================
   FIX 1: Desktop Mega Menu - MUST SHOW ON HOVER
   ========================================================== */
@media (min-width: 769px) {
  /* Reset mega menu to hidden by default */
  .premium-mega-menu {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
    z-index: 100000 !important;
    margin-top: 5px !important;
  }
  
  /* Show on hover - CRITICAL */
  .nav-item-with-mega:hover > .premium-mega-menu,
  .nav-item-with-mega:focus-within > .premium-mega-menu,
  .nav-item-with-mega.active > .premium-mega-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  
  /* Keep menu visible when hovering the menu itself */
  .premium-mega-menu:hover {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  
  /* Ensure parent has proper positioning */
  .nav-item-with-mega {
    position: relative !important;
  }
  
  /* Bridge gap between nav item and menu */
  .nav-item-with-mega::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    height: 15px !important;
    background: transparent !important;
  }
}

/* ==========================================================
   FIX 2: Mobile Menu - STICK TO NAVBAR (top: 60px)
   ========================================================== */
@media (max-width: 768px) {
  /* Hide mega menu completely on mobile */
  .premium-mega-menu,
  .nav-item-with-mega .premium-mega-menu,
  .nav-item-with-mega:hover .premium-mega-menu,
  .nav-item-with-mega.active .premium-mega-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* Mobile menu - FIXED positioning right below navbar */
  .mobile-menu {
    display: none !important;
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
    background: #0b0b0b !important;
    border-top: 1px solid rgba(212, 175, 55, 0.3) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
    z-index: 99998 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Show mobile menu when active */
  .mobile-menu.active {
    display: block !important;
  }
  
  /* Mobile menu links styling */
  .mobile-menu > a {
    display: block !important;
    padding: 18px 25px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
  }
  
  .mobile-menu > a:hover,
  .mobile-menu > a:active {
    background: rgba(212, 175, 55, 0.15) !important;
    color: #d4af37 !important;
    padding-left: 35px !important;
  }
  
  /* Admin bar adjustment for mobile menu */
  .admin-bar .mobile-menu {
    top: 106px !important;
    max-height: calc(100vh - 106px) !important;
  }
  
  /* Ensure header doesn't clip anything */
  .main-header {
    overflow: visible !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
  }
  
  .header-wrapper {
    overflow: visible !important;
  }
  
  /* Admin bar header adjustment */
  .admin-bar .main-header {
    top: 46px !important;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .mobile-menu {
    top: 60px !important;
  }
  
  .admin-bar .mobile-menu {
    top: 106px !important;
  }
}


/* =====================================================
   FINAL OVERRIDE - HIGHEST PRIORITY
   These rules MUST be at the very end of the file
   ===================================================== */

/* Desktop Mega Menu - FIXED position, centered in viewport */
@media screen and (min-width: 769px) {
  html body .premium-mega-menu,
  body .premium-mega-menu,
  .nav-item-with-mega .premium-mega-menu {
    position: fixed !important;
    top: 60px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 750px !important;
    max-width: calc(100vw - 40px) !important;
  }
  
  html body .nav-item-with-mega:hover .premium-mega-menu,
  html body .nav-item-with-mega.active .premium-mega-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* Mobile Menu - MUST show when active */
@media screen and (max-width: 768px) {
  html body .mobile-menu {
    display: none;
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    background: #0b0b0b !important;
    z-index: 99998 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  html body .mobile-menu.active {
    display: block !important;
  }
  
  html body.admin-bar .mobile-menu {
    top: 106px !important;
  }
  
  /* Hide mega menu on mobile */
  html body .premium-mega-menu {
    display: none !important;
  }
}


/* ===== FIXES: January 2026 ===== */

/* FIX 1: Reduce gap between Featured Pieces cards and Antique Diamond Necklaces heading on mobile */
@media (max-width: 768px) {
  /* Reduce bottom padding/margin of Featured section */
  .featured-section-v2 {
    padding-bottom: 10px !important;
    margin-bottom: 0 !important;
  }
  
  /* Reduce top padding/margin of Antique section */
  .antique-section-v2 {
    padding-top: 10px !important;
    margin-top: 0 !important;
  }
  
  /* Reduce section header margin in antique section */
  .antique-section-v2 .section-header {
    margin-bottom: 15px !important;
  }
  
  /* Reduce swiper wrapper bottom margin */
  .featured-section-v2 .trending-swiper-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* FIX 2: Mobile Mega Menu - Force display when active */
@media screen and (max-width: 768px) {
  /* Ensure mobile menu is properly positioned and shows */
  .mobile-menu {
    display: none !important;
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100vh - 60px) !important;
    max-height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
    background: #0b0b0b !important;
    z-index: 99998 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
  
  /* CRITICAL: Show mobile menu when active class is present */
  .mobile-menu.active {
    display: block !important;
  }
  
  /* Admin bar adjustment */
  .admin-bar .mobile-menu {
    top: 106px !important;
    height: calc(100vh - 106px) !important;
    max-height: calc(100vh - 106px) !important;
  }
  
  .admin-bar .mobile-menu.active {
    display: block !important;
  }
  
  /* Mobile menu links styling */
  .mobile-menu > a {
    display: block !important;
    padding: 18px 25px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: #0b0b0b !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
  }
  
  .mobile-menu > a:first-child {
    border-top: 1px solid rgba(212, 175, 55, 0.4) !important;
  }
  
  .mobile-menu > a:hover,
  .mobile-menu > a:active {
    background: rgba(212, 175, 55, 0.15) !important;
    color: #d4af37 !important;
    padding-left: 35px !important;
  }
  
  /* Hamburger button must be visible */
  .mobile-menu-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    padding: 0 !important;
    z-index: 100000 !important;
  }
  
  .mobile-menu-btn span {
    width: 22px !important;
    height: 2px !important;
    background: #ffffff !important;
    margin: 3px 0 !important;
    display: block !important;
    border-radius: 1px !important;
    transition: all 0.3s ease !important;
  }
  
  /* Hamburger to X animation when active */
  .mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
  }
  
  .mobile-menu-btn.active span:nth-child(2) {
    opacity: 0 !important;
  }
  
  .mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px) !important;
  }
  
  /* Hide desktop nav and actions on mobile */
  .desktop-nav,
  .desktop-actions {
    display: none !important;
  }
  
  /* Hide mega menu on mobile */
  .premium-mega-menu,
  .mobile-collections-mega {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

/* FIX 3: Consistent card heights in desktop view - Trending, Featured, Antique sections */
@media (min-width: 769px) {
  /* Set consistent card structure */
  .trending-card-v2 {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }
  
  /* Fixed height for image container */
  .trending-image-v2 {
    aspect-ratio: 1/1 !important;
    flex-shrink: 0 !important;
  }
  
  /* Content area with fixed heights */
  .trending-content-v2 {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 8px 10px 8px !important;
    flex-grow: 1 !important;
    min-height: 85px !important;
  }
  
  /* Fixed height for title - 2 lines max with ellipsis */
  .trending-title-v2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 1.4 !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }
  
  /* Price area at bottom */
  .trending-price-v2 {
    margin-top: auto !important;
  }
  
  /* Ensure all swiper slides have same height */
  .myTrendingSwiper .swiper-slide,
  .myFeaturedSwiper .swiper-slide,
  .myAntiqueSwiper .swiper-slide {
    height: auto !important;
    display: flex !important;
  }
  
  .myTrendingSwiper .swiper-slide .trending-card-v2,
  .myFeaturedSwiper .swiper-slide .trending-card-v2,
  .myAntiqueSwiper .swiper-slide .trending-card-v2 {
    width: 100% !important;
    height: 100% !important;
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .trending-content-v2 {
    min-height: 80px !important;
  }
  
  .trending-title-v2 {
    font-size: 13px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }
}


/* ===== MOBILE MENU CRITICAL FIX - HIGHEST SPECIFICITY ===== */
@media screen and (max-width: 768px) {
  /* Base state - hidden */
  html body #mobileMenu,
  html body .mobile-menu#mobileMenu,
  #page .mobile-menu#mobileMenu {
    display: none !important;
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
    background: #0b0b0b !important;
    z-index: 99998 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-top: 1px solid rgba(212, 175, 55, 0.3) !important;
  }
  
  /* Active state - MUST show */
  html body #mobileMenu.active,
  html body .mobile-menu#mobileMenu.active,
  #page .mobile-menu#mobileMenu.active,
  .main-header #mobileMenu.active,
  #mobileMenu.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Admin bar adjustment */
  html body.admin-bar #mobileMenu,
  .admin-bar #mobileMenu {
    top: 106px !important;
    height: calc(100vh - 106px) !important;
  }
  
  /* Hamburger button - MUST be visible and clickable */
  html body #mobileBtn,
  html body .mobile-menu-btn#mobileBtn,
  #page .mobile-menu-btn#mobileBtn,
  .header-wrapper #mobileBtn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 100001 !important;
  }
}


/* ===== QUICK FIXES - Collections page & Mobile gaps ===== */

/* FIX: Our Collections section - push down to avoid navbar overlap */
.page-template-page-category main,
.page-template-page-category .site-main,
.page-template-page-category #main {
  padding-top: 160px !important;
  margin-top: 0 !important;
}

/* Desktop */
@media (min-width: 769px) {
  .page-template-page-category main,
  .page-template-page-category .site-main {
    padding-top: 180px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .page-template-page-category main,
  .page-template-page-category .site-main {
    padding-top: 180px !important;
  }
}

/* FIX: Reduce gap between Featured Pieces cards and Antique section heading (mobile) */
@media (max-width: 768px) {
  /* Featured section - remove all bottom spacing */
  .featured-section-v2 {
    padding-bottom: 0 !important;
    margin-bottom: -50px !important;
  }
  
  .featured-section-v2 .trending-swiper-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Antique section - remove all top spacing */
  .antique-section-v2 {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  .antique-section-v2 .section-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 10px !important;
  }
  
  .antique-section-v2 .section-header h2 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* FIX: Reduce gap between Antique cards and Perfect Match section (mobile) */
@media (max-width: 768px) {
  .antique-section-v2 {
    padding-bottom: 0 !important;
    margin-bottom: -30px !important;
  }
  
  .antique-section-v2 .trending-swiper-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .perfect-match {
    padding-top: 10px !important;
    margin-top: 0 !important;
  }
}

/* ===== CHECKOUT PAGE - LUXURY BLACK THEME ===== */
.checkout-luxury-page {
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  min-height: 100vh;
  padding: 40px 20px;
}

.checkout-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

/* ===== CHECKOUT FORM COLUMN ===== */
.checkout-col-form {
  display: flex;
  flex-direction: column;
}

.checkout-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  color: var(--accent-gold);
  margin-bottom: 10px;
  font-weight: 600;
  letter-spacing: 1px;
}

.checkout-subtitle {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 40px;
  font-weight: 300;
}

/* ===== CHECKOUT SECTIONS ===== */
.checkout-section {
  margin-bottom: 40px;
}

.section-title {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

/* ===== FORM STYLING ===== */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.form-row.full-width {
  grid-template-columns: 1fr;
}

.form-row.three-col {
  grid-template-columns: 1fr 1fr 1fr;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-group label .required {
  color: var(--accent-gold);
}

.form-input {
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--text-primary);
  transition: all 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.05);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.form-input::placeholder {
  color: var(--text-muted);
}

/* ===== PAYMENT METHODS ===== */
.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.payment-method-option {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 20px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-subtle);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.payment-method-option:hover {
  border-color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.05);
}

.payment-input {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--accent-gold);
}

.payment-label {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 500;
}

/* ===== ORDER SUMMARY COLUMN ===== */
.checkout-col-summary {
  display: flex;
  flex-direction: column;
}

.summary-title {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  color: var(--accent-gold);
  margin-bottom: 30px;
  font-weight: 600;
  letter-spacing: 1px;
}

/* ===== ORDER ITEMS ===== */
.order-items {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--border-subtle);
}

.order-item {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

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

.item-image {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-secondary);
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.item-name {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-primary);
  font-weight: 500;
}

.item-meta {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.item-price {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--accent-gold);
  font-weight: 600;
}

/* ===== DISCOUNT SECTION ===== */
.discount-section {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--border-subtle);
}

.discount-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.discount-input-wrap {
  display: flex;
  gap: 8px;
}

.discount-input {
  flex: 1;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-primary);
  transition: all 0.3s ease;
}

.discount-input:focus {
  outline: none;
  border-color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.05);
}

.discount-btn {
  padding: 12px 20px;
  background: var(--accent-gold);
  color: var(--bg-primary);
  border: none;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.discount-btn:hover {
  background: var(--accent-gold-light);
  transform: translateY(-2px);
}

/* ===== ORDER TOTALS ===== */
.order-totals {
  margin-bottom: 30px;
  padding: 25px 0;
}

.total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(212, 175, 55, 0.05);
}

.total-row.discount-row {
  color: var(--accent-gold);
}

.total-row .amount {
  font-weight: 600;
  color: var(--text-primary);
}

.total-row.discount-row .amount {
  color: var(--accent-gold);
}

.total-final {
  border-top: 2px solid var(--border-subtle);
  border-bottom: none;
  padding: 20px 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.total-final span {
  color: var(--accent-gold);
}

/* ===== CHECKOUT BUTTON ===== */
.checkout-btn {
  width: 100%;
  padding: 18px 30px;
  background: var(--accent-gold);
  color: var(--bg-primary);
  border: none;
  border-radius: 4px;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  margin-bottom: 15px;
}

.checkout-btn:hover {
  background: var(--accent-gold-light);
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(212, 175, 55, 0.3);
}

.checkout-btn:active {
  transform: translateY(-1px);
}

/* ===== SECURITY MESSAGE ===== */
.security-message {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: center;
  margin: 0;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
  .checkout-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .form-row.three-col {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .checkout-luxury-page {
    padding: 30px 15px;
  }
  
  .checkout-container {
    gap: 30px;
  }
  
  .checkout-title {
    font-size: 1.8rem;
  }
  
  .summary-title {
    font-size: 1.3rem;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .form-row.three-col {
    grid-template-columns: 1fr;
  }
  
  .payment-methods {
    gap: 12px;
  }
  
  .payment-method-option {
    padding: 14px 16px;
  }
  
  .order-items {
    margin-bottom: 25px;
    padding-bottom: 25px;
  }
  
  .item-image {
    width: 70px;
    height: 70px;
  }
  
  .item-price {
    font-size: 1rem;
  }
  
  .checkout-btn {
    padding: 16px 24px;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .checkout-luxury-page {
    padding: 20px 10px;
  }
  
  .checkout-title {
    font-size: 1.5rem;
    margin-bottom: 8px;
  }
  
  .checkout-subtitle {
    font-size: 0.85rem;
    margin-bottom: 30px;
  }
  
  .checkout-section {
    margin-bottom: 30px;
  }
  
  .section-title {
    font-size: 0.75rem;
    margin-bottom: 15px;
  }
  
  .form-group label {
    font-size: 0.75rem;
  }
  
  .form-input {
    padding: 12px 12px;
    font-size: 0.9rem;
  }
  
  .payment-method-option {
    padding: 12px 14px;
    gap: 12px;
  }
  
  .payment-label {
    font-size: 0.9rem;
  }
  
  .summary-title {
    font-size: 1.2rem;
  }
  
  .discount-input-wrap {
    flex-direction: column;
    gap: 10px;
  }
  
  .discount-input {
    width: 100%;
  }
  
  .discount-btn {
    width: 100%;
  }
  
  .total-row {
    font-size: 0.85rem;
    padding: 10px 0;
  }
  
  .total-final {
    font-size: 1rem;
  }
  
  .checkout-btn {
    padding: 14px 20px;
    font-size: 0.85rem;
    letter-spacing: 1px;
  }
}

/* =====================================================
   INSTAGRAM FEED SECTION - CONSISTENT CARD STYLING
   ===================================================== */

.instagram-products-v2 {
  position: relative;
  background: var(--bg-primary) !important;
  overflow: visible !important;
}

.instagram-products-v2 .section-header {
  text-align: left;
  margin-bottom: 30px;
}

.instagram-products-v2 .section-title {
  font-family: 'Playfair Display', serif;
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 400;
  margin: 0;
}

.instagram-products-v2 .section-desc {
  color: var(--text-secondary);
  font-size: 1rem;
  margin: 0;
  text-align: left;
}

/* Instagram Swiper */
.instagram-swiper-wrapper {
  position: relative;
  width: 100%;
  padding-left: calc((100vw - var(--container-max)) / 2 + 20px);
  margin-left: 0;
  overflow: visible !important;
}

.myInstagramSwiper {
  overflow: visible !important;
  width: 100% !important;
  padding: 10px 0 !important;
}

.myInstagramSwiper .swiper-wrapper {
  display: flex !important;
  align-items: flex-start !important;
  overflow: visible !important;
}

/* Slide sizing - FIXED HEIGHT */
.myInstagramSwiper .swiper-slide {
  width: 280px !important;
  height: 380px !important;
  flex-shrink: 0;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  user-select: none;
  -webkit-user-select: none;
  margin-right: 20px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Instagram Card - FIXED HEIGHT, CLIP OVERFLOW */
.ig-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden !important;
  height: 380px !important;
  max-height: 380px !important;
  width: 280px !important;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  cursor: grab !important;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.ig-card:active {
  cursor: grabbing !important;
}

.ig-card.swiping {
  cursor: grabbing !important;
}

.ig-card.swiping .instagram-media,
.ig-card.swiping .instagram-media-rendered,
.ig-card.swiping iframe {
  pointer-events: none !important;
}

/* Fade out bottom to hide cut-off content */
.ig-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  pointer-events: none;
  z-index: 10;
}

/* Instagram embed link wrapper - allow clicks */
.ig-embed-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto !important;
  overflow: hidden !important;
  flex-shrink: 0;
}

.ig-embed-link:hover {
  text-decoration: none;
}

/* Instagram blockquote embed styling */
.ig-card .instagram-media {
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: #fff !important;
  pointer-events: none !important;
  overflow: hidden !important;
  flex-shrink: 0;
}

.ig-card .instagram-media-rendered {
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  pointer-events: none !important;
  overflow: hidden !important;
  flex-shrink: 0;
}

.ig-card iframe {
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  border: none !important;
  display: block !important;
  pointer-events: none !important;
  overflow: hidden !important;
  flex-shrink: 0;
}

/* Placeholder styling */
.ig-placeholder {
  width: 280px;
  height: 380px;
  background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #888;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 12px;
}

.ig-placeholder p {
  margin: 0 0 15px 0;
  color: #c9a050;
  font-weight: 500;
  font-size: 16px;
}

.ig-placeholder a {
  color: #c9a050;
  text-decoration: none;
  border: 1px solid #c9a050;
  padding: 10px 20px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.ig-placeholder a:hover {
  background: #c9a050;
  color: #000;
}

/* Instagram Follow Button */
.instagram-follow-btn {
  display: inline-block;
  background: transparent;
  border: 2px solid #c9a050;
  color: #c9a050;
  padding: 12px 30px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  font-size: 14px;
}

.instagram-follow-btn:hover {
  background: #c9a050;
  color: #000;
}

/* Instagram section navigation */
.instagram-swiper-wrapper .trending-nav-v2 {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: 140px !important;
  right: 10px !important;
  z-index: 100 !important;
}

/* Responsive */
@media (max-width: 1200px) {
  .instagram-swiper-wrapper {
    padding-left: 20px;
  }
  
  .instagram-swiper-wrapper .trending-nav-v2 {
    left: 30px !important;
  }
}

@media (max-width: 768px) {
  .instagram-products-v2 {
    padding: 30px 0 15px 0 !important;
  }
  
  .instagram-products-v2 .section-title {
    font-size: 2rem;
  }
  
  .myInstagramSwiper .swiper-slide {
    width: 260px !important;
    height: 350px !important;
    margin-right: 15px !important;
  }
  
  .ig-card {
    width: 260px !important;
    height: 350px !important;
    max-height: 350px !important;
  }
  
  .ig-card .instagram-media,
  .ig-card .instagram-media-rendered,
  .ig-card iframe {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
  }
  
  .ig-placeholder {
    width: 260px;
    height: 350px;
  }
  
  .instagram-swiper-wrapper .trending-nav-v2 {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .myInstagramSwiper .swiper-slide {
    width: 240px !important;
    height: 320px !important;
    margin-right: 12px !important;
  }
  
  .ig-card {
    width: 240px !important;
    height: 320px !important;
    max-height: 320px !important;
  }
  
  .ig-card .instagram-media,
  .ig-card .instagram-media-rendered,
  .ig-card iframe {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
  }
  
  .ig-placeholder {
    width: 240px;
    height: 320px;
  }
}