/* ============================================================
   RUDRAA RATNA — Relaunch Design System
   Sacred Luxury: ivory canvas · temple maroon · gold leaf
   ============================================================ */

:root{
  /* ---- Surfaces ---- */
  --ivory:    #FCF8F1;
  --ivory-2:  #F6EDDD;
  --ivory-3:  #EFE3CE;
  --paper:    #FFFFFF;

  /* ---- Brand ---- */
  --maroon:   #57161B;
  --maroon-2: #6E1E23;
  --garnet:   #8B2B2F;
  --maroon-ink: #3E0F13;

  /* ---- Gold ---- */
  --gold:     #B0823A;
  --gold-2:   #C6A150;
  --gold-soft:#E4CD92;
  --gold-ghost: rgba(176,130,58,.13);
  --gold-line:  rgba(176,130,58,.34);

  /* ---- Ink ---- */
  --ink:   #23201C;
  --ink-2: #574C40;
  --ink-3: #897C6B;
  --ink-4: #B4A998;

  /* ---- Lines ---- */
  --line:   rgba(35,32,28,.12);
  --line-2: rgba(35,32,28,.20);
  --line-on-dark: rgba(228,205,146,.22);

  /* ---- Semantic ---- */
  --leaf:   #3E6B4E;
  --leaf-bg:#EAF1EA;
  --wa:     #1FA855;
  --wa-2:   #128C42;
  --rose:   #B85F74;

  /* ---- Type ---- */
  --display: 'Cormorant Garamond', Georgia, serif;
  --body:    'Hanken Grotesk', system-ui, sans-serif;
  --deva:    'Tiro Devanagari Sanskrit', 'Cormorant Garamond', serif;

  /* ---- Spacing (8pt) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;
  --s20:80px; --s24:96px; --s32:128px;

  /* ---- Radius ---- */
  --r1:3px; --r2:8px; --r3:14px; --r4:22px; --pill:999px;

  /* ---- Shadow ---- */
  --sh1: 0 1px 2px rgba(40,28,14,.06), 0 4px 14px rgba(40,28,14,.05);
  --sh2: 0 8px 30px rgba(48,30,12,.10), 0 2px 6px rgba(48,30,12,.06);
  --sh3: 0 24px 60px rgba(48,30,12,.16), 0 6px 18px rgba(48,30,12,.08);
  --sh-gold: 0 10px 34px rgba(176,130,58,.26);

  /* ---- Layout ---- */
  --maxw: 1240px;
  --nav-h: 70px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.45,0,.55,1);
}

/* ============================================================ RESET */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.6;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
a{ color:inherit; text-decoration:none; }
input,textarea,select{ font-family:inherit; }
::selection{ background:var(--gold-soft); color:var(--maroon-ink); }

/* paper grain */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:.5;
  background:
    radial-gradient(rgba(35,32,28,.018) 1px, transparent 1.4px) 0 0/4px 4px;
}
#root{ position:relative; z-index:1; }

/* ============================================================ TYPE */
.display{ font-family:var(--display); font-weight:500; line-height:1.02; letter-spacing:-.01em; color:var(--maroon-ink); }
.serif{ font-family:var(--display); }
.deva{ font-family:var(--deva); font-weight:400; }

h1,h2,h3{ margin:0; font-family:var(--display); font-weight:500; color:var(--maroon-ink); line-height:1.06; letter-spacing:-.01em; }
.h-hero{ font-size:clamp(42px, 7vw, 88px); font-weight:500; }
.h1{ font-size:clamp(34px, 5vw, 60px); }
.h2{ font-size:clamp(27px, 3.4vw, 44px); }
.h3{ font-size:clamp(21px, 2.2vw, 28px); }
p{ margin:0 0 1em; color:var(--ink-2); }
.lead{ font-size:clamp(17px,1.5vw,21px); color:var(--ink-2); line-height:1.62; }

.eyebrow{
  font-family:var(--body); font-weight:600;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--gold-line); }
.eyebrow.center{ }
.eyebrow.no-rule::before{ display:none; }

.muted{ color:var(--ink-3); }
.gold-text{ color:var(--gold); }
.maroon-text{ color:var(--maroon); }

