/* =========================================================
   HARMUKH KASHIR — GLOBAL CSS
   Pure. Sacred. Ours.
   ========================================================= */
@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,500;1,600&family=Jost:wght@300;400;500;600;700&display=swap');

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  --gold:        #C9A84C;
  --gold-light:  #E2C97E;
  --gold-pale:   #F5EDD3;
  --green-deep:  #1A2E1A;
  --green-mid:   #2C4A2C;
  --green-light: #4A7A4A;
  --cream:       #FAF7F0;
  --cream-dark:  #F0EAD8;
  --text-dark:   #1C1C1C;
  --text-mid:    #4A4A3A;
  --text-light:  #8A8A7A;
  --white:       #FFFFFF;

  --sh-gold:  0 8px 40px rgba(201,168,76,.2);
  --sh-card:  0 4px 30px rgba(26,46,26,.08);
  --sh-deep:  0 20px 60px rgba(26,46,26,.18);

  --r-sm:  8px;
  --r-md:  16px;
  --r-lg:  28px;
  --r-xl:  48px;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', sans-serif;

  --ease: cubic-bezier(.25,.46,.45,.94);
  --t: all .4s var(--ease);
  --ts: all .7s var(--ease);
}

/* ─── RESET ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:var(--sans);background:var(--cream);color:var(--text-dark);overflow-x:hidden;line-height:1.65}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:var(--sans)}
input,select,textarea{font-family:var(--sans)}

/* ─── GRAIN OVERLAY ──────────────────────────────────────── */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  opacity:.5;
}

/* ─── TYPOGRAPHY ─────────────────────────────────────────── */
h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:400;line-height:1.12}
h1{font-size:clamp(2.8rem,6vw,5.8rem)}
h2{font-size:clamp(2rem,4vw,3.6rem)}
h3{font-size:clamp(1.4rem,2.5vw,2.1rem)}
h4{font-size:1.25rem}
p{font-size:1rem;color:var(--text-mid);line-height:1.75}
.eyebrow{
  font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
}
em{font-style:italic;color:var(--gold-light)}

