/* ==========================================================================
   HIMPLUS — Pure Himalayan Wellness
   Design tokens + component layer (Tailwind handles utilities)
   ========================================================================== */

:root{
  --hp-green-900:#0E3D13;
  --hp-green-800:#1B5E20;   /* primary */
  --hp-green-700:#2A7A31;
  --hp-green-100:#E7F0E4;
  --hp-green-50:#F3F8F1;
  --hp-gold-600:#B8912F;
  --hp-gold-500:#C9A24B;    /* accent */
  --hp-gold-300:#E4CD8F;
  --hp-ivory:#FBF9F3;       /* background */
  --hp-ink:#1D2019;
  --hp-ink-soft:#5B6156;
  --hp-line:#E7E2D4;
  --hp-radius-lg:1.5rem;
  --hp-radius-md:1rem;
  --hp-shadow-soft:0 10px 30px -12px rgba(27,94,32,.18);
  --hp-shadow-card:0 6px 20px -8px rgba(27,94,32,.15);
  --font-display:'Fraunces', 'Cormorant Garamond', serif;
  --font-body:'Manrope', system-ui, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background-color:var(--hp-ivory);
  color:var(--hp-ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--hp-gold-600);
  outline-offset:2px;
  border-radius:.25rem;
}

/* ---------- Topographic contour motif (signature element) ---------- */
.contour-bg{
  position:relative;
  background-color:var(--hp-ivory);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(27,94,32,.05) 0, transparent 40%),
    radial-gradient(circle at 85% 0%, rgba(201,162,75,.08) 0, transparent 45%);
}
.contour-bg::before{
  content:"";
  position:absolute; inset:0; top:0; height:520px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500' viewBox='0 0 800 500'%3E%3Cg fill='none' stroke='%231B5E20' stroke-opacity='0.07' stroke-width='1.4'%3E%3Cpath d='M0 420 C 120 360, 180 380, 260 320 S 420 260, 520 300 680 220 800 260'/%3E%3Cpath d='M0 450 C 130 400, 190 420, 270 360 S 430 300, 530 340 690 260 800 300'/%3E%3Cpath d='M0 480 C 140 440, 200 460, 280 400 S 440 340, 540 380 700 300 800 340'/%3E%3Cpath d='M0 200 C 100 150, 160 190, 240 140 S 380 90, 480 130 640 70 800 110'/%3E%3Cpath d='M0 230 C 110 180, 170 220, 250 170 S 400 120, 500 160 660 100 800 140'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:top;
  pointer-events:none;
  z-index:-1;
}

.contour-divider{
  height:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='28' viewBox='0 0 400 28'%3E%3Cpath d='M0 20 C 40 5, 80 30, 120 15 S 200 -2, 240 18 320 8 400 16' fill='none' stroke='%23C9A24B' stroke-width='1.6' opacity='0.6'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-size:400px 28px;
}

/* Decorative Himalayan range silhouette (hero section divider) */
.mountain-silhouette{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='200' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpolygon points='0,200 0,130 150,40 260,110 380,20 520,120 650,55 800,140 950,60 1080,130 1200,80 1200,200' fill='%231B5E20' opacity='0.14'/%3E%3Cpolygon points='0,200 0,160 180,90 320,150 460,70 600,150 760,95 900,160 1040,100 1200,150 1200,200' fill='%23C9A24B' opacity='0.16'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:bottom;
}

