/* ==========================================================================
   MEHARWAAN WEARS — LUXURY BESPOKE MATTE REDESIGN
   Brand Color Palette:
     --brand-50:  #f8f5f0 (warm alabaster)
     --brand-100: #efe7d9 (rich parchment)
     --brand-500: #8a6a3f (antique camel bronze)
     --brand-700: #5f4728 (deep saddle brown)
     --brand-900: #2e2417 (velvet espresso)
     --gold-matte: #c5a059 (subtle antique gold)
     --dark-surface: #19130d (deep matte obsidian)
   Aesthetic:
     - Pure matte finishes, velvety depths, zero tacky rainbow gradients
     - Bespoke editorial typography with Cinzel, Playfair Display & Plus Jakarta Sans
     - Subtle hairline borders, refined micro-elevations, tactile micro-interactions
     - Smooth scroll reveals, lazy-load blur-in transitions
   ========================================================================== */

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

:root {
  --mw-font-serif: 'Cinzel', 'Playfair Display', Georgia, serif;
  --mw-font-display: 'Playfair Display', Georgia, serif;
  --mw-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --mw-brand-50: #f8f5f0;
  --mw-brand-100: #efe7d9;
  --mw-brand-500: #8a6a3f;
  --mw-brand-700: #5f4728;
  --mw-brand-900: #2e2417;

  --mw-gold-matte: #c5a059;
  --mw-gold-light: #dfc488;
  --mw-bg-canvas: #faf8f5;
  --mw-bg-surface: #ffffff;
  --mw-dark-matte: #19130d;
  --mw-dark-card: #231b13;

  --mw-border-subtle: rgba(95, 71, 40, 0.12);
  --mw-border-gold: rgba(197, 160, 89, 0.35);

  --mw-shadow-subtle: 0 4px 20px -2px rgba(46, 36, 23, 0.05);
  --mw-shadow-hover: 0 16px 36px -6px rgba(46, 36, 23, 0.12);
  --mw-shadow-card: 0 1px 3px rgba(46, 36, 23, 0.04), 0 6px 18px rgba(46, 36, 23, 0.04);
}

/* --------------------------------------------------------------------------
   Global Typography & Base Reset
   -------------------------------------------------------------------------- */