/* ─── SCROLL REVEAL ──────────────────────────────────────── */
.sr{opacity:0;transform:translateY(44px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.sr.vis{opacity:1;transform:none}
.sr-l{opacity:0;transform:translateX(-50px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.sr-l.vis{opacity:1;transform:none}
.sr-r{opacity:0;transform:translateX(50px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.sr-r.vis{opacity:1;transform:none}
.sr-s{opacity:0;transform:scale(.92);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.sr-s.vis{opacity:1;transform:none}
.d1{transition-delay:.1s!important}.d2{transition-delay:.2s!important}
.d3{transition-delay:.3s!important}.d4{transition-delay:.4s!important}
.d5{transition-delay:.5s!important}.d6{transition-delay:.6s!important}

/* ─── CURSOR ─────────────────────────────────────────────── */
.cursor{
  position:fixed;width:10px;height:10px;border-radius:50%;
  background:var(--gold);pointer-events:none;z-index:99999;
  transform:translate(-50%,-50%);
  transition:width .35s,height .35s,opacity .3s;
  mix-blend-mode:multiply;
}
.cursor.big{width:48px;height:48px;opacity:.45}

/* ─── PAGE LOADER ────────────────────────────────────────── */
#loader{
  position:fixed;inset:0;background:var(--green-deep);
  z-index:99997;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.6rem;
  transition:opacity .7s var(--ease),visibility .7s;
}
#loader.out{opacity:0;visibility:hidden}
.ld-logo{font-family:var(--serif);font-size:2.6rem;color:var(--cream);letter-spacing:.04em;font-weight:300}
.ld-bar{width:160px;height:2px;background:rgba(255,255,255,.12);border-radius:100px;overflow:hidden;position:relative}
.ld-bar::after{
  content:'';position:absolute;left:-100%;top:0;width:100%;height:100%;
  background:var(--gold);animation:ldFill 1.9s var(--ease) forwards;
}
@keyframes ldFill{to{left:0}}
.ld-sub{font-size:.65rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}

/* ─── NAVBAR ─────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:1.4rem 5%;display:flex;align-items:center;justify-content:space-between;
  transition:var(--t);
}
.nav.stuck{
  background:rgba(26,46,26,.96);backdrop-filter:blur(22px);
  padding:.85rem 5%;box-shadow:0 4px 32px rgba(0,0,0,.22);
}
.nav-logo{
  font-family:var(--serif);font-size:1.55rem;font-weight:600;
  color:var(--cream);letter-spacing:.02em;
  display:flex;flex-direction:column;line-height:1;
}
.nav-logo small{
  font-size:.52rem;font-family:var(--sans);
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:400;
}
.nav-links{display:flex;gap:2.8rem;align-items:center}
.nav-links a{
  font-size:.78rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cream);position:relative;transition:color .3s;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-4px;left:0;
  width:0;height:1px;background:var(--gold);transition:width .35s;
}
.nav-links a:hover,.nav-links a.on{color:var(--gold)}
.nav-links a:hover::after,.nav-links a.on::after{width:100%}
.nav-r{display:flex;gap:1rem;align-items:center}
.nav-btn{
  width:38px;height:38px;border-radius:50%;color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s,color .3s;position:relative;
}
.nav-btn:hover{background:rgba(201,168,76,.18);color:var(--gold)}
.badge{
  position:absolute;top:-2px;right:-2px;width:17px;height:17px;
  background:var(--gold);border-radius:50%;
  font-size:.6rem;font-weight:700;color:var(--green-deep);
  display:flex;align-items:center;justify-content:center;
}
.ham{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.ham span{display:block;width:24px;height:2px;background:var(--cream);transition:var(--t);transform-origin:left}

/* ─── MOBILE DRAWER ──────────────────────────────────────── */
.drawer{
  position:fixed;top:0;right:-100%;width:min(86vw,390px);height:100vh;
  background:var(--green-deep);z-index:1100;
  padding:6rem 2.5rem 3rem;overflow-y:auto;
  transition:right .55s var(--ease);
}
.drawer.open{right:0}
.drawer-ov{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1050;
  opacity:0;pointer-events:none;transition:opacity .4s;
}
.drawer-ov.open{opacity:1;pointer-events:all}
.drawer-x{
  position:absolute;top:1.5rem;right:1.5rem;color:var(--cream);
  font-size:1.4rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;transition:background .3s;
}
.drawer-x:hover{background:rgba(255,255,255,.1)}
.drawer nav{display:flex;flex-direction:column;gap:.25rem;margin-bottom:3rem}
.drawer nav a{
  color:var(--cream);font-size:1.45rem;font-family:var(--serif);
  padding:.65rem 0;border-bottom:1px solid rgba(255,255,255,.07);
  transition:color .3s,padding-left .3s;
}
.drawer nav a:hover{color:var(--gold);padding-left:.5rem}
.drawer-social{display:flex;gap:.8rem;margin-top:2rem}
.drawer-social a{
  width:40px;height:40px;border:1px solid rgba(201,168,76,.35);border-radius:50%;
  color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:.9rem;
  transition:var(--t);
}
.drawer-social a:hover{background:var(--gold);color:var(--green-deep)}

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.9rem 2.2rem;border-radius:100px;
  font-size:.78rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  transition:var(--t);position:relative;overflow:hidden;
}
.btn-gold{background:var(--gold);color:var(--green-deep)}
.btn-gold::before{
  content:'';position:absolute;inset:0;background:var(--green-deep);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);z-index:0;
}
.btn-gold:hover{color:var(--gold);box-shadow:var(--sh-gold)}
.btn-gold:hover::before{transform:scaleX(1);transform-origin:left}
.btn span,.btn svg{position:relative;z-index:1}
.btn-outline{border:1.5px solid var(--gold);color:var(--gold)}
.btn-outline:hover{background:var(--gold);color:var(--green-deep);box-shadow:var(--sh-gold)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.85rem;font-weight:500;color:var(--text-dark);
  border-bottom:1px solid currentColor;padding-bottom:2px;transition:color .3s;
}
.btn-ghost:hover{color:var(--gold)}
.btn-dark{background:var(--green-deep);color:var(--gold)}
.btn-dark:hover{background:var(--green-mid)}

/* ─── LAYOUT HELPERS ─────────────────────────────────────── */
.sec{padding:8rem 5%}
.sec-sm{padding:5rem 5%}
.wrap{max-width:1320px;margin:0 auto}
.sec-hd{text-align:center;margin-bottom:4.5rem}
.sec-hd .eyebrow{display:block;margin-bottom:1rem}
.sec-hd h2{margin-bottom:1.2rem}
.sec-hd p{max-width:560px;margin:0 auto}

/* ─── MARQUEE ────────────────────────────────────────────── */
.mq-wrap{background:var(--green-deep);padding:1.3rem 0;overflow:hidden}
.mq-track{
  display:flex;gap:4rem;width:max-content;white-space:nowrap;
  animation:mqScroll 28s linear infinite;
}
.mq-wrap:hover .mq-track{animation-play-state:paused}
.mq-item{
  display:flex;align-items:center;gap:.8rem;
  font-size:.72rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);
}
.mq-dot{width:4px;height:4px;background:var(--gold-light);border-radius:50%;flex-shrink:0}
@keyframes mqScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ─── TRUST BAR ──────────────────────────────────────────── */
.trust-bar{
  background:var(--cream-dark);
  padding:2.8rem 5%;
  display:flex;align-items:center;justify-content:center;gap:4rem;flex-wrap:wrap;
  border-top:1px solid rgba(201,168,76,.2);
  border-bottom:1px solid rgba(201,168,76,.2);
}
.trust-item{display:flex;align-items:center;gap:1rem}
.trust-ico{
  width:46px;height:46px;background:var(--green-deep);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0;
}
.trust-txt h6{font-family:var(--sans);font-size:.83rem;font-weight:600;margin-bottom:2px}
.trust-txt p{font-size:.74rem;color:var(--text-light)}

/* ─── PRODUCT CARD ───────────────────────────────────────── */
.pcard{
  background:var(--white);border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--sh-card);transition:var(--t);position:relative;
}
.pcard:hover{transform:translateY(-8px);box-shadow:var(--sh-deep)}
.pcard-img{position:relative;aspect-ratio:4/3;overflow:hidden}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.pcard:hover .pcard-img img{transform:scale(1.07)}
.pbadge{
  position:absolute;top:12px;left:12px;
  background:var(--green-deep);color:var(--gold);
  font-size:.62rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  padding:4px 10px;border-radius:100px;
}
.pbadge.sale{background:var(--gold);color:var(--green-deep)}
.pwish{
  position:absolute;top:12px;right:12px;width:34px;height:34px;
  background:rgba(255,255,255,.9);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;color:var(--text-mid);cursor:pointer;transition:var(--t);
}
.pwish:hover,.pwish.on{background:var(--green-deep);color:var(--gold)}
.pcard-body{padding:1.4rem}
.pcat{font-size:.65rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem}
.pcard-body h4{font-family:var(--serif);font-size:1.15rem;margin-bottom:.3rem;color:var(--text-dark)}
.pcard-body p{font-size:.82rem;color:var(--text-light);margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard-ft{display:flex;align-items:center;justify-content:space-between}
.pprice{font-family:var(--serif);font-size:1.4rem;font-weight:600;color:var(--green-deep)}
.pold{font-size:.82rem;color:var(--text-light);text-decoration:line-through;margin-left:5px}
.padd{
  width:36px;height:36px;background:var(--green-deep);color:var(--gold);
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  transition:var(--t);
}
.padd:hover{background:var(--gold);color:var(--green-deep);transform:rotate(90deg)}

/* ─── GRID ───────────────────────────────────────────────── */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:2rem}

/* ─── FILTER BAR ─────────────────────────────────────────── */
.fbar{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:2.5rem}
.fpill{
  padding:.5rem 1.2rem;border-radius:100px;
  border:1.5px solid var(--cream-dark);
  font-size:.76rem;font-weight:500;letter-spacing:.07em;
  color:var(--text-mid);cursor:pointer;transition:var(--t);
}
.fpill:hover,.fpill.on{background:var(--green-deep);color:var(--gold);border-color:var(--green-deep)}

/* ─── QTY ────────────────────────────────────────────────── */
.qty{display:flex;align-items:center;border:1.5px solid var(--cream-dark);border-radius:100px;overflow:hidden;width:fit-content}
.qty-b{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--text-dark);transition:background .2s}
.qty-b:hover{background:var(--cream-dark)}
.qty-n{width:38px;text-align:center;font-size:.9rem;font-weight:600;border:none;background:none;font-family:var(--sans)}

/* ─── ACCORDION ──────────────────────────────────────────── */
.acc-item{border-bottom:1px solid rgba(201,168,76,.15)}
.acc-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.15rem 0;cursor:pointer;font-weight:500;font-size:.95rem;transition:color .3s;
}
.acc-hd:hover{color:var(--gold)}
.acc-ic{font-size:1.2rem;color:var(--gold);transition:transform .3s}
.acc-item.open .acc-ic{transform:rotate(45deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s;font-size:.9rem;color:var(--text-mid);line-height:1.8}
.acc-item.open .acc-body{max-height:320px;padding-bottom:1.2rem}

/* ─── STARS ──────────────────────────────────────────────── */
.stars{display:flex;gap:2px;color:var(--gold);font-size:.88rem}

/* ─── FORM ───────────────────────────────────────────────── */
.fg{margin-bottom:1.5rem}
.fl{display:block;font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mid);margin-bottom:.5rem}
.fi{
  width:100%;padding:.9rem 1.2rem;border:1.5px solid var(--cream-dark);
  border-radius:var(--r-sm);font-size:.95rem;color:var(--text-dark);
  background:var(--white);outline:none;transition:border-color .3s,box-shadow .3s;
}
.fi:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.12)}
.fi::placeholder{color:var(--text-light)}
textarea.fi{min-height:140px;resize:vertical}