/* ---------- Glassmorphism navbar ---------- */
.glass{
  background:rgba(251,249,243,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}

/* ---------- Buttons ---------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; border-radius:999px;
  transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--hp-green-800); color:#fff; box-shadow:var(--hp-shadow-soft);}
.btn-primary:hover{background:var(--hp-green-700); box-shadow:0 14px 34px -10px rgba(27,94,32,.35);}
.btn-gold{background:linear-gradient(135deg,var(--hp-gold-500),var(--hp-gold-600)); color:#211a08;}
.btn-gold:hover{filter:brightness(1.06);}
.btn-outline{border:1.5px solid var(--hp-green-800); color:var(--hp-green-800); background:transparent;}
.btn-outline:hover{background:var(--hp-green-800); color:#fff;}
.btn-ghost{color:var(--hp-green-800); background:transparent;}

.btn .ripple{
  position:absolute; border-radius:50%; transform:scale(0);
  animation:hp-ripple .6s linear; background:rgba(255,255,255,.55); pointer-events:none;
}
@keyframes hp-ripple{to{transform:scale(3); opacity:0;}}

/* ---------- Cards ---------- */
.card{
  background:#fff; border-radius:var(--hp-radius-lg); box-shadow:var(--hp-shadow-card);
  border:1px solid rgba(27,94,32,.06);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.group:hover .card,
a:hover > .card,
.card:hover{transform:translateY(-6px); box-shadow:0 22px 40px -16px rgba(27,94,32,.28);}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.68rem; letter-spacing:.04em; font-weight:700;
  padding:.3rem .6rem; border-radius:999px;
}
.badge-sale{background:#FCE9E9; color:#B3261E;}
.badge-new{background:var(--hp-green-100); color:var(--hp-green-800);}
.badge-bestseller{background:#FBF1DA; color:var(--hp-gold-600);}
.badge-stock{background:#FFF1E0; color:#B5590A;}

/* ---------- Nav links ---------- */
.nav-link{
  position:relative;
}
.nav-link::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:2px; background:var(--hp-gold-500);
  transition:right .25s ease;
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after{ right:0; }

/* ---------- Mobile drawer ---------- */
.drawer{
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  box-shadow:0 0 40px rgba(0,0,0,.15);
}

/* ---------- Star ratings ---------- */
.star{ color:var(--hp-gold-500); }
.rating-input i{ cursor:pointer; transition:color .15s ease, transform .15s ease; }
.rating-input i:hover{ transform:scale(1.15); }

/* ---------- Fade / reveal animations ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- Loading skeleton ---------- */
.skeleton{
  background:linear-gradient(90deg, #EDEAE0 25%, #F6F3EA 37%, #EDEAE0 63%);
  background-size:400% 100%; animation:hp-skeleton 1.4s ease infinite; border-radius:.75rem;
}
@keyframes hp-skeleton{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* ---------- Product tabs (product detail page) ---------- */
.tab-btn{ transition:color .2s ease, border-color .2s ease; }
.tab-panel{ animation:hp-fade-in .35s ease; }
@keyframes hp-fade-in{from{opacity:0;}to{opacity:1;}}

/* ---------- Pagination ---------- */
.page-btn{ transition:background-color .2s ease, color .2s ease; }

/* ---------- Price range slider ---------- */
input[type="range"].himplus-range{ accent-color:var(--hp-green-800); }
input[type="range"]{accent-color:var(--hp-green-800);}

/* ---------- Legal / policy page typography ---------- */
.prose-legal h2{ font-family:var(--font-display); font-size:1.375rem; font-weight:600; color:var(--hp-green-800); margin-bottom:.75rem; }
.prose-legal h3{ font-family:var(--font-display); font-size:1.125rem; font-weight:600; margin-bottom:.5rem; margin-top:1.25rem; }
.prose-legal p{ color:var(--hp-ink-soft); line-height:1.75; margin-bottom:.75rem; }
.prose-legal ul{ list-style:disc; padding-left:1.25rem; color:var(--hp-ink-soft); line-height:1.75; }
.prose-legal li{ margin-bottom:.4rem; }
.prose-legal a{ color:var(--hp-green-800); text-decoration:underline; text-underline-offset:2px; }

/* ---------- Toasts (created dynamically by HP.toast()) ---------- */
#toast-container{
  position:fixed; bottom:1.25rem; left:50%; transform:translateX(-50%);
  z-index:200; display:flex; flex-direction:column; gap:.5rem; align-items:center;
  pointer-events:none;
}
.toast{
  background:var(--hp-ink); color:#fff; padding:.75rem 1.25rem; border-radius:999px;
  font-size:.875rem; font-weight:600; box-shadow:0 10px 30px rgba(0,0,0,.25);
  opacity:1; transform:translateY(0); transition:opacity .25s ease, transform .25s ease;
  pointer-events:auto;
}

.hp-eyebrow{font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--hp-gold-600);}

.text-gradient-gold{
  background:linear-gradient(135deg,var(--hp-gold-600),var(--hp-gold-300));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Skip link ---------- */
.skip-link{position:absolute; left:-9999px; top:0; background:var(--hp-green-800); color:#fff; padding:.75rem 1rem; z-index:200; border-radius:0 0 .5rem 0;}
.skip-link:focus{left:0;}

/* ---------- Scrollbar for horizontal rails (category/product carousels) ---------- */
.hp-rail::-webkit-scrollbar{height:6px;}
.hp-rail::-webkit-scrollbar-thumb{background:var(--hp-gold-300); border-radius:999px;}