/* ==========================================================================
   Gamla — Editorial Botanical design system
   Mobile-first. No external requests. Maps 1:1 to 04-design-system.md.
   ========================================================================== */

/* --- Devanagari: bind the local Indic face by unicode-range ONLY. ---------
   Latin faces frequently map Devanagari codepoints without shipping the
   shaping tables, which silently mangles conjuncts (पारिजातक -> पाങरिजातक).
   Restricting by range guarantees a real Devanagari face wins for that block. */
@font-face {
  font-family: 'MMDeva';
  src: local('Nirmala UI'), local('Noto Sans Devanagari'),
       local('Kohinoor Devanagari'), local('Mangal'), local('Lohit Devanagari');
  unicode-range: U+0900-097F, U+A8E0-A8FF, U+1CD0-1CFF;
  font-display: swap;
}

:root {
  /* Colour */
  --moss:#2f5d43; --moss-d:#20402f; --leaf:#4a8462; --leaf-l:#a9d6b8;
  --clay:#a8552f; --clay-l:#fdf4ee;
  --ink:#14261c; --mute:#5d6f64; --line:#d4ded6; --soft:#f4f7f4; --paper:#fff;
  --warn-bg:#fdf6ec; --warn-br:#c8811f; --danger:#b03a2e; --danger-bg:#fdeceb;

  /* Type */
  --ff:'MMDeva', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
       'Helvetica Neue', Arial, sans-serif;
  --fs-d1:2.5rem; --fs-d2:2rem; --fs-d3:1.5rem; --fs-h:1.125rem;
  --fs-b:1rem; --fs-s:.875rem; --fs-xs:.75rem;

  /* Space — 4px base */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --wrap:1200px; --radius:2px; --ease:150ms ease-out;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:var(--ff); font-size:var(--fs-b); line-height:1.5;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img,svg { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; color:inherit; }

/* Focus — visible, never removed */
:focus-visible { outline:2px solid var(--moss); outline-offset:2px; }

h1,h2,h3,h4 { margin:0; line-height:1.1; font-weight:600; letter-spacing:-.02em; }
h1 { font-size:var(--fs-d1); }
h2 { font-size:var(--fs-d2); }
h3 { font-size:var(--fs-d3); }
p { margin:0 0 var(--s4); }
.lede { font-size:1.0625rem; color:var(--mute); max-width:60ch; }
/* --leaf is 4.40:1 on white - fine for icons and large text, NOT for 12px
   labels. AA needs 4.5:1 under 18px. --moss is 7.4:1. See 04-design-system.md §2. */
.eyebrow {
  font-size:var(--fs-xs); letter-spacing:.18em; text-transform:uppercase;
  color:var(--moss); font-weight:600; margin-bottom:var(--s3);
}
.botanical { font-style:italic; color:var(--mute); font-size:var(--fs-s); }

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 var(--s4); }
.section { padding:var(--s7) 0; }
.section--soft { background:var(--soft); }
.stack > * + * { margin-top:var(--s4); }

/* ---------- Header ---------- */
.hdr { border-bottom:1px solid var(--line); position:sticky; top:0;
       background:var(--paper); z-index:50; }
.hdr__in { display:flex; align-items:center; gap:var(--s4);
           height:60px; max-width:var(--wrap); margin:0 auto; padding:0 var(--s4); }
/* Mixed-script wordmark: outlined Devanagari ग + Latin "mla" = "gamla".
   The ग is an SVG PATH, not text. A logo must never depend on the viewer
   having a Devanagari font installed — on a machine without one it renders
   as an empty tofu box, which is exactly what happened when this was tested
   on Linux. Windows, macOS and Android all ship a Devanagari face; plenty of
   Linux builds do not, and you cannot control which your visitor has. */
.logo { font-size:1.0625rem; font-weight:600; letter-spacing:-.01em;
        color:var(--moss); white-space:nowrap; display:inline-flex;
        align-items:center; gap:.06em; line-height:1; }
