/* ════════════════════════════════════════════════════════════════
   MAVDEE LUXE — Women's Ethnic Boutique Theme
   Luxury refined maximalism: jewel tones, silk gradients, ornate typography,
   dramatic lighting, hover reveals. Production-ready overrides.

   BOLD AESTHETIC: Refined ethnic luxury — rich jewel tones (emerald, sapphire, 
   gold accents), Playfair Display serif display, DM Sans body, silk textures, 
   layered transparencies, ornate shadows. Asymmetric layouts, generous space.
   ════════════════════════════════════════════════════════════════ */

/* ── IMPORTS & FONT PRELOADS ───────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..600&display=swap');

/* ── LUXURY DESIGN TOKENS (JEWEL TONES) ────────────────────────── */
:root {
  /* Primary Jewels */
  --luxe-emerald:    #0F4C5A;    /* Deep teal jewel */
  --luxe-sapphire:   #1A237E;    /* Rich royal blue */
  --luxe-ruby:       #C41E3A;     /* Passionate red */
  --luxe-gold:       #C8A659;     /* Warm metallic */
  --luxe-rose-gold:  #D4A574;     /* Soft pink gold */

  /* Neutrals & Textures */
  --silk-cream:      #FDF8EF;     /* Warm off-white */
  --silk-ivory:      #FCF7F0;     /* Subtle parchment */
  --ink-deep:        #0F1419;     /* Rich black */
  --charcoal:        #2D3748;     /* Sophisticated gray */
  --pearl:           #F7FAFC;     /* Cool pearl white */

  /* Gradients & Overlays */
  --silk-emerald-g: linear-gradient(135deg, #0F4C5A 0%, #1A5F6E 50%, #2A6B75 100%);
  --silk-sapphire-g:linear-gradient(135deg, #1A237E 0%, #3949AB 50%, #5C6BC0 100%);
  --silk-ruby-g:     linear-gradient(135deg, #C41E3A 0%, #D81B60 50%, #E91E63 100%);
  --gold-shimmer-g:  linear-gradient(45deg, #C8A659 0%, #D4AF37 50%, #E6B800 100%);

  /* Typography Refinement */
  --luxury-display: 'Playfair Display', 'Cormorant Garamond', serif;
  --luxury-body:    'DM Sans', 'Inter', -apple-system, sans-serif;

  /* Enhanced Shadows (Ornate Lighting) */
  --shadow-silk:     0 4px 24px rgba(15,76,90,.08);
  --shadow-emerald:  0 8px 32px rgba(15,76,90,.16);
  --shadow-sapphire:0 8px 32px rgba(26,35,126,.18);
  --shadow-gold:     0 6px 28px rgba(200,166,89,.25);
  --shadow-ornate:   0 12px 48px rgba(0,0,0,.12), 0 0 0 1px rgba(255,255,255,.6);

  /* Border Radii (Organic Flow) */
  --radius-silk: 14px;
  --radius-gem:  20px;
  --radius-facet:24px;
}

/* ── RESET OVERRIDES (Luxury Typography) ────────────────────────── */
body {
  font-family: var(--luxury-body);
  font-feature-settings: 'calt' 1, 'liga' 1;
  background: var(--silk-cream);
  background-image:
    radial-gradient(circle at 20% 80%, rgba(200,166,89,.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(15,76,90,.06) 0%, transparent 50%),
    linear-gradient(180deg, var(--silk-ivory) 0%, var(--silk-cream) 100%);
}

h1, h2, h3, h4 { 
  font-family: var(--luxury-display);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
}

/* ── HERO CAROUSEL — SILK DRAPED ELEGANCE ──────────────────────── */
.hero-carousel {
  position: relative;
  background: var(--silk-emerald-g);
  border-radius: var(--radius-facet);
  overflow: hidden;
  margin-bottom: 6px;
  box-shadow: var(--shadow-ornate);
}

.carousel-slide img {
  filter: drop-shadow(0 8px 32px rgba(0,0,0,.12)) brightness(1.02);
  transition: filter .6s ease;
}

.carousel-slide:hover img {
  filter: drop-shadow(0 12px 48px rgba(0,0,0,.18)) brightness(1.05);
}

.carousel-info {
  background: linear-gradient(135deg, 
    rgba(15,76,90,.95) 0%, 
    rgba(26,35,126,.90) 50%, 
    rgba(196,30,58,.85) 100%);
  backdrop-filter: blur(16px);
  border-radius: inherit;
  padding: 48px 40px 32px;
}

.carousel-name { 
  font-family: var(--luxury-display);
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  font-weight: 700;
  background: linear-gradient(135deg, #FDF8EF 0%, #FFF 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.carousel-cta {
  background: linear-gradient(135deg, var(--luxe-gold) 0%, var(--luxe-rose-gold) 100%);
  color: var(--ink-deep);
  font-weight: 700;
  box-shadow: var(--shadow-gold);
  position: relative;
  overflow: hidden;
}

.carousel-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.3) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .3s ease;
}

.carousel-cta:hover::before { opacity: 1; }

/* ── PRODUCT CARDS — GEM FACET HOVER ───────────────────────────── */
.p-card, .prod-card {
  border-radius: var(--radius-gem);
  background: var(--pearl);
  border: 1px solid rgba(255,255,255,.6);
  backdrop-filter: blur(12px);
  transition: all .4s cubic-bezier(.25,.46,.45,.94);
}

.p-card:hover, .prod-card:hover {
  transform: translateY(-12px) rotateX(2deg);
  box-shadow: var(--shadow-ornate), var(--shadow-emerald);
  border-color: rgba(15,76,90,.3);
}

.p-card__img-wrap, .prod-img-wrap {
  border-radius: var(--radius-silk) var(--radius-silk) 0 0;
  background: linear-gradient(135deg, var(--silk-emerald-g), var(--silk-sapphire-g));
}

.p-card:hover .p-card__img-wrap img, .prod-card:hover .prod-img-wrap img {
  filter: brightness(1.05) contrast(1.08) drop-shadow(0 8px 24px rgba(15,76,90,.2));
  transform: scale(1.08) rotate(1deg);
}

/* ── PROMO CARDS — JEWEL CUT GRADIENTS ─────────────────────────── */
.promo-card {
  border-radius: var(--radius-facet);
  background: var(--silk-emerald-g);
  position: relative;
  overflow: hidden;
}

.promo-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 30% 20%, rgba(248,248,239,.3) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(200,166,89,.2) 0%, transparent 50%);
  opacity: .7;
}

.promo-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-silk);
}

