/* ============================================================
   MAYAPUR MRIDANGA — COMPLETE DESIGN SYSTEM
   Version 1.0 | Premium Devotional eCommerce
   ============================================================ */

/* ─── GOOGLE FONTS IMPORT ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Noto+Serif+Bengali:wght@400;600;700&display=swap');

/* ─── CSS DESIGN TOKENS ───────────────────────────────────── */
:root {
  /* Primary Palette */
  --c-saffron:         #E8621A;
  --c-saffron-dark:    #C44E12;
  --c-saffron-light:   #F2824A;
  --c-gold:            #C9973A;
  --c-gold-light:      #F0C060;
  --c-gold-xlight:     #F7DFA0;
  --c-brown-dark:      #2A1A0E;
  --c-brown-mid:       #4A2C10;
  --c-brown-light:     #7A4E28;
  --c-ivory:           #FDF8F0;
  --c-cream:           #F5EDD8;
  --c-cream-dark:      #EDE0C4;

  /* Neutral Palette */
  --c-charcoal:        #1C1C1E;
  --c-gray-900:        #2C2C2E;
  --c-gray-700:        #3A3A3C;
  --c-gray-500:        #636366;
  --c-gray-400:        #8A8A8E;
  --c-gray-200:        #C7C7CC;
  --c-gray-100:        #E5E5EA;
  --c-gray-50:         #F2F2F7;
  --c-white:           #FFFFFF;

  /* Accent (Very limited use) */
  --c-krishna-blue:    #1A3D7C;
  --c-warm-orange:     #F07020;
  --c-success:         #34C759;
  --c-error:           #FF3B30;

  /* Gradients */
  --g-hero:            linear-gradient(145deg, #1A0E05 0%, #2A1A0E 40%, #4A2C10 70%, #2A1A0E 100%);
  --g-gold:            linear-gradient(135deg, #C9973A 0%, #F0C060 50%, #C9973A 100%);
  --g-saffron:         linear-gradient(135deg, #C44E12 0%, #E8621A 50%, #F2824A 100%);
  --g-cream:           linear-gradient(180deg, #FDF8F0 0%, #F5EDD8 100%);
  --g-card-overlay:    linear-gradient(180deg, transparent 40%, rgba(42,26,14,0.92) 100%);
  --g-glass:           linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 100%);
  --g-dark-glass:      linear-gradient(135deg, rgba(42,26,14,0.85) 0%, rgba(42,26,14,0.65) 100%);
  --g-hero-text:       linear-gradient(135deg, #F0C060 0%, #C9973A 50%, #F0C060 100%);

  /* Typography */
  --f-display:         'Cormorant Garamond', Georgia, serif;
  --f-heading:         'Playfair Display', Georgia, serif;
  --f-body:            'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-ui:              'Plus Jakarta Sans', -apple-system, sans-serif;
  --f-bengali:         'Noto Serif Bengali', serif;

  /* Type Scale */
  --ts-hero:           clamp(3.5rem, 8vw, 8rem);
  --ts-h1:             clamp(2.5rem, 5vw, 5rem);
  --ts-h2:             clamp(2rem, 3.5vw, 3.5rem);
  --ts-h3:             clamp(1.5rem, 2.5vw, 2rem);
  --ts-h4:             clamp(1.125rem, 1.5vw, 1.375rem);
  --ts-body-xl:        1.25rem;
  --ts-body-lg:        1.125rem;
  --ts-body:           1rem;
  --ts-sm:             0.875rem;
  --ts-xs:             0.75rem;
  --ts-2xs:            0.6875rem;

  /* Line Heights */
  --lh-tight:          1.1;
  --lh-snug:           1.3;
  --lh-normal:         1.5;
  --lh-relaxed:        1.65;
  --lh-loose:          1.8;

  /* Letter Spacing */
  --ls-tight:          -0.02em;
  --ls-normal:         0;
  --ls-wide:           0.05em;
  --ls-wider:          0.1em;
  --ls-widest:         0.15em;

  /* Spacing */
  --sp-1:  0.25rem;   /* 4px */
  --sp-2:  0.5rem;    /* 8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */
  --sp-24: 6rem;      /* 96px */
  --sp-32: 8rem;      /* 128px */
  --sp-40: 10rem;     /* 160px */

  /* Section Padding */
  --section-y: clamp(4rem, 8vw, 8rem);

  /* Border Radius */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-2xl:  48px;
  --r-full: 9999px;

  /* Shadows */
  --s-xs:   0 1px 4px rgba(42,26,14,0.06);
  --s-sm:   0 2px 8px rgba(42,26,14,0.08);
  --s-md:   0 8px 24px rgba(42,26,14,0.10);
  --s-lg:   0 16px 48px rgba(42,26,14,0.14);
  --s-xl:   0 32px 80px rgba(42,26,14,0.18);
  --s-gold: 0 8px 32px rgba(201,151,58,0.30);
  --s-saffron: 0 8px 24px rgba(232,98,26,0.35);
  --s-inset: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.08);
  --s-glass: 0 8px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.2);

  /* Transitions */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-inout:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-luxury: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --t-fast:   0.15s;
  --t-normal: 0.25s;
  --t-slow:   0.4s;
  --t-slower: 0.6s;

  /* Z-index Stack */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-nav:     300;
  --z-toast:   400;
  --z-splash:  1000;

  /* Container Widths */
  --w-full:   100%;
  --w-xxl:    1600px;
  --w-xl:     1440px;
  --w-lg:     1280px;
  --w-md:     1100px;
  --w-sm:     800px;
  --w-xs:     640px;
}

/* ─── CSS RESET & BASE ────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--f-body);
  font-size: var(--ts-body);
  line-height: var(--lh-relaxed);
  color: var(--c-charcoal);
  background-color: var(--c-ivory);
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

ul, ol {
  list-style: none;
}

input, select, textarea {
  font-family: inherit;
}

/* ─── TYPOGRAPHY SYSTEM ───────────────────────────────────── */
.display-text {
  font-family: var(--f-display);
  font-size: var(--ts-hero);
  font-weight: 300;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h1, .h1 {
  font-family: var(--f-display);
  font-size: var(--ts-h1);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h2, .h2 {
  font-family: var(--f-heading);
  font-size: var(--ts-h2);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

h3, .h3 {
  font-family: var(--f-heading);
  font-size: var(--ts-h3);
  font-weight: 500;
  line-height: var(--lh-snug);
}

h4, .h4 {
  font-family: var(--f-body);
  font-size: var(--ts-h4);
  font-weight: 600;
  line-height: var(--lh-normal);
}

.section-label {
  font-family: var(--f-ui);
  font-size: var(--ts-xs);
  font-weight: 700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-gold);
}

.body-lg { font-size: var(--ts-body-lg); line-height: var(--lh-relaxed); }
.body-xl { font-size: var(--ts-body-xl); line-height: var(--lh-relaxed); }
.text-sm  { font-size: var(--ts-sm); }
.text-xs  { font-size: var(--ts-xs); }

/* ─── LAYOUT UTILITIES ────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--w-lg);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.container--wide  { max-width: var(--w-xl); }
.container--narrow { max-width: var(--w-sm); }
.container--full  { max-width: 100%; padding-inline: 0; }

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--cream   { background-color: var(--c-cream); }
.section--dark    { background-color: var(--c-brown-dark); color: var(--c-ivory); }
.section--charcoal { background-color: var(--c-charcoal); color: var(--c-ivory); }

.grid { display: grid; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }

/* ─── BUTTON SYSTEM ───────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.875rem 2rem;
  border-radius: var(--r-full);
  font-family: var(--f-ui);
  font-size: var(--ts-sm);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: all var(--t-normal) var(--ease-out);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--t-fast) var(--ease-out);
}

.btn:hover::before { background: rgba(255,255,255,0.08); }
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--g-saffron);
  color: var(--c-white);
  box-shadow: var(--s-saffron);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(232,98,26,0.45);
}

.btn-gold {
  background: var(--g-gold);
  color: var(--c-brown-dark);
  box-shadow: var(--s-gold);
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(201,151,58,0.45);
}

.btn-outline {
  background: transparent;
  color: var(--c-white);
  border: 1.5px solid rgba(255,255,255,0.6);
}

.btn-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--c-white);
  transform: translateY(-2px);
}

.btn-outline-gold {
  background: transparent;
  color: var(--c-gold);
  border: 1.5px solid var(--c-gold);
}

.btn-outline-gold:hover {
  background: var(--c-gold);
  color: var(--c-brown-dark);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--c-charcoal);
  padding-inline: 0.5rem;
  border-radius: var(--r-sm);
}

.btn-ghost:hover { background: var(--c-gray-100); }

.btn--sm { padding: 0.625rem 1.375rem; font-size: var(--ts-xs); }
.btn--lg { padding: 1.125rem 2.5rem; font-size: var(--ts-body); }
.btn--xl { padding: 1.25rem 3rem; font-size: var(--ts-body-lg); }

.btn--icon {
  padding: 0.75rem;
  border-radius: var(--r-full);
  aspect-ratio: 1;
  line-height: 0;
}

/* Ripple Effect */
.btn-ripple { position: relative; overflow: hidden; }
.btn-ripple .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: rippleAnim 0.6s linear;
  background: rgba(255,255,255,0.3);
  pointer-events: none;
}

@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ─── CARD SYSTEM ─────────────────────────────────────────── */
.card {
  background: var(--c-white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--s-sm);
  transition: transform var(--t-slow) var(--ease-luxury),
              box-shadow var(--t-slow) var(--ease-luxury);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--s-lg);
}

.card--glass {
  background: var(--g-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.25);
}

.card--dark {
  background: var(--c-brown-dark);
  color: var(--c-ivory);
}

/* ─── BADGE SYSTEM ────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-full);
  font-size: var(--ts-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.badge--gold     { background: var(--g-gold); color: var(--c-brown-dark); }
.badge--saffron  { background: var(--c-saffron); color: var(--c-white); }
.badge--orange   { background: var(--c-warm-orange); color: var(--c-white); }
.badge--blue     { background: var(--c-krishna-blue); color: var(--c-white); }
.badge--cream    { background: var(--c-cream); color: var(--c-brown-mid); border: 1px solid var(--c-cream-dark); }

/* ─── STAR RATING ─────────────────────────────────────────── */
.stars {
  display: flex;
  gap: 2px;
  color: var(--c-gold);
  font-size: 0.875rem;
}

.stars-count {
  font-size: var(--ts-xs);
  color: var(--c-gray-400);
  margin-left: var(--sp-2);
}

/* ─── FORM ELEMENTS ───────────────────────────────────────── */
.input-field {
  width: 100%;
  padding: 0.875rem 1.25rem;
  border: 1.5px solid var(--c-gray-200);
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--ts-body);
  color: var(--c-charcoal);
  background: var(--c-white);
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
  outline: none;
}

.input-field:focus {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(201,151,58,0.15);
}

.input-field::placeholder { color: var(--c-gray-400); }

/* ─── DIVIDER ─────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
  border: none;
  margin: 0;
}

.divider--light {
  background: linear-gradient(90deg, transparent, var(--c-gray-200), transparent);
}

/* ─── SECTION HEADING ─────────────────────────────────────── */
.section-header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-header .section-label {
  display: block;
  margin-bottom: var(--sp-3);
}

.section-header h2 {
  margin-bottom: var(--sp-4);
}

.section-header p {
  max-width: 600px;
  margin-inline: auto;
  color: var(--c-gray-500);
  font-size: var(--ts-body-lg);
  line-height: var(--lh-relaxed);
}

.section-header--light h2 { color: var(--c-ivory); }
.section-header--light p  { color: rgba(255,255,255,0.65); }

/* Gold underline accent */
.heading-accent {
  position: relative;
  display: inline-block;
}

.heading-accent::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--g-gold);
  border-radius: var(--r-full);
}

