/* ============================================
   Lokhit Grow Health — Theme Stylesheet
   Palette derived from brand logo:
   Magenta #A6398E | Green #86BC3B | Gold #E4A73A
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{
  --magenta:#A6398E;
  --magenta-dark:#7C2A6C;
  --magenta-light:#F3E1EE;
  --green:#86BC3B;
  --green-dark:#5F8C24;
  --gold:#E4A73A;
  --cream:#FDFBF6;
  --ink:#2A2320;
  --ink-soft:#6b5f5a;
  --line:#ECE3DE;
  --radius:14px;
  --shadow: 0 10px 30px rgba(124,42,108,.10);

  /* map onto bootstrap variables used across components */
  --bs-primary:#A6398E;
  --bs-success:#86BC3B;
  --bs-warning:#E4A73A;
  --bs-body-font-family:'Poppins', sans-serif;
  --bs-body-color:#2A2320;
  --bs-body-bg:#FDFBF6;
}

body{
  font-family:'Poppins', sans-serif;
  background:var(--cream);
  color:var(--ink);
}
h1,h2,h3,h4,.display-font{
  font-family:'Anton', sans-serif;
  font-weight:400;
  letter-spacing:.5px;
  text-transform:uppercase;
  line-height:1.08;
}
a{ color:inherit; text-decoration:none; }
.text-magenta{ color:var(--magenta-dark) !important; }
.text-green{ color:var(--green-dark) !important; }
.text-soft{ color:var(--ink-soft) !important; }
.bg-cream{ background:var(--cream) !important; }
.bg-magenta{ background:var(--magenta) !important; }
.bg-magenta-dark{ background:var(--magenta-dark) !important; }
.bg-magenta-light{ background:var(--magenta-light) !important; }
.bg-green{ background:var(--green) !important; }
.bg-green-dark{ background:var(--green-dark) !important; }

