:root {
  --forest: #0d4738;
  --forest-deep: #07372c;
  --sage: #e7eedb;
  --sage-strong: #becfa7;
  --cream: #fbf8ef;
  --cream-deep: #f4efdf;
  --ink: #14372f;
  --muted: #60706a;
  --gold: #a8793a;
  --line: rgba(20, 55, 47, 0.13);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }
.svgSprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: inline-block; width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.noScroll { overflow: hidden !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }

.announcement {
  min-height: 34px;
  padding: 7px 24px;
  background: var(--forest);
  color: #f8f5e9;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: .08em;
  text-align: center;
}

.announcementDot { width: 3px; height: 3px; background: #b9c99d; border-radius: 50%; }
.announcement a { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; text-decoration: none; }
.announcement a:hover { text-decoration: underline; text-underline-offset: 3px; }

.siteHeader {
  height: 92px;
  max-width: 1360px;
  padding: 0 46px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: sticky;
  top: 0;
  background: rgba(251, 248, 239, .92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(20, 55, 47, .07);
  z-index: 20;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--forest);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .17em;
  text-decoration: none;
  width: max-content;
}

.brandMark { color: #426544; display: grid; place-items: center; transform: rotate(-8deg); }

.desktopNav { display: flex; align-items: center; gap: 42px; }
.desktopNav button, .desktopNav a {
  border: 0;
  background: transparent;
  padding: 11px 0;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  color: inherit;
  text-decoration: none;
}
.desktopNav button::after, .desktopNav a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 4px;
  width: 0; height: 1px;
  background: var(--forest);
  transition: width .25s ease, left .25s ease;
}
.desktopNav button:hover::after, .desktopNav a:hover::after { width: 100%; left: 0; }

.headerActions { justify-self: end; display: flex; gap: 10px; }
.headerWhatsApp {
  min-height: 51px;
  padding: 0 18px;
  border-radius: 9px;
  background: var(--forest);
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.headerWhatsApp:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(13, 71, 56, .18); }
.iconButton, .plainIconButton {
  border: 0; background: none; padding: 0; cursor: pointer;
  display: grid; place-items: center;
}
.iconButton {
  width: 51px; height: 51px;
  border: 1px solid var(--forest);
  border-radius: 9px;
  transition: transform .2s ease, background .2s ease;
}
.iconButton:hover { transform: translateY(-2px); background: var(--sage); }
.bagButton { position: relative; }
.cartCount {
  position: absolute; top: -7px; right: -7px;
  min-width: 21px; height: 21px; padding: 0 5px;
  border-radius: 99px; background: var(--forest); color: white;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
  border: 2px solid var(--cream);
}
.mobileMenuButton { display: none; }

.hero {
  min-height: 635px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 54px 52px 38px;
  display: grid;
  grid-template-columns: 45% 55%;
  align-items: center;
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  left: -11%; right: 38%; bottom: -2%; height: 25%;
  background: linear-gradient(130deg, transparent 8%, rgba(212, 224, 190, .42));
  border-radius: 0 100% 0 0;
  pointer-events: none;
}

.heroCopy { position: relative; z-index: 4; padding-left: 6px; animation: riseIn .7s ease both; }
.eyebrow {
  margin: 0 0 22px;
  font-size: 14px;
  letter-spacing: .29em;
  font-weight: 700;
}
.hero h1 {
  margin: 0;
  max-width: 610px;
  color: var(--forest);
  font-size: clamp(52px, 5.1vw, 76px);
  line-height: .99;
  letter-spacing: -.052em;
  font-weight: 800;
}
.heroText {
  max-width: 470px;
  margin: 26px 0 29px;
  color: #29483f;
  font-size: 19px;
  line-height: 1.53;
}
.heroPurchase { display: flex; align-items: stretch; gap: 28px; }
.primaryButton {
  min-height: 67px;
  padding: 0 32px;
  border: 1px solid var(--forest);
  border-radius: 999px;
  background: var(--forest);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.primaryButton:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(13, 71, 56, .2); background: var(--forest-deep); }
.priceBlock {
  min-width: 120px;
  border-left: 1px solid #bdc8b7;
  padding: 5px 0 4px 27px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.priceBlock strong { font-size: 32px; line-height: 1; }
.priceBlock span { margin-top: 7px; font-size: 16px; }
.heroWhatsApp { width: max-content; max-width: 100%; margin-top: 20px; display: flex; align-items: center; gap: 8px; color: #315249; font-size: 12px; text-decoration: none; }
.heroWhatsApp svg { color: #168a4c; }
.heroWhatsApp strong { color: var(--forest); }
.heroWhatsApp:hover span { text-decoration: underline; text-underline-offset: 3px; }

.heroVisual {
  align-self: stretch;
  min-height: 520px;
  position: relative;
  display: grid;
  place-items: center;
  animation: softReveal .8s .12s ease both;
}
.organicShape { position: absolute; border-radius: 46% 54% 55% 45% / 54% 42% 58% 46%; pointer-events: none; }
.shapeOne { width: 70%; height: 86%; top: 2%; right: 9%; background: #e4ebd5; transform: rotate(11deg); }
.shapeTwo { width: 76%; height: 51%; right: -7%; bottom: 2%; background: #cbd9af; transform: rotate(-10deg); opacity: .7; }
.imageFrame {
  width: min(76%, 580px);
  height: 520px;
  position: relative;
  z-index: 2;
  border-radius: 47% 53% 44% 56% / 38% 42% 58% 62%;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(52, 62, 35, .18);
  background: #d7c19c;
}
.imageFrame img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; display: block; transform: scale(1.05); }
.floatingNote {
  position: absolute;
  z-index: 4;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 15px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  background: rgba(255, 252, 243, .88);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(39, 54, 31, .12);
  font-size: 13px; font-weight: 700;
}
.noteTop { right: 1%; top: 19%; }
.noteBottom { left: 1%; bottom: 14%; }

.trustBar {
  max-width: 1260px;
  min-height: 90px;
  margin: 0 auto 32px;
  padding: 16px 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  border: 1px solid rgba(50, 90, 69, .1);
  border-radius: 25px;
  background: rgba(238, 242, 225, .72);
  position: relative;
  z-index: 5;
}
.trustBar > div {
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border-right: 1px solid #ced5c2;
}
.trustBar > div:last-child { border-right: 0; }
.trustIcon {
  width: 48px; height: 48px; border: 1px solid #7a9279; border-radius: 50%;
  display: grid; place-items: center;
}
.trustBar strong, .trustBar small { display: block; }
.trustBar strong { font-size: 16px; }
.trustBar small { margin-top: 4px; color: var(--muted); font-size: 12px; }

.mobileMenu, .cartDrawer {
  position: fixed;
  top: 0; bottom: 0; right: 0;
  z-index: 100;
  width: min(92vw, 470px);
  background: var(--cream);
  padding: 28px;
  transform: translateX(104%);
  transition: transform .32s cubic-bezier(.22,.7,.25,1);
  box-shadow: -30px 0 80px rgba(5, 39, 30, .16);
}
.mobileMenu.open, .cartDrawer.open { transform: translateX(0); }
.drawerHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.drawerHeader h2 { margin: 5px 0 0; font-size: 27px; line-height: 1.08; }
.plainIconButton { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; flex: 0 0 auto; }
.drawerEyebrow { margin: 0; font-size: 11px; letter-spacing: .2em; font-weight: 800; color: var(--muted); }
.mobileMenu nav { display: flex; flex-direction: column; padding-top: 24px; }
.mobileMenu nav button { border: 0; border-bottom: 1px solid var(--line); background: none; padding: 20px 0; display: flex; gap: 20px; font-size: 27px; font-weight: 700; cursor: pointer; text-align: left; }
.mobileMenu nav button span { padding-top: 6px; color: var(--gold); font-size: 10px; letter-spacing: .15em; }
.mobileMenu nav a { border-bottom: 1px solid var(--line); padding: 20px 0; display: flex; gap: 20px; color: var(--ink); font-size: 27px; font-weight: 700; text-decoration: none; }
.mobileMenu nav a span { padding-top: 6px; color: var(--gold); font-size: 10px; letter-spacing: .15em; }
.emptyCart { min-height: calc(100vh - 130px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.emptyCart > span { width: 74px; height: 74px; display: grid; place-items: center; background: var(--sage); border-radius: 50%; }
.emptyCart h3 { margin: 23px 0 8px; font-size: 23px; }
.emptyCart p { max-width: 340px; margin: 0 0 28px; color: var(--muted); line-height: 1.65; }
.emptyCart .primaryButton { min-height: 57px; font-size: 15px; }
.pageOverlay { position: fixed; inset: 0; z-index: 90; border: 0; background: rgba(3, 29, 22, .46); backdrop-filter: blur(2px); cursor: pointer; }

.sectionShell { max-width: 1260px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.sectionHeading { max-width: 650px; }
.sectionHeading h2, .storyCopy h2, .ingredientIntro h2, .shopDetails h2, .reviewCopy h2, .faqIntro h2, .newsletterSection h2 {
  margin: 0;
  color: var(--forest);
  font-size: clamp(39px, 4.25vw, 64px);
  line-height: 1.04;
  letter-spacing: -.045em;
}
.sectionHeading > p:last-child, .faqIntro > p:last-child {
  margin: 22px auto 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
  max-width: 610px;
}
.centeredHeading { margin: 0 auto; text-align: center; }

.benefitsSection { padding-top: 118px; padding-bottom: 128px; }
.benefitGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 58px; }
.benefitCard {
  min-height: 338px;
  padding: 28px 25px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fffdf6;
  position: relative;
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
}
.benefitCard:nth-child(even) { background: #edf2e3; }
.benefitCard:hover { transform: translateY(-7px); box-shadow: 0 24px 55px rgba(22, 63, 50, .1); }
.benefitCard::after { content: ""; position: absolute; width: 110px; height: 110px; border-radius: 50%; background: rgba(182, 204, 157, .25); right: -42px; bottom: -46px; }
.cardNumber { position: absolute; right: 24px; top: 22px; color: #8c9b8c; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.featureIcon { width: 55px; height: 55px; display: grid; place-items: center; border-radius: 50%; background: var(--forest); color: white; }
.benefitCard h3 { margin: 56px 0 13px; max-width: 205px; font-size: 21px; line-height: 1.14; }
.benefitCard p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

.storySection { padding-top: 28px; padding-bottom: 128px; display: grid; grid-template-columns: 53% 47%; align-items: center; gap: 75px; }
.storyImage { min-height: 650px; border-radius: 230px 230px 26px 26px; overflow: hidden; position: relative; box-shadow: 0 35px 75px rgba(45, 58, 37, .14); }
.storyImage img { width: 100%; height: 650px; object-fit: cover; display: block; }
.storyStamp { position: absolute; right: 22px; bottom: 22px; width: 155px; height: 155px; border-radius: 50%; background: rgba(253, 249, 236, .93); backdrop-filter: blur(8px); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 8px; box-shadow: 0 16px 35px rgba(15, 54, 43, .14); }
.storyStamp span { font-size: 11px; line-height: 1.35; letter-spacing: .06em; }
.storyStamp strong { font-size: 13px; }
.storyCopy > p:not(.eyebrow) { margin: 24px 0 0; color: var(--muted); font-size: 17px; line-height: 1.8; }
.checkList { list-style: none; margin: 29px 0; padding: 0; display: grid; gap: 16px; }
.checkList li { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.checkList li span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: var(--sage); color: var(--forest); }
.textButton { border: 0; border-bottom: 1px solid var(--forest); background: none; padding: 7px 0; display: inline-flex; align-items: center; gap: 11px; color: var(--forest); font-weight: 800; cursor: pointer; }

.ingredientsSection { background: var(--forest); color: #f7f5e9; position: relative; overflow: hidden; }
.ingredientsSection::before { content: ""; position: absolute; width: 480px; height: 480px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; left: -250px; top: -200px; }
.ingredientsInner { min-height: 680px; padding-top: 105px; padding-bottom: 105px; display: grid; grid-template-columns: 52% 48%; align-items: center; gap: 48px; }
.ingredientIntro { position: relative; z-index: 2; }
.ingredientIntro .eyebrow { color: #c5d1a9; }
.ingredientIntro h2 { color: #fffaf0; max-width: 690px; }
.ingredientIntro > p:not(.eyebrow) { max-width: 650px; margin: 25px 0 34px; color: #c8d4cd; font-size: 17px; line-height: 1.8; }
.ingredientFacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.13); }
.ingredientFacts div { display: flex; align-items: flex-start; gap: 11px; }
.ingredientFacts strong { color: #c0d397; font-size: 12px; letter-spacing: .12em; }
.ingredientFacts span { color: #f7f4e8; font-size: 13px; line-height: 1.5; }
.ingredientVisual { min-height: 470px; position: relative; display: grid; place-items: center; }
.amlaOrb { width: 330px; height: 330px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #dfe98d 0 8%, #aac45e 33%, #77933d 72%, #526d28 100%); color: #173e31; box-shadow: inset -28px -26px 52px rgba(40,65,20,.25), 0 40px 80px rgba(2,25,17,.3); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.amlaOrb::before { content: ""; width: 100px; height: 18px; position: absolute; top: 35px; border-radius: 50%; background: rgba(80,107,36,.32); transform: rotate(-7deg); }
.amlaOrb::after { content: ""; position: absolute; width: 65px; height: 34px; left: 47%; top: -10px; border-radius: 100% 0 100% 0; transform: rotate(-20deg); background: #739244; }
.amlaOrb span { font-size: 51px; letter-spacing: .08em; font-weight: 900; }
.amlaOrb small { margin-top: 7px; font-size: 13px; letter-spacing: .16em; }
.ingredientCard { position: absolute; min-width: 205px; padding: 15px 17px; border: 1px solid rgba(255,255,255,.2); border-radius: 15px; background: rgba(250,248,236,.11); backdrop-filter: blur(12px); display: grid; grid-template-columns: auto 1fr; column-gap: 10px; box-shadow: 0 18px 40px rgba(2,24,17,.22); }
.ingredientCard svg { grid-row: 1 / 3; color: #d7e4b3; }
.ingredientCard strong { font-size: 13px; }
.ingredientCard span { color: #bccbc3; font-size: 11px; margin-top: 4px; }
.ingredientCardOne { left: 2px; top: 69px; }
.ingredientCardTwo { right: -8px; bottom: 66px; }

.ritualSection { padding-top: 120px; padding-bottom: 120px; }
.ritualSection .sectionHeading { max-width: 800px; }
.ritualGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 55px; }
.ritualGrid article { min-height: 210px; padding: 30px; border: 1px solid var(--line); border-radius: 20px; display: flex; align-items: flex-start; gap: 22px; background: #fffdf7; }
.ritualNumber { flex: 0 0 auto; width: 48px; height: 48px; border: 1px solid #8ca084; border-radius: 50%; display: grid; place-items: center; color: var(--forest); font-size: 19px; font-weight: 800; }
.ritualGrid h3 { margin: 5px 0 10px; font-size: 24px; }
.ritualGrid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.ritualTip { width: max-content; max-width: 100%; margin: 22px auto 0; padding: 12px 20px; border-radius: 999px; background: var(--sage); display: flex; align-items: center; gap: 8px; color: #42554e; font-size: 13px; }

.shopSection { padding-bottom: 130px; display: grid; grid-template-columns: 52% 48%; align-items: center; gap: 72px; }
.shopImageWrap { height: 670px; border-radius: 30px; overflow: hidden; position: relative; background: #dac59d; }
.shopImageWrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shopBadge { position: absolute; right: 22px; top: 22px; width: 86px; height: 86px; display: grid; place-items: center; text-align: center; border-radius: 50%; background: #f5f0dc; color: var(--forest); border: 1px solid rgba(13,71,56,.24); font-size: 11px; line-height: 1.35; font-weight: 900; letter-spacing: .1em; }
.shopDetails h2 { margin-bottom: 15px; }
.shopRating { display: flex; align-items: center; gap: 13px; }
.shopRating span { color: #bd8b3e; letter-spacing: .12em; }
.shopRating small { color: var(--muted); }
.shopDescription { margin: 24px 0 20px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.detailTags { display: flex; flex-wrap: wrap; gap: 8px; }
.detailTags span { padding: 8px 11px; border-radius: 99px; background: #edf2e3; color: #385047; font-size: 11px; font-weight: 700; }
.shopPrice { margin: 29px 0 22px; display: flex; align-items: baseline; gap: 15px; }
.shopPrice strong { color: var(--forest); font-size: 38px; }
.shopPrice span { color: var(--muted); font-size: 12px; }
.buyRow { display: flex; gap: 13px; }
.quantitySelector { min-width: 130px; height: 64px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; display: flex; justify-content: space-between; align-items: center; background: #fffdf6; }
.quantitySelector button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer; }
.quantitySelector button:hover { background: var(--sage); }
.quantitySelector span { font-weight: 800; }
.addButton { flex: 1; border-radius: 13px; }
.deliveryNote { margin-top: 21px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: flex-start; gap: 12px; color: #496158; }
.deliveryNote strong, .deliveryNote small { display: block; }
.deliveryNote strong { font-size: 13px; }
.deliveryNote small { margin-top: 4px; color: var(--muted); line-height: 1.5; }
.pincodeCheck { margin-top: 20px; }
.pincodeCheck > label { display: block; margin-bottom: 8px; color: #405a51; font-size: 12px; font-weight: 800; }
.pincodeCheck > div { height: 51px; border: 1px solid #d7ded0; border-radius: 12px; background: #fffdf6; display: flex; overflow: hidden; }
.pincodeCheck input { flex: 1; min-width: 0; border: 0; padding: 0 15px; background: transparent; outline: none; }
.pincodeCheck button { min-width: 105px; border: 0; background: #e5ecd6; color: var(--forest); font-size: 12px; font-weight: 900; cursor: pointer; }
.pincodeCheck button:disabled { cursor: wait; opacity: .65; }
.pincodeResult { margin: 9px 0 0; display: flex; align-items: center; gap: 7px; font-size: 12px; line-height: 1.45; }
.pincodeResult.valid { color: #197543; }
.pincodeResult.invalid { color: #9a472e; }

.reviewsSection { padding: 120px 0; background: #e8eedc; }
.reviewInner { display: grid; grid-template-columns: 45% 55%; align-items: center; gap: 80px; }
.reviewCopy > p:not(.eyebrow) { margin: 24px 0 30px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.reviewPromise { display: flex; align-items: center; gap: 18px; }
.reviewPromise > span { font-size: 57px; line-height: 1; font-weight: 900; color: var(--forest); }
.reviewPromise p { margin: 0; color: #496158; line-height: 1.5; }
.reviewForm { min-height: 520px; padding: 40px; border-radius: 25px; background: #fffdf6; box-shadow: 0 28px 65px rgba(32,66,48,.1); display: flex; flex-direction: column; justify-content: center; }
.reviewForm h3 { margin: 0 0 24px; font-size: 27px; }
.reviewForm label, .orderForm label { display: grid; gap: 8px; margin-bottom: 15px; color: #405a51; font-size: 12px; font-weight: 800; }
.reviewForm input, .reviewForm select, .reviewForm textarea, .orderForm input, .orderForm select, .orderForm textarea { width: 100%; border: 1px solid #d7ded0; border-radius: 11px; background: #fbfaf3; padding: 14px 15px; color: var(--ink); outline: none; resize: vertical; }
.reviewForm input:focus, .reviewForm select:focus, .reviewForm textarea:focus, .orderForm input:focus, .orderForm select:focus, .orderForm textarea:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(13,71,56,.08); }
.reviewForm .primaryButton { align-self: flex-start; min-height: 56px; margin-top: 5px; font-size: 15px; }
.whatsappReviewButton, .whatsappCheckoutButton { background: #117c42; border-color: #117c42; }
.whatsappReviewButton:hover, .whatsappCheckoutButton:hover { background: #0b6735; }
.formPrivacy { margin-top: 13px; color: var(--muted); font-size: 11px; }
.formSuccess { text-align: center; }
.formSuccess > span { width: 69px; height: 69px; display: grid; place-items: center; margin: 0 auto 22px; border-radius: 50%; background: var(--sage); }
.formSuccess h3 { margin: 0 0 9px; }
.formSuccess p { margin: 0 auto 25px; color: var(--muted); line-height: 1.7; }

.faqSection { padding-top: 120px; padding-bottom: 130px; display: grid; grid-template-columns: 37% 63%; gap: 90px; align-items: start; }
.faqIntro { position: sticky; top: 35px; }
.faqIntro > p:last-child { margin-left: 0; }
.faqList details { border-bottom: 1px solid var(--line); }
.faqList summary { list-style: none; padding: 23px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer; font-size: 17px; font-weight: 800; }
.faqList summary::-webkit-details-marker { display: none; }
.faqList summary svg { flex: 0 0 auto; transition: transform .25s ease; }
.faqList details[open] summary svg { transform: rotate(180deg); }
.faqList details p { margin: -5px 0 24px; padding-right: 50px; color: var(--muted); font-size: 14px; line-height: 1.8; }

.newsletterSection { max-width: 1260px; min-height: 330px; margin: 0 auto 100px; padding: 60px 70px; border-radius: 30px; background: var(--forest); color: white; display: grid; grid-template-columns: auto 1fr 39%; align-items: center; gap: 38px; position: relative; overflow: hidden; }
.newsletterSection::after { content: ""; position: absolute; width: 340px; height: 340px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; right: -170px; top: -170px; }
.newsletterLeaf { width: 105px; height: 105px; border-radius: 50%; background: #dfe7c8; color: var(--forest); display: grid; place-items: center; }
.newsletterSection .eyebrow { color: #c7d4ab; margin-bottom: 13px; }
.newsletterSection h2 { max-width: 600px; color: #fffaf0; font-size: clamp(33px, 3.1vw, 47px); }
.newsletterSection > div > p:last-child { margin: 14px 0 0; color: #c6d1ca; line-height: 1.6; }
.contactActions { display: grid; gap: 10px; position: relative; z-index: 2; }
.contactActions a { min-height: 57px; padding: 0 20px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 10px; color: white; font-size: 13px; font-weight: 800; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.contactActions a:first-child { background: #147d44; border-color: #399c64; }
.contactActions a:last-child { background: rgba(255,255,255,.08); }
.contactActions a:hover { transform: translateY(-2px); background: #1a8c4e; }

footer { background: #082f27; color: #eef2e8; }
.footerMain { padding-top: 75px; padding-bottom: 65px; display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 65px; }
.footerBrand .brand { color: #f6f1e6; }
.footerBrand > p, .footerMain > div > p { margin: 20px 0 0; color: #9db2aa; font-size: 13px; line-height: 1.8; max-width: 285px; }
.footerMain h3 { margin: 3px 0 20px; color: #eaf0e4; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.footerMain button, .footerMain span, .footerMain a { display: block; border: 0; background: none; padding: 0; margin: 0 0 13px; color: #aebfb8; font-size: 13px; cursor: pointer; text-align: left; text-decoration: none; }
.footerMain button:hover, .footerMain a:hover { color: white; }
.footerMain .footerPhone { margin-top: 17px; display: inline-flex; align-items: center; gap: 7px; color: #dbe6df; font-weight: 700; }
.footerBottom { min-height: 74px; padding-top: 20px; padding-bottom: 20px; border-top: 1px solid rgba(255,255,255,.09); display: flex; align-items: center; justify-content: space-between; color: #8ba199; font-size: 11px; }

.mobileBuyBar { display: none; }
.srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.filledCart { padding-top: 27px; }
.cartProduct { padding-bottom: 24px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 92px 1fr auto; gap: 15px; align-items: start; }
.cartProduct img { width: 92px; height: 118px; object-fit: cover; border-radius: 12px; }
.cartProduct h3 { margin: 4px 0 5px; font-size: 19px; }
.cartProduct > div > span { color: var(--muted); font-size: 12px; }
.cartProduct > strong { font-size: 16px; }
.smallQuantity { width: 105px; min-width: 105px; height: 39px; margin-top: 14px; padding: 0 4px; }
.smallQuantity button { width: 29px; height: 29px; }
.cartTotals { padding: 23px 0; }
.cartTotals p, .cartTotals > div { display: flex; justify-content: space-between; gap: 20px; margin: 0 0 13px; font-size: 13px; }
.cartTotals p span { color: var(--muted); }
.cartTotals p strong { font-size: 12px; }
.cartTotals > div { margin: 21px 0 0; padding-top: 18px; border-top: 1px solid var(--line); align-items: baseline; font-size: 16px; font-weight: 800; }
.cartTotals > div strong { font-size: 22px; }
.checkoutButton { width: 100%; border-radius: 12px; font-size: 15px; min-height: 59px; }
.secureNote { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--muted); font-size: 11px; }
.orderForm { padding-top: 25px; }
.formRow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.orderSummary { margin: 18px 0; padding: 16px; background: var(--sage); border-radius: 12px; display: flex; justify-content: space-between; font-size: 13px; }
.orderForm .primaryButton { width: 100%; min-height: 58px; border-radius: 12px; font-size: 15px; }
.orderForm .primaryButton:disabled { cursor: wait; opacity: .7; transform: none; box-shadow: none; }
.orderError { margin: 0 0 13px; padding: 11px 13px; border-radius: 10px; background: #fae5de; color: #8f3c26; font-size: 12px; line-height: 1.5; }
.backButton { display: block; margin: 14px auto 0; border: 0; border-bottom: 1px solid var(--forest); background: none; font-size: 12px; font-weight: 800; cursor: pointer; }

.floatingWhatsApp { position: fixed; right: 24px; bottom: 24px; z-index: 55; min-height: 58px; padding: 0 20px 0 15px; border: 3px solid #e8f6ed; border-radius: 999px; background: #159447; color: white; display: flex; align-items: center; gap: 9px; box-shadow: 0 18px 40px rgba(7, 61, 31, .27); font-size: 13px; font-weight: 900; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.floatingWhatsApp:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(7, 61, 31, .34); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; }
.reveal.isVisible { opacity: 1; transform: translateY(0); }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 120; transform: translate(-50%, 20px); min-width: min(90vw, 340px); padding: 14px 18px; border-radius: 12px; background: #082f27; color: white; box-shadow: 0 18px 40px rgba(4,35,28,.28); text-align: center; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.ajaxNote { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; color: var(--muted); font-size: 11px; }
.ajaxNote::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #40a463; box-shadow: 0 0 0 4px rgba(64,164,99,.13); }

@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes softReveal { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 1100px) {
  .siteHeader { padding: 0 28px; }
  .headerWhatsApp span { display: none; }
  .headerWhatsApp { width: 51px; padding: 0; justify-content: center; }
  .desktopNav { gap: 23px; }
  .hero { padding-left: 34px; padding-right: 28px; grid-template-columns: 49% 51%; }
  .hero h1 { font-size: 56px; }
  .imageFrame { width: 82%; }
  .trustBar { margin-left: 24px; margin-right: 24px; }
  .benefitGrid { grid-template-columns: repeat(2, 1fr); }
  .benefitCard { min-height: 290px; }
  .storySection { gap: 45px; }
  .ingredientsInner { grid-template-columns: 56% 44%; }
  .amlaOrb { width: 280px; height: 280px; }
  .shopSection { gap: 44px; }
  .reviewInner { gap: 45px; }
  .newsletterSection { margin-left: 24px; margin-right: 24px; padding-left: 40px; padding-right: 40px; grid-template-columns: 1fr 38%; }
  .newsletterLeaf { display: none; }
  .footerMain { gap: 35px; }
}

@media (max-width: 820px) {
  .announcement > span:not(:first-child) { display: none; }
  .announcement { justify-content: space-between; padding-left: 14px; padding-right: 14px; }
  .announcement a { font-size: 10px; }
  .siteHeader { height: 78px; grid-template-columns: 1fr auto; padding: 0 20px; }
  .brand { font-size: 16px; gap: 8px; }
  .desktopNav { display: none; }
  .headerWhatsApp { display: none; }
  .mobileMenuButton { display: grid; }
  .hero { min-height: auto; padding: 35px 20px 30px; grid-template-columns: 1fr; gap: 36px; }
  .hero::before { display: none; }
  .heroCopy { padding: 0; }
  .eyebrow { font-size: 11px; margin-bottom: 17px; }
  .hero h1 { font-size: clamp(44px, 13vw, 62px); }
  .heroText { margin: 21px 0 24px; font-size: 17px; }
  .heroPurchase { gap: 17px; }
  .primaryButton { min-height: 58px; padding: 0 24px; font-size: 16px; }
  .priceBlock { min-width: 95px; padding-left: 17px; }
  .priceBlock strong { font-size: 26px; }
  .heroVisual { min-height: 520px; }
  .imageFrame { width: min(91%, 520px); height: 500px; }
  .noteTop { right: 0; }
  .noteBottom { left: 0; }
  .trustBar { margin: 4px 16px 28px; padding: 14px 18px; grid-template-columns: 1fr; }
  .trustBar > div { min-height: 72px; justify-content: flex-start; border-right: 0; border-bottom: 1px solid #ced5c2; }
  .trustBar > div:last-child { border-bottom: 0; }
  .sectionShell { padding-left: 20px; padding-right: 20px; }
  .benefitsSection { padding-top: 85px; padding-bottom: 90px; }
  .benefitGrid { grid-template-columns: 1fr 1fr; margin-top: 40px; }
  .storySection { padding-top: 0; padding-bottom: 90px; grid-template-columns: 1fr; gap: 50px; }
  .storyImage { min-height: 560px; }
  .storyImage img { height: 560px; }
  .ingredientsInner { min-height: auto; padding-top: 85px; padding-bottom: 85px; grid-template-columns: 1fr; }
  .ingredientVisual { min-height: 420px; }
  .ritualSection { padding-top: 85px; padding-bottom: 90px; }
  .ritualGrid { grid-template-columns: 1fr; }
  .ritualGrid article { min-height: auto; }
  .shopSection { padding-bottom: 90px; grid-template-columns: 1fr; gap: 45px; }
  .shopImageWrap { height: 620px; }
  .reviewInner { grid-template-columns: 1fr; gap: 45px; }
  .reviewsSection { padding: 85px 0; }
  .faqSection { padding-top: 85px; padding-bottom: 90px; grid-template-columns: 1fr; gap: 40px; }
  .faqIntro { position: static; }
  .newsletterSection { margin: 0 20px 80px; padding: 45px 28px; grid-template-columns: 1fr; gap: 30px; }
  .footerMain { grid-template-columns: 1fr 1fr; }
  .footerBrand { grid-column: 1 / -1; }
  .mobileBuyBar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; min-height: 66px; padding: 8px 8px 8px 18px; border: 1px solid rgba(255,255,255,.6); border-radius: 18px; background: rgba(255,253,246,.94); backdrop-filter: blur(14px); box-shadow: 0 15px 40px rgba(9,48,38,.2); display: flex; justify-content: space-between; align-items: center; }
  .mobileBuyBar > div { display: flex; flex-direction: column; }
  .mobileBuyBar strong { font-size: 19px; }
  .mobileBuyBar span { color: var(--muted); font-size: 10px; }
  .mobileBuyBar button { height: 49px; padding: 0 19px; border: 0; border-radius: 12px; background: var(--forest); color: white; display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; }
  .footerBottom { padding-bottom: 100px; }
  .floatingWhatsApp { right: 17px; bottom: 91px; width: 54px; min-height: 54px; padding: 0; justify-content: center; border-width: 2px; }
  .floatingWhatsApp span { display: none; }
}

@media (max-width: 480px) {
  .announcement { font-size: 10px; min-height: 31px; }
  .siteHeader { padding: 0 15px; }
  .headerActions { gap: 7px; }
  .iconButton { width: 43px; height: 43px; }
  .brandMark svg { width: 23px; height: 23px; }
  .hero { padding-left: 16px; padding-right: 16px; }
  .hero h1 { font-size: 45px; }
  .heroText { font-size: 16px; }
  .heroPurchase { flex-wrap: wrap; }
  .heroVisual { min-height: 425px; }
  .imageFrame { height: 415px; width: 94%; }
  .floatingNote { font-size: 11px; padding: 9px 11px; }
  .noteTop { top: 12%; }
  .noteBottom { bottom: 8%; }
  .mobileMenu, .cartDrawer { padding: 22px; }
  .sectionHeading h2, .storyCopy h2, .ingredientIntro h2, .shopDetails h2, .reviewCopy h2, .faqIntro h2 { font-size: 38px; }
  .benefitGrid { grid-template-columns: 1fr; }
  .benefitCard { min-height: 275px; }
  .storyImage, .storyImage img { min-height: 485px; height: 485px; }
  .storyStamp { width: 130px; height: 130px; }
  .ingredientFacts { grid-template-columns: 1fr; }
  .ingredientFacts div { align-items: center; }
  .ingredientVisual { min-height: 350px; }
  .amlaOrb { width: 245px; height: 245px; }
  .amlaOrb span { font-size: 40px; }
  .ingredientCard { min-width: 175px; padding: 12px; }
  .ingredientCardOne { left: -7px; top: 35px; }
  .ingredientCardTwo { right: -7px; bottom: 34px; }
  .ritualGrid article { padding: 24px 20px; }
  .ritualTip { border-radius: 16px; align-items: flex-start; }
  .shopImageWrap { height: 510px; }
  .buyRow { flex-direction: column; }
  .quantitySelector { width: 100%; }
  .reviewForm { min-height: 500px; padding: 27px 20px; }
  .faqList details p { padding-right: 10px; }
  .newsletterSection { padding: 38px 22px; }
  .newsletterSection h2 { font-size: 34px; }
  .footerMain { grid-template-columns: 1fr; gap: 34px; }
  .footerBrand { grid-column: auto; }
  .footerBottom { align-items: flex-start; flex-direction: column; justify-content: center; }
  .formRow { grid-template-columns: 1fr; gap: 0; }
}



/* ===== Pearl Herbal v2 sections and responsive polish ===== */
img { max-width: 100%; }
main, section, header, footer, .sectionShell, .hero > *, .whyChooseGrid > *, .ingredientsInner > *, .makingHeader > * { min-width: 0; }
.cartDrawer, .mobileMenu { overflow-y: auto; overscroll-behavior: contain; }

.whyChooseSection {
  padding: 118px 0 126px;
  background:
    radial-gradient(circle at 50% 45%, rgba(192, 211, 151, .28), transparent 28%),
    linear-gradient(180deg, #f3f5e8 0%, #edf2e3 100%);
  overflow: hidden;
}
.whyChooseInner { position: relative; }
.whyChooseSection .sectionHeading { max-width: 780px; }
.whyChooseSection .sectionHeading h2,
.makingHeader .sectionHeading h2 {
  margin: 0;
  color: var(--forest);
  font-size: clamp(39px, 4.25vw, 64px);
  line-height: 1.04;
  letter-spacing: -.045em;
}
.whyChooseGrid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 410px) minmax(0, 1fr);
  align-items: center;
  gap: 34px;
}
.whyColumn { display: grid; gap: 22px; }
.whyItem {
  min-height: 132px;
  padding: 22px;
  border: 1px solid rgba(13, 71, 56, .12);
  border-radius: 20px;
  background: rgba(255, 253, 246, .78);
  display: flex;
  gap: 16px;
  align-items: flex-start;
  box-shadow: 0 18px 42px rgba(33, 67, 49, .06);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.whyItem:hover { transform: translateY(-5px); box-shadow: 0 24px 52px rgba(33, 67, 49, .11); background: #fffdf6; }
.whyItem > span {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: var(--forest);
  color: white;
  display: grid;
  place-items: center;
}
.whyItem h3 { margin: 1px 0 8px; font-size: 17px; line-height: 1.25; }
.whyItem p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.whyBottleStage {
  height: 570px;
  padding: 18px;
  position: relative;
  border-radius: 190px 190px 34px 34px;
  background: rgba(255,255,255,.44);
  display: grid;
  place-items: center;
  isolation: isolate;
}
.whyBottleHalo {
  position: absolute;
  width: 88%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,229,174,.95), rgba(161,190,112,.25) 58%, transparent 60%);
  z-index: -1;
}
.whyBottleStage img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 46%;
  border-radius: 172px 172px 24px 24px;
  box-shadow: 0 32px 75px rgba(19, 60, 44, .2);
}
.whyPricePill {
  position: absolute;
  right: -8px; bottom: 38px;
  width: 102px; height: 102px;
  border-radius: 50%;
  background: var(--forest);
  color: white;
  border: 7px solid #edf2e3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 18px 34px rgba(9, 51, 39, .24);
}
.whyPricePill strong { font-size: 24px; line-height: 1; }
.whyPricePill small { margin-top: 6px; font-size: 11px; letter-spacing: .08em; }

.ingredientsSection {
  padding: 112px 0 102px;
  background:
    radial-gradient(circle at 78% 22%, rgba(191, 214, 144, .15), transparent 24%),
    radial-gradient(circle at 8% 88%, rgba(191, 214, 144, .1), transparent 25%),
    var(--forest);
  color: #f7f5e9;
  position: relative;
  overflow: hidden;
}
.ingredientsSection::before {
  content: "";
  position: absolute;
  width: 560px; height: 560px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  left: -290px; top: -260px;
}
.ingredientsInner {
  min-height: auto;
  padding-top: 0;
  padding-bottom: 55px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(340px, .98fr);
  align-items: center;
  gap: 70px;
}
.ingredientIntro { position: relative; z-index: 2; }
.ingredientIntro .eyebrow { color: #c7d7a5; }
.ingredientIntro h2 {
  margin: 0;
  max-width: 720px;
  color: #fffaf0;
  font-size: clamp(39px, 4.25vw, 64px);
  line-height: 1.04;
  letter-spacing: -.045em;
}
.ingredientIntro > p:not(.eyebrow) {
  max-width: 650px;
  margin: 25px 0 30px;
  color: #c8d4cd;
  font-size: 16px;
  line-height: 1.8;
}
.ingredientControls { display: flex; align-items: center; gap: 12px; }
.ingredientControls button {
  width: 49px; height: 49px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: white;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.ingredientControls button:first-child svg { transform: rotate(180deg); }
.ingredientControls button:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.ingredientControls span { color: #aebfb7; font-size: 12px; letter-spacing: .06em; }
.ingredientProductStage {
  min-height: 500px;
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.ingredientProductGlow {
  position: absolute;
  width: 88%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(203,222,161,.45), rgba(203,222,161,.08) 54%, transparent 56%);
  z-index: -1;
}
.ingredientProductStage img {
  width: min(78%, 390px);
  height: 470px;
  object-fit: cover;
  object-position: center 47%;
  border-radius: 48% 48% 24px 24px;
  box-shadow: 0 35px 80px rgba(2, 25, 17, .38);
}
.ingredientStageTag {
  position: absolute;
  min-width: 82px;
  padding: 11px 15px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(250,248,236,.12);
  backdrop-filter: blur(12px);
  color: #eef3df;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 14px 32px rgba(2,24,17,.23);
}
.tagAmla { left: 1%; top: 19%; }
.tagNeem { right: 0; top: 39%; }
.tagAloe { left: 7%; bottom: 13%; }
.ingredientSwiperShell { max-width: 1440px; margin: 0 auto; padding-left: max(28px, calc((100vw - 1260px) / 2 + 28px)); }
.ingredientTrack {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 8px max(28px, calc((100vw - 1260px) / 2 + 28px)) 26px 0;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  outline: none;
}
.ingredientTrack::-webkit-scrollbar { display: none; }
.ingredientSlide {
  flex: 0 0 330px;
  min-height: 260px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  background: rgba(255,255,255,.075);
  scroll-snap-align: start;
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 19px;
  align-items: center;
  transition: transform .25s ease, background .25s ease;
}
.ingredientSlide:hover { transform: translateY(-5px); background: rgba(255,255,255,.11); }
.ingredientNumber { position: absolute; right: 20px; top: 18px; color: #8fa69b; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.ingredientOrb {
  width: 76px; height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #173e31;
  box-shadow: inset -12px -11px 22px rgba(32,59,20,.2), 0 15px 28px rgba(1,20,13,.2);
}
.ingredientOrb b { font-size: 28px; }
.ingredientOrb--amla { background: radial-gradient(circle at 32% 28%, #e6ef99, #91ab4d 64%, #59722e); }
.ingredientOrb--bhringraj { background: radial-gradient(circle at 35% 30%, #d8e88e, #6a923c 66%, #365b2c); }
.ingredientOrb--neem { background: radial-gradient(circle at 32% 28%, #c9e892, #55984c 66%, #28683a); }
.ingredientOrb--aloe { background: radial-gradient(circle at 32% 28%, #d6f3c7, #70bd7c 66%, #377d55); }
.ingredientOrb--hibiscus { background: radial-gradient(circle at 32% 28%, #ffc8cc, #dc6973 64%, #a6324b); color: #5a1730; }
.ingredientOrb--methi { background: radial-gradient(circle at 32% 28%, #f1dda0, #caa348 66%, #7c5c1e); color: #523b13; }
.ingredientSlide h3 { margin: 8px 0 3px; color: #fffaf0; font-size: 22px; }
.ingredientSlide small { color: #bad09f; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.ingredientSlide p { margin: 14px 0 0; color: #bfcfc7; font-size: 13px; line-height: 1.65; }

.makingSection { padding-top: 122px; padding-bottom: 122px; }
.makingHeader { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 60px; }
.makingHeader > p { margin: 0 0 7px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.processGrid {
  margin-top: 62px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 15px;
  position: relative;
}
.processGrid::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: 52px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #aebea4 8%, #aebea4 92%, transparent);
  z-index: 0;
}
.processCard {
  min-height: 290px;
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 21px;
  background: #fffdf7;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.processCard:nth-child(even) { background: #edf2e3; }
.processCard::after { content: ""; position: absolute; width: 100px; height: 100px; right: -44px; bottom: -49px; border-radius: 50%; background: rgba(178, 202, 147, .2); }
.processNumber { position: absolute; top: 22px; right: 20px; color: #8b9b91; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.processIcon {
  width: 57px; height: 57px;
  border-radius: 50%;
  background: var(--forest);
  color: white;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
}
.processCard h3 { margin: 48px 0 13px; font-size: 19px; line-height: 1.25; }
.processCard p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

@media (max-width: 1100px) {
  .desktopNav { gap: 17px; }
  .desktopNav a { font-size: 14px; }
  .whyChooseGrid { grid-template-columns: 1fr 340px 1fr; gap: 22px; }
  .whyItem { padding: 18px; }
  .whyBottleStage { height: 520px; }
  .ingredientsInner { gap: 36px; }
  .processGrid { grid-template-columns: repeat(3, 1fr); }
  .processGrid::before { display: none; }
}

@media (max-width: 820px) {
  .heroWhatsApp { flex-wrap: wrap; width: 100%; }
  .whyChooseSection { padding: 84px 0 90px; }
  .whyChooseGrid { margin-top: 42px; grid-template-columns: 1fr; gap: 24px; }
  .whyBottleStage { order: -1; width: min(100%, 520px); height: 560px; margin: 0 auto 12px; }
  .whyColumn { grid-template-columns: 1fr 1fr; }
  .whyPricePill { right: 2px; }
  .ingredientsSection { padding: 84px 0 78px; }
  .ingredientsInner { padding-top: 0; padding-bottom: 35px; grid-template-columns: 1fr; gap: 25px; }
  .ingredientProductStage { min-height: 455px; }
  .ingredientProductStage img { height: 430px; width: min(75%, 370px); }
  .ingredientSwiperShell { padding-left: 20px; }
  .ingredientTrack { padding-right: 20px; }
  .ingredientSlide { flex-basis: min(78vw, 340px); }
  .makingSection { padding-top: 86px; padding-bottom: 90px; }
  .makingHeader { grid-template-columns: 1fr; gap: 22px; }
  .processGrid { margin-top: 40px; grid-template-columns: 1fr 1fr; }
  .processCard { min-height: 260px; }
  .mobileBuyBar { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .floatingWhatsApp { bottom: calc(91px + env(safe-area-inset-bottom)); }
}

@media (max-width: 600px) {
  .whyColumn { grid-template-columns: 1fr; }
  .whyItem { min-height: 0; }
  .whyBottleStage { height: 490px; border-radius: 150px 150px 27px 27px; }
  .whyBottleStage img { border-radius: 136px 136px 20px 20px; }
  .processGrid { grid-template-columns: 1fr; }
  .processCard { min-height: 0; }
  .ingredientStageTag { min-width: 70px; padding: 9px 11px; font-size: 10px; }
}

@media (max-width: 480px) {
  .announcement { gap: 7px; }
  .announcement a { white-space: nowrap; }
  .hero h1 { font-size: clamp(39px, 12vw, 45px); }
  .heroPurchase { align-items: stretch; }
  .heroPurchase .primaryButton { flex: 1 1 180px; }
  .heroWhatsApp strong { width: 100%; padding-left: 28px; }
  .whyChooseSection .sectionHeading h2,
  .makingHeader .sectionHeading h2,
  .ingredientIntro h2 { font-size: 37px; }
  .whyBottleStage { height: 430px; padding: 12px; }
  .whyPricePill { width: 88px; height: 88px; border-width: 5px; bottom: 25px; }
  .whyPricePill strong { font-size: 21px; }
  .ingredientControls span { display: none; }
  .ingredientProductStage { min-height: 365px; }
  .ingredientProductStage img { height: 350px; width: 82%; }
  .tagAmla { left: 0; top: 15%; }
  .tagNeem { right: 0; top: 40%; }
  .tagAloe { left: 2%; bottom: 10%; }
  .ingredientSwiperShell { padding-left: 16px; }
  .ingredientTrack { gap: 12px; padding-right: 16px; }
  .ingredientSlide { flex-basis: calc(100vw - 44px); min-height: 235px; padding: 20px; grid-template-columns: 66px 1fr; gap: 15px; }
  .ingredientOrb { width: 66px; height: 66px; }
  .ingredientOrb b { font-size: 24px; }
  .mobileMenu, .cartDrawer { width: 100vw; max-width: 100vw; }
  .floatingWhatsApp { right: 14px; }
}

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