/* ─── BREADCRUMB ──────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--ts-sm);
  color: var(--c-gray-400);
}

.breadcrumb a:hover { color: var(--c-gold); }

.breadcrumb-sep { color: var(--c-gray-200); }

/* ─── SCROLL ANIMATIONS ───────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--t-slower) var(--ease-out),
              transform var(--t-slower) var(--ease-out);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity var(--t-slower) var(--ease-out),
              transform var(--t-slower) var(--ease-out);
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.10s; }
.stagger-3 { transition-delay: 0.15s; }
.stagger-4 { transition-delay: 0.20s; }
.stagger-5 { transition-delay: 0.25s; }
.stagger-6 { transition-delay: 0.30s; }

/* ─── FLOATING PARTICLES ──────────────────────────────────── */
.particles-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-gold-light);
  opacity: 0;
  animation: floatParticle linear infinite;
}

@keyframes floatParticle {
  0%   { opacity: 0; transform: translateY(100vh) scale(0); }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(-20vh) scale(1) rotate(360deg); }
}

/* ─── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--c-gray-50); }
::-webkit-scrollbar-thumb {
  background: var(--g-gold);
  border-radius: var(--r-full);
}

/* ─── SELECTION ───────────────────────────────────────────── */
::selection {
  background: var(--c-gold-xlight);
  color: var(--c-brown-dark);
}