/* ── BUTTONS — GOLD LEAF EFFECT ────────────────────────────────── */
.btn-primary, .pdp-btn-buy {
  background: linear-gradient(135deg, var(--luxe-gold) 0%, var(--luxe-rose-gold) 50%, #D4A574 100%);
  color: var(--ink-deep);
  font-weight: 700;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(200,166,89,.3);
}

.btn-primary::after, .pdp-btn-buy::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transition: left .6s;
}

.btn-primary:hover::after, .pdp-btn-buy:hover::after {
  left: 100%;
}

.btn-primary:active, .pdp-btn-buy:active {
  transform: translateY(2px) scale(.98);
}

/* ── FILTER CHIPS — GEM FACET BORDERS ──────────────────────────── */
.filter-chip.active {
  background: var(--silk-cream);
  border-color: var(--luxe-emerald);
  box-shadow: 0 2px 12px rgba(15,76,90,.2);
  position: relative;
}

.filter-chip.active::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: var(--silk-emerald-g);
  border-radius: inherit;
  z-index: -1;
  opacity: .1;
}

/* ── CATEGORY ICONS — ORNATE FRAMES ────────────────────────────── */
.cat-icon-circle {
  background: linear-gradient(135deg, var(--silk-ivory) 0%, var(--pearl) 100%);
  border: 1px solid rgba(200,166,89,.2);
  box-shadow: 
    0 4px 16px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.8);
}

.cat-icon-item:hover .cat-icon-circle {
  background: linear-gradient(135deg, var(--luxe-gold) 0%, var(--luxe-rose-gold) 30%);
  transform: translateY(-4px) rotate(1deg);
  box-shadow: 
    0 12px 40px rgba(200,166,89,.3),
    0 0 0 1px rgba(200,166,89,.5);
}

/* ── TOP OFFER BAR — SAPPHIRE VEIN ─────────────────────────────── */
.top-offer-bar {
  background: linear-gradient(90deg, var(--luxe-sapphire) 0%, var(--luxe-emerald) 100%);
  position: relative;
}

.top-offer-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(248,248,239,.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(200,166,89,.1) 0%, transparent 50%);
}

/* ── CASHBACK STRIP — ROYAL PURPLE ─────────────────────────────── */
.cashback-strip {
  background: var(--luxe-sapphire);
  position: relative;
}

.cashback-strip::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--luxe-gold), transparent);
}

/* ── INSIDER BANNER — EMERALD ENCRUSTED ────────────────────────── */
.insider-banner {
  background: var(--silk-emerald-g);
  border-radius: var(--radius-facet);
  position: relative;
  overflow: hidden;
}

.insider-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--luxe-gold);
  box-shadow: 0 2px 8px rgba(200,166,89,.4);
}

/* ── LOYALTY WIDGET — GOLD LEAF HIGHLIGHTS ─────────────────────── */
.loyalty-banner {
  background: var(--silk-ruby-g);
  border-radius: var(--radius-gem);
}

