/* AyurOne Mart shop — shared styles
   Brand: deep green #002E29, bronze #8A542A, pale gold #FCF2A7.
   Layout follows the familiar Indian D2C wellness shop so customers who have
   bought on Kapiva or Amazon already know where everything is — the photo is
   the hero of every card, price and the add button are always in the same
   place, and nothing important is more than one thumb-reach away on a phone. */

:root{
  --ink:#002E29; --ink-2:#00433B; --ink-deep:#001B18;
  --gold:#FCF2A7; --bronze:#8A542A;
  --bg:#FFFFFF; --bg-2:#F2F6F1; --bg-3:#E6EEE5;
  --line:#DCE4DB; --text:#152220; --muted:#5A6B66;
  --sale:#B3261E; --ok:#1B7A46;
  --r:14px; --maxw:1240px;
}
*{box-sizing:border-box}
/* The cart drawer is parked off-screen with translateX(100%). On Android
   Chrome that still counts as page width, so the browser decides the page is
   wider than the phone and zooms the whole thing out — which is exactly what
   "it shows the PC version on my phone" looks like. Clamping the page width
   stops it. */
html,body{max-width:100%;overflow-x:hidden}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Noto Sans Kannada",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Noto Serif Kannada",Georgia,serif;font-weight:600;line-height:1.3;margin:0}
p{margin:0 0 1em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.lang-en{display:none}
html[data-lang="en"] .lang-kn{display:none}
html[data-lang="en"] .lang-en{display:inline}
html[data-lang="en"] .lang-en.blk{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* ── announcement ─────────────────────────────── */
.ann{background:var(--bronze);color:#fff;text-align:center;font-size:13.5px;font-weight:600;padding:7px 16px}

/* ── header ───────────────────────────────────── */
.hd{background:var(--ink);color:#fff;position:sticky;top:0;z-index:60}
.hd-in{max-width:var(--maxw);margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.logo{font-family:"Noto Serif Kannada",serif;font-size:19px;font-weight:700;white-space:nowrap}
.logo em{font-style:normal;color:var(--gold)}
.search{flex:1;min-width:0;position:relative}
.search input{width:100%;font-size:15px;padding:9px 13px 9px 36px;border:0;border-radius:999px;background:#fff;color:var(--text)}
.search::before{content:"🔍";position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.6}
.hd-act{display:flex;align-items:center;gap:8px;margin-left:auto}
.langsw{display:flex;border:1px solid rgba(252,242,167,.45);border-radius:999px;overflow:hidden}
.langsw button{background:none;border:0;color:#cfe0da;font-size:12.5px;font-weight:600;padding:5px 11px;cursor:pointer}
.langsw button[aria-pressed="true"]{background:var(--gold);color:var(--ink)}
.icbtn{position:relative;background:none;border:0;color:#fff;font-size:21px;cursor:pointer;padding:4px 6px;line-height:1}
.badge{position:absolute;top:-2px;right:-4px;background:var(--gold);color:var(--ink);
  font-size:11px;font-weight:800;min-width:18px;height:18px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;font-family:system-ui,sans-serif}
.badge[hidden]{display:none}
@media(max-width:640px){
  .hd-in{flex-wrap:wrap;row-gap:9px}
  .search{order:3;flex-basis:100%}
  .langsw button{padding:5px 9px}
}


/* ── main nav ─────────────────────────────────
   The shop is only one of four things AyurOne Mart does. Consultation,
   the patient app and the franchise/distribution side were reachable only
   from the footer, which is where links go to be ignored. They sit in the
   header now, scrollable sideways on a phone so none of them is dropped. */
.nav{background:var(--ink-2);border-top:1px solid rgba(252,242,167,.16)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 16px;display:flex;gap:4px;
  overflow-x:auto;scrollbar-width:none}
.nav-in::-webkit-scrollbar{display:none}
.nav a{flex:0 0 auto;color:#DCE8E3;font-size:14.5px;font-weight:600;padding:11px 14px;white-space:nowrap;
  border-bottom:3px solid transparent}
.nav a:hover,.nav a.on{color:var(--gold);border-bottom-color:var(--gold)}

/* ── the four things we do ────────────────── */
.svc{background:var(--bg);padding:26px 0 8px}
.svc-g{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.svc-c{display:block;border:1.5px solid var(--line);border-radius:var(--r);padding:17px 18px;background:#fff}
.svc-c:hover{border-color:var(--ink);background:var(--bg-2)}
.svc-c .ic{font-size:24px;line-height:1}
.svc-c h3{font-size:16.5px;color:var(--ink);margin:9px 0 5px}
.svc-c p{font-size:13.5px;color:var(--muted);margin:0}
.svc-c .go{display:inline-block;margin-top:9px;font-size:13.5px;font-weight:700;color:var(--bronze)}

/* ── hero slider ──────────────────────────────── */
.hero{background:var(--ink);position:relative;overflow:hidden}
.heroband{background:var(--ink)}
.slides{display:flex;transition:transform .5s cubic-bezier(.3,.7,.3,1);will-change:transform}
/* The banner artwork already carries the headline, the product and the
   benefit icons, so the slide is the image and nothing is layered on top of
   it — type over a busy creative only fights the design Prasad shot. */
.slide{min-width:100%;position:relative;display:block}
/* The artwork is close to square (1564x1006). Left full-bleed it grows as
   tall as the window and pushes the products off the first screen, so on a
   wide screen it is capped and cropped from the middle outwards, where the
   banner has the least going on. On a phone the natural height is already
   small, so it is shown whole. */
.slide img{width:100%;height:auto;display:block}
@media(min-width:760px){
  .hero{max-width:var(--maxw);margin:0 auto}
  .slide img{height:min(42vw,460px);object-fit:cover;object-position:center 22%}
}
.slide .fallback{padding:48px 16px;text-align:center;color:#B5CCC5;font-size:15px}
/* the words live in a band under the banner, where they stay readable and
   can switch language — the burnt-in banner text cannot */
.herocta{background:var(--ink);padding:0 0 26px}
.herocta-in{max-width:var(--maxw);margin:0 auto;padding:4px 16px 0;display:flex;
  gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.herocta p{color:#C4D6D0;margin:0;font-size:15.5px;max-width:48ch}
.herocta b{color:var(--gold);font-family:"Noto Serif Kannada",serif;font-size:18px;display:block;margin-bottom:3px}
.herocta .acts{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;border:0;border-radius:999px;padding:13px 26px;font-size:16px;font-weight:700;cursor:pointer}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-line{background:transparent;color:var(--gold);border:1.5px solid var(--gold)}
.dots{display:flex;gap:7px;justify-content:center;padding:12px 0 4px}
.dots button{width:8px;height:8px;border-radius:999px;border:0;background:rgba(255,255,255,.35);cursor:pointer;padding:0}
.dots button[aria-current="true"]{background:var(--gold);width:22px}

/* ── concern chips ────────────────────────────── */
.concerns{background:var(--bg-2);padding:22px 0;border-bottom:1px solid var(--line)}
.chips{display:flex;gap:9px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;background:#fff;border:1.5px solid var(--line);border-radius:999px;
  padding:9px 17px;font-size:14.5px;font-weight:600;color:var(--text);cursor:pointer;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.clabel{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:10px}

/* ── sections ─────────────────────────────────── */
.sec{padding:46px 0}
.sec.alt{background:var(--bg-2)}
.sec-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.sec-hd h2{font-size:clamp(21px,3.6vw,30px);color:var(--ink)}
.sec-hd p{margin:6px 0 0;color:var(--muted);font-size:14.5px;max-width:58ch}

/* ── product grid ─────────────────────────────── */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
@media(max-width:520px){.grid{grid-template-columns:1fr 1fr;gap:11px}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.card.hide{display:none}
.shot{aspect-ratio:1/1;background:var(--bg-3);position:relative;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover}
.shot .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;color:var(--ink);opacity:.4;font-size:12.5px;text-align:center;padding:12px}
.shot .ph svg{width:52px;height:64px}
.tag{position:absolute;top:9px;left:9px;background:var(--sale);color:#fff;font-size:11.5px;
  font-weight:700;padding:3px 9px;border-radius:999px}
.cbody{padding:12px 13px 14px;display:flex;flex-direction:column;flex:1}
.cname{font-family:"Noto Serif Kannada",serif;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.35}
.cline{font-size:12.5px;color:var(--muted);margin:5px 0 10px;flex:1;line-height:1.55}
.sizes{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.size{border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:4px 10px;
  font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.size[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.pr{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.pr b{font-family:"Noto Serif Kannada",serif;font-size:19px;color:var(--ink)}
.pr s{color:var(--muted);font-size:13.5px}
.add{width:100%;border:1.5px solid var(--ink);background:var(--gold);color:var(--ink);
  border-radius:9px;padding:10px;font-size:14.5px;font-weight:700;cursor:pointer}
.add.ghost{background:#fff}
.add:active{transform:translateY(1px)}

/* ── trust strip ──────────────────────────────── */
.strip{background:var(--ink);color:#DCE8E3;padding:30px 0}
.strip-g{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.strip h3{font-size:15.5px;color:var(--gold);margin-bottom:5px}
.strip p{font-size:13.5px;color:#B5CCC5;margin:0}

/* ── consult band ─────────────────────────────── */
.consult{background:var(--gold);padding:34px 0}
.consult-in{display:grid;gap:18px;align-items:center}
@media(min-width:800px){.consult-in{grid-template-columns:1.2fr 1fr}}
.consult h2{font-size:clamp(21px,3.4vw,28px);color:var(--ink)}
.consult p{color:#3C4A3F;margin:8px 0 0;font-size:15px}
.cform{display:flex;gap:9px;flex-wrap:wrap}
.cform input{flex:1;min-width:130px;font-size:16px;padding:12px 14px;border:1.5px solid rgba(0,46,41,.3);border-radius:9px;background:#fff}
.cform button{background:var(--ink);color:var(--gold);border:0;border-radius:9px;padding:12px 22px;font-weight:700;cursor:pointer}
.cmsg{flex-basis:100%;font-size:14px;font-weight:600;margin-top:4px}


/* ── consultation slip ────────────────────────
   A real form, not a two-box strip: the doctor needs the complaint and the
   town before the call is worth making, and a form that asks for them reads
   as a clinic intake rather than a newsletter signup. */
.consult-in{align-items:start}
.cpoints{list-style:none;padding:0;margin:16px 0 0}
.cpoints li{position:relative;padding-left:26px;font-size:14.5px;color:#2F3D33;margin-bottom:7px;font-weight:600}
.cpoints li::before{content:"✓";position:absolute;left:0;top:0;color:var(--ink);font-weight:800}
.slip{background:#fff;border-radius:4px 4px 14px 14px;padding:22px 20px 24px;position:relative;
  box-shadow:0 20px 44px -20px rgba(0,0,0,.45)}
.slip::before{content:"";position:absolute;left:0;right:0;top:-9px;height:10px;background:#fff;
  -webkit-mask:radial-gradient(circle at 5px 10px,transparent 4.5px,#000 5px) repeat-x;
  mask:radial-gradient(circle at 5px 10px,transparent 4.5px,#000 5px) repeat-x}
.slip h3{font-size:19px;color:var(--ink)}
.sliprule{height:2px;background:var(--ink);opacity:.15;margin:12px 0 17px}
.slip .go{width:100%;border:0;border-radius:10px;padding:14px;font-size:16.5px;font-weight:700;
  background:var(--ink);color:var(--gold);cursor:pointer;margin-top:4px}
.slip .go:hover{background:var(--ink-deep)}
.slip .go:disabled{opacity:.6;cursor:progress}
.slip .cmsg{margin-top:12px;font-size:14px;font-weight:600}

/* ── cart drawer ──────────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(0,20,17,.5);z-index:80;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:#fff;z-index:90;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.3,.7,.3,1);display:flex;flex-direction:column}
.drawer.on{transform:none}
.dr-hd{display:flex;align-items:center;justify-content:space-between;padding:15px 17px;border-bottom:1px solid var(--line)}
.dr-hd h2{font-size:18px;color:var(--ink)}
.dr-hd button{background:none;border:0;font-size:24px;cursor:pointer;color:var(--muted);line-height:1}
.dr-body{flex:1;overflow-y:auto;padding:14px 17px}
.dr-ft{border-top:1px solid var(--line);padding:15px 17px}
.line{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--bg-3)}
.line .th{width:58px;height:58px;border-radius:9px;background:var(--bg-3);flex:0 0 auto;overflow:hidden}
.line .th img{width:100%;height:100%;object-fit:cover}
.line .nm{font-size:14px;font-weight:600;color:var(--ink);line-height:1.4}
.line .sz{font-size:12.5px;color:var(--muted)}
.qty{display:flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:8px;width:fit-content;margin-top:6px}
.qty button{background:none;border:0;width:28px;height:28px;font-size:16px;cursor:pointer;color:var(--ink)}
.qty span{min-width:26px;text-align:center;font-size:14px;font-weight:700}
.line .amt{margin-left:auto;text-align:right;font-weight:700;color:var(--ink);white-space:nowrap}
.rm{background:none;border:0;color:var(--sale);font-size:12px;cursor:pointer;padding:2px 0;text-decoration:underline}
.tot{display:flex;justify-content:space-between;font-size:17px;font-weight:800;color:var(--ink);margin-bottom:11px}
.ship{font-size:12.5px;color:var(--muted);margin:-6px 0 11px}
.cta{display:block;width:100%;text-align:center;background:var(--ink);color:var(--gold);
  border:0;border-radius:10px;padding:14px;font-size:16.5px;font-weight:700;cursor:pointer}
.empty{text-align:center;color:var(--muted);padding:46px 16px;font-size:14.5px}

/* ── footer ───────────────────────────────────── */
footer{background:var(--ink-deep);color:#A9C1B9;padding:40px 0 92px;font-size:14.5px}
footer a{color:var(--gold)}
.fg{display:grid;gap:24px}
@media(min-width:760px){.fg{grid-template-columns:1.4fr 1fr 1fr}}
footer h4{font-family:"Noto Serif Kannada",serif;color:#fff;font-size:15.5px;margin:0 0 8px}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:5px}
.fine{border-top:1px solid rgba(255,255,255,.1);margin-top:26px;padding-top:16px;font-size:12.5px;color:#7E958E}

.wa{position:fixed;right:14px;bottom:14px;z-index:70;background:#1FA855;color:#fff;font-weight:700;
  font-size:14px;padding:11px 17px;border-radius:999px;box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}

/* ── checkout ─────────────────────────────────── */
.co{display:grid;gap:24px;padding:28px 0 60px}
@media(min-width:900px){.co{grid-template-columns:1.25fr .95fr;gap:36px;align-items:start}}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 20px}
.panel h2{font-size:19px;color:var(--ink);margin-bottom:4px}
.panel .hint{font-size:13.5px;color:var(--muted);margin-bottom:17px}
.fld{margin-bottom:13px}
.fld label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:5px}
.fld input,.fld textarea,.fld select{width:100%;font:inherit;font-size:16px;padding:11px 13px;
  border:1.5px solid var(--line);border-radius:9px;background:#fff;color:var(--text)}
.fld textarea{min-height:76px;resize:vertical}
.row2{display:grid;gap:13px}
@media(min-width:520px){.row2{grid-template-columns:1fr 1fr}}
.pay{display:grid;gap:10px}
.pay label{display:flex;gap:11px;align-items:flex-start;border:1.5px solid var(--line);
  border-radius:11px;padding:13px 15px;cursor:pointer}
.pay label.on{border-color:var(--ink);background:var(--bg-2)}
.pay input{margin-top:4px;accent-color:var(--ink);width:18px;height:18px}
.pay b{display:block;font-size:15px;color:var(--ink)}
.pay small{color:var(--muted);font-size:13px}
.sum .line{border-bottom:1px solid var(--bg-3)}
.sumrow{display:flex;justify-content:space-between;font-size:14.5px;padding:5px 0;color:var(--muted)}
.sumrow.big{font-size:18px;font-weight:800;color:var(--ink);border-top:2px solid var(--line);margin-top:9px;padding-top:11px}
.note{background:var(--bg-2);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--muted);margin-top:14px}
.err{background:#FBE9E7;color:#A32A1C;border-radius:9px;padding:11px 13px;font-size:14px;font-weight:600;margin-bottom:14px;display:none}
.err.on{display:block}
.done{text-align:center;padding:56px 16px}
.done .tick{font-size:48px}
.done h1{font-size:26px;color:var(--ink);margin:12px 0 8px}

/* ── phone tab bar ─────────────────────────── */
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:75;
  grid-template-columns:repeat(5,1fr);background:var(--ink);
  border-top:1px solid rgba(252,242,167,.2);
  padding-bottom:env(safe-area-inset-bottom,0)}
.tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:7px 2px 8px;background:none;border:0;cursor:pointer;color:#BCD2CB;
  font-size:11px;font-weight:600;line-height:1.2;text-align:center}
.tabbar i{font-style:normal;font-size:19px;line-height:1;position:relative}
.tabbar a.on{color:var(--gold)}
.tabbar .tbadge{position:absolute;top:-5px;right:-9px;background:var(--gold);color:var(--ink);
  font-style:normal;font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;font-family:system-ui,sans-serif}
.tabbar .tbadge[hidden]{display:none}

/* ── phone ─────────────────────────────────────
   Two triggers, deliberately. The width one is the ordinary case. The
   second one matters more: when Chrome on Android has "Desktop site"
   ticked for a domain it IGNORES the viewport meta tag and tells the page
   it is ~980px wide, so every max-width breakpoint stays silent and the
   desktop layout is what the phone draws — the page then just looks
   shrunk. A screen that is touch-only (coarse pointer, no hover) is a
   phone whatever width it claims to be, so the phone layout is keyed to
   that as well and desktop mode can no longer drag the PC layout onto it.
   Everything the wide-screen rules above switch on is switched back here,
   because at a claimed 980px those rules are still live. */
@media (max-width:620px),
       (pointer:coarse) and (hover:none) and (max-width:1180px){
  body{font-size:15.5px}
  .wrap{padding:0 14px}
  .ann{font-size:12px;padding:6px 12px}

  /* header: logo + language + call + bag on one row, search under it */
  .hd-in{flex-wrap:wrap;row-gap:9px;padding:9px 14px}
  .logo{font-size:17px}
  .search{order:3;flex-basis:100%}
  .langsw button{padding:5px 9px;font-size:12px}
  .nav-in{padding:0 14px}
  .nav a{font-size:13.5px;padding:10px 11px}

  /* banner shown whole — the crop is for wide screens only */
  .hero{max-width:none;margin:0}
  .slide img{height:auto;object-fit:fill;object-position:center}
  .herocta{padding:0 0 20px}
  .herocta-in{padding:10px 14px 0}
  .herocta p{font-size:14.5px}
  .herocta b{font-size:17px}
  .herocta .acts{width:100%}
  .herocta .acts .btn{flex:1;text-align:center;padding:12px 10px;font-size:14.5px}
  .btn{padding:12px 20px;font-size:15px}

  .svc{padding:18px 0 4px}
  .svc-g{grid-template-columns:1fr;gap:10px}
  .sec{padding:30px 0}
  .sec-hd{margin-bottom:16px}
  .sec-hd h2{font-size:21px}
  .concerns{padding:16px 0}
  .chip{padding:8px 15px;font-size:14px}

  /* two products across, the way every shopping app on a phone does it */
  .grid{grid-template-columns:1fr 1fr;gap:11px}
  .cname{font-size:14.5px}
  .cline{font-size:12px}
  .pr b{font-size:17.5px}
  .add{padding:9px;font-size:13.5px}

  .strip{padding:24px 0}
  .strip-g{grid-template-columns:1fr;gap:13px}

  .consult{padding:24px 0}
  .consult-in{grid-template-columns:1fr}
  .slip{padding:18px 16px 20px}
  .slip h3{font-size:18px}

  .co{grid-template-columns:1fr;gap:18px;padding:20px 0 40px}
  .panel{padding:18px 16px}
  .row2{grid-template-columns:1fr}

  .fg{grid-template-columns:1fr;gap:20px}
  /* room for the tab bar so the last line of the footer is not under it */
  footer{padding:30px 0 104px}
  .wa{font-size:13px;padding:9px 14px;right:11px;bottom:76px}

  .tabbar{display:grid}
}