/* ============================================================ LAYOUT */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-left:clamp(20px,5vw,48px); padding-right:clamp(20px,5vw,48px); }
.section{ padding-block:clamp(56px,8vw,112px); position:relative; }
.section.tight{ padding-block:clamp(40px,5vw,72px); }
.center{ text-align:center; }
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; }
.between{ justify-content:space-between; }
.wrapflex{ flex-wrap:wrap; }
.gap2{ gap:8px; } .gap3{ gap:12px; } .gap4{ gap:16px; } .gap6{ gap:24px; } .gap8{ gap:32px; }

.section-head{ max-width:680px; }
.section-head.center{ margin-inline:auto; }
.section-head .h2{ margin-top:14px; }
.section-head p{ margin-top:14px; }

/* divider ornaments */
.ornament{ display:flex; align-items:center; justify-content:center; gap:14px; color:var(--gold); }
.ornament::before,.ornament::after{ content:''; height:1px; width:54px; background:linear-gradient(90deg,transparent,var(--gold-line)); }
.ornament::after{ background:linear-gradient(270deg,transparent,var(--gold-line)); }

/* ============================================================ BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--body); font-weight:600; font-size:14.5px; letter-spacing:.01em;
  padding:14px 26px; border-radius:var(--pill); position:relative;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .25s, color .25s;
  white-space:nowrap; line-height:1;
}
.btn svg{ width:17px; height:17px; }
.btn-gold{ background:linear-gradient(180deg,var(--gold-2),var(--gold)); color:#3a2a0e; box-shadow:var(--sh-gold); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(176,130,58,.34); }
.btn-maroon{ background:var(--maroon); color:var(--ivory); }
.btn-maroon:hover{ background:var(--maroon-2); transform:translateY(-2px); box-shadow:var(--sh2); }
.btn-wa{ background:var(--wa); color:#fff; box-shadow:0 10px 28px rgba(31,168,85,.28); }
.btn-wa:hover{ background:var(--wa-2); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--maroon-ink); border:1px solid var(--line-2); }
.btn-ghost:hover{ border-color:var(--maroon); background:rgba(87,22,27,.04); }
.btn-outline-gold{ background:transparent; color:var(--gold); border:1px solid var(--gold-line); }
.btn-outline-gold:hover{ background:var(--gold-ghost); border-color:var(--gold); }
.btn-lg{ padding:17px 34px; font-size:16px; }
.btn-sm{ padding:10px 18px; font-size:13px; }
.btn-block{ width:100%; }
.btn:active{ transform:translateY(0); }

.link-underline{ position:relative; color:var(--maroon); font-weight:600; display:inline-flex; align-items:center; gap:7px; }
.link-underline::after{ content:''; position:absolute; left:0; bottom:-3px; height:1.5px; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-out); }
.link-underline:hover::after{ transform:scaleX(1); }
.link-underline:hover{ color:var(--maroon-ink); }

/* ============================================================ CHIPS / BADGES */
.chip{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; letter-spacing:.02em;
  padding:7px 13px; border-radius:var(--pill);
  background:var(--paper); border:1px solid var(--line);
  color:var(--ink-2); transition:all .25s var(--ease);
}
.badge{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 11px; border-radius:var(--pill);
}
.badge-gold{ background:var(--gold-ghost); color:var(--gold); border:1px solid var(--gold-line); }
.badge-leaf{ background:var(--leaf-bg); color:var(--leaf); }
.badge-maroon{ background:rgba(87,22,27,.08); color:var(--maroon); }
.badge-sale{ background:var(--garnet); color:#fff; }

.pill-meta{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }

/* ============================================================ CARDS */
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r3); box-shadow:var(--sh1); transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s; }

