/* =========================================================================
   COMPONENTS — reusable UI blocks that don't know which page they're on.
   Grouped by component:
     - Announcement bar
     - Buttons
     - Navigation (header + burger + mobile menu)
     - Footer
     - Accordion (FAQ item mechanic)
     - Tabs (dot rail + tab toggles)
     - Chips (ingredient tags)
     - Cards (pricing box, chip-card, phase group inside explorer panel)
     - Forms (input inside CTA)
   ========================================================================= */


/* ---------- Announcement bar ---------- */

.bar{
  background:var(--green-deep);
  color:var(--on-dark-3);            /* was #DCE7D6 */
  text-align:center;
  font-size:.82rem;
  letter-spacing:.04em;
  font-weight:500;
  padding:11px 16px;
}


/* ---------- Buttons ---------- */

.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--body);font-weight:600;font-size:.85rem;
  letter-spacing:.02em;
  padding:.95em 1.8em;
  border-radius:100px;
  cursor:pointer;
  border:1.5px solid transparent;
  background:none;
  transition:transform .3s, background .3s, color .3s, border-color .3s;
}
.btn-fill{background:var(--green-deep);color:#fff}
.btn-fill:hover{background:var(--green);transform:translateY(-2px)}
.btn-line{border-color:var(--line);color:var(--green-deep)}
.btn-line:hover{border-color:var(--green-deep);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--green-deep)}
.btn-white:hover{transform:translateY(-2px)}


/* ---------- Navigation ---------- */

.nav-actions{display:flex;align-items:center;gap:12px}

header{
  position:sticky;top:0;z-index:60;
  background:rgba(251,250,246,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s;
}
header.on{border-color:var(--line)}

.nav{display:flex;align-items:center;justify-content:space-between;height:96px;gap:28px}

/* Logo + optional tagline stacked in a vertical group. The tagline is
   hidden by default and revealed only when the header enters its
   scrolled state (header.on) — maintains brand messaging after the
   announcement bar scrolls out of view. */
.logo-link{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  line-height:1;
  text-decoration:none;
}
.logo{height:56px;width:auto;display:block}
.logo-tagline{
  display:block;
  font-family:var(--body);
  font-size:.72rem;
  font-weight:500;
  line-height:1.4;              /* own line-height so descenders (g, y) aren't clipped */
  letter-spacing:.04em;
  color:var(--muted);
  white-space:nowrap;
  padding-bottom:2px;           /* extra safety below descender line */
  opacity:0;
  max-height:0;
  overflow:hidden;
  transition:opacity .35s ease, max-height .35s ease;
}
header.on .logo-tagline{
  opacity:1;
  max-height:32px;              /* accommodate full line box + descender + padding */
}
.links{display:flex;gap:30px;list-style:none;margin:0;padding:0;font-size:.82rem;font-weight:500}
.links a:hover{color:var(--green)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:6px;color:inherit}

@media (max-width:940px){
  .links{display:none}
  .burger{display:block}
  .nav .btn-fill{display:none}
  .links.open{
    display:flex;
    position:absolute;top:96px;left:0;right:0;
    flex-direction:column;
    background:var(--canvas);
    border-bottom:1px solid var(--line);
    padding:20px 24px;gap:16px;
  }
}


/* ---------- Cart trigger (icon in nav header) ---------- */

.cart-trigger{
  position:relative;
  background:none;
  border:0;
  cursor:pointer;
  padding:8px;
  color:var(--green-deep);
  display:inline-flex;
  align-items:center;
  transition:color .2s ease;
}
.cart-trigger:hover{color:var(--green)}
.cart-trigger:focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
  border-radius:6px;
}
/* Count badge — hidden by default (JS toggles [hidden] when items > 0) */
.cart-count{
  position:absolute;
  top:2px;
  right:2px;
  background:var(--green);
  color:#fff;
  font-family:var(--body);
  font-size:.58rem;
  font-weight:700;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.cart-count[hidden]{display:none}


/* ---------- Cart drawer ----------
   Fixed overlay. On desktop the panel slides in from the right (440px
   max). On mobile it becomes a bottom sheet. Backdrop dims the page;
   ESC or backdrop click closes. Focus not trapped for now — could be
   added if the checkout flow grows. */

.cart{
  position:fixed;
  inset:0;
  z-index:200;
  visibility:hidden;
  transition:visibility 0s linear .3s;
}
.cart[aria-hidden="false"]{
  visibility:visible;
  transition-delay:0s;
}
.cart-backdrop{
  position:absolute;
  inset:0;
  background:rgba(22,41,26,.55);
  opacity:0;
  transition:opacity .3s ease;
  cursor:pointer;
}
.cart[aria-hidden="false"] .cart-backdrop{opacity:1}

.cart-panel{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:min(440px, 100vw);
  background:var(--canvas);
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex;
  flex-direction:column;
  box-shadow:-8px 0 32px rgba(0,0,0,.14);
}
.cart[aria-hidden="false"] .cart-panel{transform:translateX(0)}

.cart-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 24px;
  border-bottom:1px solid var(--line);
  flex:none;
}
.cart-header h2{
  font-family:var(--display);
  font-size:1.5rem;
  font-weight:400;
  margin:0;
  color:var(--green-deep);
}
.cart-close{
  background:none;
  border:0;
  cursor:pointer;
  font-size:1.8rem;
  line-height:1;
  color:var(--muted);
  padding:4px 10px;
  transition:color .2s ease;
}
.cart-close:hover{color:var(--green-deep)}
.cart-close:focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
  border-radius:6px;
}

