:root {
  --ink:#193e36;
  --body:#425c54;
  --mute:#66766e;
  --brand:#193e36;
  --blue:#236247;
  --bg:#fffdf8;
  --surface:#f2f3e9;
  --line:#dedfd3;
  --wa:#186c4b;
  --radius:18px;
  --bar:82px
}

* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:90px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--body);
  font:17px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Devanagari",Arial,sans-serif
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  color:var(--ink)
}
h1 {
  font-size:clamp(38px,4.7vw,64px);
  line-height:1.24;
  font-weight:750;
  letter-spacing:-.045em;
  margin:16px 0 20px
}
html[data-lang=hi] h1 {
  line-height:1.48;
  letter-spacing:-.035em
}
h2 {
  font-size:clamp(28px,3vw,40px);
  line-height:1.4;
  letter-spacing:-.025em;
  margin-bottom:14px
}
h3 {
  font-size:21px;
  line-height:1.5
}
p {
  margin-bottom:16px
}
a {
  color:var(--blue)
}
img {
  max-width:100%;
  height:auto
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  font:inherit;
  cursor:pointer
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid #c06422;
  outline-offset:5px
}

.wrap {
  max-width:1160px;
  margin:auto;
  padding:0 28px
}
section {
  padding:64px 0
}

.eyebrow {
  font:700 12px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#6c7968;
  display:block;
  margin-bottom:12px
}

.skip {
  position:absolute;
  left:-9999px
}

.skip:focus {
  left:12px;
  top:12px;
  background:white;
  padding:12px;
  z-index:100
}

.site-head {
  background:#fffdf8f5;
  position:sticky;
  top:0;
  z-index:40;
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px)
}

.head-in {
  display:flex;
  align-items:center;
  gap:11px;
  min-height:82px
}

.head-in img {
  display:block;
  width:42px;
  height:42px;
  border-radius:11px
}

.brand-name {
  font-size:25px;
  color:var(--ink);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-1px
}

.brand-sub {
  font-size:10px;
  letter-spacing:.15em;
  margin-top:4px;
  text-transform:uppercase
}

.head-links {
  margin-left:auto;
  display:flex;
  gap:30px;
  font-size:14px
}

.head-links a {
  text-decoration:none
}

.lang {
  display:flex;
  padding:4px;
  border:1px solid var(--line);
  border-radius:50px;
  margin-left:auto
}

.lang button {
  border:0;
  background:none;
  border-radius:24px;
  min-height:40px;
  padding:0 16px;
  color:var(--ink);
  font-size:14px
}

.lang button[aria-pressed=true] {
  background:var(--ink);
  color:#fff
}

.local-strip {
  text-align:center;
  background:#e9eddb;
  padding:9px 16px;
  font-size:13px;
  color:var(--ink)
}

.hero {
  padding:54px 0 46px
}

.hero-grid {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:62px;
  align-items:center
}

.hero-copy {
  max-width:560px
}

.hero .eyebrow {
  color:#986329
}

.hero h1 em {
  font-style:normal;
  color:#ad5b2c
}

.lede {
  font-size:18px;
  max-width:510px;
  line-height:1.8
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:56px;
  padding:13px 23px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  font-size:16px;
  border:1px solid transparent;
  line-height:1.45
}

.btn-wa {
  background:var(--wa);
  color:#fff
}

.btn-wa:hover {
  background:#104e36
}

.btn-call {
  border-color:#bfc9bb;
  color:var(--ink);
  background:transparent
}

.btn-ghost {
  background:#fffdf8;
  border:1px solid var(--line);
  color:var(--ink)
}

.btn svg {
  width:20px;
  height:20px;
  fill:currentColor
}

.micro {
  font-size:13px;
  margin-top:16px;
  color:var(--mute)
}

.hero-art {
  position:relative;
  padding:0 0 24px 0
}

.shop-hero {
  border-radius:110px 18px 18px 18px;
  display:block;
  object-fit:cover;
  aspect-ratio:1/1.05;
  width:100%;
  border:6px solid #fff;
  box-shadow:0 12px 38px #21362812
}

.photo-label {
  position:absolute;
  bottom:0;
  left:24px;
  right:24px;
  background:var(--ink);
  color:white;
  border-radius:14px;
  padding:18px 22px;
  display:flex;
  align-items:center;
  gap:14px;
  box-shadow:0 8px 18px #21362818
}

.photo-label strong {
  display:block;
  font-size:17px
}

.photo-label small {
  font-size:12px;
  color:#d5dfce
}

.photo-label .pin {
  font-size:28px
}

.offer-seal {
  position:absolute;
  right:-16px;
  top:24px;
  border-radius:50%;
  width:108px;
  height:108px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:#edc576;
  color:var(--ink);
  border:5px solid var(--bg);
  transform:rotate(8deg);
  font-size:12px;
  line-height:1.3
}

.offer-seal b {
  font-size:35px;
  letter-spacing:-2px
}

.status {
  font-size:12px;
  margin:10px 0 0;
  display:flex;
  align-items:center;
  gap:7px
}