/* ===== Buttons ===== */
.btn-brand{
  background:var(--magenta); color:#fff; border:none; font-weight:700;
  border-radius:8px; padding:.7rem 1.6rem; box-shadow:var(--shadow);
  transition:transform .15s ease;
}
.btn-brand:hover{ background:var(--magenta-dark); color:#fff; transform:translateY(-2px); }
.btn-brand-outline{
  background:#fff; color:var(--magenta-dark); border:1.5px solid var(--magenta);
  font-weight:700; border-radius:8px; padding:.68rem 1.6rem;
}
.btn-brand-outline:hover{ background:var(--magenta-light); color:var(--magenta-dark); }
.btn-brand-green{
  background:var(--green); color:#fff; border:none; font-weight:700; border-radius:8px;
}
.btn-brand-green:hover{ background:var(--green-dark); color:#fff; }

/* ===== Navbar ===== */
.navbar-brand-mark{
  width:42px;height:42px;border-radius:50%;
  background:conic-gradient(from 200deg, var(--magenta), var(--gold), var(--green), var(--magenta));
  display:flex; align-items:center; justify-content:center;
}
.navbar-brand-mark span{
  width:32px;height:32px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Anton';color:var(--magenta); font-size:14px;
}
.navbar .nav-link{ font-weight:600; color:var(--ink); }
.navbar .nav-link.active, .navbar .nav-link:hover{ color:var(--magenta-dark) !important; }
.brand-tag{
  display:inline-block; background:var(--green); color:#fff; font-weight:700;
  font-size:9px; letter-spacing:1.3px; text-transform:uppercase;
  padding:2px 7px; border-radius:4px;
}
.cart-badge{
  background:var(--gold); color:#3a2a08; font-size:11px; font-weight:800;
}

/* ===== Hero ===== */
.hero-section{
  background:linear-gradient(120deg, var(--magenta-light) 0%, var(--cream) 55%);
}
.hero-visual{
  aspect-ratio:1/1; border-radius:28px; max-width:420px; margin:0 auto;
  background:radial-gradient(circle at 30% 20%, var(--green) 0%, var(--green-dark) 45%, var(--magenta-dark) 100%);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.hero-visual .ring{
  position:absolute; inset:14px; border:2px dashed rgba(255,255,255,.35); border-radius:50%;
  animation:spin 40s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.hero-visual .badge-circle{
  background:#fff; border-radius:50%; width:64%; aspect-ratio:1/1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; box-shadow:0 20px 40px rgba(0,0,0,.18); padding:16px;
}

.stat-box{ border-right:1px solid var(--line); }
.stat-box:last-child{ border-right:none; }
.stat-num{ font-family:'Anton'; font-size:26px; color:var(--green-dark); }

/* ===== Section labels ===== */
.kicker{
  color:var(--green-dark); font-weight:700; font-size:12px; letter-spacing:1.5px;
  text-transform:uppercase; display:block; margin-bottom:6px;
}

/* ===== Category pills ===== */
.cat-pill{
  border:1.5px solid var(--line); background:#fff; color:var(--ink-soft);
  font-weight:600; font-size:13.5px; border-radius:30px; padding:.5rem 1.1rem;
}
.cat-pill.active, .cat-pill:hover{ background:var(--green); border-color:var(--green); color:#fff; }

/* ===== Product cards ===== */
.product-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease; height:100%;
}
.product-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.product-media{
  aspect-ratio:1/0.85; display:flex; align-items:center; justify-content:center; position:relative;
}
.product-media svg{ width:56%; height:auto; }
.product-cat-tag{
  position:absolute; top:10px; left:10px; background:#fff; font-size:10.5px; font-weight:700;
  padding:4px 10px; border-radius:20px; color:var(--magenta-dark);
}
.product-title{ font-family:'Poppins'; text-transform:none; font-weight:700; font-size:15.5px; }
.price-tag{ font-family:'Anton'; font-size:18px; color:var(--magenta-dark); }
.price-mrp{ font-family:'Poppins'; font-size:12px; color:#b7aca7; text-decoration:line-through; font-weight:500; margin-left:6px; }
.add-circle{
  background:var(--magenta-light); color:var(--magenta-dark); width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800; border:none;
}
.add-circle:hover{ background:var(--magenta); color:#fff; }

/* ===== Feature / info cards ===== */
.feature-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; height:100%; }
.feature-icn{
  width:46px;height:46px;border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--green); color:#fff; font-size:20px; margin-bottom:14px;
}

/* ===== Bands ===== */
.band-magenta{ background:var(--magenta-dark); color:#fff; }
.band-magenta .kicker, .band-magenta h2{ color:#fff; }
.band-magenta p{ color:#f0dcee; }

/* ===== CTA ===== */
.cta-band{
  background:linear-gradient(120deg, var(--green-dark), var(--green));
  border-radius:26px; padding:3rem; color:#fff;
}

/* ===== Footer ===== */
footer{ background:#241A20; color:#e9dfe5; }
footer h5{ font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--gold); font-weight:700; }
footer a{ color:#cbb9c3; font-size:13.5px; }
footer a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid #3a2c33; color:#a4939c; font-size:12.5px; }

/* ===== Page header ===== */
.page-header{ background:var(--magenta-light); padding:3rem 0; }

/* ===== Cart page ===== */
.cart-row img, .cart-row svg{ width:60px; }
.cart-media{
  width:70px;height:70px;border-radius:10px;background:var(--magenta-light);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.qty-box{ display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:8px; }
.qty-box button{ width:34px; height:34px; background:none; border:none; font-weight:700; color:var(--magenta-dark); }
.qty-box span{ width:32px; text-align:center; font-weight:700; display:inline-block; }

/* ===== Product detail ===== */
.pd-media{
  aspect-ratio:1/1; border-radius:22px; display:flex; align-items:center; justify-content:center;
}
.pd-media svg{ width:55%; }
.pd-list li{ font-size:13.5px; color:var(--ink-soft); padding-left:22px; position:relative; margin-bottom:8px; list-style:none; }
.pd-list li::before{ content:'✓'; position:absolute; left:0; color:var(--green-dark); font-weight:800; }

/* ===== Offices / contact ===== */
.office-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.office-icn{
  width:38px;height:38px;border-radius:10px; background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* toast */
.toast-brand{ background:var(--ink); color:#fff; }

@media(max-width:767px){
  .stat-box{ border-right:none; border-bottom:1px solid var(--line); }
}