.cart-body{
  flex:1 1 auto;
  overflow-y:auto;
  padding:22px 24px;
}
.cart-empty{
  color:var(--muted);
  font-size:.95rem;
  text-align:center;
  padding:60px 20px;
  margin:0;
  line-height:1.5;
}

/* Cart line-item row — compact two-line layout.
   Line 1 (.cart-row__main): name · stepper · line-total · remove
   Line 2 (.cart-row__sub) : duration · qty × unit-price
   Rows are ~64px tall so 3–4 items fit inside the cart body without scroll. */
.cart-row{
  padding:14px 4px;
  border-bottom:1px solid var(--line);
}
.cart-row:first-child{padding-top:0}
.cart-row:last-child{padding-bottom:0;border-bottom:none}

.cart-row__main{
  display:flex;
  align-items:center;
  gap:10px;
}
.cart-row__name{
  flex:1;
  min-width:0;
  font-family:var(--display);
  font-size:1.1rem;
  font-weight:400;
  color:var(--green-deep);
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cart-row__total{
  font-family:var(--display);
  font-size:1.15rem;
  font-weight:500;
  color:var(--green-deep);
  min-width:60px;
  text-align:right;
  font-variant-numeric:lining-nums;
  line-height:1;
}
.cart-row__remove{
  background:none;
  border:0;
  cursor:pointer;
  font-size:1.4rem;
  line-height:1;
  color:var(--muted);
  padding:2px 6px;
  transition:color .2s ease;
}
.cart-row__remove:hover{color:var(--green-deep)}
.cart-row__remove:focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
  border-radius:4px;
}

/* Sub-line: duration + math ("7 Days · 1 × ₹499") */
.cart-row__sub{
  margin-top:4px;
  padding-left:2px;
  font-family:var(--body);
  font-size:.76rem;
  color:var(--muted);
  letter-spacing:.02em;
  font-variant-numeric:lining-nums;
}

/* Compact stepper for cart-row context — smaller than the Library-card variant */
.cart-row .qty-stepper{
  min-height:30px;
  background:transparent;
}
.cart-row .qty-stepper__btn{width:28px;font-size:1rem}
.cart-row .qty-stepper__value{min-width:20px;font-size:.85rem}

