/* Mhara — /ghee collection page v3.9.1 · loaded only on /ghee and /hi/ghee.
   Look (approved preview, section 3): a dark plate hero with a warm ember glow, then three white jar cards on the paper,
   a "which ghee for you" row of label-tiles, and a FAQ + Ghee Guide pair at the bottom. Every class starts with gh- (plus the
   shared .acc accordion and .crumbs from style.css), so nothing collides with style.css. */
.gh{padding-bottom:72px}
.gh-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* hero plate */
.gh-hero{position:relative;overflow:hidden;isolation:isolate;margin-top:6px;border-radius:18px;padding:clamp(26px,4.4vw,52px) clamp(20px,4.4vw,56px);
  background:radial-gradient(70% 90% at 72% 28%,#6b3412 0%,#3d1a0e 42%,#2a1109 72%);color:var(--gold-pale);
  box-shadow:0 26px 60px rgba(42,17,9,.28),inset 0 0 0 1px rgba(230,182,74,.22),inset 0 1px 0 rgba(255,236,190,.12)}
.gh-hero::before{content:"";position:absolute;inset:0;background:var(--noise);opacity:.55;mix-blend-mode:screen;z-index:-1;pointer-events:none}
.gh-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold-deep) 20%,var(--gold) 50%,var(--gold-deep) 80%,transparent)}
.gh-glow{position:absolute;right:-8%;top:-30%;width:min(560px,70vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(242,196,90,.28),rgba(216,154,30,.08) 45%,transparent 70%);z-index:-1;pointer-events:none}
.gh-k{margin:0;font:800 .72rem/1.4 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.gh-hero h1{color:#fff;font-size:clamp(1.75rem,4vw,2.9rem);line-height:1.12;margin:10px 0 12px;max-width:22ch;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.gh-lead{margin:0;max-width:58ch;color:#e9d9bf;font-size:clamp(.95rem,1.4vw,1.06rem);line-height:1.6}
.gh-chips{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.gh-chips li{font:700 .78rem/1 var(--body);letter-spacing:.02em;color:var(--gold-pale);border:1px solid rgba(246,226,168,.38);background:rgba(255,236,190,.06);border-radius:999px;padding:9px 13px;display:inline-flex;align-items:center;gap:7px}
.gh-chips li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(242,196,90,.8);flex:none}
.gh-chips a{color:inherit;text-decoration:none}
.gh-chips a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* product cards */
.gh-shop{margin-top:26px}
.gh-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.gh-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;background:linear-gradient(180deg,#fffdf7,#fff8ea);border:1px solid var(--line);border-radius:16px;padding:16px 16px 18px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 26px rgba(42,17,9,.08);transition:transform .22s,box-shadow .22s,border-color .22s}
.gh-card:hover{transform:translateY(-4px);border-color:rgba(192,139,27,.6);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 22px 44px rgba(42,17,9,.16)}
.gh-img{position:relative;display:grid;place-items:center;width:100%;height:clamp(180px,19vw,230px);border-radius:12px;
  background:radial-gradient(56% 62% at 50% 58%,rgba(242,196,90,.32),rgba(242,196,90,.08) 55%,transparent 72%),linear-gradient(180deg,#fdf4e1,#f6e7c6);overflow:hidden}
.gh-img.ivory{background:radial-gradient(56% 62% at 50% 58%,rgba(255,250,235,.95),rgba(242,226,190,.35) 55%,transparent 72%),linear-gradient(180deg,#fbf3e3,#efe0c2)}
.gh-img::after{content:"";position:absolute;left:22%;right:22%;bottom:10px;height:12px;border-radius:50%;background:radial-gradient(closest-side,rgba(42,17,9,.28),transparent)}
.gh-img img{position:relative;z-index:1;height:86%;width:auto;filter:drop-shadow(0 10px 14px rgba(42,17,9,.22));transition:transform .3s}
.gh-card:hover .gh-img img{transform:translateY(-3px) scale(1.03)}
.gh-tag{position:absolute;left:10px;top:10px;z-index:2;font:800 .62rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-pale);background:var(--plate);border:1px solid var(--gold-deep);padding:6px 9px;border-radius:999px}
.gh-tag.out{background:#6b2110;border-color:#a14a2c;color:#fff;letter-spacing:.08em}
.gh-card h3{font-size:1.24rem;margin:14px 0 0;line-height:1.2}
.gh-card h3 a{text-decoration:none;color:var(--plate)}
.gh-card h3 a::after{content:"";position:absolute;inset:0;border-radius:16px;z-index:0} /* whole card opens the product */
.gh-m{margin:4px 0 0;font-size:.8rem;font-weight:700;color:var(--rust);line-height:1.4}
.gh-pr{margin:10px 0 0;color:var(--plate)}
.gh-pr b{font:700 1.45rem/1 var(--display)}
.gh-pr small{font:600 .76rem var(--body);color:var(--muted)}
.gh-packs{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.gh-packs li{font:700 .72rem/1 var(--body);color:var(--plate);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 10px}
.gh-packs li.so{color:var(--muted);background:repeating-linear-gradient(135deg,#fff 0 5px,#f3e7cf 5px 10px);text-decoration:line-through;text-decoration-color:rgba(110,87,71,.6)}
.gh-bt{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:8px;width:100%;margin-top:auto;padding-top:16px}
.gh-buy,.gh-wa{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;border-radius:9px;font:800 .78rem/1 var(--body);letter-spacing:.05em;text-decoration:none;padding:0 14px;transition:transform .18s,filter .18s,background .18s}
.gh-buy{background:linear-gradient(180deg,#f6cf6a 0%,#e0a52c 50%,#c48a17 100%);color:#2a1109;border:1px solid #a8700d;box-shadow:0 8px 18px rgba(183,124,16,.3),inset 0 1px 0 rgba(255,255,255,.55)}
.gh-buy:hover{transform:translateY(-1px);filter:brightness(1.05)}
.gh-wa{border:1.5px solid var(--wa);color:#1b6d30;background:#fff}
.gh-wa:hover{background:#eef8f0}
.gh-wa svg{width:16px;height:16px;flex:none}
.gh-card.so .gh-img img{filter:grayscale(.35) drop-shadow(0 10px 14px rgba(42,17,9,.18));opacity:.8}
.gh-card.so .gh-buy{background:#fff;color:var(--plate);border:1.5px solid var(--gold-deep);box-shadow:none}

/* which ghee for you */
.gh-which{margin-top:44px}
.gh-which h2,.gh-box h2{font-size:clamp(1.35rem,2.4vw,1.7rem)}
.gh-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.gh-tile{position:relative;display:flex;flex-direction:column;gap:3px;text-decoration:none;color:var(--ink);background:linear-gradient(180deg,#fdf5e4,#f3e2bf);border:1.5px solid rgba(192,139,27,.55);border-radius:12px;padding:16px 48px 16px 16px;
  box-shadow:inset 0 0 0 3px var(--paper-2),inset 0 0 0 4px rgba(230,182,74,.45),0 8px 20px rgba(42,17,9,.07);transition:transform .2s,box-shadow .2s}
.gh-tile:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 3px var(--paper-2),inset 0 0 0 4px rgba(230,182,74,.7),0 16px 30px rgba(42,17,9,.13)}
.gh-tile b{font:700 1.05rem/1.25 var(--display);color:var(--plate)}
.gh-tile .n{font:800 .7rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--rust)}
.gh-tile .d{font-size:.86rem;color:var(--muted);line-height:1.5;margin-top:3px}
.gh-tile i{position:absolute;right:14px;top:50%;margin-top:-15px;width:30px;height:30px;border-radius:50%;background:var(--plate);color:var(--gold);display:grid;place-items:center;transition:transform .2s}
.gh-tile:hover i{transform:translateX(3px)}
.gh-tile i svg,.gh-more svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* FAQ + guide */
.gh-foot{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px;margin-top:44px;align-items:start}
.gh-box{background:#fffaf0;border:1px solid var(--line);border-radius:16px;padding:22px 22px 18px;box-shadow:0 10px 26px rgba(42,17,9,.07)}
.gh-box h2{margin-bottom:8px}
.gh-faq .acc{border-top:0}
.gh-faq .acc summary{font-size:1.02rem;padding:15px 0}
.gh-faq .acc .a{font-size:.92rem}
.gh-guide ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.gh-guide li a{display:flex;align-items:center;gap:12px;padding:10px 8px;margin:0 -8px;border-radius:10px;text-decoration:none;color:var(--ink);transition:background .18s}
.gh-guide li a:hover{background:#f6e9cc}
.gh-guide img{width:72px;height:54px;object-fit:cover;border-radius:8px;flex:none;border:1px solid var(--line)}
.gh-guide b{display:block;font:700 .98rem/1.3 var(--display);color:var(--plate)}
.gh-guide small{display:block;margin-top:3px;font:800 .64rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--rust)}
.gh-more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font:800 .78rem var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--rust);text-decoration:none}
.gh-more:hover{color:var(--plate)}

/* Hindi: Devanagari headings in the Hindi face */
.lang-hi .gh-hero h1,.lang-hi .gh-card h3,.lang-hi .gh-tile b,.lang-hi .gh-box h2,.lang-hi .gh-which h2,.lang-hi .gh-guide b{font-family:var(--hindi);font-weight:400}
.lang-hi .gh-k,.lang-hi .gh-tile .n,.lang-hi .gh-guide small,.lang-hi .gh-more{letter-spacing:.04em}

@media (max-width:980px){.gh-cards{gap:14px}.gh-card{padding:14px 12px 16px}.gh-bt{grid-template-columns:1fr}.gh-foot{grid-template-columns:1fr}}
@media (max-width:820px){.gh-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.gh-tiles{grid-template-columns:1fr}.gh-img{height:200px}}
@media (max-width:600px){
  .gh{padding-bottom:40px}
  .gh-hero{border-radius:14px}
  .gh-chips li{font-size:.72rem;padding:8px 11px}
  .gh-cards{grid-template-columns:1fr}
  .gh-bt{grid-template-columns:1fr auto}
  .gh-img{height:190px}
  .gh-box{padding:18px 16px 14px}
}
@media (prefers-reduced-motion:reduce){.gh-card,.gh-card:hover,.gh-tile,.gh-tile:hover,.gh-img img{transition:none;transform:none}}
/* v3.10.5: the whole jar always fits the card photo box (no crop) */
.gh-img img{position:absolute;inset:0;margin:auto;height:84%;width:84%;object-fit:contain}