/* ==========================================================================
   MakhanaShree — Luxury Design System v3
   Built on top of Tailwind. Palette: Deep Forest + Champagne Gold + Ivory
   ========================================================================== */

:root{
  --ink:#141a14;
  --forest-900:#16241a;
  --forest-800:#1d3123;
  --forest-700:#26412d;
  --forest-600:#33573b;
  --gold-300:#e8cf9a;
  --gold-400:#d8b46a;
  --gold-500:#c2963f;
  --gold-600:#a3792c;
  --ivory:#fbf8f2;
  --sand-100:#f4eee2;
  --sand-200:#e9e0cd;
  --line:rgba(22,36,26,.10);
  --shadow-sm:0 1px 2px rgba(20,26,20,.05), 0 4px 12px rgba(20,26,20,.04);
  --shadow-md:0 10px 30px -10px rgba(20,26,20,.18), 0 2px 8px rgba(20,26,20,.05);
  --shadow-lg:0 30px 70px -25px rgba(20,26,20,.35), 0 8px 24px rgba(20,26,20,.08);
  --ease:cubic-bezier(.22,1,.36,1);
}

html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:var(--ivory)}
::selection{background:var(--gold-300);color:var(--forest-900)}

/* ---------- Typography refinements ---------- */
.font-display{letter-spacing:-.015em;font-feature-settings:"liga" 1,"kern" 1}
.display-xl{font-size:clamp(2.6rem,6.4vw,5.25rem);line-height:.99;letter-spacing:-.03em}
.display-lg{font-size:clamp(2.1rem,4.2vw,3.5rem);line-height:1.06;letter-spacing:-.025em}
.display-md{font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1.12;letter-spacing:-.02em}
.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase}
.lede{font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.7}
.italic-serif{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:500}

/* Gold gradient text */
.text-gilded{
  background:linear-gradient(100deg,#a3792c 0%,#e8cf9a 28%,#c2963f 52%,#f2e3bd 74%,#b9893a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;animation:gild 9s var(--ease) infinite;
}
@keyframes gild{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Fine hairline rule */
.hairline{height:1px;background:linear-gradient(90deg,transparent,var(--line) 15%,var(--line) 85%,transparent)}
.hairline-gold{height:1px;background:linear-gradient(90deg,transparent,rgba(194,150,63,.55),transparent)}

/* ---------- Navigation ---------- */
.nav-link{position:relative;color:#3f453d;transition:color .25s var(--ease);font-weight:500}
.nav-link:hover{color:var(--forest-700)}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1.5px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-300));transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)}
.nav-link:hover::after,.nav-link.is-active::after{transform:scaleX(1)}
.nav-link.is-active{color:var(--forest-700)}

