/* Layout: sticky filter bar over a product grid grouped by collection; material-coloured photo tiles stand in until photography arrives */
:root{
  --bg:#F1F4F2; --surface:#FFFFFF; --fg:#16302F; --muted:#546A68; --line:#D3DCD9;
  --accent:#0E4B49; --accent-fg:#FFFFFF; --brass:#9A6B12; --chip:#E3EAE7;
  --t-metal:#C79A3E; --t-metal-fg:#3B2A05;
  --t-textile:#A6465B; --t-textile-fg:#FFFFFF;
  --t-wood:#7A4B2A; --t-wood-fg:#FFFFFF;
  --t-clay:#2F6F8F; --t-clay-fg:#FFFFFF;
  --t-food:#5E7F2E; --t-food-fg:#FFFFFF;
  --display:'Yatra One','Noto Serif Devanagari',Georgia,serif;
  --body:'Mukta','Segoe UI',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0C1716; --surface:#13221F; --fg:#E4EEEB; --muted:#9BB2AE; --line:#26403C;
  --accent:#6FC7BE; --accent-fg:#0C1716; --brass:#E0B04F; --chip:#1B2F2C;
  --t-metal:#B88A30; --t-metal-fg:#1E1502; --t-textile:#8E3A4D; --t-wood:#6A4126; --t-clay:#285F7B; --t-food:#506D27;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0C1716; --surface:#13221F; --fg:#E4EEEB; --muted:#9BB2AE; --line:#26403C;
  --accent:#6FC7BE; --accent-fg:#0C1716; --brass:#E0B04F; --chip:#1B2F2C;
  --t-metal:#B88A30; --t-metal-fg:#1E1502; --t-textile:#8E3A4D; --t-wood:#6A4126; --t-clay:#285F7B; --t-food:#506D27;
  color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 48px}
.wrap{max-width:1120px;margin:0 auto}
header{padding-block:40px 24px;display:grid;gap:12px}
.brand{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:700}
h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,6vw,60px);line-height:1.08;margin:0;text-wrap:balance}
.lede{max-width:62ch;color:var(--muted);margin:0;font-size:18px}
.facts{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--muted);margin-top:4px}
.facts b{color:var(--fg);font-weight:700}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-block:1px solid var(--line);
  padding-block:12px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.chips{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto;min-width:0}
button,input,select{font:inherit;color:inherit}
.chip{background:var(--chip);border:1px solid transparent;border-radius:999px;padding:6px 14px;cursor:pointer;font-size:15px}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);font-weight:700}
.chip:hover{border-color:var(--accent)}
.tools{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
input[type=search],select{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 10px;min-width:0}
input[type=search]{width:190px;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
section{padding-top:36px}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-bottom:16px}
h2{font-family:var(--display);font-weight:400;font-size:28px;margin:0}
.sec-sub{color:var(--muted);margin:0;min-width:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.art{position:absolute;left:0;top:0;width:100%;height:100%;padding:8px 8px 30px}
.tile{position:relative;aspect-ratio:4/3;max-width:100%;display:flex;align-items:flex-end;justify-content:space-between;padding:12px 14px;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.10) 0 2px,transparent 2px 14px);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.tile span:last-child{opacity:.7;font-weight:500}
.m-metal{background-color:var(--t-metal);color:var(--t-metal-fg)}
.m-textile{background-color:var(--t-textile);color:var(--t-textile-fg)}
.m-wood{background-color:var(--t-wood);color:var(--t-wood-fg)}
.m-clay{background-color:var(--t-clay);color:var(--t-clay-fg)}
.m-food{background-color:var(--t-food);color:var(--t-food-fg)}
.body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
h3{margin:0;font-size:18px;line-height:1.25;font-weight:700;text-wrap:balance}
.desc{margin:0;color:var(--muted);font-size:15px}
.feat{margin:0;font-size:13.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:8px}
.feat b{color:var(--fg)}
.foot{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;padding-top:6px}
.price{font-weight:700;font-size:17px;color:var(--accent);font-variant-numeric:tabular-nums}
.shelf{font-size:12.5px;color:var(--muted);background:var(--chip);border-radius:4px;padding:2px 8px}
.flag{font-size:12px;font-weight:700;color:var(--brass);letter-spacing:.08em;text-transform:uppercase}
.empty{padding:48px 0;color:var(--muted)}
footer{margin-top:56px;padding:28px;border:1px solid var(--line);border-radius:6px;background:var(--surface);display:grid;gap:8px}
footer h2{font-size:24px}
footer p{margin:0;color:var(--muted)}
.cta{display:inline-block;justify-self:start;background:var(--accent);color:var(--accent-fg);padding:10px 20px;border-radius:6px;text-decoration:none;font-weight:700;margin-top:6px}
.small{font-size:13px;margin-top:20px;color:var(--muted)}
@media (max-width:480px){.tools{width:100%}input[type=search]{flex:1;width:auto}footer{padding:20px}}
@media (prefers-reduced-motion:no-preference){.card{transition:transform .15s,border-color .15s}.card:hover{transform:translateY(-2px);border-color:var(--accent)}}

/* site shell */
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-block:16px;border-bottom:1px solid var(--line)}
.logo{font-family:var(--display);font-size:22px;color:var(--fg);text-decoration:none}
.topbar nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.topbar nav a{color:var(--muted);text-decoration:none;font-weight:500;padding:4px 0;border-bottom:2px solid transparent}
.topbar nav a:hover,.topbar nav a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--brass)}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.cta.alt{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.hero{padding-block:56px 40px;display:grid;gap:16px;max-width:760px}
.hero h1{font-size:clamp(38px,7vw,72px)}
.hero .lede{font-size:19px}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
a.coll{text-decoration:none;color:inherit}
a.coll .tile{aspect-ratio:16/9;font-size:13px}
a.coll h3{font-family:var(--display);font-weight:400;font-size:22px}
.meta{font-size:14px;color:var(--muted)}
.band{margin-top:48px;padding:28px;border:1px solid var(--line);border-radius:6px;background:var(--surface);display:grid;gap:10px}
.pts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-top:8px}
.pts h3{font-size:17px;margin:0 0 4px}.pts p{margin:0;color:var(--muted);font-size:15px}
.occ{display:flex;flex-wrap:wrap;gap:10px}
.occ a{background:var(--chip);color:var(--fg);text-decoration:none;border-radius:999px;padding:7px 16px;font-size:15px}
.occ a:hover{outline:1.5px solid var(--accent)}
.site-foot{margin-top:40px;padding-block:24px 0;border-top:1px solid var(--line);color:var(--muted);font-size:14px;display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between}
.site-foot a{color:var(--accent)}