.cart-footer{
  padding:20px 24px calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  flex:none;
  display:flex;
  flex-direction:column;
  gap:14px;
  background:var(--canvas);
}
.cart-footer[hidden]{display:none}
.cart-total{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.cart-total span{
  font-family:var(--body);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.cart-total b{
  font-family:var(--display);
  font-size:1.9rem;
  font-weight:500;
  color:var(--green-deep);
  font-variant-numeric:lining-nums;
}
.cart-checkout{width:100%;justify-content:center}

/* Bottom sheet on small screens — full-width panel anchored to bottom */
@media (max-width:640px){
  .cart-panel{
    width:100vw;
    top:auto;
    height:88vh;
    border-top-left-radius:16px;
    border-top-right-radius:16px;
    transform:translateY(100%);
    box-shadow:0 -8px 32px rgba(0,0,0,.18);
  }
  .cart[aria-hidden="false"] .cart-panel{transform:translateY(0)}
}


/* ---------- Mobile Sticky CTA ----------
   Fixed at the bottom of the viewport on mobile. Semi-transparent
   ivory with backdrop blur — present but quiet. Hidden on desktop
   where the header CTA is always visible. */

.mobile-cta{display:none}

@media (max-width:940px){
  .mobile-cta{
    display:block;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(251,250,246,.92);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    z-index:50;
  }
  .mobile-cta .btn{
    width:100%;
    justify-content:center;
  }
  /* Give the page bottom room so footer content isn't hidden by the sticky bar.
     Padding needs to be on the FOOTER too — main's padding creates space
     before the footer, but the sticky CTA sits over the very bottom of the
     viewport where the fbot legal disclosures live. */
  main{padding-bottom:80px}
}


/* ---------- Footer ---------- */

footer{
  background:var(--green-deep);
  color:var(--on-dark-1);            /* was #A8BCA2 */
  padding:60px 0 26px;
  font-size:.86rem;
}
.fgrid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px;
  padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.14);
}
.fgrid img{height:44px;width:auto;filter:brightness(0) invert(1);opacity:.92}
.fgrid p{margin:14px 0 0;max-width:32ch}
.fgrid h4{
  font-family:var(--body);
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 12px;font-weight:600;
  color:var(--on-dark-5);            /* was #7E9078 */
}
.fgrid a{display:block;padding:5px 0}
.fgrid a:hover{color:#fff}
.fbot{
  display:flex;justify-content:space-between;gap:18px;
  flex-wrap:wrap;align-items:flex-end;
  padding-top:22px;font-size:.75rem;
  color:var(--on-dark-5);            /* was #7E9078 */
}
/* Legal info column — one span per line for readability. Includes the
   legal entity name, registered address, FSSAI/GSTIN, and a small
   free-shipping note as a purchase incentive. */
.fbot__info{
  display:flex;
  flex-direction:column;
  gap:4px;
  max-width:60ch;
  line-height:1.5;
}
.fbot__ship{
  margin-top:6px;
  color:var(--on-dark-3);          /* slightly brighter — reads as a note, not a disclosure */
  font-weight:500;
}
.fbot__mark{
  font-size:.85rem;
  color:var(--on-dark-3);
  letter-spacing:.02em;
}

@media (max-width:940px){
  .fgrid{grid-template-columns:1fr 1fr}
  /* Extra bottom padding so the fixed .mobile-cta doesn't cover the fbot
     legal disclosures. Must live in a media query BELOW the main
     `footer{padding:60px 0 26px}` shorthand, or the cascade wins. */
  footer{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
}
@media (max-width:560px){
  .fgrid{grid-template-columns:1fr}
}


/* ---------- Accordion (FAQ items) ---------- */

.qlist{border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q button{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--body);font-weight:600;font-size:.97rem;
  color:var(--green-deep);
  padding:20px 40px 20px 0;position:relative;
}
.q button::after{
  content:"+";
  position:absolute;right:8px;top:18px;
  font-size:1.2rem;color:var(--green);
  transition:transform .3s;
}
.q.open button::after{transform:rotate(45deg)}
.a{max-height:0;overflow:hidden;transition:max-height .35s}
.a p{color:var(--muted);font-size:.9rem;margin:0;padding:0 40px 22px 0}

/* Comparison table — sits inside an FAQ answer. Two side-by-side cards
   ("Buying separately" vs "The Mevayu ritual") with muted × on the left
   and green ✓ on the right. On narrow viewports the columns stack. */
.a .cmp-table{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  padding:2px 40px 22px 0;
}
.cmp-col{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px 18px;
}
.cmp-col h4{
  font-family:var(--body);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--green-deep);
  margin:0 0 12px;
}
.cmp-col--old h4{color:var(--muted)}
.cmp-col ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.cmp-col li{
  font-size:.84rem;
  line-height:1.4;
  padding-left:22px;
  position:relative;
}
.cmp-col--old li{color:var(--muted)}
.cmp-col--old li::before{
  content:"\00d7";                   /* × */
  position:absolute;
  left:0;
  top:-1px;
  color:var(--muted);
  font-size:1.05em;
  line-height:1.3;
}
.cmp-col--new li{color:var(--green-deep)}
.cmp-col--new li::before{
  content:"\2713";                   /* ✓ */
  position:absolute;
  left:0;
  top:0;
  color:var(--green);
  font-weight:600;
}

@media (max-width:640px){
  .a .cmp-table{grid-template-columns:1fr;gap:10px;padding-right:20px}
  .cmp-col{padding:14px 16px}
  .cmp-col li{font-size:.82rem}
}


/* ---------- Tabs (dot rail + tab toggles) ---------- */

/* Ritual tabs — one pill per SKU. Row scrolls horizontally when it doesn't
   fit (up to 6 pills across all live + coming-soon products). Each pill is
   independent (no shared container border) so wrapping / scrolling reads
   naturally. */
.tabs{
  display:flex;
  gap:8px;
  margin-top:26px;
  padding:4px 0;
  overflow-x:auto;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  flex:0 0 auto;
  background:transparent;
  border:1px solid var(--line);
  border-radius:100px;
  cursor:pointer;
  font-family:var(--body);font-weight:600;font-size:.8rem;
  color:var(--muted);
  padding:.6em 1.2em;
  white-space:nowrap;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.tabs button:hover{
  border-color:var(--green-deep);
  color:var(--green-deep);
}
.tabs button[aria-selected="true"]{
  background:var(--green-deep);
  color:#fff;
  border-color:var(--green-deep);
}
.tabs button:focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
}

/* Mobile: edge-to-edge tab row with the same swipe language as other
   horizontal scrollers on the page */
@media (max-width:640px){
  .tabs{
    margin-left:-24px;
    margin-right:-24px;
    padding-left:24px;
    padding-right:24px;
  }
}

/* Days rail — horizontal scroll of 7 or 14 day-dot buttons. Wrapper adds
   a gradient fade + chevron button at the right edge so first-time
   visitors know more dots exist off-screen. Both are hidden when the
   rail can already show every dot (desktop wide viewports). */
.rail-wrap{position:relative}
.rail{display:flex;gap:8px;overflow-x:auto;padding:30px 0 6px;scrollbar-width:none;scroll-behavior:smooth}
.rail::-webkit-scrollbar{display:none}

/* Gradient fade under the button — hints at the row continuing. */
.rail-wrap::after{
  content:"";
  position:absolute;
  right:0;
  top:30px;                         /* line up with the dots (skip padding-top) */
  bottom:6px;
  width:64px;
  background:linear-gradient(to right, transparent, var(--canvas) 55%);
  pointer-events:none;
  opacity:1;
  transition:opacity .25s ease;
}
.rail-wrap.is-at-end::after{opacity:0}

/* Interactive chevron — clicking scrolls the rail forward by one screen. */
.rail-next{
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-30%);       /* half of the dots' height plus padding correction */
  z-index:1;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--green-deep);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.rail-next[hidden]{display:none}
