/* Site chrome: ticker, nav, brand mark, strip, footer, buttons and the
   page primitives they need. Shared because the chrome template part is
   shared. GENERATED by migration/compose-css.py — do not hand-edit. */
:root{
  --paper:#FFFFFF;
  --panel:#F5F5F3;
  --panel-2:#EDF2EF;
  --ink:#12100D;
  --ink-2:#5A544B;
  --ink-3:#918A80;
  --line:#E7E5E0;
  --line-2:#D6D3CC;
  --forest:#0F3B2D;
  --forest-deep:#0A2A20;
  --gold:#B9873B;
  --gold-soft:#FAF5EC;
  --gold-line:#E7D8BC;
  --s1:8px;
  --s2:16px;
  --s3:24px;
  --s4:32px;
  --s5:48px;
  --s6:64px;
  --s7:96px;
  --t-xs:12px;
  --t-sm:14px;
  --t-base:16px;
  --t-md:18px;
  --t-lg:21px;
  --t-xl:26px;
  --t-2xl:33px;
  --t-3xl:42px;
  --t-4xl:54px;
  --grid-max:1200px;
  --r:10px;
  --r-lg:14px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --green:#17A34A;
  --green-2:#128A3E;
  --green-3:#0E6B31;
  --green-soft:#EAF8EF;
  --green-line:#BFE7CE;
}
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:var(--t-base);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:"cv11","ss01"}
img{max-width:100%;display:block;height:auto}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.14;letter-spacing:-.03em}
h1{font-size:clamp(30px,4.4vw,var(--t-3xl))}
h2{font-size:clamp(27px,3.6vw,var(--t-2xl))}
h3{font-size:var(--t-lg);letter-spacing:-.024em;line-height:1.25}
p{margin:0}
.wrap{width:100%;max-width:var(--grid-max);margin-inline:auto;padding-inline:var(--s3)}
.sec{padding-block:var(--s7)}
.sec--tight{padding-block:var(--s6)}
.sec--panel{background:var(--panel)}
.small{font-size:var(--t-sm);color:var(--ink-2);line-height:1.55}
.tiny{font-size:var(--t-xs);color:var(--ink-3);line-height:1.55}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--forest);outline-offset:3px;border-radius:3px}
.head{margin-bottom:var(--s5)}
.head p{font-size:var(--t-md);color:var(--ink-2);margin-top:12px;max-width:56ch}
.head--center{text-align:center}
.head--center p{margin-inline:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;border:0;border-radius:var(--r);font-weight:600;font-size:var(--t-sm);letter-spacing:-.008em;text-decoration:none;white-space:nowrap;position:relative;transition:transform .16s var(--ease),box-shadow .16s var(--ease),filter .16s var(--ease)}
.btn svg{flex:none}
.btn--primary{color:#fff;background-image:linear-gradient(180deg,#1D6047 0%,var(--forest) 52%,#0A2E22 100%);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 2px 3px rgba(10,42,32,.22),0 8px 20px -7px rgba(10,42,32,.4)}
.btn--primary:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 4px 7px rgba(10,42,32,.2),0 14px 28px -9px rgba(10,42,32,.45)}
.btn--primary:active{transform:translateY(1px);filter:brightness(.95);box-shadow:0 1px 3px rgba(10,42,32,.35) inset}
.btn--gold{color:#2B1D06;background-image:linear-gradient(180deg,#E2B96F 0%,#C79447 52%,#9C6E28 100%);box-shadow:0 1px 0 rgba(255,255,255,.42) inset,0 2px 3px rgba(110,74,20,.22),0 8px 20px -7px rgba(110,74,20,.38)}
.btn--gold:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn--gold:active{transform:translateY(1px);filter:brightness(.95)}
.btn--ghost{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2),0 1px 2px rgba(18,16,13,.04)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--ink);transform:translateY(-1px)}
.btn--block{width:100%}
.btn--sm{padding:10px 17px;font-size:13px;border-radius:8px}
.ticker{background:var(--forest-deep);color:#DCE9E3;overflow:hidden;font-size:13px;font-weight:500;max-width:100vw;contain:paint}
.ticker__track{display:flex;gap:var(--s6);white-space:nowrap;padding-block:9px;animation:slide 36s linear infinite;width:max-content}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker span{display:inline-flex;align-items:center;gap:9px}
.ticker b{color:#E2B96F;font-weight:600}
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.7) blur(14px);border-bottom:1px solid transparent;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.nav.is-stuck{border-bottom-color:var(--line);box-shadow:0 8px 28px -22px rgba(18,16,13,.6)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);height:72px}
.brand__logo{height:30px;width:auto;display:block}
.nav__links{display:flex;gap:var(--s4);list-style:none;margin:0;padding:0}
.nav__links a{text-decoration:none;font-size:var(--t-sm);font-weight:500;color:var(--ink-2);position:relative;padding-block:5px;transition:color .18s var(--ease)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--forest);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
@media(max-width:900px){.nav__links{display:none}.nav__in{height:62px}.brand__logo{height:26px}}
@media(max-width:380px){.wrap{padding-inline:16px}.nav__in{gap:10px}.brand__logo{height:21px}.nav .btn--sm{padding:9px 13px;font-size:12px}}
.foot{background:var(--forest-deep);color:#C4D8D0;padding-block:var(--s7) var(--s3);border-top:1px solid rgba(255,255,255,.1)}
.foot__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:var(--s5)}
.foot__logo{height:38px;width:auto;display:block;margin-bottom:var(--s3);filter:brightness(0) invert(1)}
.foot p{font-size:var(--t-sm);color:#93AFA4;line-height:1.62;max-width:38ch}
.foot h4{font-size:13px;font-weight:600;color:#fff;margin:0 0 16px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot li a{color:#A9C4B9;text-decoration:none;font-size:var(--t-sm);transition:color .18s var(--ease),padding-left .18s var(--ease)}
.foot li a:hover{color:#fff;padding-left:4px}
.foot__mail{display:inline-block;margin-top:var(--s3);color:#E2B96F;font-size:var(--t-sm);font-weight:500;text-decoration:none}
.foot__mail:hover{text-decoration:underline}
.foot__social{display:flex;gap:10px;margin-top:var(--s3)}
.foot__social a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);color:#C4D8D0;transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.foot__social a:hover{background:#fff;color:var(--forest-deep);transform:translateY(-2px)}
.foot__pay{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--s3)}
.foot__pay span{font-size:11px;font-weight:600;color:#A9C4B9;padding:5px 10px;border:1px solid rgba(255,255,255,.16);border-radius:6px}
.foot__legal{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;color:#79968B;font-size:var(--t-xs)}
@media(max-width:860px){.foot__grid{grid-template-columns:1fr 1fr;gap:var(--s4)}.foot__grid>div:first-child{grid-column:1/-1}}
.strip{background:var(--gold-soft);border-bottom:1px solid var(--gold-line);color:#7A5714}
.strip--green{background:var(--green-soft);border-bottom-color:var(--green-line);color:var(--green-3)}
.strip--quiet{background:var(--panel);border-bottom-color:var(--line);color:var(--ink-2)}
.strip--dark{background:var(--forest-deep);border-bottom-color:rgba(255,255,255,.12);color:#C9DED5}
.strip__in{display:flex;align-items:center;justify-content:center;gap:9px;padding-block:8px;font-size:12px;font-weight:600;letter-spacing:-.005em;line-height:1.35;text-align:center}
.strip__in svg{flex:none;opacity:.9}
.strip__sm{display:none}
@media(max-width:560px){.strip__in{padding-block:7px;font-size:11px;gap:7px}.strip__lg{display:none}.strip__sm{display:inline}}
@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
@media(max-width:760px){.sec{padding-block:var(--s6)}.head{margin-bottom:var(--s4)}}
.btn--cart{color:#fff;background-image:linear-gradient(180deg,#22B858 0%,var(--green) 52%,var(--green-3) 100%);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 2px 3px rgba(14,107,49,.22),0 8px 20px -7px rgba(14,107,49,.42)}
.btn--cart:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 1px 0 rgba(255,255,255,.32) inset,0 4px 7px rgba(14,107,49,.2),0 14px 28px -9px rgba(14,107,49,.46)}
.btn--cart:active{transform:translateY(1px);filter:brightness(.95);box-shadow:0 1px 3px rgba(14,107,49,.4) inset}
.btn--dark{color:#fff;background-image:linear-gradient(180deg,#2C2822 0%,#15120E 55%,#000 100%);box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 2px 3px rgba(0,0,0,.3),0 8px 20px -7px rgba(0,0,0,.45)}
.btn--dark:hover{transform:translateY(-2px);filter:brightness(1.2)}
.btn--dark:active{transform:translateY(1px)}

/* ---------------------------------------------------------------------------
 * Brand mark sizing, pinned so it cannot lose a cascade fight.
 *
 * The design's own `.brand__logo{height:30px;width:auto}` (specificity 0,1,0)
 * was NOT winning against `img{height:auto}` (0,0,1) on the product page — the
 * logo rendered at its intrinsic 833px, clamped to the header width, 651x405 in
 * a 72px header. I could not explain that from the cascade: the rule is present,
 * the selector matches, the sheet is enabled, and no !important competes. An
 * identical rule injected last in the head also lost, while the same rule with
 * !important won.
 *
 * Rather than leave a logo the size of a billboard while I chase it, the mark is
 * constrained here in a way that has no ambiguity: a container with a fixed box
 * and an image told to fit inside it. If the underlying cause is ever found,
 * this block can go.
 * ------------------------------------------------------------------------- */
.nav__in .brand,
.nav__in > a:first-child{display:flex;align-items:center;height:39px;flex:none}
.nav__in picture{display:flex;align-items:center;height:100%}
.nav__in .brand__logo{height:39px;width:auto;max-height:39px;max-width:250px;
  object-fit:contain;object-position:left center;display:block}

.foot__grid picture{display:block}
.foot__logo{height:30px;width:auto;max-height:30px;max-width:190px;
  object-fit:contain;object-position:left center;display:block}

@media(max-width:900px){
  .nav__in .brand,.nav__in > a:first-child{height:34px}
  .nav__in .brand__logo{height:34px;max-height:34px}
}
@media(max-width:380px){
  .nav__in .brand,.nav__in > a:first-child{height:27px}
  .nav__in .brand__logo{height:27px;max-height:27px}
}

/* Woo's price markup must stay inline on the marketing pages too. Several
   components carry a blanket `<parent> span{display:block}` to stack their own
   labels, and wc_price() renders the rupee symbol in a nested span — which then
   printed the symbol on one line and the digits on the next. */
.woocommerce-Price-amount,
.woocommerce-Price-currencySymbol,
.amount bdi,bdi{display:inline !important;white-space:nowrap}
.card__price b,.card__price s,.card__save,
.pack__p b,.pack__p s,
.price__now,.price__mrp,
.sbar__now,.sbar__mrp{white-space:nowrap}
.card__price{flex-wrap:wrap}

/* Reveal-on-scroll must never trap content. If the observer does not fire — JS
   blocked, an old browser, a prerender — the page still has to be readable. The
   hidden state is applied by JS via .rv-armed, so no-JS keeps everything visible.
   Content trapped behind an animation is a content bug, not a motion bug. */
.rv-in{opacity:1;transform:none}
.rv-armed.rv-in{opacity:0;transform:translateY(14px)}
.rv-armed.rv-in.is-in{opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
@media(prefers-reduced-motion:reduce){
  .rv-armed.rv-in{opacity:1;transform:none;transition:none}
}

/* ---------------------------------------------------------------------------
 * Modern Cart (CartFlows) — themed through ITS OWN custom properties.
 *
 * The plugin exposes a full set of --moderncart-* variables, so the drawer is
 * skinned by setting those rather than by overriding its selectors. That keeps
 * the plugin free to change its markup without breaking us, and it is the
 * difference between theming a plugin and fighting one.
 *
 * Full-width instead of a half side-pane, per Harsh, on desktop and mobile.
 * ------------------------------------------------------------------------- */
/* Theming is done through the plugin's OWN settings (see
   migration/theme-modern-cart.php), because it writes its --moderncart-* block
   from those options and that block beats anything declared here. Only the two
   things its settings do not cover are below. */.moderncart-panel,.moderncart-slide-out-cart{font-family:"Inter",system-ui,sans-serif}
.moderncart-slide-out-cart{max-width:none}

/* The header carries the cart, so the floating bubble is redundant chrome. */
.moderncart-floating-cart-button{
  position:fixed !important;width:1px !important;height:1px !important;
  opacity:0 !important;pointer-events:none !important;bottom:0 !important;
  right:0 !important;overflow:hidden !important;z-index:-1 !important}

/* ---------------------------------------------------------------------------
 * Header cart button.
 * ------------------------------------------------------------------------- */
.nav__cart{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--paper);
  color:var(--ink);flex:none;cursor:pointer;
  transition:border-color .18s var(--ease),transform .18s var(--ease),background .18s var(--ease)}
.nav__cart:hover{border-color:var(--ink);transform:translateY(-1px);background:var(--panel)}
.nav__cart:active{transform:translateY(1px)}
.nav__cart svg{display:block}
.nav__cart .cart-count{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;
  padding:0 5px;border-radius:100px;background:var(--forest);color:#fff;
  font-size:11px;font-weight:700;line-height:20px;text-align:center;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--paper)}
.nav__cart .cart-count[data-empty="1"]{display:none}
.nav__in{gap:12px}
@media(max-width:380px){.nav__cart{width:38px;height:38px}}

/* Drawer width: full-bleed on mobile, roomier on desktop.
 *
 * The plugin's own `slide_out_width_*` settings are saved (620 / 100) but its
 * renderer still emits the defaults, so the stored values never reach the page.
 * Rather than fight that, the two variables are re-declared one level closer to
 * the content than the plugin's own :root block — the lightest override
 * available, and it touches no selector the plugin might rename. */
body{
  --moderncart-slide-out-mobile-width:100%;
  --moderncart-slide-out-desktop-width:620px;
}

/* ---------------------------------------------------------------------------
 * Header actions.
 *
 * The nav row is `justify-content:space-between`. With four direct children —
 * logo, nav, cart, CTA — that spreads all four evenly and parked the cart icon
 * in the middle of the header, which looked like a mistake on desktop and worse
 * on mobile where the links are hidden. Grouping the two actions makes it three
 * children: logo left, nav in the middle, actions right.
 * ------------------------------------------------------------------------- */
.nav__actions{display:flex;align-items:center;gap:12px;flex:none;margin-left:auto}
.nav__in>nav{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
@media(max-width:900px){
  /* Links are hidden at this width; the empty nav must not hold a gap open. */
  .nav__in>nav{flex:0 0 auto}
  .nav__actions{gap:10px}
}
@media(max-width:380px){.nav__actions{gap:8px}}

/* The payment strip replaces four text chips, so it needs image rules rather
   than pill rules. Capped so it never dominates the footer column. */
.foot__pay{margin-top:14px}
.foot__pay-logos{width:100%;max-width:300px;height:auto;display:block;opacity:.92}
.foot__pay picture{display:block}

/* ---------------------------------------------------------------------------
 * Buttons that confirm in place.
 *
 * Three states share one box so the button never changes size and the layout
 * cannot shift. Lives in the shared chrome because BOTH the product page buy
 * box and the contact form use it — it started in product-extra.css, and the
 * contact page (which loads home.css) rendered "Send message" and "Sent" on top
 * of each other because the rules were not there.
 * ------------------------------------------------------------------------- */
.btn--cart,.btn--dark{position:relative;overflow:hidden}
.btn__idle,.btn__done{display:inline-flex;align-items:center;gap:9px;
  transition:opacity .2s var(--ease),transform .28s var(--ease)}
.btn__done{position:absolute;inset:0;justify-content:center;
  opacity:0;transform:translateY(60%)}
.btn.is-done .btn__idle{opacity:0;transform:translateY(-60%)}
.btn.is-done .btn__done{opacity:1;transform:translateY(0)}
.btn.is-done{background-image:linear-gradient(180deg,#22B858 0%,#17A34A 52%,#0E6B31 100%);
  color:#fff}
.btn__tick{stroke-dasharray:32;stroke-dashoffset:32}
.btn.is-done .btn__tick{animation:bo-tick .4s var(--ease) .06s forwards}
@keyframes bo-tick{to{stroke-dashoffset:0}}

.btn__spin{position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;opacity:0;
  animation:bo-spin .7s linear infinite}
.btn.is-busy .btn__spin{opacity:1}
.btn.is-busy .btn__idle,.btn.is-busy .btn__done{opacity:0}
@keyframes bo-spin{to{transform:rotate(360deg)}}
.btn[disabled],.btn.is-out{opacity:.55;pointer-events:none}


/* Content pages: the page title, the lead and the first section heading were
   stacking with almost no air between them. */
.page-head-pad .page-title{margin-bottom:10px}
.post-body>.lead{font-size:16px;line-height:1.65;color:var(--ink-2);
  max-width:60ch;margin:0 0 30px}
.post-body h2{margin-top:38px;margin-bottom:12px}
.post-body h2:first-child{margin-top:0}
.post-body p+p{margin-top:14px}

/* ---------------------------------------------------------------------------
 * TRACK ORDER — header action
 *
 * Lives in .nav__actions, not .nav__links, because below 900px the links list
 * is display:none and this header has no hamburger: anything in the list is
 * simply gone on a phone. On a store that is mostly mobile and mostly cash on
 * delivery, "where is my order" is the most common return visit, so it has to
 * be reachable from every page without a menu.
 *
 * Same 1px border, same pill radius and the same 38-42px control height as the
 * cart button beside it, so the two read as one control group.
 * ------------------------------------------------------------------------ */
.nav__track{
  display:inline-flex;align-items:center;gap:8px;
  height:42px;padding:0 16px;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:transparent;
  color:var(--ink-2);
  font-size:var(--t-sm);font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease);
}
.nav__track:hover{border-color:var(--forest);color:var(--forest);background:var(--panel)}
.nav__track svg{display:block;flex:none}

/* Icon only once the header gets tight — the label would push Shop now off. */
@media(max-width:640px){
  .nav__track{width:42px;height:42px;padding:0;justify-content:center}
  .nav__track-lg{display:none}
}
@media(max-width:380px){
  .nav__track{width:38px;height:38px}
}