/* ─── PAGE HERO ──────────────────────────────────────────── */
.phero{
  min-height:52vh;background:var(--green-deep);
  display:flex;align-items:flex-end;padding:0 5% 5rem;
  position:relative;overflow:hidden;
}
.phero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 75% 50%,rgba(201,168,76,.12) 0%,transparent 65%);
}
.phero-txt{position:relative;z-index:1}
.phero-txt .eyebrow{display:block;margin-bottom:1rem}
.phero-txt h1{color:var(--cream)}
.bc{display:flex;align-items:center;gap:.5rem;margin-top:1.5rem;font-size:.8rem;color:rgba(250,247,240,.45)}
.bc a{color:inherit;transition:color .3s}.bc a:hover{color:var(--gold)}
.bc span{color:var(--gold)}

/* ─── TOAST ──────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:2rem;right:2rem;z-index:9000;
  background:var(--green-deep);color:var(--cream);
  padding:1rem 1.5rem;border-radius:var(--r-sm);border-left:3px solid var(--gold);
  font-size:.875rem;font-weight:500;max-width:320px;
  display:flex;align-items:center;gap:.8rem;box-shadow:var(--sh-deep);
  transform:translateY(100px);opacity:0;
  transition:transform .45s var(--ease),opacity .45s;
}
.toast.on{transform:translateY(0);opacity:1}
.toast-ic{color:var(--gold);font-size:1.1rem}

/* ─── WHATSAPP FLOAT ─────────────────────────────────────── */
.wa-float{
  position:fixed;bottom:2rem;left:2rem;z-index:800;
  width:54px;height:54px;background:#25D366;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.5rem;
  box-shadow:0 4px 22px rgba(37,211,102,.42);
  animation:waPulse 2.2s ease-in-out infinite;
  transition:transform .3s;
}
.wa-float:hover{transform:scale(1.1);animation:none}
@keyframes waPulse{0%,100%{box-shadow:0 4px 22px rgba(37,211,102,.4)}50%{box-shadow:0 4px 36px rgba(37,211,102,.7)}}