.logo__d { height:1.24em; width:auto; display:block; color:var(--leaf); }
.logo__d path { fill:currentColor; }
.logo:hover .logo__d { color:var(--moss); }
.nav { display:none; gap:var(--s5); margin-left:auto; font-size:var(--fs-s); }
.nav a { color:var(--mute); transition:color var(--ease); }
.nav a:hover,.nav a[aria-current="page"] { color:var(--moss); }
.hdr__act { margin-left:auto; display:flex; align-items:center; gap:var(--s3); }
.nav + .hdr__act { margin-left:var(--s5); }
.cartbtn { position:relative; border:1px solid var(--line); background:none;
           padding:var(--s2) var(--s3); border-radius:var(--radius);
           cursor:pointer; font-size:var(--fs-s); transition:border-color var(--ease); }
.cartbtn:hover { border-color:var(--moss); }
.cartbtn__n { background:var(--moss); color:#fff; border-radius:999px;
              font-size:var(--fs-xs); padding:1px 6px; margin-left:var(--s1); }
@media (min-width:900px){ .nav{display:flex;} }

/* ---------- Buttons ---------- */
.btn {
  display:inline-block; padding:var(--s3) var(--s5); border-radius:var(--radius);
  background:var(--moss); color:#fff; border:1px solid var(--moss);
  font-size:var(--fs-s); font-weight:600; cursor:pointer; text-align:center;
  transition:background var(--ease), border-color var(--ease);
}
.btn:hover { background:var(--moss-d); border-color:var(--moss-d); }
.btn:disabled { background:var(--line); border-color:var(--line);
                color:var(--mute); cursor:not-allowed; }
.btn--ghost { background:none; color:var(--moss); }
.btn--ghost:hover { background:var(--soft); }
.btn--full { display:block; width:100%; }
.btn--sm { padding:var(--s2) var(--s3); font-size:var(--fs-xs); }

/* ---------- Hero ---------- */
.hero { display:grid; gap:var(--s5); padding:var(--s6) 0 var(--s7); }
.hero__fig { aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; }
.hero h1 { margin-bottom:var(--s4); }
@media (min-width:900px){
  .hero { grid-template-columns:1fr 1.15fr; align-items:center;
          gap:var(--s8); padding:var(--s8) 0 var(--s9); }
  .hero__fig { aspect-ratio:5/4; }
  :root { --fs-d1:3.25rem; }
}

/* ---------- Product grid & card ---------- */
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
@media (min-width:700px){ .grid{grid-template-columns:repeat(3,1fr); gap:var(--s5);} }
@media (min-width:1000px){ .grid{grid-template-columns:repeat(4,1fr);} }

.card { display:block; position:relative; }
.card__fig { aspect-ratio:4/5; background:var(--soft); overflow:hidden;
             border-radius:var(--radius); margin-bottom:var(--s3); }
.card__fig svg { width:100%; height:100%; transition:transform 400ms ease-out; }
.card:hover .card__fig svg { transform:scale(1.04); }
.card__t { font-size:var(--fs-s); font-weight:600; margin-bottom:2px; }
.card__b { font-size:var(--fs-xs); font-style:italic; color:var(--mute);
           margin-bottom:var(--s2); }
.card__p { font-size:var(--fs-s); font-weight:600; color:var(--moss); }
.card__tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:var(--s2); }

.tag { font-size:10px; letter-spacing:.06em; text-transform:uppercase;
       padding:2px 6px; border-radius:999px; background:var(--soft);
       color:var(--mute); border:1px solid var(--line); }