/* product card */
.pcard{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r3);
  overflow:hidden; display:flex; flex-direction:column; position:relative;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s;
  cursor:pointer;
}
.pcard:hover{ transform:translateY(-6px); box-shadow:var(--sh3); border-color:var(--gold-line); }
.pcard__media{ position:relative; aspect-ratio:1/1; background:radial-gradient(120% 120% at 50% 18%, var(--ivory) 0%, var(--ivory-2) 60%, var(--ivory-3) 100%); display:grid; place-items:center; overflow:hidden; }
.pcard__media .gemart{ transform:scale(.92); transition:transform .6s var(--ease-out); }
.pcard:hover .pcard__media .gemart{ transform:scale(1); }
.pcard__tags{ position:absolute; top:12px; left:12px; display:flex; gap:6px; flex-wrap:wrap; z-index:2; }
.pcard__fav{ position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:var(--pill); background:rgba(255,255,255,.85); backdrop-filter:blur(6px); display:grid; place-items:center; color:var(--ink-3); z-index:2; transition:.25s; }
.pcard__fav:hover{ color:var(--garnet); background:#fff; }
.pcard__body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.pcard__cat{ font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.pcard__name{ font-family:var(--display); font-size:21px; font-weight:600; color:var(--maroon-ink); line-height:1.12; }
.pcard__name-link{ display:block; }
.pcard__deva{ display:block; font-family:var(--deva); font-size:13px; color:var(--ink-3); margin-top:-3px; }
.pcard__price{ display:flex; align-items:baseline; gap:9px; margin-top:auto; padding-top:6px; }
.pcard__price .now{ font-family:var(--display); font-size:23px; font-weight:600; color:var(--maroon-ink); }
.pcard__price .was{ font-size:14px; color:var(--ink-4); text-decoration:line-through; }
.pcard__wa{ margin-top:10px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:13.5px; padding:11px; border-radius:var(--pill); border:1px solid var(--line-2); color:var(--maroon); transition:.25s; }
.pcard__wa:hover{ background:var(--wa); color:#fff; border-color:var(--wa); }

/* ============================================================ GEM ART */
.gemart{ position:relative; display:grid; place-items:center; }
.gemart .halo{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }

/* ============================================================ STARS */
.stars{ display:inline-flex; gap:2px; color:var(--gold); }
.stars svg{ width:15px; height:15px; }

/* ============================================================ INPUTS */
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--ink-2); }
.input, .select, textarea.input{
  width:100%; padding:13px 15px; border-radius:var(--r2);
  border:1px solid var(--line-2); background:var(--paper); color:var(--ink);
  font-size:15px; transition:border-color .2s, box-shadow .2s;
}
.input:focus, .select:focus, textarea.input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-ghost); }
textarea.input{ resize:vertical; min-height:96px; }

/* ============================================================ TRUST STRIP */
.trust-strip{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); }
.trust-strip .ti{ background:var(--ivory); display:flex; align-items:center; gap:12px; padding:22px clamp(14px,2vw,26px); }
.trust-strip .ti svg{ width:26px; height:26px; color:var(--gold); flex-shrink:0; }
.trust-strip .ti b{ display:block; font-size:13.5px; color:var(--maroon-ink); font-weight:700; line-height:1.25; }
.trust-strip .ti span{ display:block; font-size:11.5px; color:var(--ink-3); line-height:1.3; margin-top:2px; }
.trust-strip .ti > div{ min-width:0; }
@media(max-width:900px){ .trust-strip{ grid-template-columns:repeat(2,1fr); } .trust-strip .ti:last-child{ grid-column:1/-1; } }
@media(max-width:520px){ .trust-strip{ grid-template-columns:1fr; } .trust-strip .ti:last-child{ grid-column:auto; } }

/* ============================================================ ANIM */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes shimmer{ 0%{ transform:translateX(-120%) skewX(-18deg);} 60%,100%{ transform:translateX(220%) skewX(-18deg);} }
@keyframes spinSlow{ to{ transform:rotate(360deg); } }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }
.reveal{ opacity:0; }
.reveal.in{ animation:fadeUp .7s var(--ease-out) both; }
.reveal.d1{ animation-delay:.08s; } .reveal.d2{ animation-delay:.16s; } .reveal.d3{ animation-delay:.24s; } .reveal.d4{ animation-delay:.32s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; animation:none !important; } *{ scroll-behavior:auto; } }

/* ============================================================ UTIL */
.grid{ display:grid; }
.hide{ display:none !important; }
.relative{ position:relative; }
.maxw-md{ max-width:760px; } .maxw-sm{ max-width:560px; }
.mx-auto{ margin-inline:auto; }
.mt2{ margin-top:8px;} .mt3{ margin-top:12px;} .mt4{ margin-top:16px;} .mt6{ margin-top:24px;} .mt8{ margin-top:32px;} .mt10{ margin-top:40px; }
.divider-h{ height:1px; background:var(--line); border:0; margin:0; }