/* ─── FOOTER ─────────────────────────────────────────────── */
.footer{background:var(--green-deep);color:var(--cream);padding:6.5rem 5% 3rem}
.ft-grid{display:grid;grid-template-columns:1.9fr 1fr 1fr 1fr;gap:4rem;padding-bottom:4rem;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:2.5rem}
.ft-brand p{color:rgba(250,247,240,.55);font-size:.88rem;line-height:1.85;margin:1.2rem 0 1.6rem}
.ft-social{display:flex;gap:.8rem}
.ft-social a{width:38px;height:38px;border:1px solid rgba(201,168,76,.3);border-radius:50%;color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:var(--t)}
.ft-social a:hover{background:var(--gold);color:var(--green-deep);border-color:var(--gold)}
.ft-col h5{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem}
.ft-col ul{display:flex;flex-direction:column;gap:.8rem}
.ft-col ul a{color:rgba(250,247,240,.6);font-size:.87rem;transition:color .3s,padding-left .3s}
.ft-col ul a:hover{color:var(--gold);padding-left:4px}
.ft-bot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.ft-bot p{color:rgba(250,247,240,.35);font-size:.78rem}
.ft-pays{display:flex;gap:.5rem}
.ft-pays span{background:rgba(255,255,255,.08);color:rgba(250,247,240,.6);font-size:.68rem;padding:3px 9px;border-radius:5px}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:1060px){.ft-grid{grid-template-columns:1fr 1fr}.trust-bar{gap:2.5rem}}
@media(max-width:768px){
  .nav-links{display:none}.ham{display:flex}
  .sec{padding:5rem 5%}.pgrid{grid-template-columns:repeat(2,1fr);gap:1.2rem}
  .ft-grid{grid-template-columns:1fr;gap:2.5rem}
  .trust-bar{gap:2rem}
}
@media(max-width:480px){
  .pgrid{grid-template-columns:1fr}
  .trust-bar{flex-direction:column;align-items:flex-start;padding:2rem 5%}
}