.nav-shell{transition:background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.nav-shell.is-stuck{background:rgba(251,248,242,.88);backdrop-filter:saturate(180%) blur(18px);box-shadow:0 1px 0 var(--line),0 10px 30px -22px rgba(20,26,20,.35)}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-weight:600;letter-spacing:.01em;border-radius:999px;padding:.95rem 2rem;font-size:.95rem;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
  overflow:hidden;min-height:48px;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-gold{background:linear-gradient(135deg,#d8b46a,#c2963f 55%,#a3792c);color:#14200f;
  box-shadow:0 10px 30px -12px rgba(163,121,44,.65),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-gold:hover{box-shadow:0 18px 42px -14px rgba(163,121,44,.75),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-forest{background:linear-gradient(135deg,var(--forest-700),var(--forest-900));color:#f7f3e8;
  box-shadow:0 12px 32px -14px rgba(22,36,26,.7),inset 0 1px 0 rgba(255,255,255,.12)}
.btn-ghost{border:1px solid rgba(22,36,26,.22);color:var(--forest-800);background:transparent}
.btn-ghost:hover{border-color:var(--forest-700);background:rgba(22,36,26,.04)}
.btn-ghost-light{border:1px solid rgba(255,255,255,.32);color:#fbf8f2;background:rgba(255,255,255,.04)}
.btn-ghost-light:hover{border-color:rgba(232,207,154,.85);background:rgba(255,255,255,.09)}
/* sheen sweep */
.btn-gold::before,.btn-forest::before{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.4) 48%,transparent 66%);
  transform:translateX(-120%);transition:transform .75s var(--ease)}
.btn-gold:hover::before,.btn-forest:hover::before{transform:translateX(120%)}

/* ---------- Surfaces / cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:rgba(194,150,63,.35)}
.card-glass{background:#fff;border:1px solid var(--sand-200);border-radius:20px;box-shadow:var(--shadow-lg)}
.gold-frame{position:relative}
.gold-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;background:linear-gradient(140deg,rgba(232,207,154,.85),rgba(194,150,63,.15) 40%,rgba(232,207,154,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

/* Product card media */
.media-zoom{overflow:hidden}
.media-zoom img{transition:transform 1.1s var(--ease),filter .6s var(--ease)}
.group:hover .media-zoom img{transform:scale(1.07)}

/* ---------- Backgrounds & texture ---------- */
.bg-ivory{background:var(--ivory)}
.bg-forest-deep{background:radial-gradient(120% 120% at 15% 0%,#26412d 0%,#1a2b1f 45%,#111c14 100%)}
.bg-linen{background:linear-gradient(180deg,#fbf8f2 0%,#f6f1e6 100%)}
.grain::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.makhana-dots{background-image:radial-gradient(rgba(22,36,26,.07) 2px,transparent 2px);background-size:28px 28px}
.glow-gold{position:absolute;border-radius:9999px;filter:blur(70px);background:radial-gradient(circle,rgba(216,180,106,.55),transparent 70%)}
.glow-leaf{position:absolute;border-radius:9999px;filter:blur(80px);background:radial-gradient(circle,rgba(51,87,59,.45),transparent 70%)}
.vignette::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(10,16,11,.55) 100%)}

/* ---------- Motion ---------- */
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(5deg)}}
.floaty{animation:floaty 6s ease-in-out infinite}
.floaty-slow{animation:floaty 9s ease-in-out infinite}
@keyframes pulseRing{0%{transform:scale(.9);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.pulse-ring::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1.5px solid rgba(216,180,106,.7);animation:pulseRing 2.8s var(--ease) infinite}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.reveal-1{transition-delay:.08s}.reveal-2{transition-delay:.16s}.reveal-3{transition-delay:.24s}
.reveal-4{transition-delay:.32s}.reveal-5{transition-delay:.4s}.reveal-6{transition-delay:.48s}
.rise{opacity:0;transform:translateY(26px);animation:rise 1s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.1s}.d2{animation-delay:.22s}.d3{animation-delay:.34s}.d4{animation-delay:.46s}
.d5{animation-delay:.58s}.d6{animation-delay:.7s}

/* Marquee ticker */
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ticker-track{display:inline-flex;white-space:nowrap;animation:ticker 34s linear infinite}
.marquee-mask{mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}

@media (prefers-reduced-motion:reduce){
  .floaty,.floaty-slow,.ticker-track,.text-gilded,.pulse-ring::after{animation:none}
  .reveal,.rise{opacity:1;transform:none;transition:none;animation:none}
  html{scroll-behavior:auto}
}

/* ---------- Small components ---------- */
.pill{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.4rem .9rem;
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.pill-gold{background:rgba(194,150,63,.12);color:var(--gold-600);border:1px solid rgba(194,150,63,.32)}
.pill-light{background:rgba(255,255,255,.1);color:#f0e9d8;border:1px solid rgba(255,255,255,.2)}
.badge-off{background:linear-gradient(135deg,#d8b46a,#a3792c);color:#14200f;font-weight:800;letter-spacing:.04em}
.stat-num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.field{width:100%;border-radius:14px;border:1px solid var(--sand-200);background:#fff;padding:.8rem 1rem;
  font-size:.9rem;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.field:focus{outline:none;border-color:var(--gold-500);box-shadow:0 0 0 4px rgba(194,150,63,.14)}
.link-arrow{display:inline-flex;align-items:center;gap:.4rem;font-weight:600}
.link-arrow svg,.link-arrow span.arw{transition:transform .35s var(--ease)}
.link-arrow:hover svg,.link-arrow:hover span.arw{transform:translateX(4px)}

/* Numbered process steps */
.step-num{font-family:Fraunces,Georgia,serif;font-size:2.6rem;line-height:1;color:transparent;
  -webkit-text-stroke:1px rgba(194,150,63,.65)}

/* ---------- Chatbot ---------- */
#chatbot-panel{box-shadow:var(--shadow-lg)}
#chat-messages::-webkit-scrollbar{width:5px}
#chat-messages::-webkit-scrollbar-thumb{background:var(--sand-200);border-radius:4px}
.chat-bubble-bot{background:#fff;border:1px solid var(--line);border-radius:16px 16px 16px 5px}
.chat-bubble-user{background:linear-gradient(135deg,var(--forest-700),var(--forest-900));color:#fff;border-radius:16px 16px 5px 16px}

/* ---------- Accessibility ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold-500);outline-offset:3px;border-radius:6px}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;clip:auto;z-index:100;background:#fff;padding:.75rem 1rem;border-radius:10px;box-shadow:var(--shadow-md)}

/* ---------- Order tracking stepper ---------- */
.step-line{position:absolute;top:15px;left:50%;width:100%;height:2px;background:var(--sand-200);z-index:0}
.step-done .step-line{background:linear-gradient(90deg,var(--gold-500),var(--gold-300))}

input[type=number]::-webkit-inner-spin-button{opacity:1}

/* Star rating input */
.star-rate input:checked ~ label,.star-rate label:hover,.star-rate label:hover ~ label{color:var(--gold-500)}

/* Utility */
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
.aspect-luxe{aspect-ratio:4/5}
@media (max-width:640px){.btn{padding:.85rem 1.5rem;font-size:.9rem}}

/* ---------- Blog rich text body ---------- */
.post-body { color: #57534e; line-height: 1.75; }
.post-body p { margin: 1em 0; }
.post-body h2 { font-family: 'Fraunces', serif; font-size: 1.5rem; color: #16241a; margin: 1.8em 0 .6em; }
.post-body h3 { font-family: 'Fraunces', serif; font-size: 1.2rem; color: #16241a; margin: 1.5em 0 .5em; }
.post-body ul, .post-body ol { margin: 1em 0; padding-left: 1.5rem; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { margin: .4em 0; }
.post-body a { color: #3d6b4f; font-weight: 600; text-decoration: underline; }
.post-body img { border-radius: 16px; margin: 1.4em auto; max-width: 100%; height: auto; display: block; }
.post-body blockquote { border-left: 3px solid #d4af37; padding-left: 1rem; font-style: italic; color: #78716c; margin: 1.4em 0; }
.post-body strong { color: #292524; }