.rail-next:hover{
  background:var(--green-deep);
  border-color:var(--green-deep);
  color:#fff;
}
.rail-next:focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
}
.dot{
  flex:none;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);background:none;
  font-family:var(--display);font-size:1rem;
  cursor:pointer;color:var(--muted);
  transition:.25s;
}
.dot[aria-selected=true]{color:#fff;border-color:transparent}


/* ---------- Chips (ingredient tags) ---------- */

.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{
  font-size:.82rem;font-weight:500;
  background:var(--boxes-bg);         /* was #F3F1E9 */
  border-radius:100px;padding:.36em .85em;
}


/* ---------- Cards ---------- */

/* Pricing card — flex item inside .boxes-row horizontal scroll container.
   Fixed flex-basis so cards don't shrink; scroll-snap-align makes swipes
   land cleanly on each card's leading edge. */
.box{
  flex:0 0 500px;
  scroll-snap-align:start;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;padding:34px 30px;
  display:flex;flex-direction:column;
}
.box.lead{background:var(--green-deep);color:#fff;border-color:var(--green-deep)}
.box .tg{
  align-self:flex-start;
  background:var(--d1);color:#fff;
  font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:.4em 1em;border-radius:100px;margin-bottom:16px;
}
.box h3{font-size:2rem}
.box .who{font-size:.82rem;color:var(--muted);margin-top:6px}
.box.lead .who{color:var(--on-dark-1)}
.box .amt{font-family:var(--display);font-size:2.5rem;margin:18px 0 0}
.box .amt em{
  font-style:normal;font-family:var(--body);
  font-size:.8rem;font-weight:500;color:var(--muted);
}
.box.lead .amt em{color:var(--on-dark-1)}

.facts{
  display:flex;gap:20px;margin:16px 0 22px;padding:14px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.box.lead .facts{border-color:rgba(255,255,255,.18)}
.facts div{font-size:.7rem;color:var(--muted);font-weight:500}
.box.lead .facts div{color:var(--on-dark-1)}
.facts b{
  display:block;font-family:var(--display);font-weight:500;
  font-size:1.25rem;color:var(--green-deep);
}
.box.lead .facts b{color:#fff}

.box ul{
  list-style:none;margin:0 0 26px;padding:0;
  display:grid;gap:9px;font-size:.88rem;
}
.box li{display:flex;gap:9px;line-height:1.45}
.box li i{font-style:normal;color:var(--green);font-weight:700}
.box.lead li i{color:var(--d4)}

.acts2{margin-top:auto;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.jump{font-size:.78rem;font-weight:600;color:var(--green);cursor:pointer}
.box.lead .jump{color:var(--d4)}

@media (max-width:940px){
  /* Mobile card width — card 1 full + small peek of card 2 signals swipe.
     Math: (100vw - 36px) / 1.15 where 36px = 24 scroll-padding + 12 gap. */
  .box{
    flex:0 0 calc((100vw - 36px) / 1.15);
    min-width:280px;
    max-width:400px;
    padding:26px 22px;
  }
}

/* Day-explorer chip-card — the colored top of the day panel. Fills the
   panel width; the parent .panel has overflow:hidden so its border-radius
   clips the top corners of this block cleanly (no need to duplicate the
   radius here). */
.chip-card{
  padding:32px 26px;
  display:flex;flex-direction:column;justify-content:center;text-align:center;
}
.chip-card .dn{
  font-size:.66rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;opacity:.9;
}
.chip-card .nm{
  font-family:var(--display);font-size:2rem;
  line-height:1.05;margin-top:10px;
  font-variant-numeric:lining-nums;
}

@media (max-width:940px){
  .chip-card{padding:26px 20px}
  .chip-card .nm{font-size:1.7rem}
}

/* Phase group inside explorer panel (Tonight / By morning) */
.ph h4{
  font-family:var(--body);
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
  margin:0 0 12px;
  display:flex;align-items:center;gap:8px;
}
.ph h4 em{margin-left:auto;font-style:normal;font-weight:500;color:var(--muted);opacity:.8}
.ph + .ph{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}


/* ---------- Forms ---------- */

.form{display:flex;gap:10px;flex-wrap:wrap}
.form input{
  flex:1;min-width:210px;
  border:0;border-radius:100px;
  padding:1em 1.4em;
  font-family:var(--body);font-size:.92rem;
}
.form input:focus,
.form__msg:focus{outline:3px solid rgba(255,255,255,.55)}

/* Message textarea — full-width row above the email+button pair.
   flex:0 0 100% forces it onto its own line via the parent's flex-wrap. */
.form__msg{
  flex:0 0 100%;
  border:0;
  border-radius:14px;
  padding:14px 20px;
  font-family:var(--body);
  font-size:.92rem;
  line-height:1.45;
  resize:vertical;
  min-height:96px;
}
.form__msg::placeholder{color:var(--muted);opacity:.8}