:root{
  --bg:#FBF5E6;
  --surface:#FFFFFF;
  --surface-2:#F4E9CC;
  --ink:#20301A;
  --ink-soft:#5B6E4E;
  --line:#E3D8B4;
  --accent:#E0900F;
  --accent-ink:#3A2400;
  --accent-soft:#FBDFA0;
  --rose:#C2452B;
  --rose-soft:#F3D2C3;
  --forest:#1F4A2B;
  --forest-2:#153420;
  --forest-ink:#EFF6E4;
  --forest-line:rgba(239,246,228,0.18);
  --shadow: 0 20px 46px -26px rgba(58,36,0,0.35);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15130B;
    --surface:#1E1B10;
    --surface-2:#241F12;
    --ink:#F1ECDC;
    --ink-soft:#BBAF8E;
    --line:#342C18;
    --accent:#F0A93A;
    --accent-ink:#2A1800;
    --accent-soft:#4A360F;
    --rose:#E37A55;
    --rose-soft:#4A2418;
    --forest:#1B4527;
    --forest-2:#0E2716;
    --forest-ink:#E7F1DA;
    --forest-line:rgba(231,241,218,0.14);
    --shadow: 0 20px 46px -26px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{
  --bg:#15130B;
  --surface:#1E1B10;
  --surface-2:#241F12;
  --ink:#F1ECDC;
  --ink-soft:#BBAF8E;
  --line:#342C18;
  --accent:#F0A93A;
  --accent-ink:#2A1800;
  --accent-soft:#4A360F;
  --rose:#E37A55;
  --rose-soft:#4A2418;
  --forest:#1B4527;
  --forest-2:#0E2716;
  --forest-ink:#E7F1DA;
  --forest-line:rgba(231,241,218,0.14);
  --shadow: 0 20px 46px -26px rgba(0,0,0,0.6);
}

*{ box-sizing:border-box; }
html{ background:var(--bg); }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Mukta', system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:no-preference){
  body{ animation:page-enter .25s ease both; }
  body.page-leaving{ animation:none; opacity:0; transition:opacity .18s ease-out; }
  @keyframes page-enter{ from{ opacity:0; } to{ opacity:1; } }
}
h1,h2,h3{
  font-family:'Rozha One', Georgia, 'Times New Roman', serif;
  font-weight:400;
  line-height:1.12;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}
p{ margin:0; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 clamp(20px,5vw,56px);
}