.status .dot {
  height:6px;
  width:6px;
  background:#718c43;
  border-radius:50%
}

.benefit-band {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:22px 0;
  background:#f4f3e9
}

.benefits {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}

.benefits>div {
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 15px;
  border-right:1px solid #d4d9ca
}

.benefits>div:last-child {
  border:0
}

.benefits b {
  display:block;
  font-size:16px;
  color:var(--ink)
}

.benefits small {
  font-size:12px
}

.benefit-icon {
  font-size:27px;
  color:#9d6135
}

.section-top {
  display:flex;
  justify-content:space-between;
  gap:28px;
  align-items:end;
  margin-bottom:26px
}

.section-top p {
  max-width:430px;
  font-size:15px;
  margin:0
}

.steps {
  list-style:none;
  padding:0;
  margin:30px 0 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  counter-reset:step
}

.steps li {
  counter-increment:step;
  border-top:1px solid var(--line);
  padding-top:22px
}

.steps li:before {
  content:'0' counter(step);
  font:500 40px/1 Georgia,serif;
  color:#ad6b38;
  display:block;
  margin-bottom:18px
}

.steps strong {
  display:block;
  font-size:19px;
  color:var(--ink);
  margin-bottom:8px
}

.steps li span {
  font-size:15px
}
#order {
  background:#fffdf8
}
#stock {
  background:#edf0e4
}

.chips {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  list-style:none;
  padding:0;
  margin:25px 0 0
}

.chips li {
  padding:19px 15px;
  background:#fffdf8;
  border:1px solid #dce1d1;
  border-radius:12px;
  font-size:15px;
  font-weight:600;
  color:var(--ink)
}
#stock p {
  max-width:700px;
  font-size:15px
}
#refill {
  padding:30px 0 0
}

.card {
  border-radius:20px;
  background:#193e36;
  color:#e3ecdf;
  padding:32px
}

.card h3 {
  color:#fff;
  font-size:26px;
  margin-bottom:12px
}

.card p {
  max-width:780px
}

.brand-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin:28px 0 20px
}

.brand-card {
  border:1px solid var(--line);
  background:white;
  border-radius:16px;
  overflow:hidden;
  margin:0
}

.brand-image {
  height:140px;
  padding:25px;
  display:flex;
  align-items:center;
  justify-content:center
}

.brand-image.dark {
  background:#080b09
}

.brand-image img {
  max-height:90px;
  width:100%;
  object-fit:contain
}

.brand-card figcaption {
  padding:12px 18px;
  border-top:1px solid var(--line);
  font-size:13px;
  display:flex;
  justify-content:space-between;
  color:var(--ink)
}

.brand-note {
  font-size:13px;
  color:var(--mute)
}

.gallery {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  padding:0 20px 20px
}

.gallery a {
  display:block
}

.gallery img {
  width:100%;
  display:block;
  border-radius:10px
}

.gallery figcaption {
  font-size:13px;
  margin-top:8px
}

.gallery figure {
  margin:0
}

.visit-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:42px
}
#visit {
  background:#f0eee3
}

.shot {
  margin:0 0 18px
}

.shot img {
  display:block;
  border-radius:18px
}

.shot figcaption {
  font-size:13px;
  margin-top:8px
}

.addr {
  font-size:17px;
  font-style:normal
}

.hours {
  border-collapse:collapse;
  width:100%;
  font-size:14px
}

.hours td {
  padding:8px 0;
  border-bottom:1px solid #d6dbcd
}

.hours td:last-child {
  text-align:right
}

.hours tr[data-today] {
  font-weight:700;
  color:var(--ink)
}

.mapbox button {
  width:100%;
  border:1px solid #ccd5c3;
  border-radius:12px;
  background:#e4e9d9;
  padding:18px;
  color:var(--ink)
}

.mapbox .hint {
  display:block;
  font-size:12px
}

.mapbox iframe {
  width:100%;
  height:290px;
  border:0;
  border-radius:12px
}

.mapbox .pin {
  margin-right:12px
}

.faq-layout {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:55px
}
details {
  border-bottom:1px solid var(--line)
}
summary {
  list-style:none;
  cursor:pointer;
  padding:20px 34px 20px 0;
  font-size:17px;
  font-weight:650;
  color:var(--ink);
  position:relative
}
summary::-webkit-details-marker {
  display:none
}
summary:after {
  content:'+';
  position:absolute;
  right:5px;
  font-size:22px;
  top:16px
}
details[open]>summary:after {
  content:'−'
}

.ans {
  padding:0 30px 18px 0;
  font-size:15px
}

.collection {
  border:1px solid var(--line);
  border-radius:14px
}

.collection summary {
  padding-left:20px
}

.collection summary:after {
  right:20px
}
footer {
  background:#193e36;
  color:#d9e1d5;
  padding:35px 0 40px
}
footer strong {
  font-size:23px;
  color:#fff
}
footer a {
  color:#e8d3a7
}

.contacts {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-top:8px
}