/* ─── FOCUS STYLES ────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── UTILITY CLASSES ─────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.text-gold    { color: var(--c-gold); }
.text-saffron { color: var(--c-saffron); }
.text-cream   { color: var(--c-cream); }
.text-muted   { color: var(--c-gray-400); }
.text-white   { color: var(--c-white); }

.bg-dark   { background-color: var(--c-brown-dark); }
.bg-cream  { background-color: var(--c-cream); }
.bg-ivory  { background-color: var(--c-ivory); }
.bg-white  { background-color: var(--c-white); }

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

.hidden  { display: none !important; }
.visible { visibility: visible; }

.w-full  { width: 100%; }
.h-full  { height: 100%; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

.overflow-hidden { overflow: hidden; }

.rounded-full { border-radius: var(--r-full); }
.rounded-lg   { border-radius: var(--r-lg); }
.rounded-md   { border-radius: var(--r-md); }

/* ─── RESPONSIVE BREAKPOINTS ──────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --section-y: clamp(3rem, 6vw, 5rem);
  }
}

@media (max-width: 768px) {
  :root {
    --section-y: clamp(3rem, 8vw, 4rem);
  }
  .btn { padding: 0.75rem 1.5rem; }
  .btn--lg { padding: 0.875rem 2rem; }
}

@media (max-width: 480px) {
  .btn--xl { padding: 1rem 2rem; font-size: var(--ts-body); }
}