.eyebrow{
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
}
.eyebrow.on-forest{ color:var(--accent); }

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(20px,5vw,56px);
  max-width:1120px; margin:0 auto;
  gap:16px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
}
.brand-logo{
  width:38px; height:38px;
  object-fit:contain;
  flex:none;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.brand-mark{
  font-family:'Rozha One', serif;
  font-size:1.35rem;
  color:var(--ink);
}
.brand-sub{
  font-size:0.7rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:none;
}
@media (min-width:640px){ .brand-sub{ display:inline; } }

.nav-links{
  display:none;
  gap:20px;
  font-size:0.9rem;
  color:var(--ink-soft);
  white-space:nowrap;
}
.nav-links a{
  text-decoration:none;
  position:relative;
  padding-bottom:3px;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:1px;
  background:var(--accent);
}
@media (prefers-reduced-motion:no-preference){
  .nav-links a::after{ transition:right .25s ease; }
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ right:0; }
.nav-links a.current{ color:var(--ink); }
.nav-links a.current::after{ right:0; }
@media (min-width:980px){ .nav-links{ display:flex; } }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px;
  border-radius:3px;
  font-size:0.92rem;
  font-weight:600;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
}
.btn-accent{ background:var(--accent); color:var(--accent-ink); }
.btn-accent:hover{ filter:brightness(1.05); }
.btn-line{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-line:hover{ border-color:var(--ink-soft); }
.btn-on-forest{ background:var(--forest-ink); color:var(--forest-2); }
.btn-ghost-forest{ background:transparent; border-color:var(--forest-line); color:var(--forest-ink); }
@media (prefers-reduced-motion:no-preference){
  .btn{ transition:transform .18s ease, filter .18s ease, border-color .18s ease; }
  .btn:hover{ transform:translateY(-1px); }
  .btn:active{ transform:translateY(0); }
}

.nav-cta{ display:flex; gap:10px; }
.nav-cta .btn span.full{ display:none; }
@media (min-width:520px){ .nav-cta .btn span.full{ display:inline; } .nav-cta .btn span.short{ display:none; } }

/* ---------- hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-scene{
  position:absolute; inset:0;
  z-index:0;
}
.hero-inner{
  position:relative; z-index:1;
  padding:clamp(56px,9vw,108px) 0 clamp(48px,7vw,80px);
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
  align-items:end;
}
@media (min-width:900px){
  .hero-inner{ grid-template-columns:1.15fr 0.85fr; align-items:end; }
}
.hero-text{ max-width:640px; }
.hero-text h1{
  font-size:clamp(2.1rem,4.6vw,3.5rem);
  margin-top:14px;
}
.hero-text .lede{
  margin-top:20px;
  font-size:1.08rem;
  color:var(--ink-soft);
  max-width:52ch;
}
.hero-cta{
  margin-top:32px;
  display:flex; flex-wrap:wrap; gap:12px;
}
.hero-badge{
  margin-top:36px;
  display:flex; gap:22px; flex-wrap:wrap;
}
.hero-badge .item{
  font-size:0.82rem;
  color:var(--ink-soft);
  display:flex; align-items:center; gap:8px;
}
.hero-badge .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  flex:none;
}

.hero-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:4px;
  padding:26px;
  box-shadow:var(--shadow);
}
.hero-card .loc{
  font-family:'Rozha One', serif;
  font-size:1.5rem;
  margin-top:8px;
}
.hero-card .rule{
  height:1px; background:var(--line); margin:18px 0;
}
.hero-card dl{
  display:grid; grid-template-columns:auto 1fr; gap:8px 14px;
  margin:0; font-size:0.92rem;
}
.hero-card dt{ color:var(--ink-soft); }
.hero-card dd{ margin:0; font-weight:600; font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion:no-preference){
  .hero-text > *{ animation:hero-in .7s ease both; }
  .hero-text .eyebrow{ animation-delay:.02s; }
  .hero-text h1{ animation-delay:.08s; }
  .hero-text .lede{ animation-delay:.16s; }
  .hero-text .hero-cta{ animation-delay:.24s; }
  .hero-text .hero-badge{ animation-delay:.32s; }
  .hero-card{ animation:hero-in .7s ease .2s both; }
  @keyframes hero-in{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:none; }
  }
}

/* ---------- section shells ---------- */
section{ padding:clamp(56px,8vw,96px) 0; }
.section-head{
  display:flex; flex-direction:column; gap:14px;
  max-width:640px;
  margin-bottom:clamp(36px,5vw,56px);
}
.section-head h2{ font-size:clamp(1.7rem,3.2vw,2.4rem); }
.on-forest{ color:var(--forest-ink); }

/* ---------- reveal-on-scroll (progressive enhancement) ---------- */
.reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion:no-preference){
  .reveal.reveal-ready{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .6s ease, transform .6s ease;
  }
  .reveal.reveal-ready.in-view{ opacity:1; transform:none; }
}

/* ---------- about ---------- */
.about-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
}
@media (min-width:860px){ .about-grid{ grid-template-columns:1.2fr 0.8fr; align-items:start; } }
.about-copy p + p{ margin-top:16px; }
.about-copy .lede{ font-size:1.05rem; color:var(--ink-soft); max-width:58ch; }
.about-copy p{ color:var(--ink-soft); max-width:58ch; font-size:1rem; }
.about-facts{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:4px;
  padding:26px;
}
.about-facts .fact{
  display:flex; justify-content:space-between; gap:16px;
  padding:13px 0;
  border-bottom:1px solid var(--line);
  font-size:0.94rem;
}
.about-facts .fact:last-child{ border-bottom:none; }
.about-facts dt{ color:var(--ink-soft); }
.about-facts dd{ margin:0; font-weight:600; text-align:right; }