body {
  font-family: var(--mw-font-sans);
  background-color: var(--mw-bg-canvas);
  color: #2b2520;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

h1, h2, h3, h4, .font-serif, .mw-serif {
  font-family: var(--mw-font-serif);
  letter-spacing: 0.03em;
  font-weight: 700;
  color: var(--mw-brand-900);
}

/* Ensure headings inside dark sections or with text-white are crisp high-contrast white */
.text-white,
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
h1.text-white,
h2.text-white,
h3.text-white,
h4.text-white,
section[class*="bg-brand-900"] h1,
section[class*="bg-brand-900"] h2,
section[class*="bg-slate-900"] h1,
section[class*="bg-slate-900"] h2,
section[class*="bg-slate-950"] h1,
section[class*="bg-slate-950"] h2,
footer h1,
footer h2,
footer h3,
footer h4 {
  color: #ffffff !important;
}

.font-display {
  font-family: var(--mw-font-display);
}

/* --------------------------------------------------------------------------
   Removal of "AI Slop" Colorful/Glossy Gradients
   Replaced with Warm, Rich, Matte Bespoke Solid Color Blocks
   -------------------------------------------------------------------------- */
.bg-gradient-to-r,
.bg-gradient-to-b,
.bg-gradient-to-l,
.bg-gradient-to-t,
.bg-gradient-to-br,
.bg-gradient-to-tr {
  background-image: none !important;
  background-color: var(--mw-dark-matte) !important;
}

/* Buttons that had gradient classes get solid brand matte */
button.bg-gradient-to-r,
button.bg-gradient-to-br,
.btn.bg-gradient-to-r,
a.bg-gradient-to-r {
  background-color: var(--mw-brand-700) !important;
  color: #ffffff !important;
}
button.bg-gradient-to-r:hover,
button.bg-gradient-to-br:hover,
.btn.bg-gradient-to-r:hover,
a.bg-gradient-to-r:hover {
  background-color: var(--mw-brand-900) !important;
}

/* Announcement Banner Matte Plaque */
.from-brand-900.via-brand-700,
.from-brand-900.via-brand-700.to-slate-900,
.from-brand-900.via-brand-700.to-amber-600 {
  background: var(--mw-dark-matte) !important;
  border-color: var(--mw-border-gold) !important;
  box-shadow: 0 12px 36px -4px rgba(25, 19, 13, 0.25) !important;
}

/* --------------------------------------------------------------------------
   Header & Navigation (Matte Luxury Overhaul)
   -------------------------------------------------------------------------- */
header.sticky {
  background: rgba(253, 252, 250, 0.94) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid var(--mw-border-subtle) !important;
  transition: all 0.3s ease;
}

header a.truncate {
  font-family: var(--mw-font-serif) !important;
  font-weight: 800 !important;
  letter-spacing: 0.24em !important;
  color: var(--mw-brand-900) !important;
  text-transform: uppercase;
  transition: color 0.25s ease;
}

header a.truncate:hover {
  color: var(--mw-brand-700) !important;
}

.nav-link {
  font-family: var(--mw-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #453c35 !important;
  position: relative;
  padding: 0.5rem 0.25rem 0.6rem 0.25rem !important;
  transition: color 0.25s ease;
}

.nav-link:hover {
  color: var(--mw-brand-700) !important;
}

.nav-link::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 2px !important;
  width: 0 !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: var(--mw-brand-700) !important;
  box-shadow: none !important;
  transition: width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.nav-link:hover::after {
  width: 100% !important;
  left: 0 !important;
}

.nav-link.active {
  color: var(--mw-brand-700) !important;
  font-weight: 700 !important;
}

.nav-link.active::after {
  width: 100% !important;
  left: 0 !important;
  background: var(--mw-brand-700) !important;
  box-shadow: none !important;
}

/* Header utility buttons (Search, Cart, Account) */
#openSearchModal,
#navCartBtn,
#openMobileMenu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  border-radius: 9999px;
  background: var(--mw-brand-50);
  border: 1px solid var(--mw-border-subtle);
  color: var(--mw-brand-900);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#openSearchModal:hover,
#navCartBtn:hover,
#openMobileMenu:hover {
  background: var(--mw-brand-100);
  border-color: rgba(95, 71, 40, 0.28);
  transform: translateY(-1px);
}

#navCartBadge {
  background: var(--mw-brand-700) !important;
  font-family: var(--mw-font-sans);
  font-weight: 700;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(46, 36, 23, 0.15);
}

/* Dropdown More Menu */
.more-menu-panel {
  background: #ffffff !important;
  border: 1px solid var(--mw-border-subtle) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px -4px rgba(46, 36, 23, 0.1) !important;
  padding: 0.5rem !important;
}

.more-menu-panel a {
  font-family: var(--mw-font-sans);
  font-weight: 500;
  border-radius: 8px !important;
  color: #3b322a !important;
  transition: all 0.18s ease;
}

.more-menu-panel a:hover {
  background: var(--mw-brand-50) !important;
  color: var(--mw-brand-700) !important;
  padding-left: 1rem !important;
}

/* --------------------------------------------------------------------------
   Hero Section (Deep Bespoke Velvet Matte)
   -------------------------------------------------------------------------- */
section.relative.min-h-\[90vh\] {
  background: #19130d !important;
  position: relative;
  overflow: hidden;
}

/* Rich Matte Overlay replacing the gradient */
section.relative.min-h-\[90vh\] > .absolute.inset-0:first-child {
  background: radial-gradient(circle at 65% 50%, rgba(35, 26, 17, 0.82) 0%, rgba(18, 13, 8, 0.96) 100%) !important;
}