.tag--pet { background:#eef6f0; color:var(--moss); border-color:var(--leaf-l); }
.tag--frag { background:var(--clay-l); color:var(--clay); border-color:#eccdb9; }
.tag--tier { background:var(--moss); color:#fff; border-color:var(--moss); }

/* ---------- Filters ---------- */
.shop { display:grid; gap:var(--s5); }
@media (min-width:900px){ .shop{grid-template-columns:230px 1fr; gap:var(--s7);} }

.fbar { display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s5);
        flex-wrap:wrap; }
.fbar__count { font-size:var(--fs-s); color:var(--mute); margin-right:auto; }
.search { flex:1 1 200px; min-width:0; padding:var(--s3);
          border:1px solid var(--line); border-radius:var(--radius);
          background:var(--paper); }
.search:focus { border-color:var(--moss); outline:none; }

.facets { display:none; }
.facets.is-open { display:block; }
@media (min-width:900px){ .facets{display:block !important;} .ftoggle{display:none;} }
.ftoggle { border:1px solid var(--line); background:none; padding:var(--s3) var(--s4);
           border-radius:var(--radius); cursor:pointer; font-size:var(--fs-s); }

.facet { border-bottom:1px solid var(--line); padding:var(--s4) 0; }
.facet:first-child { padding-top:0; }
.facet__h { font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase;
            color:var(--mute); font-weight:600; margin-bottom:var(--s3); }
.opt { display:flex; align-items:center; gap:var(--s2); padding:3px 0;
       font-size:var(--fs-s); cursor:pointer; }
.opt input { accent-color:var(--moss); width:15px; height:15px; cursor:pointer; }
.opt__n { color:var(--mute); font-size:var(--fs-xs); margin-left:auto; }
.clearall { background:none; border:none; color:var(--clay); cursor:pointer;
            font-size:var(--fs-s); padding:0; text-decoration:underline; }

.empty { text-align:center; padding:var(--s9) var(--s4); color:var(--mute); }
.empty h3 { margin-bottom:var(--s3); color:var(--ink); }

/* ---------- PDP ---------- */
.pdp { display:grid; gap:var(--s5); padding:var(--s5) 0 var(--s8); }
@media (min-width:900px){
  .pdp { grid-template-columns:1.1fr 1fr; gap:var(--s8); padding-top:var(--s7); }
  .pdp__buy { position:sticky; top:84px; align-self:start; }
}
.pdp__fig { aspect-ratio:4/5; background:var(--soft); border-radius:var(--radius);
            overflow:hidden; }
.pdp__price { font-size:1.5rem; font-weight:600; color:var(--moss);
              margin:var(--s3) 0 var(--s4); }
.pdp__price small { font-size:var(--fs-xs); color:var(--mute); font-weight:400;
                    display:block; margin-top:2px; }

.care { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2);
        border:1px solid var(--line); border-radius:var(--radius);
        padding:var(--s4); margin:var(--s5) 0; }
.care__i { text-align:center; }
.care__i svg { width:26px; height:26px; margin:0 auto var(--s2); color:var(--leaf); }
.care__k { font-size:10px; letter-spacing:.08em; text-transform:uppercase;
           color:var(--mute); }
.care__v { font-size:var(--fs-s); font-weight:600; }

/* Safety block — deliberately loud. See 01-metafield-definitions.md §C. */
.safety { border:1px solid var(--warn-br); background:var(--warn-bg);
          border-left-width:3px; padding:var(--s4); border-radius:var(--radius);
          margin:var(--s4) 0; }
.safety--high { border-color:var(--danger); background:var(--danger-bg); }
.safety__h { display:flex; align-items:center; gap:var(--s2); font-weight:600;
             font-size:var(--fs-s); margin-bottom:var(--s2); color:var(--warn-br); }
.safety--high .safety__h { color:var(--danger); }
.safety__h svg { width:18px; height:18px; flex:none; }
.safety p { font-size:var(--fs-s); margin:0; }
.safety--ok { border-color:var(--leaf); background:#eef6f0; }
.safety--ok .safety__h { color:var(--moss); }

/* Pincode checker */
.pin { border:1px solid var(--line); border-radius:var(--radius);
       padding:var(--s4); margin:var(--s4) 0; }
.pin__row { display:flex; gap:var(--s2); }
.pin__row input { flex:1; min-width:0; padding:var(--s3);
                  border:1px solid var(--line); border-radius:var(--radius); }
.pin__out { margin-top:var(--s3); font-size:var(--fs-s); display:none; }
.pin__out.is-on { display:block; }
.pin__out b { display:block; margin-bottom:2px; }
.is-ok    { color:var(--moss); }
.is-warn  { color:var(--warn-br); }
.is-bad   { color:var(--danger); }

.spec { width:100%; border-collapse:collapse; font-size:var(--fs-s);
        margin-top:var(--s5); }
.spec th,.spec td { text-align:left; padding:var(--s3) 0;
                    border-bottom:1px solid var(--line); vertical-align:top; }
.spec th { color:var(--mute); font-weight:400; width:40%; }

/* ---------- Cart ---------- */
.line { display:grid; grid-template-columns:64px 1fr auto; gap:var(--s4);
        padding:var(--s4) 0; border-bottom:1px solid var(--line); align-items:start; }
.line__fig { aspect-ratio:4/5; background:var(--soft); border-radius:var(--radius);
             overflow:hidden; }
.ship { background:var(--soft); border-radius:var(--radius); padding:var(--s4);
        margin:var(--s5) 0; }
.ship__bar { height:5px; background:var(--line); border-radius:999px;
             overflow:hidden; margin-top:var(--s3); }
.ship__fill { height:100%; background:var(--leaf); width:0;
              transition:width 300ms ease-out; }
.tot { display:flex; justify-content:space-between; padding:var(--s3) 0;
       font-size:var(--fs-s); }
.tot--grand { border-top:1px solid var(--line); margin-top:var(--s2);
              padding-top:var(--s4); font-size:1.125rem; font-weight:600; }

.note { display:flex; gap:var(--s3); background:var(--soft); padding:var(--s4);
        border-radius:var(--radius); font-size:var(--fs-s); color:var(--mute);
        margin:var(--s4) 0; }
.note svg { width:18px; height:18px; flex:none; color:var(--leaf); margin-top:2px; }

/* ---------- Services / Visit ---------- */
.svc { display:grid; gap:var(--s4); }
@media (min-width:700px){ .svc{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .svc{grid-template-columns:repeat(3,1fr);} }
.svc__c { border:1px solid var(--line); border-radius:var(--radius);
          padding:var(--s5); display:flex; flex-direction:column; }
.svc__c h3 { font-size:var(--fs-h); margin-bottom:var(--s2); }
.svc__c p { font-size:var(--fs-s); color:var(--mute); flex:1; }
.svc__p { font-weight:600; color:var(--moss); font-size:var(--fs-s);
          margin:var(--s4) 0; }
/* stop the CTA stretching to the flex column's full width */
.svc__c .btn { align-self:flex-start; }

.map { aspect-ratio:16/10; background:var(--soft); border:1px solid var(--line);
       border-radius:var(--radius); display:flex; align-items:center;
       justify-content:center; text-align:center; padding:var(--s5); }
.hours { width:100%; border-collapse:collapse; font-size:var(--fs-s); }
.hours td { padding:var(--s2) 0; border-bottom:1px solid var(--line); }
.hours td:last-child { text-align:right; color:var(--mute); }
.hours tr.is-open td:last-child { color:var(--moss); font-weight:600; }

/* ---------- Footer ---------- */
.ftr { border-top:1px solid var(--line); margin-top:var(--s8);
       padding:var(--s7) 0 var(--s6); font-size:var(--fs-s); color:var(--mute); }
.ftr__grid { display:grid; gap:var(--s5); margin-bottom:var(--s6); }
@media (min-width:700px){ .ftr__grid{grid-template-columns:repeat(4,1fr);} }
.ftr h4 { font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase;
          color:var(--ink); margin-bottom:var(--s3); }
.ftr a { display:block; padding:3px 0; }
.ftr a:hover { color:var(--moss); }
/* the legal line is a sentence, not a nav column - .ftr a is block
   for the 4-column grid above it, which stacked these one per line
   and orphaned every separator. */
.ftr__legal a { display:inline; padding:0; }
.ftr__legal { border-top:1px solid var(--line); padding-top:var(--s5);
              font-size:var(--fs-xs); line-height:1.7; }

/* ---------- Prototype banner ---------- */
.proto { background:var(--clay); color:#fff; font-size:var(--fs-xs);
         padding:var(--s2) var(--s4); text-align:center; }
.proto b { font-weight:600; }

.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Skip link — offscreen until focused, then pinned top-left */
.skip { position:absolute; left:-9999px; top:0; z-index:100;
        background:var(--moss); color:#fff; padding:var(--s3) var(--s4);
        font-size:var(--fs-s); font-weight:600; }
.skip:focus { left:0; }
main:focus { outline:none; }

/* ---------- Consent (DPDP) ----------
   Rules notified 14 Nov 2025; Consent Manager operational 13 Nov 2026.
   Requires granular opt-in, no tag firing before consent, withdrawal as
   easy as granting, and auditable logs. Penalties reach Rs250 crore. */
/* A fixed banner covers whatever is at the bottom of the page - on the cart
   that is the checkout button. Reserve the space while it is showing. */
body.has-consent { padding-bottom:240px; }
@media (min-width:700px){ body.has-consent { padding-bottom:150px; } }

.consent { position:fixed; left:0; right:0; bottom:0; z-index:80;
           background:var(--paper); border-top:1px solid var(--line);
           box-shadow:0 -2px 16px rgba(20,38,28,.08); padding:var(--s5) var(--s4); }
.consent[hidden] { display:none; }
.consent__in { max-width:var(--wrap); margin:0 auto; }
.consent h4 { font-size:var(--fs-s); margin:0 0 var(--s2); }
.consent p { font-size:var(--fs-xs); color:var(--mute); margin:0 0 var(--s4);
             max-width:70ch; }
.consent__acts { display:flex; gap:var(--s2); flex-wrap:wrap; }
.consent__opts { display:none; margin:var(--s4) 0 0; padding-top:var(--s4);
                 border-top:1px solid var(--line); }
.consent__opts.is-open { display:block; }
.consent__opts .opt { cursor:pointer; }
.consent__opts .opt input:disabled { opacity:.5; cursor:not-allowed; }
.consent__note { font-size:10px; color:var(--mute); margin-top:var(--s3); }
.consent-reopen { background:none; border:0; padding:3px 0; color:inherit;
                  cursor:pointer; text-align:left; font-size:var(--fs-s);
                  text-decoration:underline; }
@media (min-width:700px){
  .consent__in { display:grid; grid-template-columns:1fr auto; gap:var(--s5);
                 align-items:center; }
  .consent__opts { grid-column:1/-1; }
  .consent p { margin-bottom:0; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after { animation:none !important; transition:none !important; }
}

/* --- PDP editorial sections ---------------------------------------------
   Stacked full-width bands, not an accordion. 01-metafield-definitions.md C
   already requires the safety block render visibly rather than "buried in a
   tab", and ASCI wants a claim's qualifier as prominent as the claim - both
   rule out collapsing this behind a chevron. Prose capped at 60ch per
   04-design-system.md 3. Nothing here uses --leaf: it is 4.40:1 and fails AA
   below 18px, a mistake that already shipped once. */
.pdp__hook { font-size: var(--fs-h); color: var(--mute); line-height: 1.4;
             margin: 4px 0 16px; max-width: 46ch; }
.pdp__copy { margin-bottom: 20px; }
.prose p { max-width: 60ch; margin: 0 0 12px; }
.prose p:last-child { margin-bottom: 0; }

#pdpstory { border-top: 1px solid var(--line); margin-top: 48px; }
.pdp__sec { padding: 32px 0; border-bottom: 1px solid var(--line); }
.pdp__sec:last-child { border-bottom: 0; }
.pdp__sec h2 { font-size: var(--fs-d3); margin: 0 0 16px; }
.pdp__sec h3 { font-size: var(--fs-s); text-transform: uppercase;
               letter-spacing: .12em; color: var(--mute); margin: 20px 0 8px; }
.pdp__sec h3:first-of-type { margin-top: 0; }
.pdp__sec--vastu { background: var(--clay-l); padding: 24px 20px; margin: 24px 0;
                   border-bottom: 0; border-radius: var(--radius); }

.benefit { max-width: 60ch; margin-bottom: 20px; }
.benefit:last-child { margin-bottom: 0; }
.benefit h3 { font-size: var(--fs-b); text-transform: none; letter-spacing: 0;
              color: var(--ink); margin: 0 0 4px; }
.benefit p { margin: 0; }
.claim__basis { font-size: var(--fs-s); color: var(--mute); max-width: 60ch;
                margin: 12px 0 0; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
a.tag { text-decoration: none; }
a.tag:hover { border-color: var(--moss); }
.tag--vibe { background: var(--soft); color: var(--moss); border-color: var(--line); }
.tag--room { background: #eef6f0; color: var(--moss); border-color: var(--leaf-l); }
.tag--occ  { background: var(--clay-l); color: var(--clay); border-color: #eccdb9; }
.tag--warn { background: var(--warn-bg); color: var(--clay); border-color: #e8d3ae; }
/* --warn-br is 2.96:1 on --warn-bg and fails AA at 10px. --clay is 4.89:1.
   Group 11 of verify-prototype.py now computes every such pair. */
/* Consent banner heading. It is an h2 because the banner is its own landmark
   region and an h4 there was a level skip - but it must not read at display
   size inside a small overlay. */
.consent__h { font-size: var(--fs-b); margin: 0 0 4px; letter-spacing: 0; }