/* ---------- timeline ---------- */
.timeline{
  position:relative;
  display:flex; flex-direction:column;
  gap:0;
}
.timeline::before{
  content:"";
  position:absolute;
  left:64px; top:6px; bottom:6px;
  width:1px;
  background:var(--line);
}
@media (max-width:640px){ .timeline::before{ left:44px; } }
.tl-row{
  position:relative;
  display:grid;
  grid-template-columns:64px 1fr;
  gap:24px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.tl-row:last-child{ border-bottom:none; }
@media (max-width:640px){ .tl-row{ grid-template-columns:44px 1fr; gap:16px; } }
.tl-time{
  font-weight:700;
  font-size:0.86rem;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
  padding-top:2px;
}
.tl-dot{
  position:absolute;
  left:64px; top:26px;
  width:9px; height:9px;
  transform:translateX(-50%);
  border-radius:50%;
  background:var(--bg);
  border:2px solid var(--accent);
}
@media (max-width:640px){ .tl-dot{ left:44px; } }
.tl-body h3{
  font-size:1.15rem;
  font-family:'Mukta', sans-serif;
  font-weight:700;
}
.tl-body p{
  margin-top:6px;
  color:var(--ink-soft);
  max-width:58ch;
  font-size:0.98rem;
}
@media (prefers-reduced-motion:no-preference){
  .tl-row{ transition:background-color .2s ease; }
  .tl-row:hover{ background:color-mix(in srgb, var(--accent) 6%, transparent); }
  .tl-row:hover .tl-dot{ background:var(--accent); }
}

/* ---------- products (forest section) ---------- */
.forest-section{
  background:var(--forest);
  color:var(--forest-ink);
  border-bottom:1px solid var(--forest-line);
}
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:1px;
  background:var(--forest-line);
  border:1px solid var(--forest-line);
}
.product-card{
  background:var(--forest-2);
  display:flex; flex-direction:column;
  min-height:100%;
  border-radius:10px;
  overflow:hidden;
}
@media (prefers-reduced-motion:no-preference){
  .product-card{ transition:transform .2s ease, background-color .2s ease; }
  .product-card:hover{ transform:translateY(-4px); background:color-mix(in srgb, var(--forest-2) 80%, var(--forest-ink)); }
}
.card-media{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--forest-2);
  display:flex; align-items:center; justify-content:center;
}
.card-img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
@media (prefers-reduced-motion:no-preference){
  .card-img{ transition:transform .3s ease; }
  .product-card:hover .card-img{ transform:scale(1.05); }
}
.card-body{
  padding:22px 22px 26px;
  display:flex; flex-direction:column; gap:10px;
  flex:1;
}
.product-card .kicker{
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--rose);
  font-weight:700;
}
.product-card h3{
  color:var(--forest-ink);
  font-size:1.3rem;
  font-family:'Rozha One', serif;
}
.product-card p{
  font-size:0.92rem;
  color:color-mix(in srgb, var(--forest-ink) 68%, transparent);
}
.product-card .price-row{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--forest-line);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.price-wrap{ display:inline-flex; align-items:baseline; gap:6px; }
.product-card .price{
  font-family:'Rozha One', serif;
  font-size:1.2rem;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.price-flag{
  font-family:'Mukta', sans-serif;
  font-size:0.62rem;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--rose);
  background:color-mix(in srgb, var(--rose) 18%, transparent);
  padding:2px 6px;
  border-radius:4px;
  cursor:help;
}
.product-card .price.tbd{
  font-family:'Mukta', sans-serif;
  font-style:italic;
  font-size:0.86rem;
  font-weight:500;
  color:color-mix(in srgb, var(--forest-ink) 55%, transparent);
}
.product-card .unit{
  font-size:0.76rem;
  color:color-mix(in srgb, var(--forest-ink) 55%, transparent);
  white-space:nowrap;
}

/* ---------- product teaser (home) ---------- */
.teaser-pills{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:26px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
  font-size:0.85rem;
  font-weight:600;
  color:var(--ink);
}
.pill svg{ width:15px; height:15px; stroke:currentColor; fill:none; flex:none; }
.pill.on-forest{
  background:var(--forest-2);
  border-color:var(--forest-line);
  color:var(--forest-ink);
}
@media (prefers-reduced-motion:no-preference){
  .pill{ transition:transform .15s ease; }
  .pill:hover{ transform:translateY(-2px); }
}
.teaser-cta{ margin-top:28px; }

/* ---------- principles ---------- */
.principle-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.principle{
  background:var(--surface);
  padding:28px 24px;
}
@media (prefers-reduced-motion:no-preference){
  .principle{ transition:background-color .2s ease; }
  .principle:hover{ background:var(--surface-2); }
}
.principle .num{
  font-family:'Rozha One', serif;
  font-size:1.1rem;
  color:var(--accent);
}
.principle h3{
  margin-top:12px;
  font-size:1.15rem;
  font-family:'Mukta',sans-serif;
  font-weight:700;
}
.principle p{
  margin-top:8px;
  font-size:0.92rem;
  color:var(--ink-soft);
}