/* Hero Badge */
section.relative.min-h-\[90vh\] p.tracking-\[0\.3em\] {
  font-family: var(--mw-font-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.35em !important;
  color: var(--mw-gold-matte) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(197, 160, 89, 0.3);
  border-radius: 9999px;
  backdrop-filter: blur(8px);
}

/* Hero Title */
section.relative.min-h-\[90vh\] h1 {
  font-family: var(--mw-font-serif) !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

/* Hero Subtitle */
section.relative.min-h-\[90vh\] p.max-w-2xl {
  font-family: var(--mw-font-sans);
  color: #dfd8cc !important;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Hero CTA Button */
section.relative.min-h-\[90vh\] a.inline-block {
  font-family: var(--mw-font-sans);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.875rem;
  background: var(--mw-brand-50) !important;
  color: var(--mw-brand-900) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  padding: 0.9rem 2rem !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

section.relative.min-h-\[90vh\] a.inline-block:hover {
  background: #ffffff !important;
  color: var(--mw-brand-700) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -4px rgba(0, 0, 0, 0.45) !important;
}

/* --------------------------------------------------------------------------
   Announcement Plaque (Matte Luxury Redesign)
   -------------------------------------------------------------------------- */
section.bg-white.py-10 .rounded-3xl {
  background: var(--mw-dark-matte) !important;
  border: 1px solid var(--mw-border-gold) !important;
  box-shadow: 0 12px 32px -4px rgba(25, 19, 13, 0.2) !important;
  border-radius: 18px !important;
}

section.bg-white.py-10 .rounded-full.bg-white\/20,
section.bg-white.py-10 .rounded-full.bg-amber-200\/30 {
  display: none !important; /* Eliminate blurry gradient orbs */
}

section.bg-white.py-10 a.rounded-xl {
  background: var(--mw-brand-100) !important;
  color: var(--mw-brand-900) !important;
  border: 1px solid var(--mw-gold-matte) !important;
  font-family: var(--mw-font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.75rem 1.4rem !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.25s ease;
}

section.bg-white.py-10 a.rounded-xl:hover {
  background: #ffffff !important;
  color: var(--mw-brand-700) !important;
  transform: translateY(-1px);
}

#announcementCountdown {
  font-family: monospace;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mw-gold-light) !important;
}

/* --------------------------------------------------------------------------
   Trusted Fabric Partners Ribbon
   -------------------------------------------------------------------------- */
section.border-y.border-slate-200 {
  background: #f5f2eb !important;
  border-top: 1px solid var(--mw-border-subtle) !important;
  border-bottom: 1px solid var(--mw-border-subtle) !important;
  padding: 1.5rem 0 !important;
}

section.border-y.border-slate-200 p.text-slate-500 {
  font-family: var(--mw-font-sans);
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--mw-brand-700) !important;
  font-size: 0.75rem !important;
}

.partners-marquee {
  background: transparent !important;
  border: none !important;
}

.partners-marquee-group span {
  font-family: var(--mw-font-serif);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #3d342d !important;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(95, 71, 40, 0.08);
}

/* --------------------------------------------------------------------------
   Product & Category Cards (Matte Luxury Tailored Cards)
   -------------------------------------------------------------------------- */
article.rounded-xl.border.border-slate-200,
.category-slide.rounded-xl.border.border-slate-200 {
  background: #ffffff !important;
  border: 1px solid var(--mw-border-subtle) !important;
  border-radius: 14px !important;
  box-shadow: var(--mw-shadow-card) !important;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease !important;
}

article.rounded-xl.border.border-slate-200:hover,
.category-slide.rounded-xl.border.border-slate-200:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--mw-shadow-hover) !important;
  border-color: rgba(95, 71, 40, 0.24) !important;
}