.loyalty-points {
  background: linear-gradient(135deg, var(--luxe-gold) 0%, var(--luxe-rose-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── CART BUTTONS — SILK EMBOSSED ───────────────────────────────── */
.p-card__add, .prod-add-btn {
  background: linear-gradient(145deg, var(--ink-deep), var(--charcoal));
  box-shadow: 
    0 4px 16px rgba(15,19,25,.3),
    inset 0 1px 0 rgba(255,255,255,.1);
}

.p-card:hover .p-card__add, .prod-card:hover .prod-add-btn {
  background: var(--luxe-ruby);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(196,30,58,.35);
}

/* ── WISHLIST HEART — DIAMOND SPARKLE ──────────────────────────── */
.p-card__wish, .wishlist-btn {
  background: linear-gradient(135deg, var(--luxe-gold), var(--luxe-rose-gold));
  color: var(--ink-deep);
  box-shadow: var(--shadow-gold);
}

.p-card__wish:hover, .wishlist-btn:hover {
  transform: rotate(360deg) scale(1.15);
  box-shadow: 
    0 12px 40px rgba(200,166,89,.45),
    0 0 24px rgba(200,166,89,.6);
}

/* ── BADGES — GEM CUT EDGES ────────────────────────────────────── */
.badge, .prod-card-badge {
  background: var(--luxe-emerald);
  border-radius: 6px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(15,76,90,.3);
}

.badge.new-badge {
  background: var(--luxe-gold);
  color: var(--ink-deep);
}

/* ── RATING STARS — GOLD DUST ──────────────────────────────────── */
.prod-card-rating, .pdp-star-badge {
  background: linear-gradient(135deg, var(--luxe-gold), #E6B800);
  box-shadow: 0 2px 8px rgba(200,166,89,.4);
}

/* ── FILTER SIDEBAR — VELVET TEXTURE ───────────────────────────── */
.filter-sidebar {
  background: linear-gradient(145deg, var(--silk-ivory) 0%, var(--pearl) 100%);
  border: 1px solid rgba(200,166,89,.15);
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,.9),
    var(--shadow-silk);
}

/* ── SIZE CHIPS — EMERALD INLAY ────────────────────────────────── */
.size-btn.selected, .pdp-size-btn input:checked + span {
  background: var(--luxe-emerald);
  color: var(--pearl);
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,.2),
    0 4px 16px rgba(15,76,90,.3);
}

/* ── QUICK VIEW BUTTON — SAPPHIRE GLOW ────────────────────────── */
.p-card__quick-view {
  background: var(--luxe-sapphire);
  color: var(--pearl);
  box-shadow: 0 4px 20px rgba(26,35,126,.3);
}

/* ── TOAST NOTIFICATIONS — DIFFUSED GLOW ──────────────────────── */
.toast.success { 
  background: linear-gradient(135deg, var(--luxe-emerald) 0%, #1A5F6E 100%);
  box-shadow: var(--shadow-emerald);
}
.toast.error { 
  background: linear-gradient(135deg, var(--luxe-ruby) 0%, #D81B60 100%);
  box-shadow: 0 8px 32px rgba(196,30,58,.35);
}

/* ── MODAL BACKDROPS — VELVET OVERLAY ─────────────────────────── */
.modal-overlay, .pdp-modal-backdrop {
  background: rgba(15,19,25,.92);
  backdrop-filter: blur(24px) saturate(120%);
}

/* ── WHATSAPP FAB — EMERALD CUT ────────────────────────────────── */
.whatsapp-fab {
  background: linear-gradient(135deg, var(--luxe-emerald) 0%, #1A5F6E 100%);
  box-shadow: 0 8px 32px rgba(15,76,90,.4);
}

/* ── BACK TO TOP — GOLD PLATING ────────────────────────────────── */
#back-to-top {
  background: linear-gradient(135deg, var(--luxe-gold) 0%, var(--luxe-rose-gold) 100%);
  color: var(--ink-deep);
  box-shadow: var(--shadow-gold);
}

/* ── PROMO MARQUEE — SAPPHIRE VEIN ─────────────────────────────── */
.promo-marquee-wrap {
  background: linear-gradient(90deg, var(--luxe-sapphire), var(--luxe-emerald));
}

/* ── LOYALTY PROGRESS — LIQUID GOLD ────────────────────────────── */
.loyalty-progress-fill {
  background: linear-gradient(90deg, var(--luxe-gold) 0%, var(--luxe-rose-gold) 100%);
  box-shadow: 0 0 12px rgba(200,166,89,.6);
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE (Desktop Refinements Only)
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* Hero: Asymmetric overlay positioning */
  .carousel-info {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  }

  /* Cards: Subtle rotation on hover */
  .p-card:hover, .prod-card:hover {
    rotate: 1deg;
  }

  /* Typography: Larger display for headers */
  .m-section-title {
    font-size: 2.1rem;
    letter-spacing: -.03em;
  }

  /* Grids: Luxury spacing */
  .prod-grid {
    gap: 24px;
  }
}

/* ════════════════════════════════════════════════════════════════
   PRINT (Elegant Black & White)
   ════════════════════════════════════════════════════════════════ */
@media print {
  :root {
    --luxe-emerald: #000;
    --luxe-gold:    #000;
    --silk-cream:   #fff;
  }
}