/* ---------- gau seva / donation ---------- */
.seva-section{
  background:var(--accent-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.seva-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:16px;
  margin-bottom:32px;
}
.seva-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:4px;
  padding:24px;
}
@media (prefers-reduced-motion:no-preference){
  .seva-card{ transition:transform .2s ease; }
  .seva-card:hover{ transform:translateY(-3px); }
}
.seva-card h3{
  font-size:1.1rem;
  font-family:'Mukta',sans-serif;
  font-weight:700;
}
.seva-card p{
  margin-top:8px;
  font-size:0.92rem;
  color:var(--ink-soft);
}
.seva-note{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:4px;
  padding:22px 26px;
}
.seva-note p{ font-size:0.94rem; color:var(--ink-soft); max-width:56ch; }
.seva-note .btns{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- delivery ---------- */
.delivery{
  background:var(--surface-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.delivery-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}
@media (min-width:800px){ .delivery-grid{ grid-template-columns:1.1fr 0.9fr; } }
.delivery-copy .lede{
  margin-top:16px;
  color:var(--ink-soft);
  font-size:1.02rem;
  max-width:56ch;
}
.delivery-list{
  margin-top:24px;
  display:flex; flex-direction:column; gap:14px;
}
.delivery-list li{
  list-style:none;
  display:flex; gap:12px;
  font-size:0.96rem;
}
.delivery-list .mark{
  color:var(--accent);
  font-weight:700;
  flex:none;
}
.delivery-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:4px;
  padding:28px;
  align-self:start;
}
.delivery-panel h3{
  font-size:1.2rem;
  font-family:'Mukta',sans-serif;
  font-weight:700;
}
.delivery-panel p{
  margin-top:10px;
  font-size:0.92rem;
  color:var(--ink-soft);
}
.delivery-panel .btn{ margin-top:20px; width:100%; justify-content:center; }

.platform-strip{ margin-top:28px; }
.platform-strip .label{
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.platform-pills{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:10px;
}

/* ---------- hygiene (products page) ---------- */
.hygiene-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.hygiene-card{
  background:var(--surface);
  padding:26px 24px;
}
.hygiene-card .mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent-ink);
  font-family:'Rozha One',serif;
  font-size:0.95rem;
}
.hygiene-card h3{
  margin-top:14px;
  font-size:1.08rem;
  font-family:'Mukta',sans-serif;
  font-weight:700;
}
.hygiene-card p{
  margin-top:8px;
  font-size:0.92rem;
  color:var(--ink-soft);
}

/* ---------- page hero (products) ---------- */
.page-hero{
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.page-hero .wrap{ max-width:760px; }
.page-hero h1{ font-size:clamp(2rem,4vw,2.9rem); margin-top:12px; }
.page-hero .lede{ margin-top:16px; color:var(--ink-soft); font-size:1.05rem; }
.breadcrumb{
  font-size:0.85rem;
  color:var(--ink-soft);
  text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
}
.breadcrumb:hover{ color:var(--ink); }

.final-cta{
  background:var(--forest);
  color:var(--forest-ink);
  text-align:center;
}
.final-cta h2{ color:var(--forest-ink); font-size:clamp(1.6rem,3vw,2.2rem); }
.final-cta p{ margin-top:12px; color:color-mix(in srgb, var(--forest-ink) 70%, transparent); max-width:52ch; margin-left:auto; margin-right:auto; }
.final-cta .btns{ margin-top:26px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---------- contact / footer ---------- */
.contact{
  background:var(--forest);
  color:var(--forest-ink);
}
.contact-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
}
@media (min-width:800px){ .contact-grid{ grid-template-columns:1fr 1fr; } }
.contact h2{ color:var(--forest-ink); font-size:clamp(1.8rem,3.4vw,2.6rem); }
.contact .lede{
  margin-top:16px;
  color:color-mix(in srgb, var(--forest-ink) 70%, transparent);
  max-width:48ch;
}
.contact-cta{
  margin-top:28px;
  display:flex; flex-wrap:wrap; gap:12px;
}
.contact-card{
  border:1px solid var(--forest-line);
  padding:26px;
  border-radius:4px;
}
.contact-row{
  display:flex; justify-content:space-between; gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--forest-line);
  font-size:0.95rem;
}
.contact-row:last-child{ border-bottom:none; }
.contact-row dt{ color:color-mix(in srgb, var(--forest-ink) 60%, transparent); }
.contact-row dd{ margin:0; font-weight:600; }