.legal {
  font-size:12px;
  margin-top:20px;
  max-width:850px;
  color:#aabdaf
}

.trustline {
  font-size:13px
}

.trustline:not([data-show=yes]) {
  display:none
}

.dock {
  display:none
}

.i18n>[lang=hi] {
  display:none
}
html[data-lang=hi] .i18n>[lang=en] {
  display:none
}
html[data-lang=hi] .i18n>[lang=hi] {
  display:revert
}
[hidden] {
  display:none!important
}

@media(max-width:760px) {
  body {
  padding-bottom:calc(84px + env(safe-area-inset-bottom))
}

.wrap {
  padding:0 20px
}

.head-in {
  min-height:70px
}

.head-links {
  display:none
}

.head-in img {
  width:36px;
  height:36px
}

.brand-name {
  font-size:23px
}

.lang button {
  padding:0 12px;
  min-height:38px
}

.local-strip {
  font-size:11px;
  padding:7px 12px
}

.hero {
  padding:28px 0 32px
}

.hero-grid {
  grid-template-columns:1fr;
  gap:28px
}
h1 {
  font-size:40px;
  margin:10px 0 13px
}
html[data-lang=hi] h1 {
  font-size:39px;
  line-height:1.42
}

.hero-copy {
  max-width:none
}

.hero .eyebrow {
  font-size:10px;
  margin-bottom:10px
}

.lede {
  font-size:16px;
  margin-bottom:12px;
  line-height:1.75
}

.hero-actions {
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:9px
}

.hero-actions .btn {
  padding:14px 15px;
  font-size:14px
}

.micro {
  font-size:11px;
  margin-top:11px
}

.hero-art {
  max-width:520px;
  width:100%;
  margin:auto;
  padding-bottom:16px
}

.shop-hero {
  aspect-ratio:1.55;
  border-radius:55px 14px 14px 14px;
  border:4px solid #fff;
  object-position:center 35%
}

.photo-label {
  padding:12px 16px;
  left:16px;
  right:16px;
  border-radius:12px
}

.photo-label strong {
  font-size:14px
}

.photo-label small {
  font-size:10px
}

.offer-seal {
  width:85px;
  height:85px;
  right:-5px;
  top:12px;
  font-size:10px
}

.offer-seal b {
  font-size:28px
}

.benefit-band {
  padding:16px 0
}

.benefits {
  gap:7px
}

.benefits>div {
  display:block;
  padding:0 7px;
  text-align:center
}

.benefits b {
  font-size:12px
}

.benefits small {
  font-size:10px;
  line-height:1.4;
  display:block;
  margin-top:4px
}

.benefit-icon {
  font-size:22px
}
section {
  padding:38px 0
}
h2 {
  font-size:28px
}

.section-top {
  display:block;
  margin-bottom:20px
}

.section-top p {
  font-size:14px
}

.steps {
  grid-template-columns:1fr;
  gap:20px;
  margin-top:20px
}

.steps li {
  display:flex;
  gap:20px;
  padding-top:18px
}

.steps li:before {
  font-size:30px;
  min-width:37px;
  margin-top:5px
}

.steps strong {
  font-size:17px;
  margin-bottom:4px
}

.steps li span {
  font-size:14px
}

.chips {
  grid-template-columns:1fr 1fr;
  gap:8px
}

.chips li {
  padding:13px 12px;
  font-size:13px
}

.card {
  padding:24px
}

.card h3 {
  font-size:23px
}

.card p {
  font-size:15px
}

.brand-grid {
  gap:8px;
  margin-top:22px
}

.brand-image {
  height:85px;
  padding:10px
}

.brand-image img {
  max-height:58px
}

.brand-card {
  border-radius:10px
}

.brand-card figcaption {
  padding:9px 6px;
  font-size:10px;
  justify-content:center
}

.gallery {
  grid-template-columns:1fr;
  padding:0 12px 12px
}

.collection summary {
  font-size:14px
}

.visit-grid,.faq-layout {
  grid-template-columns:1fr;
  gap:24px
}

.faq-layout {
  gap:8px
}

.dock {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:50;
  display:grid;
  grid-template-columns:1fr 1.8fr;
  gap:10px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:#fffdf8f5;
  border-top:1px solid var(--line);
  backdrop-filter:blur(12px)
}

.dock .btn {
  font-size:15px;
  min-height:54px;
  padding:10px
}

.dock .btn-call {
  background:#fffdf8
}
footer {
  padding-bottom:25px
}

.contacts {
  gap:8px;
  flex-direction:column
}

.legal {
  font-size:11px
}

}

@media(max-width:360px) {
  html[data-lang=hi] h1,h1 {
  font-size:34px
}

.wrap {
  padding:0 16px
}

.hero-actions .btn {
  font-size:12px;
  padding:12px
}

.brand-card figcaption {
  font-size:9px
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}

}


.brand-card:nth-child(2) .brand-image img { transform:scale(1.55); }
.brand-card:nth-child(3) .brand-image img { transform:scale(1.3); }
.brand-image { overflow:hidden; }