/* Product Card Images - Fit cleanly edge-to-edge, NO bottom grey bar */
article.rounded-xl.border {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

article.rounded-xl.border .mw-product-card-link {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

article.rounded-xl.border .mw-product-card-link > div:first-child {
  width: 100% !important;
  overflow: hidden !important;
  background: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
}

article.rounded-xl.border img {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center 25% !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  display: block !important;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

article.rounded-xl.border:hover img {
  transform: scale(1.04) !important;
}

/* Category Cards - Flush edge-to-edge, NO extra white bezels */
.category-slide {
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
}

.category-slide > div:first-child {
  width: 100% !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

.category-slide img,
.category-thumb-carousel {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.category-slide:hover img {
  transform: scale(1.04) !important;
}

/* Product Titles */
article.rounded-xl.border h2,
article.rounded-xl.border h3 {
  font-family: var(--mw-font-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--mw-brand-900) !important;
  letter-spacing: 0.02em !important;
  transition: color 0.2s ease;
}

article.rounded-xl.border:hover h2,
article.rounded-xl.border:hover h3 {
  color: var(--mw-brand-700) !important;
}

/* Product Price */
article.rounded-xl.border p.text-brand-700 {
  font-family: var(--mw-font-sans) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: var(--mw-brand-700) !important;
  letter-spacing: 0.02em;
}

/* Buy Button inside Product Card */
article.rounded-xl.border span.rounded-lg.bg-brand-700,
article.rounded-xl.border a span.bg-brand-700 {
  background: var(--mw-brand-900) !important;
  color: #ffffff !important;
  font-family: var(--mw-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 6px !important;
  padding: 0.45rem 1rem !important;
  transition: all 0.2s ease;
}

article.rounded-xl.border:hover span.bg-brand-700 {
  background: var(--mw-brand-700) !important;
}

/* Carousel Control Arrows */
.mw-carousel-arrow,
.category-arrow {
  width: 42px !important;
  height: 42px !important;
  border-radius: 9999px !important;
  background: #ffffff !important;
  border: 1px solid var(--mw-border-subtle) !important;
  color: var(--mw-brand-900) !important;
  box-shadow: 0 4px 14px rgba(46, 36, 23, 0.08) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem !important;
  transition: all 0.2s ease !important;
}

.mw-carousel-arrow:hover:not(:disabled),
.category-arrow:hover:not(:disabled) {
  background: var(--mw-brand-50) !important;
  border-color: var(--mw-brand-700) !important;
  color: var(--mw-brand-700) !important;
  transform: translateY(-50%) scale(1.06) !important;
}

/* --------------------------------------------------------------------------
   Tailoring Process Steps ("How Our Tailoring Works")
   -------------------------------------------------------------------------- */
section.bg-slate-50.py-16 {
  background: #f7f4ed !important;
}

section.bg-slate-50.py-16 h2 {
  font-family: var(--mw-font-serif) !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  color: var(--mw-brand-900) !important;
}

.mw-tailoring-steps-grid > div,
.mw-tailoring-steps-grid > a {
  background: #ffffff !important;
  border: 1px solid var(--mw-border-subtle) !important;
  border-radius: 16px !important;
  padding: 2rem 1.5rem !important;
  box-shadow: var(--mw-shadow-card) !important;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  position: relative;
}

.mw-tailoring-steps-grid > div:hover,
.mw-tailoring-steps-grid > a:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--mw-shadow-hover) !important;
  border-color: rgba(95, 71, 40, 0.26) !important;
}

.mw-tailoring-steps-grid .text-3xl {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border-radius: 9999px;
  background: var(--mw-brand-50);
  border: 1px solid var(--mw-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  transition: transform 0.3s ease;
}

.mw-tailoring-steps-grid > div:hover .text-3xl,
.mw-tailoring-steps-grid > a:hover .text-3xl {
  transform: scale(1.1) rotate(4deg);
  background: var(--mw-brand-100);
}

.mw-tailoring-steps-grid h3 {
  font-family: var(--mw-font-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--mw-brand-900) !important;
}

.mw-tailoring-steps-grid p {
  font-family: var(--mw-font-sans);
  color: #63584e !important;
  font-size: 0.875rem !important;
}

/* --------------------------------------------------------------------------
   Story Section ("Tradition in Every Stitch")
   -------------------------------------------------------------------------- */
section.py-16 {
  background: #ffffff;
}

section.py-16 p.tracking-\[0\.2em\] {
  font-family: var(--mw-font-sans) !important;
  font-weight: 700 !important;
  letter-spacing: 0.25em !important;
  color: var(--mw-gold-matte) !important;
  font-size: 0.8125rem !important;
}

section.py-16 h2 {
  font-family: var(--mw-font-serif) !important;
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  color: var(--mw-brand-900) !important;
}

section.py-16 p.text-slate-600 {
  font-family: var(--mw-font-sans);
  font-size: 1.05rem;
  color: #4f443b !important;
  line-height: 1.8;
}

/* Story Media Frame */
[data-media-carousel="story"] {
  border-radius: 18px !important;
  border: 1px solid var(--mw-border-subtle);
  box-shadow: 0 16px 36px -8px rgba(46, 36, 23, 0.12);
}

/* --------------------------------------------------------------------------
   Customer Reviews & Testimonials Marquee
   -------------------------------------------------------------------------- */
.review-card {
  background: #ffffff !important;
  border: 1px solid var(--mw-border-subtle) !important;
  border-radius: 16px !important;
  box-shadow: var(--mw-shadow-card) !important;
  padding: 1.75rem !important;
  transition: all 0.3s ease;
}

.review-card:hover {
  border-color: rgba(95, 71, 40, 0.28) !important;
  box-shadow: var(--mw-shadow-hover) !important;
  transform: translateY(-2px);
}

.review-card .text-amber-500 {
  color: var(--mw-gold-matte) !important;
  letter-spacing: 0.15em;
}

.review-card p.text-slate-600 {
  font-family: var(--mw-font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: #4a3f36 !important;
  line-height: 1.6;
}

.review-card p.font-semibold {
  font-family: var(--mw-font-sans);
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  color: var(--mw-brand-900) !important;
}

/* --------------------------------------------------------------------------
   Counter & Metrics Section (Deep Velvet Espresso Matte)
   -------------------------------------------------------------------------- */
section.bg-brand-900 {
  background: var(--mw-dark-matte) !important;
  border-top: 1px solid rgba(197, 160, 89, 0.2);
  border-bottom: 1px solid rgba(197, 160, 89, 0.2);
}

section.bg-brand-900 p.counter {
  font-family: var(--mw-font-serif) !important;
  font-weight: 800 !important;
  color: var(--mw-gold-light) !important;
  letter-spacing: 0.02em;
}

section.bg-brand-900 p.text-brand-100 {
  font-family: var(--mw-font-sans);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.75rem !important;
  color: #dfd7cb !important;
}

/* --------------------------------------------------------------------------
   Footer (Sophisticated Matte Finish)
   -------------------------------------------------------------------------- */
footer.bg-slate-950 {
  background: #140f0a !important;
  border-top: 1px solid rgba(197, 160, 89, 0.18) !important;
  color: #c9bfb4 !important;
}

footer h3,
footer h4 {
  font-family: var(--mw-font-serif) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: #ffffff !important;
  text-transform: uppercase;
}

footer h3 {
  font-size: 1.15rem !important;
  color: var(--mw-gold-light) !important;
}

footer a {
  font-family: var(--mw-font-sans);
  color: #ada294 !important;
  transition: all 0.2s ease;
}

footer a:hover {
  color: var(--mw-gold-light) !important;
  padding-left: 3px;
}

footer .border-slate-800 {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* --------------------------------------------------------------------------
   Shop Page & Filter Elements
   -------------------------------------------------------------------------- */
main.mx-auto.max-w-7xl h1 {
  font-family: var(--mw-font-serif) !important;
  font-weight: 800 !important;
  color: var(--mw-brand-900) !important;
}

form select,
form input[type="text"],
form input[type="email"] {
  background-color: #ffffff;
  border: 1px solid var(--mw-border-subtle) !important;
  border-radius: 8px !important;
  font-family: var(--mw-font-sans);
  color: #2b2520;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

form select:focus,
form input[type="text"]:focus,
form input[type="email"]:focus {
  outline: none !important;
  border-color: var(--mw-brand-700) !important;
  box-shadow: 0 0 0 3px rgba(95, 71, 40, 0.12) !important;
}

form button.bg-slate-900 {
  background: var(--mw-brand-900) !important;
  color: #ffffff !important;
  font-family: var(--mw-font-sans);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 8px !important;
  transition: all 0.2s ease;
}

form button.bg-slate-900:hover {
  background: var(--mw-brand-700) !important;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Modal Overhauls (Newsletter, Search, Quick View)
   -------------------------------------------------------------------------- */
#newsletterModal .rounded-2xl,
#searchModal .rounded-xl {
  background: #ffffff !important;
  border: 1px solid var(--mw-border-subtle) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 50px -10px rgba(25, 19, 13, 0.3) !important;
}

#newsletterModal h3,
#searchModal h2 {
  font-family: var(--mw-font-serif) !important;
  font-weight: 700 !important;
  color: var(--mw-brand-900) !important;
}

#newsletterForm button {
  background: var(--mw-brand-700) !important;
  font-family: var(--mw-font-sans);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 8px !important;
  transition: all 0.2s ease;
}

#newsletterForm button:hover {
  background: var(--mw-brand-900) !important;
}

/* --------------------------------------------------------------------------
   Back to Top & WhatsApp Floating Buttons
   -------------------------------------------------------------------------- */
#backToTop {
  background: var(--mw-brand-900) !important;
  border: 1px solid var(--mw-border-gold) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.25s ease;
}

#backToTop:hover {
  background: var(--mw-brand-700) !important;
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   Lazy Loading & Micro-Animations
   -------------------------------------------------------------------------- */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.45s ease-in-out, transform 0.4s ease;
}

img[loading="lazy"].loaded,
img[loading="lazy"][src]:not([src=""]) {
  opacity: 1;
}

/* Smooth reveal animation for sections */
.mw-reveal-fade {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

.mw-reveal-fade.mw-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Interactive Ripple & Micro-Feel
   -------------------------------------------------------------------------- */
button, a.btn, .mw-product-card-link {
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

button:active, a.btn:active {
  transform: scale(0.975);
}