footer{
  background:var(--forest-2);
  color:color-mix(in srgb, var(--forest-ink) 60%, transparent);
  font-size:0.82rem;
}
.footer-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  padding:22px 0;
}
.footer-inner a{ text-decoration:none; }
.footer-inner a:hover{ color:var(--forest-ink); }
.footer-brand{ display:flex; align-items:center; gap:10px; }
.footer-logo{ width:26px; height:26px; object-fit:contain; flex:none; opacity:0.9; }

.icon{ width:17px; height:17px; flex:none; }

.teaser-photo{
  width:100%;
  border-radius:10px;
  margin-bottom:28px;
  display:block;
}

/* ---------- subscription topbar ---------- */
.topbar{
  background:var(--accent);
  color:var(--accent-ink);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap;
  gap:6px 16px;
  padding:9px clamp(20px,5vw,56px);
  font-size:0.85rem;
  font-weight:600;
  text-align:center;
}
.topbar-inner .icon{ width:15px; height:15px; }
.topbar-text{ display:inline-flex; align-items:center; gap:8px; }
.topbar-cta{
  background:var(--accent-ink);
  color:var(--accent-soft);
  border:none;
  padding:5px 14px;
  border-radius:999px;
  font-size:0.8rem;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
@media (prefers-reduced-motion:no-preference){
  .topbar-cta{ transition:transform .15s ease; }
  .topbar-cta:hover{ transform:translateY(-1px); }
}

/* ---------- product icon badge ---------- */
.icon-badge{
  width:56px; height:56px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--forest-ink) 10%, transparent);
  color:var(--accent);
  flex:none;
}
.icon-badge svg{ width:30px; height:30px; stroke:currentColor; fill:none; }
.icon-badge.lg{ width:88px; height:88px; border-radius:14px; }
.icon-badge.lg svg{ width:48px; height:48px; }
.icon-badge.on-surface{ background:var(--surface-2); color:var(--accent); }
.icon-badge.img-thumb{ overflow:hidden; background:var(--surface-2); }
.icon-badge.img-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }

.product-card{ cursor:pointer; }
@media (prefers-reduced-motion:no-preference){
  .product-card:hover .icon-badge{ transform:scale(1.06); }
  .icon-badge{ transition:transform .2s ease; }
}
.view-hint{
  margin-top:auto;
  padding-top:2px;
  font-size:0.78rem;
  font-weight:600;
  color:var(--accent);
}

/* ---------- quantity stepper ---------- */
.qty-stepper{
  display:inline-flex; align-items:center;
  border:1px solid var(--forest-line);
  border-radius:4px;
  overflow:hidden;
}
.qty-stepper button{
  background:transparent;
  border:none;
  color:var(--forest-ink);
  width:30px; height:30px;
  font-size:1rem;
  cursor:pointer;
  line-height:1;
}
.qty-stepper button:hover{ background:color-mix(in srgb, var(--forest-ink) 12%, transparent); }
.qty-stepper input{
  width:34px;
  text-align:center;
  background:transparent;
  border:none;
  border-left:1px solid var(--forest-line);
  border-right:1px solid var(--forest-line);
  color:var(--forest-ink);
  font:inherit;
  font-variant-numeric:tabular-nums;
  padding:6px 0;
}
.qty-stepper.on-surface{ border-color:var(--line); }
.qty-stepper.on-surface button,
.qty-stepper.on-surface input{ color:var(--ink); border-color:var(--line); }
.add-row{
  margin-top:14px;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.btn-add{
  background:var(--accent);
  color:var(--accent-ink);
  border:none;
  border-radius:4px;
  padding:8px 16px;
  font-size:0.86rem;
  font-weight:700;
  cursor:pointer;
}
.btn-add:hover{ filter:brightness(1.05); }

/* ---------- modals ---------- */
.modal-overlay{
  position:fixed; inset:0;
  background:rgba(10,12,6,0.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  z-index:100;
}
.modal-overlay[hidden]{ display:none; }
.modal-panel{
  background:var(--surface);
  color:var(--ink);
  border-radius:6px;
  max-width:560px;
  width:100%;
  max-height:88vh;
  overflow-y:auto;
  padding:30px;
  position:relative;
  box-shadow:0 30px 70px -30px rgba(0,0,0,0.5);
}
.modal-close{
  position:absolute; top:16px; right:16px;
  z-index:5;
  width:32px; height:32px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink-soft);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  line-height:1;
}
.modal-close:hover{ color:var(--ink); border-color:var(--ink-soft); }
.pm-gallery{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  border-radius:8px;
  overflow:hidden;
  background:var(--surface-2);
  margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
}
.pm-gallery img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
}
.pm-gallery img.active{ opacity:1; }
.pm-gallery img:only-child{ opacity:1; position:static; }
@media (prefers-reduced-motion:no-preference){
  .pm-gallery img{ transition:opacity .7s ease; }
}
.pm-dots{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px;
  background:rgba(10,12,6,0.4);
  padding:5px 9px;
  border-radius:999px;
}
.pm-dots span{
  width:6px; height:6px;
  border-radius:50%;
  background:rgba(255,255,255,0.5);
}
.pm-dots span.active{ background:#fff; }
.modal-price{
  margin-top:12px;
  display:flex; align-items:baseline; gap:8px;
  font-family:'Rozha One', serif;
  font-size:1.4rem;
  color:var(--accent);
}
.modal-price .unit{ font-family:'Mukta',sans-serif; font-size:0.82rem; font-weight:600; color:var(--ink-soft); }
.modal-desc{ margin-top:18px; color:var(--ink-soft); font-size:0.96rem; }
.modal-auth{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.modal-auth .label{
  font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent);
}
.modal-auth ul{ margin:12px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.modal-auth li{ display:flex; gap:10px; font-size:0.9rem; color:var(--ink-soft); }
.modal-auth li::before{ content:"✓"; color:var(--accent); font-weight:700; flex:none; }
.modal-footer{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
}

/* ---------- cart ---------- */
.cart-fab{
  position:fixed;
  right:22px; bottom:22px;
  z-index:60;
  background:var(--forest);
  color:var(--forest-ink);
  border:none;
  border-radius:999px;
  padding:14px 20px;
  font-size:0.9rem;
  font-weight:700;
  display:flex; align-items:center; gap:9px;
  cursor:pointer;
  box-shadow:0 16px 34px -14px rgba(0,0,0,0.45);
}
.cart-fab[hidden]{ display:none; }
.cart-fab .count{
  background:var(--accent);
  color:var(--accent-ink);
  border-radius:999px;
  min-width:20px; height:20px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:0.76rem;
  padding:0 5px;
}
@media (prefers-reduced-motion:no-preference){
  .cart-fab{ transition:transform .15s ease; }
  .cart-fab:hover{ transform:translateY(-2px); }
}

.cart-drawer{
  position:fixed; inset:0;
  z-index:100;
  display:flex; justify-content:flex-end;
}
.cart-drawer[hidden]{ display:none; }
.cart-drawer .scrim{
  position:absolute; inset:0;
  background:rgba(10,12,6,0.5);
}
.cart-panel{
  position:relative;
  background:var(--surface);
  color:var(--ink);
  width:min(400px,100%);
  height:100%;
  padding:26px;
  overflow-y:auto;
  display:flex; flex-direction:column;
}
.cart-panel h2{ font-size:1.5rem; }
.cart-list{ margin-top:20px; display:flex; flex-direction:column; gap:16px; flex:1; }
.cart-empty{ color:var(--ink-soft); font-size:0.92rem; margin-top:20px; }
.cart-row{
  display:flex; align-items:center; gap:12px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.cart-row .icon-badge{ width:44px; height:44px; }
.cart-row .icon-badge svg{ width:24px; height:24px; }
.cart-row-info{ flex:1; min-width:0; }
.cart-row-info .name{ font-weight:700; font-size:0.95rem; }
.cart-row-info .rate{ font-size:0.82rem; color:var(--ink-soft); margin-top:2px; }
.cart-row .remove{
  background:none; border:none; color:var(--ink-soft); cursor:pointer;
  font-size:0.78rem; text-decoration:underline; padding:0;
}
.cart-summary{
  margin-top:18px; padding-top:18px; border-top:1px solid var(--line);
}
.cart-summary .total-row{
  display:flex; justify-content:space-between; font-weight:700; font-size:1.05rem;
}
.cart-summary p{ margin-top:8px; font-size:0.82rem; color:var(--ink-soft); }
.cart-summary .btn{ width:100%; justify-content:center; margin-top:14px; }

/* ---------- forms ---------- */
.field{ display:flex; flex-direction:column; gap:6px; margin-top:16px; }
.field label{ font-size:0.82rem; font-weight:700; color:var(--ink-soft); }
.field input, .field select{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:4px;
  padding:10px 12px;
  font:inherit;
  color:var(--ink);
}
.field input:focus-visible, .field select:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:480px){ .field-row{ grid-template-columns:1fr; } }
.radio-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; }
.radio-row label{ display:flex; align-items:center; gap:7px; font-size:0.9rem; font-weight:500; color:var(--ink); }