/* ==========================================================================
   Agarbatti Bazar — storefront theme
   A devotional palette taken straight off the logo: saffron flame, ghee
   yellow, kumkum red and a deep maroon ink, tied together with gold.
   Slow-turning gold mandalas sit behind the major sections.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* brand — lifted from the logo artwork */
  --saffron:#FA6002;   /* flame / primary action           */
  --ghee:#FFF195;      /* pale yellow of the logo ground   */
  --kumkum:#880C1B;    /* deep red of the wordmark         */
  --maroon:#6F040B;    /* darkest red — the theme's "ink"  */
  --gold:#C9962E;      /* mandala linework                 */
  --gold-2:#E9C46A;    /* lit gold, for rules on dark      */
  --ember:#D94A02;     /* saffron pressed/hover            */

  /* semantic roles — every rule below reads these, so the whole storefront
     re-colours from this block alone */
  --ink:#6F040B;
  --ink-2:#560308;
  --ink-3:#880C1B;
  --paper:#FFFCF3;
  --mist:#FFF6DC;
  --mist-2:#FBEBBF;
  --line:#F0DFB0;
  --line-2:#DDBB6B;
  --muted:#8A6244;
  --muted-2:#B4906A;

  --radius:10px;
  --radius-lg:20px;
  --wrap:1320px;
  --gut:24px;

  --ff-display:"Marcellus",Georgia,"Times New Roman",serif;
  --ff-body:"Mukta",-apple-system,"Segoe UI",Roboto,sans-serif;

  --shadow-1:0 1px 2px rgba(111,4,11,.06);
  --shadow-2:0 8px 26px -10px rgba(111,4,11,.26);
  --shadow-3:0 22px 54px -20px rgba(111,4,11,.36);

  --ease:cubic-bezier(.22,.61,.36,1);
  --head-h:0px;

  /* one mandala drawing, reused as a background image everywhere. Encoded
     inline so the motif costs no extra request. */
  --mandala:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23C9962E' stroke-width='1'%3E%3Ccircle cx='100' cy='100' r='26'/%3E%3Ccircle cx='100' cy='100' r='34'/%3E%3Ccircle cx='100' cy='100' r='62'/%3E%3Ccircle cx='100' cy='100' r='90'/%3E%3Ccircle cx='100' cy='100' r='95'/%3E%3Cg%3E%3Cpath d='M100 38c9 12 9 26 0 38-9-12-9-26 0-38z'/%3E%3Cpath d='M100 8c6 9 6 20 0 28-6-8-6-19 0-28z'/%3E%3Ccircle cx='100' cy='50' r='3'/%3E%3C/g%3E%3Cg transform='rotate(30 100 100)'%3E%3Cpath d='M100 38c9 12 9 26 0 38-9-12-9-26 0-38z'/%3E%3Cpath d='M100 8c6 9 6 20 0 28-6-8-6-19 0-28z'/%3E%3Ccircle cx='100' cy='50' r='3'/%3E%3C/g%3E%3Cg transform='rotate(60 100 100)'%3E%3Cpath d='M100 38c9 12 9 26 0 38-9-12-9-26 0-38z'/%3E%3Cpath d='M100 8c6 9 6 20 0 28-6-8-6-19 0-28z'/%3E%3Ccircle cx='100' cy='50' r='3'/%3E%3C/g%3E%3Cg transform='rotate(90 100 100)'%3E%3Cpath d='M100 38c9 12 9 26 0 38-9-12-9-26 0-38z'/%3E%3Cpath d='M100 8c6 9 6 20 0 28-6-8-6-19 0-28z'/%3E%3Ccircle cx='100' cy='50' r='3'/%3E%3C/g%3E%3Cg transform='rotate(120 100 100)'%3E%3Cpath d='M100 38c9 12 9 26 0 38-9-12-9-26 0-38z'/%3E%3Cpath d='M100 8c6 9 6 20 0 28-6-8-6-19 0-28z'/%3E%3Ccircle cx='100' cy='50' r='3'/%3E%3C/g%3E%3Cg transform='rotate(150 100 100)'%3E%3Cpath d='M100 38c9 12 9 26 0 38-9-12-9-26 0-38z'/%3E%3Cpath d='M100 8c6 9 6 20 0 28-6-8-6-19 0-28z'/%3E%3Ccircle cx='100' cy='50' r='3'/%3E%3C/g%3E%3Cg transform='rotate(180 100 100)'%3E%3Cpath d='M100 38c9 12 9 26 0 38-9-12-9-26 0-38z'/%3E%3Cpath d='M100 8c6 9 6 20 0 28-6-8-6-19 0-28z'/%3E%3Ccircle cx='100' cy='50' r='3'/%3E%3C/g%3E%3Cg transform='rotate(210 100 100)'%3E%3Cpath d='M100 38c9 12 9 26 0 38-9-12-9-26 0-38z'/%3E%3Cpath d='M100 8c6 9 6 20 0 28-6-8-6-19 0-28z'/%3E%3Ccircle cx='100' cy='50' r='3'/%3E%3C/g%3E%3Cg transform='rotate(240 100 100)'%3E%3Cpath d='M100 38c9 12 9 26 0 38-9-12-9-26 0-38z'/%3E%3Cpath d='M100 8c6 9 6 20 0 28-6-8-6-19 0-28z'/%3E%3Ccircle cx='100' cy='50' r='3'/%3E%3C/g%3E%3Cg transform='rotate(270 100 100)'%3E%3Cpath d='M100 38c9 12 9 26 0 38-9-12-9-26 0-38z'/%3E%3Cpath d='M100 8c6 9 6 20 0 28-6-8-6-19 0-28z'/%3E%3Ccircle cx='100' cy='50' r='3'/%3E%3C/g%3E%3Cg transform='rotate(300 100 100)'%3E%3Cpath d='M100 38c9 12 9 26 0 38-9-12-9-26 0-38z'/%3E%3Cpath d='M100 8c6 9 6 20 0 28-6-8-6-19 0-28z'/%3E%3Ccircle cx='100' cy='50' r='3'/%3E%3C/g%3E%3Cg transform='rotate(330 100 100)'%3E%3Cpath d='M100 38c9 12 9 26 0 38-9-12-9-26 0-38z'/%3E%3Cpath d='M100 8c6 9 6 20 0 28-6-8-6-19 0-28z'/%3E%3Ccircle cx='100' cy='50' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
/* The clip belongs on <html>: overflow-x on <body> alone propagates to the
   viewport and leaves the body itself scrollable, which is how a stray
   decorative layer can still drag the page sideways. */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;color:#3B2216;
  /* a ghee-yellow wash bleeding in from the top corners, over warm paper —
     the same light the logo artwork sits in */
  background:
    radial-gradient(1100px 520px at 8% -8%,rgba(255,241,149,.55),transparent 62%),
    radial-gradient(900px 480px at 96% 2%,rgba(250,96,2,.07),transparent 60%),
    var(--paper);
  background-attachment:fixed;
  font-family:var(--ff-body);font-size:15.5px;line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--saffron);color:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,h4,h5{margin:0;font-family:var(--ff-display);font-weight:400;letter-spacing:.005em;line-height:1.14}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
hr{border:0;border-top:1px solid var(--line);margin:0}
:focus-visible{outline:2px solid var(--saffron);outline-offset:2px}
::selection{background:var(--saffron);color:#fff}
.ico{width:1.25em;height:1.25em;flex:none}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-wide{width:100%;max-width:1680px;margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================================================================
   0. MANDALA MOTIF SYSTEM
   One drawing (--mandala, defined in :root) placed as a decorative layer and
   turned very slowly. `.has-mandala` gives an element the positioning context;
   `.mandala` is the spinning disc itself. Both are aria-hidden decoration —
   nothing in the layout depends on them, so they can be switched off wholesale
   for reduced-motion without shifting a single pixel.
   ========================================================================== */
/* overflow:hidden is not decoration here — the discs are deliberately hung off
   the edges of their section, so without a clip they widen the page and the
   whole document scrolls sideways. */
.has-mandala{position:relative;isolation:isolate;overflow:hidden}
.has-mandala>*:not(.mandala){position:relative;z-index:1}
.mandala{
  position:absolute;z-index:0;pointer-events:none;
  aspect-ratio:1;width:var(--md-size,540px);
  background:var(--mandala) center/contain no-repeat;
  opacity:var(--md-op,.09);
  animation:mandalaSpin var(--md-dur,120s) linear infinite;
  will-change:transform;
}
.mandala.rev{animation-direction:reverse}
/* stock placements so a section only needs one class */
.mandala.tl{top:var(--md-y,-16%);left:var(--md-x,-8%)}
.mandala.tr{top:var(--md-y,-18%);right:var(--md-x,-9%)}
.mandala.br{bottom:var(--md-y,-22%);right:var(--md-x,-7%)}
.mandala.bl{bottom:var(--md-y,-20%);left:var(--md-x,-8%)}
.mandala.mid{top:50%;left:50%;transform-origin:center;margin:calc(var(--md-size,540px) / -2) 0 0 calc(var(--md-size,540px) / -2)}
.mandala.mid{animation-name:mandalaSpinMid}
@keyframes mandalaSpin{to{transform:rotate(360deg)}}
@keyframes mandalaSpinMid{to{transform:rotate(360deg)}}
/* on the dark maroon bands the linework has to lift, not sink */
.section-ink .mandala,.hero .mandala,.site-footer .mandala,
.hero-tiles-wrap .mandala,.videosec .mandala{opacity:var(--md-op,.16)}

@media (prefers-reduced-motion:reduce){
  .mandala{animation:none}
}

/* Gold lotus rule — the ornamental divider that replaces the stitched seam.
   Sits under section titles and between footer blocks. */
.lotus-rule{
  display:flex;align-items:center;justify-content:center;gap:12px;
  color:var(--gold);line-height:0;margin:14px 0 0;
}
.lotus-rule::before,.lotus-rule::after{
  content:"";height:1px;flex:1;max-width:96px;
  background:linear-gradient(90deg,transparent,currentColor);
}
.lotus-rule::after{background:linear-gradient(270deg,transparent,currentColor)}
.lotus-rule svg{width:26px;height:26px;flex:none}
.lotus-rule.left{justify-content:flex-start}
.lotus-rule.left::before{display:none}
.on-dark .lotus-rule,.section-ink .lotus-rule{color:var(--gold-2)}

/* ==========================================================================
   1. LOADER — "the lamp is lit"
   Full-bleed maroon. A gold mandala draws itself stroke by stroke around a
   diya, the flame catches, and the maroon parts down the middle to reveal
   the site. Same DOM contract as before (.ldr-panel / .ldr-core /
   .ldr-strokes / .is-done) so app.js needs no change.
   ========================================================================== */
.ab-loader{
  position:fixed;inset:0;z-index:9999;overflow:hidden;
  pointer-events:auto;
}
.ab-loader.is-done{pointer-events:none}

/* the two halves that part on exit — split down the middle, like a temple door */
.ldr-panel{
  position:absolute;top:0;bottom:0;width:50.4%;
  background:var(--ldr-bg,var(--maroon));
  transition:transform .86s cubic-bezier(.76,0,.24,1);
  will-change:transform;
}
.ldr-panel::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(233,196,106,.75),transparent);
}
.ldr-panel.top{left:0}
.ldr-panel.top::after{right:0}
.ldr-panel.bot{right:0}
.ldr-panel.bot::after{left:0}
.ab-loader.is-done .ldr-panel.top{transform:translateX(-100%)}
.ab-loader.is-done .ldr-panel.bot{transform:translateX(100%)}

/* oversized tagline drifting behind the mark */
.ldr-kinetic{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.ldr-kinetic .track{
  display:flex;width:max-content;opacity:.09;
  animation:ldrMarq 30s linear infinite;
}
.ldr-kinetic span{
  font-family:var(--ff-display);font-weight:400;color:var(--gold-2);white-space:nowrap;
  font-size:clamp(58px,12vw,170px);line-height:1;
  letter-spacing:.06em;text-transform:uppercase;padding-right:.42em;
}
@keyframes ldrMarq{to{transform:translateX(-50%)}}

/* mark + progress */
.ldr-core{
  position:absolute;inset:0;z-index:2;
  display:grid;place-items:center;align-content:center;gap:clamp(26px,3.4vw,40px);
  padding:24px;
  transition:opacity .34s var(--ease),transform .34s var(--ease);
}
.ab-loader.is-done .ldr-core{opacity:0;transform:translateY(-14px)}

/* The mandala is traced as an OUTLINE: stroked vector paths whose
   stroke-dashoffset animates 1 → 0, so a gold line draws the mark ring by
   ring. pathLength="1" on every subpath normalises the dash maths; the --d
   custom property on each path staggers the draw from the centre outwards. */
.ldr-mark{position:relative;display:grid;place-items:center}

/* the lamp's own glow, swelling as the flame catches */
.ldr-mark::before{
  content:"";position:absolute;inset:-40% -14%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(250,96,2,.34),rgba(255,241,149,.1) 42%,transparent 70%);
  opacity:0;animation:ldrAura 1.9s ease-out .5s forwards;
}
@keyframes ldrAura{from{opacity:0}to{opacity:1}}

.ldr-svg{
  width:min(clamp(220px,40vw,380px), calc(100vw - 48px));height:auto;display:block;overflow:visible;
  filter:drop-shadow(0 0 4px rgba(233,196,106,.85))
         drop-shadow(0 0 18px rgba(250,96,2,.42));
  animation:ldrBreathe 3s ease-in-out 2.1s infinite;
}
@keyframes ldrBreathe{
  0%,100%{filter:drop-shadow(0 0 4px rgba(233,196,106,.85)) drop-shadow(0 0 18px rgba(250,96,2,.42))}
  50%    {filter:drop-shadow(0 0 7px rgba(255,241,149,1)) drop-shadow(0 0 30px rgba(250,96,2,.62))}
}

.ldr-strokes path,.ldr-strokes circle{
  fill:none;stroke:var(--gold-2);stroke-width:1.6;
  stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  /* one-shot: draws once and holds, so the staggered paths can never drift
     out of sync the way a looping animation would */
  animation:ldrDraw 1.15s cubic-bezier(.45,0,.35,1) var(--d,0s) both;
}
/* the flame and the lamp body are the focal point — heavier and saffron */
.ldr-strokes .flame{stroke:var(--saffron);stroke-width:2.2}
.ldr-strokes .lamp{stroke:var(--gold-2);stroke-width:2.2}
/* smoke drifts up once the stick is lit */
.ldr-strokes .smoke{stroke:rgba(255,241,149,.6);stroke-width:1.4;animation:ldrDraw 1.4s ease-out var(--d,0s) both,ldrSmoke 3.4s ease-in-out 1.9s infinite}
@keyframes ldrDraw{
  from{stroke-dashoffset:1;opacity:.25}
  20% {opacity:1}
  to  {stroke-dashoffset:0;opacity:1}
}
@keyframes ldrSmoke{
  0%,100%{transform:translateY(0) scaleX(1);opacity:.55}
  50%    {transform:translateY(-4px) scaleX(1.12);opacity:.9}
}

.ldr-mark-img{width:min(clamp(180px,34vw,340px),calc(100vw - 48px));display:grid;place-items:center}
.ldr-mark-img img{width:100%;height:auto;display:block;animation:ldrFade 1.4s var(--ease) both}
@keyframes ldrFade{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.ldr-line{
  width:clamp(150px,22vw,230px);height:1px;
  background:rgba(233,196,106,.2);overflow:hidden;
}
.ldr-line i{
  display:block;height:100%;width:34%;
  background:linear-gradient(90deg,transparent,var(--saffron),var(--ghee),transparent);
  box-shadow:0 0 10px rgba(250,96,2,.9),0 0 22px rgba(255,241,149,.5);
  animation:ldrRun 1.5s cubic-bezier(.62,.02,.35,1) infinite;
}
@keyframes ldrRun{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}

.ldr-word{
  font-family:var(--ff-display);font-size:13px;font-weight:400;
  letter-spacing:.42em;text-transform:uppercase;color:rgba(255,241,149,.68);
  padding-left:.42em;
}

@media (prefers-reduced-motion:reduce){
  .ldr-strokes path,.ldr-strokes circle{animation:none;stroke-dashoffset:0}
  .ldr-svg{animation:none}
  .ldr-mark::before{animation:none;opacity:.8}
  .ldr-line i{animation:none;width:100%}
  .ldr-kinetic .track{animation:none}
}

/* ==========================================================================
   2. BUTTONS & SMALL PIECES
   ========================================================================== */
/* Primary action = the flame. A saffron fill under a thin gold rim, with a
   sheen that sweeps across on hover. */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--ff-display);font-size:16.5px;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;
  padding:14px 30px;border:1px solid var(--gold);border-radius:100px;
  background:linear-gradient(160deg,#FF7A1F 0%,var(--saffron) 52%,var(--ember) 100%);
  color:#FFF7E0;cursor:pointer;
  box-shadow:0 6px 18px -8px rgba(250,96,2,.7),inset 0 1px 0 rgba(255,255,255,.28);
  transition:filter .22s var(--ease),transform .18s var(--ease),box-shadow .22s var(--ease);
  white-space:nowrap;
}
.btn::after{
  content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,241,149,.42),transparent);
  transform:skewX(-18deg);transition:left .55s var(--ease);
}
.btn:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(250,96,2,.85),inset 0 1px 0 rgba(255,255,255,.3)}
.btn:hover::after{left:125%}
.btn:active{transform:translateY(0)}
.btn .ico{width:1.1em;height:1.1em;position:relative;z-index:1}
.btn>*{position:relative;z-index:1}
/* secondary — outlined in the deep red, no fill */
.btn-ghost{background:var(--paper);color:var(--ink);border-color:var(--ink);box-shadow:none}
.btn-ghost:hover{background:var(--ink);color:var(--ghee);border-color:var(--ink)}
/* on the maroon bands: a ghee-coloured slab */
.btn-light{background:linear-gradient(160deg,#FFFBE6,var(--ghee));color:var(--maroon);border-color:var(--gold-2);box-shadow:0 6px 18px -8px rgba(0,0,0,.4)}
.btn-light:hover{filter:brightness(1.03)}
.btn-outline-light{background:transparent;color:var(--ghee);border-color:rgba(233,196,106,.7);box-shadow:none}
.btn-outline-light:hover{background:var(--ghee);color:var(--maroon);border-color:var(--ghee)}
.btn-sm{padding:9px 18px;font-size:14.5px}
.btn-lg{padding:17px 38px;font-size:19px}
.btn-block{width:100%}
.btn[disabled],.btn.is-disabled{opacity:.4;pointer-events:none}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-display);
  font-size:15.5px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:var(--kumkum);border-bottom:1px solid var(--gold);padding-bottom:3px;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.link-arrow:hover{color:var(--saffron);border-color:var(--saffron)}
.link-arrow .ico{transition:transform .25s var(--ease)}
.link-arrow:hover .ico{transform:translateX(4px)}

.chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 13px;
  border:1px solid var(--line-2);border-radius:100px;background:var(--mist);
  font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--kumkum);
}

.seam{color:var(--gold);line-height:0;opacity:.55}
.seam.on-ink{color:var(--gold-2);opacity:.5}

/* section heads */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px}
.shead-t{display:grid;gap:7px}
.kicker{
  font-family:var(--ff-body);font-size:12px;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:var(--saffron);
  display:flex;align-items:center;gap:10px;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--gold);display:block}
.kicker.on-ink{color:var(--ghee)}
.kicker.on-ink::before{background:var(--gold-2)}
.stitle{font-size:clamp(31px,4.2vw,48px);letter-spacing:.005em;color:var(--kumkum)}
.section-ink .stitle,.hero-tiles-wrap h2,.videosec .stitle{color:var(--ghee)}
.ssub{color:var(--muted);max-width:60ch;font-size:15px}

.section{padding:clamp(54px,7vw,92px) 0;position:relative}
.section-mist{background:linear-gradient(180deg,var(--mist) 0%,#FFFBEB 100%);border-block:1px solid var(--line)}
.section-ink{background:var(--ink);color:var(--ghee)}
.section-ink .ssub{color:rgba(255,241,149,.7)}
.section-tight{padding:clamp(36px,5vw,56px) 0}

/* ==========================================================================
   3. ANNOUNCEMENT + HEADER
   ========================================================================== */
.announce{
  background:linear-gradient(90deg,var(--maroon) 0%,var(--kumkum) 50%,var(--maroon) 100%);
  color:var(--ghee);overflow:hidden;
  border-bottom:1px solid rgba(233,196,106,.3);
  font-family:var(--ff-body);font-size:12.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
}
.announce .track{display:flex;width:max-content;animation:marq 42s linear infinite}
.announce:hover .track{animation-play-state:paused}
.announce .seg{display:flex;flex:none}
.announce span{padding:9px 28px;display:flex;align-items:center;gap:28px;white-space:nowrap}
/* a small gold lotus bud instead of a plain dot between repeats */
.announce span::after{
  content:"";width:9px;height:9px;flex:none;background:var(--gold-2);opacity:.8;
  clip-path:polygon(50% 0%,68% 32%,100% 50%,68% 68%,50% 100%,32% 68%,0% 50%,32% 32%);
}
@keyframes marq{to{transform:translateX(-50%)}}

.site-header{
  position:sticky;top:0;z-index:200;
  background:linear-gradient(180deg,#FFFDF4 0%,var(--mist) 100%);
  border-bottom:1px solid var(--line);
}
.site-header.is-stuck{box-shadow:var(--shadow-2)}

.head-main{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:26px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
/* The logo artwork carries its own ghee-yellow watercolour ground, so it is
   framed as a deliberate brand plate rather than floated on the header. */
.brand img{
  height:62px;width:auto;object-fit:contain;
  border:1px solid var(--gold);border-radius:12px;
  box-shadow:0 3px 10px -5px rgba(111,4,11,.4);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.brand:hover img{transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(111,4,11,.55)}
.mobnav-head img{border:1px solid var(--gold);border-radius:10px}
.brand-txt{display:grid;line-height:1}
.brand-txt b{font-family:var(--ff-display);font-size:23px;letter-spacing:.12em;text-transform:uppercase;color:var(--kumkum)}
.brand-txt span{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:4px}

.searchbar{position:relative;display:flex;align-items:center;max-width:560px;width:100%;justify-self:center}
.searchbar input{
  width:100%;padding:12px 48px 12px 18px;border:1px solid var(--line-2);
  border-radius:100px;background:#FFFDF4;font-size:14.5px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.searchbar input:focus{outline:0;border-color:var(--saffron);box-shadow:0 0 0 3px rgba(250,96,2,.14)}
.searchbar button{
  position:absolute;right:4px;top:4px;bottom:4px;width:42px;display:grid;place-items:center;
  border-radius:100px;color:var(--muted);transition:color .2s,background .2s;
}
.searchbar button:hover{color:#fff;background:var(--saffron)}

.head-acts{display:flex;align-items:center;gap:4px}
.iconbtn{
  position:relative;width:44px;height:44px;display:grid;place-items:center;
  border-radius:50%;color:var(--kumkum);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.iconbtn .ico{width:21px;height:21px}
.iconbtn:hover{background:var(--saffron);color:#fff}
.iconbtn .cnt{
  position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;
  background:var(--saffron);color:#fff;border:2px solid var(--mist);border-radius:100px;
  font-size:10.5px;font-weight:700;line-height:14px;text-align:center;
  transition:transform .25s var(--ease);
}
.iconbtn:hover .cnt{background:var(--maroon);border-color:var(--saffron)}
.iconbtn .cnt.pop{animation:cntPop .45s var(--ease)}
@keyframes cntPop{0%{transform:scale(1)}40%{transform:scale(1.55)}100%{transform:scale(1)}}
.iconbtn.hide-empty:not(.has) .cnt{display:none}

.nav-toggle{display:none}

/* main nav bar — curated groups with hover dropdowns.
   A deep maroon band edged in gold, so it reads as the lintel of the header
   rather than a second toolbar. */
.head-nav{
  background:linear-gradient(180deg,var(--kumkum) 0%,var(--maroon) 100%);
  color:var(--ghee);position:relative;z-index:190;
  border-top:1px solid rgba(233,196,106,.32);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.16);
}
/* overflow must stay visible or the dropdowns get clipped; the bar is hidden
   below 1024px anyway, so there is nothing to scroll here */
.head-nav .wrap{overflow:visible}
/* Four entries — Home, About, Product, Contact — centred, with the whole
   category tree hanging off Product as a dropdown. flex-wrap stays as the
   backstop if the labels are renamed to something much longer in Admin. */
.nav-list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 6px;list-style:none;margin:0;padding:0}
.nav-list>li{position:relative}
.nav-list>li>a{
  position:relative;display:flex;align-items:center;gap:7px;padding:15px 24px;white-space:nowrap;
  font-family:var(--ff-display);font-size:17px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,241,149,.86);
  transition:color .2s var(--ease);
}
.nav-list>li>a::after{
  content:"";position:absolute;left:24px;right:24px;bottom:9px;height:1px;
  background:var(--gold-2);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease);
}
.nav-list>li>a:hover,.nav-list>li>a.active{color:#FFF9DC}
.nav-list>li>a:hover::after,.nav-list>li>a.active::after{transform:scaleX(1)}
.nav-list .ico.sub{width:13px;height:13px;opacity:.7;transition:transform .25s var(--ease)}
.nav-list>li:hover .ico.sub{transform:rotate(180deg)}

.subnav{
  position:absolute;top:100%;left:0;min-width:236px;z-index:200;
  background:#FFFCF0;color:var(--ink);
  border:1px solid var(--line-2);border-top:2px solid var(--saffron);
  border-radius:0 0 14px 14px;box-shadow:var(--shadow-3);
  padding:8px 0;list-style:none;margin:0;overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.nav-list>li:hover>.subnav,
.nav-list>li:focus-within>.subnav{opacity:1;visibility:visible;transform:none}
.subnav a{
  display:block;padding:11px 20px;color:var(--ink);
  font-family:var(--ff-display);font-size:15.5px;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  transition:background .18s var(--ease),color .18s var(--ease),padding-left .18s var(--ease);
}
.subnav a:hover{background:var(--mist);color:var(--saffron);padding-left:27px}

/* The Product menu carries the whole category tree. A single column of eleven
   entries runs off the bottom of a laptop viewport, so once there are eight or
   more it splits into two. */
.subnav:has(> li:nth-child(8)){
  display:grid;grid-template-columns:1fr 1fr;min-width:460px;
  left:50%;transform:translateX(-50%) translateY(8px);
}
.nav-list>li:hover>.subnav:has(> li:nth-child(8)),
.nav-list>li:focus-within>.subnav:has(> li:nth-child(8)){transform:translateX(-50%)}
/* The "All Products" row spans both columns and reads as the group heading.
   The span has to go on the <li> — that is the grid item; putting it on the
   <a> inside did nothing and left the first category sitting beside it. */
.subnav > li:has(> .sub-all){grid-column:1 / -1;border-bottom:1px solid var(--line);margin-bottom:4px}
.subnav .sub-all{color:var(--saffron);letter-spacing:.14em}
.subnav .sub-all:hover{background:var(--mist);color:var(--kumkum)}

/* mobile accordion groups */
.mob-group{border-bottom:1px solid var(--line)}
.mob-group>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 20px;font-family:var(--ff-display);font-size:17px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
}
.mob-group>summary::-webkit-details-marker{display:none}
.mob-group>summary .ico{width:16px;height:16px;color:var(--muted-2);transition:transform .25s var(--ease)}
.mob-group[open]>summary .ico{transform:rotate(180deg)}
.mob-group[open]>summary{background:var(--mist)}
.mobnav-links .mob-kid,.mobnav-links .mob-all{padding-left:34px;font-size:15px;border-bottom:0}
.mobnav-links .mob-all{color:var(--muted);font-size:13.5px}

/* mobile drawer */
.drawer-scrim{
  position:fixed;inset:0;z-index:400;background:rgba(11,11,12,.5);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
  backdrop-filter:blur(2px);
}
.drawer-scrim.is-open{opacity:1;visibility:visible}

.mobnav{
  position:fixed;top:0;left:0;bottom:0;width:min(340px,86vw);z-index:401;
  background:var(--paper);transform:translateX(-100%);
  transition:transform .38s var(--ease);display:flex;flex-direction:column;
}
.mobnav.is-open{transform:none}
.mobnav-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.mobnav-head img{height:38px}
.mobnav-links{flex:1;overflow-y:auto;padding:8px 0}
.mobnav-links a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 20px;border-bottom:1px solid var(--line);
  font-family:var(--ff-display);font-size:17px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
}
.mobnav-links a .ico{width:16px;height:16px;color:var(--muted-2)}
.mobnav-links a:hover,.mobnav-links a.active{background:var(--kumkum);color:var(--ghee)}
.mobnav-links a:hover .ico{color:#fff}
.mobnav-foot{padding:18px 20px;border-top:1px solid var(--line);display:grid;gap:12px}
.mobnav-foot .socials{display:flex;gap:8px}

/* ==========================================================================
   4. HERO + CATEGORY TILES ON THE BANNER
   ========================================================================== */
.hero{position:relative;background:var(--maroon);color:var(--ghee);overflow:hidden;isolation:isolate}
/* mandalas ride above the artwork but below the scrim + copy */
.hero>.mandala{z-index:1;opacity:.14;mix-blend-mode:screen}
.hero-track{display:flex;transition:transform .7s var(--ease)}
/* The slide takes the banner artwork's own aspect ratio (the supplied files are
   1942x809), so object-fit:cover has nothing left to crop — the banner is shown
   whole at every width. */
.hero-slide{position:relative;flex:0 0 100%;aspect-ratio:1942 / 809;display:grid}
.hero-slide picture,.hero-slide>img{position:absolute;inset:0}
.hero-slide img{width:100%;height:100%;object-fit:cover}
.hero-slide::after{
  content:"";position:absolute;inset:0;
  /* a warm maroon veil — deep enough on the left to carry the headline, clear
     on the right so the artwork keeps its saffron */
  background:linear-gradient(90deg,
    rgba(90,3,8,.93) 0%, rgba(111,4,11,.76) 36%, rgba(136,12,27,.32) 58%,
    rgba(136,12,27,.06) 76%, rgba(90,3,8,.16) 100%);
}
.hero-slide.align-center::after{background:linear-gradient(180deg,rgba(90,3,8,.34) 0%,rgba(90,3,8,.78) 100%)}

/* Artwork-only slide: no headline, so no scrim. The veil exists purely to make
   overlaid type legible — leaving it on a bare banner just dims the client's
   image for nothing. */
.hero-slide.is-bare::after{display:none}
/* whole-frame link for a bare slide that carries a CTA url */
.hero-hit{position:absolute;inset:0;z-index:2;display:block}
.hero-inner{position:relative;z-index:2;align-self:center;width:100%;padding-block:clamp(48px,7vw,80px)}
.hero-copy{max-width:620px;display:grid;gap:18px;justify-items:start}
.hero-slide.align-center .hero-copy{max-width:760px;margin-inline:auto;justify-items:center;text-align:center}
.hero-kick{
  font-family:var(--ff-body);font-size:12px;font-weight:700;letter-spacing:.36em;
  text-transform:uppercase;color:var(--ghee);
  display:inline-flex;align-items:center;gap:12px;
}
.hero-kick::before{content:"";width:34px;height:1px;background:var(--gold-2)}
.hero-title{
  font-size:clamp(40px,6.6vw,82px);line-height:1.03;
  letter-spacing:.005em;text-wrap:balance;color:#FFF9DC;
  text-shadow:0 2px 22px rgba(60,2,6,.55);
}
.hero-sub{font-size:clamp(15px,1.5vw,17.5px);color:rgba(255,241,149,.84);max-width:52ch;line-height:1.6}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

.hero-arrows{position:absolute;z-index:3;bottom:calc(50% - 22px);width:100%;display:flex;justify-content:space-between;padding-inline:clamp(10px,2vw,26px);pointer-events:none}
.hero-arrows button{
  pointer-events:auto;width:46px;height:46px;display:grid;place-items:center;
  border:1px solid rgba(233,196,106,.5);border-radius:50%;color:var(--ghee);
  background:rgba(90,3,8,.4);backdrop-filter:blur(3px);
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.hero-arrows button:hover{background:var(--saffron);color:#fff;border-color:var(--saffron)}
.hero-dots{position:absolute;z-index:3;left:0;right:0;bottom:18px;display:flex;justify-content:center;gap:8px}
.hero-dots button{width:9px;height:9px;border-radius:50%;background:rgba(255,241,149,.38);transition:background .25s,width .3s var(--ease),border-radius .3s var(--ease)}
.hero-dots button.is-on{background:var(--gold-2);width:30px;border-radius:5px}

/* Round category discs — a ghee-yellow band sitting between the menu and the
   banner, with two mandalas turning behind the row. */
.hero-tiles-wrap{
  /* capped just under the column width (~189px at 6-up) so the discs grow to
     nearly fill their track without colliding with the neighbouring one */
  --htile-d:clamp(104px,12.5vw,180px);
  position:relative;z-index:5;isolation:isolate;overflow:hidden;
  padding:clamp(32px,4vw,52px) 0 clamp(28px,3.4vw,44px);
  background:linear-gradient(180deg,#FFF6D2 0%,var(--ghee) 55%,#FFEFA8 100%);
  color:var(--kumkum);
  border-block:1px solid var(--line-2);
}
.hero-tiles-wrap .mandala{opacity:.14}
.hero-tiles-wrap>.wrap{position:relative;z-index:1}
.htiles-head{text-align:center;display:grid;justify-items:center;gap:8px;margin-bottom:clamp(22px,3vw,32px)}
.htiles-head .kicker{justify-content:center;color:var(--saffron)}
.htiles-head .kicker::before{background:var(--gold)}
.htiles-head h2{font-size:clamp(26px,3.4vw,38px);letter-spacing:.01em;color:var(--kumkum)}
.htiles-shell{position:relative}
/* --per fixes how many discs fill one view; the column width is derived from
   it so the track always lands on an exact count instead of cramming. */
.hero-tiles{
  --per:6;
  --tgap:28px;
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--per) - 1) * var(--tgap)) / var(--per));
  gap:var(--tgap);
  overflow-x:auto;padding:6px 2px 18px;
  scrollbar-width:none;scroll-snap-type:x proximity;scroll-behavior:smooth;
  overscroll-behavior-x:contain;
}
.hero-tiles::-webkit-scrollbar{display:none}
.hero-tiles.has-overflow{cursor:grab}
.hero-tiles.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;user-select:none}

/* align-content:start + a fixed label box keeps every product count on the
   same baseline even when a name wraps to two lines */
.htile{
  scroll-snap-align:center;display:grid;grid-template-rows:auto auto auto;
  align-content:start;justify-items:center;gap:12px;text-align:center;padding:0 4px;
}
/* each disc is a small brass thali: cream face, gold rim, saffron ring on hover */
.htile-img{
  position:relative;width:var(--htile-d);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 34%,#FFFDF6 0%,#FFF6DC 68%,#FBEBBF 100%);
  border:1px solid var(--gold);
  display:grid;place-items:center;overflow:hidden;
  box-shadow:0 0 0 5px rgba(255,255,255,.5),0 10px 22px -12px rgba(111,4,11,.5);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.htile-img img{
  width:100%;height:100%;object-fit:contain;padding:13%;
  transition:transform .45s var(--ease);
}
.htile-img .ico{width:34%;height:34%;color:var(--gold)}
.htile:hover .htile-img{
  transform:translateY(-6px);
  border-color:var(--saffron);
  box-shadow:0 0 0 5px rgba(250,96,2,.16),0 18px 34px -14px rgba(111,4,11,.6);
}
.htile:hover .htile-img img{transform:scale(1.08)}
.htile-lbl{
  font-family:var(--ff-display);font-size:16px;font-weight:400;
  letter-spacing:.09em;text-transform:uppercase;line-height:1.2;color:var(--kumkum);
  display:grid;align-content:start;min-height:2.4em;   /* two lines */
}
.htile-cnt{font-size:11.5px;color:var(--muted);letter-spacing:.05em;margin-top:-4px}

/* page dots (replaced the side arrows) */
.htiles-dots{display:flex;justify-content:center;align-items:center;gap:9px;margin-top:22px}
.htiles-dots[hidden]{display:none}
.htiles-dots button{
  width:9px;height:9px;border-radius:50%;background:rgba(111,4,11,.22);
  transition:background .25s var(--ease),width .3s var(--ease),border-radius .3s var(--ease);
}
.htiles-dots button:hover{background:rgba(111,4,11,.45)}
.htiles-dots button.is-on{background:var(--saffron);width:28px;border-radius:5px}

/* ==========================================================================
   5. TRUST RIBBON
   ========================================================================== */
.trust{background:var(--line-2);border-block:1px solid var(--line-2);overflow:hidden}
.trust-run{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2)}
.trust-track>.trust-run[aria-hidden]{display:none}
.trust-i{background:#FFFCF0;padding:22px 20px;display:flex;align-items:center;gap:14px}
.trust-i .ico{width:26px;height:26px;flex:none;color:var(--saffron)}
.trust-i b{display:block;font-family:var(--ff-display);font-size:17.5px;font-weight:400;letter-spacing:.05em;line-height:1.22;color:var(--kumkum)}
.trust-i span{font-size:12.5px;color:var(--muted);line-height:1.45}

/* ==========================================================================
   6. PRODUCT CARD
   ========================================================================== */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.pgrid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* A plain card: cream panel, gold rim, square image well. (An earlier version
   gave the image an arched "shrine niche" top — dropped on request.) */
.pcard{
  position:relative;
  background:linear-gradient(180deg,#FFFDF6 0%,#FFF9E9 100%);
  border:1px solid var(--line-2);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--shadow-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-3);border-color:var(--saffron)}
.pcard-media{position:relative;overflow:hidden;padding:10px 10px 0}
.pcard-imgwrap{
  display:block;position:relative;aspect-ratio:1/1;
  border-radius:6px;overflow:hidden;
  background:radial-gradient(circle at 50% 30%,#FFFFFF 0%,var(--mist) 62%,#FBEBBF 100%);
  border:1px solid var(--line);
}
.pcard-imgwrap img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:16px;
  transition:transform .5s var(--ease),opacity .35s var(--ease);
}
.pcard-img2{opacity:0}
.pcard:hover .pcard-imgwrap img{transform:scale(1.07)}
.pcard:hover .pcard-img2{opacity:1}

.pcard-flags{position:absolute;top:18px;left:18px;display:grid;gap:6px;justify-items:start;z-index:2}
.flag{
  font-family:var(--ff-body);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:100px;
}
.flag-sale{background:var(--saffron);color:#fff;box-shadow:0 4px 12px -4px rgba(250,96,2,.8)}
.flag-out{background:var(--maroon);color:var(--ghee)}
.flag-feat{background:var(--ghee);color:var(--kumkum);border:1px solid var(--gold)}

/* wishlist toggle — fills saffron, the flame colour, not red */
.wish-btn{
  position:absolute;top:18px;right:18px;z-index:3;
  width:38px;height:38px;display:grid;place-items:center;
  background:rgba(255,253,246,.94);border:1px solid var(--line-2);border-radius:50%;
  color:var(--kumkum);backdrop-filter:blur(4px);
  transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.wish-btn:hover{border-color:var(--saffron);color:var(--saffron);transform:scale(1.08);box-shadow:var(--shadow-2)}
.wish-ico{position:relative;width:19px;height:19px;display:grid;place-items:center}
.wish-ico .ico{position:absolute;width:19px;height:19px;transition:opacity .22s var(--ease),transform .3s var(--ease)}
.wish-ico .fill{opacity:0;transform:scale(.5)}
.wish-btn.is-on{background:var(--saffron);border-color:var(--saffron);color:#fff}
.wish-btn.is-on .line{opacity:0}
.wish-btn.is-on .fill{opacity:1;transform:scale(1)}
.wish-btn.pulse::after{
  content:"";position:absolute;inset:-2px;border-radius:50%;border:1.5px solid var(--saffron);
  animation:wishRing .55s var(--ease) forwards;
}
@keyframes wishRing{0%{transform:scale(.85);opacity:.8}100%{transform:scale(1.5);opacity:0}}

.pcard-quick{
  position:absolute;left:20px;right:20px;bottom:14px;z-index:2;
  transform:translateY(calc(100% + 18px));opacity:0;
  transition:transform .32s var(--ease),opacity .32s var(--ease);
}
.pcard:hover .pcard-quick,.pcard:focus-within .pcard-quick{transform:none;opacity:1}
.qrow{display:flex;gap:6px}
.qrow .qbtn{flex:1;min-width:0;padding-inline:8px}
.qbtn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 12px;border-radius:100px;
  background:linear-gradient(160deg,#FF7A1F,var(--saffron) 60%,var(--ember));
  color:#FFF7E0;border:1px solid var(--gold);
  font-family:var(--ff-display);font-size:15px;font-weight:400;
  letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 6px 16px -8px rgba(250,96,2,.8);
  transition:filter .2s var(--ease),background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);
}
.qbtn:hover{filter:brightness(1.07)}
.qbtn .ico{width:17px;height:17px}
.qbtn.is-added{background:var(--maroon);border-color:var(--maroon);color:var(--ghee)}
/* Buy now — the secondary of the pair, so the two never read as one slab */
.qbtn-alt{background:#FFFCF0;color:var(--kumkum);border-color:var(--kumkum);box-shadow:none}
.qbtn-alt:hover{background:var(--kumkum);color:var(--ghee);filter:none}
.qbtn[disabled]{opacity:.55;pointer-events:none}

.pdp-buy{margin-top:10px}

.pcard-body{padding:15px 17px 18px;display:grid;gap:6px;flex:1;align-content:start}
.pcard-cat{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--saffron);font-weight:700}
.pcard-name{font-family:var(--ff-display);font-size:19px;font-weight:400;letter-spacing:.015em;line-height:1.28;color:var(--kumkum)}
.pcard-name a{transition:color .2s}
.pcard-name a:hover{color:var(--saffron)}
.pcard-price{margin-top:2px;font-family:var(--ff-display);font-size:21px;font-weight:400;letter-spacing:.02em;color:var(--maroon);display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pcard-price del{color:var(--muted-2);font-size:15.5px}
.poa{font-size:14px;font-family:var(--ff-body);color:var(--muted);letter-spacing:0}

/* carousel rail */
.rail-wrap{position:relative}
/* The upper bound matters: with `1fr` a rail holding two or three products
   stretched each card to half the page, so a short row looked broken rather
   than short. Capped, a full rail still overflows and scrolls as a carousel
   should, and a short one simply sits left-aligned at card width. */
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,296px);
  justify-content:start;
  gap:20px;overflow-x:auto;padding-bottom:6px;
  scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.rail.has-overflow{cursor:grab}
.rail.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;user-select:none}
/* Native link/image dragging would hijack the click-drag scroll. */
.rail a,.rail img,.hero-tiles a,.hero-tiles img{-webkit-user-drag:none;user-select:none}
.hero-tiles.is-dragging a{pointer-events:none}
.rail.is-dragging a{pointer-events:none}
/* wider tracks for testimonial cards */
.rail-wide{grid-auto-columns:minmax(330px,392px)}
.rail-wide .tcard{height:100%}
.rail-nav{display:flex;gap:8px}
.rail-nav button{
  width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--gold);
  border-radius:50%;background:#FFFCF0;color:var(--kumkum);
  transition:background .2s,color .2s,border-color .2s;
}
.rail-nav button:hover{background:var(--saffron);color:#fff;border-color:var(--saffron)}
.rail-nav button[disabled]{opacity:.3;pointer-events:none}
.section-ink .rail-nav button{border-color:rgba(233,196,106,.5);color:var(--ghee);background:transparent}
.section-ink .rail-nav button:hover{background:var(--ghee);color:var(--maroon)}

/* ==========================================================================
   7. PROMO BANNER + VIDEO
   ========================================================================== */
.promo{position:relative;aspect-ratio:1920 / 560;display:grid;background:var(--maroon);color:var(--ghee);overflow:hidden;isolation:isolate}
.promo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.88}
.promo>.mandala{z-index:1;opacity:.15;mix-blend-mode:screen}
.promo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(90,3,8,.9) 0%,rgba(111,4,11,.64) 42%,rgba(136,12,27,.14) 72%,rgba(90,3,8,.12) 100%)}
.promo-inner{position:relative;z-index:2;align-self:center;padding-block:48px}
.promo-copy{max-width:560px;display:grid;gap:16px;justify-items:start}
.promo-title{font-size:clamp(28px,4.4vw,52px);line-height:1.08;color:#FFF9DC;text-shadow:0 2px 20px rgba(60,2,6,.5)}

.videosec{position:relative;background:var(--maroon);color:var(--ghee);isolation:isolate;overflow:hidden}
.videosec>.mandala{opacity:.13}
.video-head{position:relative;z-index:1;text-align:center;display:grid;gap:10px;justify-items:center;padding:clamp(44px,6vw,68px) var(--gut) clamp(28px,4vw,40px)}
.video-frame{position:relative;z-index:1;width:100%;aspect-ratio:16/9;max-height:78vh;background:#2C0104;overflow:hidden;cursor:pointer}
.video-frame img{width:100%;height:100%;object-fit:cover;opacity:.66;transition:opacity .4s var(--ease),transform .8s var(--ease)}
.video-frame:hover img{opacity:.54;transform:scale(1.03)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{
  position:absolute;inset:0;display:grid;place-items:center;gap:18px;align-content:center;pointer-events:none;
}
.video-play .disc{
  width:clamp(72px,9vw,104px);height:clamp(72px,9vw,104px);border-radius:50%;
  background:linear-gradient(160deg,#FF7A1F,var(--saffron) 60%,var(--ember));
  color:#FFF7E0;border:1px solid var(--gold-2);display:grid;place-items:center;
  box-shadow:0 0 0 0 rgba(250,96,2,.5);
  animation:vpulse 2.6s var(--ease) infinite;
}
.video-play .disc .ico{width:34%;height:34%;margin-left:8%}
@keyframes vpulse{0%{box-shadow:0 0 0 0 rgba(250,96,2,.55)}70%{box-shadow:0 0 0 26px rgba(250,96,2,0)}100%{box-shadow:0 0 0 0 rgba(250,96,2,0)}}
.video-play b{
  font-family:var(--ff-display);font-size:clamp(15px,2vw,19px);font-weight:400;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ghee);
}
.video-frame.is-playing .video-play,.video-frame.is-playing>img{display:none}

/* ==========================================================================
   8. TESTIMONIALS / ABOUT STRIP
   ========================================================================== */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.tcard{
  position:relative;background:linear-gradient(180deg,#FFFDF6,#FFF8E4);
  border:1px solid var(--line-2);border-radius:var(--radius-lg);
  padding:28px;display:grid;gap:14px;align-content:start;box-shadow:var(--shadow-1);
}
/* a gold quotation glyph watermarked into the corner */
.tcard::before{
  content:"\201C";position:absolute;top:2px;right:20px;
  font-family:var(--ff-display);font-size:96px;line-height:1;
  color:var(--gold);opacity:.18;pointer-events:none;
}
.section-ink .tcard{background:rgba(255,241,149,.06);border-color:rgba(233,196,106,.28)}
.section-ink .tcard::before{color:var(--gold-2);opacity:.24}
.tstars{display:flex;gap:3px;color:var(--saffron)}
.tstars .ico{width:15px;height:15px}
.tquote{font-size:15.5px;line-height:1.7}
.tauthor{display:flex;align-items:center;gap:12px;margin-top:2px}
.tauthor img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.tauthor b{display:block;font-family:var(--ff-display);font-size:17px;font-weight:400;letter-spacing:.06em;color:var(--kumkum)}
.section-ink .tauthor b{color:var(--ghee)}
.tauthor span{font-size:12px;color:var(--muted)}
.section-ink .tauthor span{color:rgba(255,241,149,.62)}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:center}
/* arched at the top, like a temple niche — the same motif as the product card */
.split-media{
  position:relative;aspect-ratio:4/5;background:var(--mist);
  border:1px solid var(--gold);border-radius:200px 200px var(--radius-lg) var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-2);
}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-copy{display:grid;gap:18px;justify-items:start}
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--radius-lg);overflow:hidden;width:100%}
.stat{background:linear-gradient(180deg,#FFFDF6,var(--mist));padding:20px 14px;text-align:center}
.stat b{display:block;font-family:var(--ff-display);font-size:clamp(28px,4vw,42px);font-weight:400;line-height:1;color:var(--saffron)}
.stat span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px;display:block}

/* ==========================================================================
   9. SHOP / FILTERS
   ========================================================================== */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);padding:16px 0}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs .sep{opacity:.45}

.pagehead{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,var(--mist) 0%,#FFFBEB 100%);
  border-bottom:1px solid var(--line-2);padding:clamp(28px,4vw,50px) 0;
}
.pagehead>.wrap{position:relative;z-index:1}
.pagehead .mandala{opacity:.11}
.pagehead h1{font-size:clamp(30px,5vw,52px);color:var(--kumkum)}
.pagehead p{color:var(--muted);margin-top:10px;max-width:70ch}

.shop-layout{display:grid;grid-template-columns:256px 1fr;gap:34px;align-items:start;padding-block:34px}
.filters{position:sticky;top:calc(var(--head-h) + 16px);display:grid;gap:22px}
.fgroup{border:1px solid var(--line-2);border-radius:var(--radius-lg);background:#FFFCF0;overflow:hidden}
.fgroup>summary{
  list-style:none;cursor:pointer;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;
  font-family:var(--ff-display);font-size:16.5px;font-weight:400;letter-spacing:.11em;text-transform:uppercase;
  color:var(--kumkum);background:var(--mist);
  border-bottom:1px solid transparent;
}
.fgroup>summary::-webkit-details-marker{display:none}
.fgroup[open]>summary{border-bottom-color:var(--line)}
.fgroup>summary .ico{width:16px;height:16px;transition:transform .25s var(--ease)}
.fgroup[open]>summary .ico{transform:rotate(180deg)}
.fbody{padding:12px 16px 16px;display:grid;gap:9px;max-height:290px;overflow-y:auto}
.fopt{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}
.fopt input{accent-color:var(--saffron);width:16px;height:16px;flex:none}
.fopt .n{margin-left:auto;font-size:11.5px;color:var(--muted-2)}
.fopt:hover{color:var(--ink)}

/* category tree — parents anchor each section, children indent under them */
.fbody-tree{max-height:420px}
.fopt.is-sub{padding-left:calc(var(--d,1) * 16px);font-size:13.5px;color:var(--muted)}
.fopt.is-sub:hover{color:var(--ink)}
.fopt.is-top{
  font-family:var(--ff-display);font-size:15px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;margin-top:6px;
}
.fopt.is-top:first-child{margin-top:0}
/* nothing in stock yet — shown so the structure is visible, but not selectable */
.fopt.is-empty{opacity:.4;cursor:default}
.fopt.is-empty input{cursor:default}
.frange{display:flex;align-items:center;gap:8px}
.frange input{width:100%;padding:9px 10px;border:1px solid var(--line-2);border-radius:var(--radius);font-size:13.5px}

.shop-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.shop-count{font-size:13.5px;color:var(--muted)}
.shop-tools{display:flex;align-items:center;gap:10px}
.select{
  padding:10px 34px 10px 13px;border:1.5px solid var(--line-2);border-radius:var(--radius);
  background:#FFFDF6 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F040B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/15px;
  appearance:none;font-size:13.5px;cursor:pointer;
}
.select:focus{outline:0;border-color:var(--ink)}
.filter-toggle,.filter-close{display:none}

.activefilters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.activefilters .chip a{display:grid;place-items:center;width:14px;height:14px;opacity:.55}
.activefilters .chip a:hover{opacity:1}

.pager{display:flex;justify-content:center;align-items:center;gap:6px;padding:36px 0 8px}
.pager a,.pager span{
  min-width:42px;height:42px;padding:0 12px;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:50%;background:#FFFCF0;
  font-family:var(--ff-display);font-size:16.5px;font-weight:400;letter-spacing:.06em;color:var(--kumkum);
  transition:background .2s,color .2s,border-color .2s;
}
.pager a:hover{background:var(--saffron);color:#fff;border-color:var(--saffron)}
.pager .is-on{background:var(--maroon);color:var(--ghee);border-color:var(--maroon)}
.pager .gap{border:0;min-width:24px;background:none}

.empty{text-align:center;padding:70px 20px;display:grid;gap:14px;justify-items:center}
.empty .ico{width:52px;height:52px;color:var(--gold)}
.empty h3{font-size:28px;color:var(--kumkum)}
.empty p{color:var(--muted);max-width:44ch}

/* ==========================================================================
   10. PRODUCT PAGE
   ========================================================================== */
.pdp{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,4vw,56px);padding-block:30px;align-items:start}
.pdp-gallery{display:grid;grid-template-columns:84px 1fr;gap:14px;position:sticky;top:calc(var(--head-h) + 16px)}
.pdp-thumbs{display:grid;gap:10px;align-content:start;max-height:560px;overflow-y:auto;scrollbar-width:thin}
.pdp-thumb{
  aspect-ratio:1/1;border:1px solid var(--line-2);border-radius:var(--radius);
  background:#FFFCF0;padding:6px;cursor:pointer;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.pdp-thumb img{width:100%;height:100%;object-fit:contain}
.pdp-thumb.is-on{border-color:var(--saffron);box-shadow:0 0 0 2px rgba(250,96,2,.18)}
/* square stage, matching the plain product cards */
.pdp-stage{
  position:relative;aspect-ratio:1/1;border:1px solid var(--gold);
  background:radial-gradient(circle at 50% 30%,#FFFFFF 0%,var(--mist) 62%,#FBEBBF 100%);
  border-radius:var(--radius);overflow:hidden;
}
.pdp-stage img{width:100%;height:100%;object-fit:contain;padding:26px;transition:transform .45s var(--ease)}
.pdp-stage.zoomed img{transform:scale(1.9);cursor:zoom-out}
.pdp-stage:not(.zoomed) img{cursor:zoom-in}
.pdp-zoomhint{position:absolute;bottom:12px;right:12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);display:flex;gap:6px;align-items:center}

.pdp-info{display:grid;gap:18px;align-content:start}
.pdp-cat{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--saffron);font-weight:700}
.pdp-title{font-size:clamp(30px,4.2vw,46px);line-height:1.12;color:var(--kumkum)}
.pdp-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:12.5px;color:var(--muted)}
.pdp-price{font-family:var(--ff-display);font-size:clamp(28px,3.6vw,40px);font-weight:400;color:var(--maroon);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pdp-price del{font-size:.62em;color:var(--muted-2)}
.pdp-price .save{
  font-size:.36em;letter-spacing:.12em;text-transform:uppercase;
  background:var(--saffron);color:#fff;
  padding:6px 11px;border-radius:100px;font-family:var(--ff-body);font-weight:700;
}
.pdp-short{color:var(--muted);font-size:14.5px;line-height:1.65}

.opt{display:grid;gap:9px}
.opt-lbl{font-family:var(--ff-display);font-size:14.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;display:flex;justify-content:space-between;gap:10px}
.opt-lbl em{font-style:normal;color:var(--muted);font-family:var(--ff-body);font-size:13px;letter-spacing:0;text-transform:none}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.sw{
  min-width:48px;padding:10px 16px;border:1px solid var(--line-2);border-radius:100px;
  background:#FFFCF0;font-family:var(--ff-display);font-size:15.5px;font-weight:400;
  letter-spacing:.08em;text-transform:uppercase;color:var(--kumkum);cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.sw:hover{border-color:var(--saffron);color:var(--saffron)}
.sw.is-on{background:var(--saffron);color:#fff;border-color:var(--saffron)}
.sw.is-off{opacity:.32;text-decoration:line-through;pointer-events:none}
.sw-color{width:42px;height:42px;min-width:0;padding:0;border-radius:50%;position:relative;overflow:hidden}
.sw-color i{position:absolute;inset:3px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.12)}
.sw-color.is-on{box-shadow:0 0 0 2px #fff inset,0 0 0 2px var(--saffron)}

.qtyrow{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.qty{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:100px;overflow:hidden;background:#FFFCF0}
.qty button{width:44px;height:100%;min-height:50px;display:grid;place-items:center;color:var(--kumkum);transition:background .2s,color .2s}
.qty button:hover{background:var(--saffron);color:#fff}
.qty input{width:52px;height:100%;min-height:50px;text-align:center;border:0;background:transparent;font-family:var(--ff-display);font-size:19px;color:var(--maroon);-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qtyrow .btn{flex:1;min-width:190px;min-height:50px}
.wish-inline{
  display:inline-flex;align-items:center;gap:9px;padding:0 20px;min-height:50px;
  border:1px solid var(--line-2);border-radius:100px;background:#FFFCF0;color:var(--kumkum);
  font-family:var(--ff-display);font-size:15.5px;font-weight:400;letter-spacing:.11em;text-transform:uppercase;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.wish-inline:hover{border-color:var(--saffron);color:var(--saffron)}
.wish-inline.is-on{background:var(--saffron);color:#fff;border-color:var(--saffron)}
.wish-inline .wish-ico{width:18px;height:18px}
.wish-inline .wish-ico .ico{width:18px;height:18px}
.wish-inline.is-on .line{opacity:0}
.wish-inline.is-on .fill{opacity:1;transform:scale(1)}

.pdp-assure{display:grid;gap:10px;padding:20px;background:var(--mist);border:1px solid var(--line-2);border-radius:var(--radius-lg)}
.pdp-assure div{display:flex;align-items:center;gap:10px;font-size:13.5px}
.pdp-assure .ico{width:19px;height:19px;flex:none;color:var(--saffron)}

.pdp-facts{display:grid;gap:8px;font-size:13.5px}
.pdp-facts div{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line-2)}
.pdp-facts dt{color:var(--muted)}

.tabs{border-top:1px solid var(--line-2);margin-top:14px}
.tabnav{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line-2)}
.tabnav button{
  padding:15px 22px;font-family:var(--ff-display);font-size:17px;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);position:relative;
  transition:color .2s var(--ease);
}
.tabnav button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--saffron);transform:scaleX(0);transition:transform .28s var(--ease)}
.tabnav button.is-on{color:var(--kumkum)}
.tabnav button.is-on::after{transform:scaleX(1)}
.tabpane{display:none;padding:28px 0;max-width:80ch;line-height:1.8}
.tabpane.is-on{display:block}
.tabpane h4{font-size:20px;letter-spacing:.02em;color:var(--kumkum);margin:24px 0 10px}
.tabpane h4:first-child{margin-top:0}
.tabpane ul{display:grid;gap:8px;margin:0 0 14px}
.tabpane ul li{position:relative;padding-left:24px;font-size:15px}
/* a small gold lotus bud as the bullet */
.tabpane ul li::before{
  content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;background:var(--gold);
  clip-path:polygon(50% 0%,68% 32%,100% 50%,68% 68%,50% 100%,32% 68%,0% 50%,32% 32%);
}

/* ==========================================================================
   11. CART DRAWER + CART/CHECKOUT
   ========================================================================== */
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(430px,92vw);z-index:401;
  background:var(--paper);transform:translateX(100%);
  transition:transform .38s var(--ease);display:flex;flex-direction:column;
}
.cart-drawer.is-open{transform:none}
.cd-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.cd-head h3{font-size:22px;letter-spacing:.08em;text-transform:uppercase;color:var(--kumkum)}
.cd-body{flex:1;overflow-y:auto;padding:6px 20px}
.cd-foot{border-top:1px solid var(--line);padding:18px 20px;display:grid;gap:12px}
.cd-line{display:flex;justify-content:space-between;font-size:14px}
.cd-line.total{font-family:var(--ff-display);font-size:23px;color:var(--maroon);font-weight:400;letter-spacing:.04em;padding-top:10px;border-top:1px solid var(--line)}
.cd-note{font-size:11.5px;color:var(--muted);text-align:center}

.citem{display:grid;grid-template-columns:76px 1fr auto;gap:13px;padding:15px 0;border-bottom:1px solid var(--line)}
.citem:last-child{border-bottom:0}
.citem-img{aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--radius);background:var(--mist);padding:5px}
.citem-img img{width:100%;height:100%;object-fit:contain}
.citem-b{display:grid;gap:5px;align-content:start;min-width:0}
.citem-n{font-family:var(--ff-display);font-size:16.5px;font-weight:600;line-height:1.2;letter-spacing:.02em}
.citem-v{font-size:11.5px;color:var(--muted);letter-spacing:.03em}
.citem-p{font-size:13.5px;color:var(--muted)}
.citem-r{display:grid;gap:8px;justify-items:end;align-content:space-between}
.citem-t{font-family:var(--ff-display);font-size:17px;font-weight:600}
.citem-x{width:26px;height:26px;display:grid;place-items:center;color:var(--muted-2);border-radius:3px;transition:color .2s,background .2s}
.citem-x:hover{color:#fff;background:var(--saffron)}
.qty-mini{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--radius)}
.qty-mini button{width:26px;height:26px;display:grid;place-items:center;transition:background .18s,color .18s}
.qty-mini button:hover{background:var(--saffron);color:#fff}
.qty-mini span{min-width:28px;text-align:center;font-size:13px;font-weight:600}

/* minmax(0,1fr) not 1fr: a plain 1fr cannot shrink below its content's
   min-content width and pushed the checkout panels past the viewport */
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:34px;align-items:start;padding-block:32px}
/* grid items default to min-width:auto too, so they can overflow their own
   track exactly like the container did — pin them to 0 */
.cart-layout>*{min-width:0}
.panel{min-width:0}
.panel{background:#FFFCF0;border:1px solid var(--line-2);border-radius:var(--radius-lg);overflow:hidden}
.panel-h{padding:16px 20px;background:var(--mist);border-bottom:1px solid var(--line-2);font-family:var(--ff-display);font-size:19.5px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--kumkum)}
.panel-b{padding:20px}
.summary{position:sticky;top:calc(var(--head-h) + 16px)}
.sline{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:14px}
.sline.total{border-top:1px solid var(--line-2);margin-top:8px;padding-top:14px;font-family:var(--ff-display);font-size:25px;color:var(--maroon);font-weight:400;letter-spacing:.03em}
.coupon-row{display:flex;gap:8px;margin-top:6px}
.coupon-row input{flex:1;min-width:0}

.field{display:grid;gap:6px;margin-bottom:14px}
.field label{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field label .req{color:var(--saffron)}
.input,.field input,.field select,.field textarea{
  width:100%;padding:12px 15px;border:1px solid var(--line-2);border-radius:var(--radius);
  background:#FFFDF6;font-size:14.5px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--saffron);box-shadow:0 0 0 3px rgba(250,96,2,.13)}
.field textarea{min-height:96px;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.checkrow{display:flex;align-items:flex-start;gap:10px;font-size:14px;cursor:pointer;margin-bottom:12px}
.checkrow input{accent-color:var(--saffron);width:17px;height:17px;margin-top:2px;flex:none}

.payopt{display:grid;gap:10px}
.payopt label{
  display:flex;align-items:flex-start;gap:12px;padding:15px 17px;cursor:pointer;
  border:1px solid var(--line-2);border-radius:var(--radius);background:#FFFDF6;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.payopt label:hover{border-color:var(--gold)}
.payopt label:has(input:checked){border-color:var(--saffron);background:var(--mist);box-shadow:0 0 0 3px rgba(250,96,2,.1)}
.payopt input{accent-color:var(--saffron);width:18px;height:18px;margin-top:1px;flex:none}
.payopt b{display:block;font-family:var(--ff-display);font-size:17.5px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;line-height:1.25;color:var(--kumkum)}
.payopt span{font-size:12.5px;color:var(--muted);display:block;margin-top:3px}
.payopt .gwtag{
  margin-left:auto;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:2px;padding:3px 6px;color:var(--muted-2);white-space:nowrap;
}

.orderdone{max-width:720px;margin-inline:auto;text-align:center;padding:clamp(40px,7vw,80px) var(--gut)}
.orderdone .tick{
  width:78px;height:78px;border-radius:50%;
  background:linear-gradient(160deg,#FF7A1F,var(--saffron) 60%,var(--ember));
  color:#fff;border:1px solid var(--gold);display:grid;place-items:center;margin:0 auto 22px;
  box-shadow:0 12px 30px -12px rgba(250,96,2,.8);
}
.orderdone .tick .ico{width:38px;height:38px}
.ordertable{width:100%;border-collapse:collapse;text-align:left;font-size:14px;margin-top:10px}
.ordertable th,.ordertable td{padding:11px 8px;border-bottom:1px solid var(--line)}
.ordertable th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ordertable td.r,.ordertable th.r{text-align:right}

/* ==========================================================================
   12. ACCOUNT / WISHLIST PAGE
   ========================================================================== */
.authbox{max-width:460px;margin:0 auto;padding-block:48px}
.authbox .panel-b{padding:26px}
.authtabs{display:flex;border-bottom:1px solid var(--line)}
.authtabs a{
  flex:1;text-align:center;padding:15px 10px;font-family:var(--ff-display);
  font-size:17px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.authtabs a.is-on{color:var(--kumkum);border-bottom-color:var(--saffron)}

.acct-layout{display:grid;grid-template-columns:238px 1fr;gap:32px;align-items:start;padding-block:32px}
.acct-nav{display:grid;gap:2px;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#FFFCF0}
.acct-nav a{
  display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line);
  font-family:var(--ff-display);font-size:16px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  transition:background .2s,color .2s;
}
.acct-nav a:last-child{border-bottom:0}
.acct-nav a .ico{width:18px;height:18px;color:var(--muted)}
.acct-nav a:hover,.acct-nav a.is-on{background:var(--kumkum);color:var(--ghee)}
.acct-nav a:hover .ico,.acct-nav a.is-on .ico{color:#fff}

.wishgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}

/* ==========================================================================
   13. CONTACT / STATIC PAGES
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px);align-items:start;padding-block:34px}
.infocards{display:grid;gap:14px}
.infocard{display:flex;gap:15px;padding:20px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#FFFCF0}
.infocard .ico{width:22px;height:22px;flex:none;margin-top:3px}
.infocard b{display:block;font-family:var(--ff-display);font-size:17.5px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--kumkum);margin-bottom:5px}
.infocard p{font-size:14px;color:var(--muted);margin:0}
.infocard a:hover{text-decoration:underline}
.mapwrap{aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.mapwrap iframe{width:100%;height:100%;border:0;display:block}

.prose{max-width:78ch;line-height:1.8;padding-block:34px}
.prose h2{font-size:30px;color:var(--kumkum);margin:36px 0 12px}
.prose h3{font-size:22px;color:var(--kumkum);margin:28px 0 10px}
.prose ul{display:grid;gap:8px;margin:0 0 18px}
.prose ul li{position:relative;padding-left:22px}
.prose ul li::before{content:"";position:absolute;left:0;top:.56em;width:10px;height:10px;background:var(--gold);clip-path:polygon(50% 0%,68% 32%,100% 50%,68% 68%,50% 100%,32% 68%,0% 50%,32% 32%)}
.prose a{text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.site-footer{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,var(--kumkum) 0%,var(--maroon) 42%,#4E0207 100%);
  color:rgba(255,241,149,.76);margin-top:auto;
  border-top:2px solid var(--gold);
}
.site-footer>*{position:relative;z-index:1}
.foot-trust{background:rgba(233,196,106,.16);overflow:hidden}
.foot-trust .trust-run{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(233,196,106,.2)}
.foot-trust .trust-i{background:var(--kumkum);color:var(--ghee)}
.foot-trust .trust-i b{color:var(--ghee)}
.foot-trust .trust-i .ico{color:var(--gold-2)}
.foot-trust .trust-i span{color:rgba(255,241,149,.62)}

.foot-main{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.35fr;gap:36px;padding-block:clamp(42px,5vw,60px)}
/* the logo art has a pale ground, so on maroon it sits on a cream card */
.foot-brand img{
  height:88px;width:auto;margin-bottom:16px;
  background:linear-gradient(180deg,#FFFDF4,var(--ghee));
  border:1px solid var(--gold);border-radius:14px;padding:8px 14px;
}
.foot-brand p{font-size:14.5px;line-height:1.75;max-width:38ch}
.foot-col h5{font-family:var(--ff-display);color:var(--ghee);font-size:19px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.foot-col ul{display:grid;gap:10px}
.foot-col a{font-size:14.5px;transition:color .2s,padding-left .2s}
.foot-col a:hover{color:var(--gold-2);padding-left:4px}
.foot-contact{display:grid;gap:13px;font-size:14.5px}
.foot-contact div{display:flex;gap:11px;align-items:flex-start}
.foot-contact .ico{width:18px;height:18px;flex:none;margin-top:4px;color:var(--gold-2)}
.foot-contact a:hover{color:var(--gold-2)}
.socials{display:flex;gap:9px;margin-top:6px}
.socials a{
  width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(233,196,106,.35);
  border-radius:50%;color:var(--ghee);transition:background .2s,color .2s,border-color .2s;
}
.socials a:hover{background:var(--saffron);color:#fff;border-color:var(--saffron)}
.newsletter{display:flex;gap:8px;margin-top:16px}
.newsletter input{
  flex:1;min-width:0;padding:12px 16px;border:1px solid rgba(233,196,106,.35);
  border-radius:100px;background:rgba(255,241,149,.08);color:var(--ghee);font-size:14px;
}
.newsletter input::placeholder{color:rgba(255,241,149,.45)}
.newsletter input:focus{outline:0;border-color:var(--gold-2)}

.foot-bottom{
  border-top:1px solid rgba(233,196,106,.22);padding-block:18px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  font-size:12.5px;
}
.foot-bottom a:hover{color:var(--gold-2)}
.paylist{display:flex;flex-wrap:wrap;gap:7px}
.paylist span{
  border:1px solid rgba(233,196,106,.3);border-radius:100px;padding:4px 11px;
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,241,149,.7);
}
/* legal line — GSTIN and state, required on an Indian storefront */
.foot-legal{
  border-top:1px solid rgba(233,196,106,.14);padding-block:12px;
  display:flex;flex-wrap:wrap;gap:6px 22px;font-size:11.5px;
  color:rgba(255,241,149,.55);letter-spacing:.04em;
}
.foot-legal b{color:rgba(255,241,149,.8);font-weight:600}

/* floating WhatsApp */
/* The one deliberate exception to the black & white palette — WhatsApp is
   recognised by its green, so the float uses the brand colour. */
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:300;
  width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;
  display:grid;place-items:center;
  box-shadow:0 8px 26px -6px rgba(37,211,102,.55),0 4px 14px rgba(0,0,0,.22);
  transition:transform .25s var(--ease),background .2s var(--ease),box-shadow .25s var(--ease);
}
.wa-float:hover{
  transform:scale(1.08);background:#1EBE5B;
  box-shadow:0 12px 32px -6px rgba(37,211,102,.7),0 4px 14px rgba(0,0,0,.25);
}
.wa-float .ico{stroke-width:1.8}
.wa-float .ico{width:26px;height:26px}

/* toast */
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:600;display:grid;gap:8px;width:max-content;max-width:92vw}
.toast{
  display:flex;align-items:center;gap:11px;padding:13px 22px;
  background:var(--maroon);color:var(--ghee);border:1px solid var(--gold);
  border-radius:100px;box-shadow:var(--shadow-3);font-size:14px;
  animation:toastIn .32s var(--ease);
}
.toast .ico{color:var(--gold-2)}
.toast.out{animation:toastOut .3s var(--ease) forwards}
.toast .ico{width:18px;height:18px;flex:none}
@keyframes toastIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px)}}

.flash{
  padding:13px 20px;border-radius:var(--radius);margin:16px 0;font-size:14.5px;
  border:1px solid var(--gold);border-left:4px solid var(--saffron);
  background:var(--mist);color:var(--kumkum);
}
.flash-error{background:var(--maroon);color:var(--ghee);border-color:var(--maroon);border-left-color:var(--gold-2)}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .foot-main{grid-template-columns:1fr 1fr;gap:30px}
  .pgrid-4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-tiles{--per:5;--tgap:24px}
}
@media (max-width:1024px){
  .hero-tiles{--per:4;--tgap:20px}
  .head-main{grid-template-columns:auto 1fr auto;gap:14px}
  .searchbar{display:none}
  .nav-toggle{display:grid}
  .head-nav{display:none}
  .shop-layout{grid-template-columns:1fr}
  .filters{position:fixed;inset:0 0 0 auto;width:min(330px,88vw);z-index:401;background:var(--paper);
    padding:18px;overflow-y:auto;transform:translateX(100%);transition:transform .38s var(--ease);
    display:block;top:0}
  .filters.is-open{transform:none}
  .filters .fgroup{margin-bottom:14px}
  .filter-toggle{display:inline-flex}
  .filter-close{display:grid}
  .cart-layout{grid-template-columns:minmax(0,1fr)}
  .summary{position:static}
  .pdp{grid-template-columns:1fr}
  .pdp-gallery{position:static}
  .acct-layout{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split-media{aspect-ratio:16/10;order:-1}
}
@media (max-width:900px){
  .promo{aspect-ratio:auto}
  .promo-inner{padding-block:30px}
  .promo>img{opacity:.55}
  .promo::after{background:linear-gradient(180deg,rgba(6,6,7,.6) 0%,rgba(6,6,7,.78) 55%,rgba(6,6,7,.93) 100%)}
  .promo-copy{max-width:100%;gap:12px}
  .promo-title{font-size:clamp(22px,5.4vw,30px)}
}
@media (max-width:760px){
  :root{--gut:16px}
  /* phone: the 2x2 grid squeezed every label onto three lines — run the
     badges as one slow continuous strip instead */
  .trust{border-block:1px solid var(--line-2);background:var(--paper)}
  .trust-track{display:flex;width:max-content;animation:trustRun 34s linear infinite}
  .trust-track>.trust-run[aria-hidden]{display:flex}
  .trust-run{display:flex;grid-template-columns:none;gap:0;background:transparent}
  .trust .trust-i{
    width:min(74vw,290px);padding:16px 18px;background:#FFFCF0;
    border-right:1px solid var(--line);align-items:center;
  }
  /* footer badges run as the same continuous strip on phones */
  .foot-trust .trust-i{
    width:min(74vw,290px);padding:16px 18px;background:var(--kumkum);
    border-right:1px solid rgba(233,196,106,.22);align-items:center;
  }
  .foot-trust .trust-run{background:transparent}
  .trust-i b{font-size:14px;letter-spacing:.06em}
  .trust-i span{font-size:12px;display:block;margin-top:2px}
  .trust-i .ico{width:22px;height:22px}
  .trust:hover .trust-track,.trust:active .trust-track{animation-play-state:paused}
  @keyframes trustRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  .trust-i{padding:16px 14px}
  .trust-i b{font-size:15px}
  /* Phone hero: a 2.4:1 banner is only ~160px tall on a phone, so the slide
     switches to the 4:5 portrait crop supplied as the slide's mobile image.
     A slide that DOES carry copy keeps a bottom-up scrim so the text stays
     legible; a bare artwork slide keeps its `is-bare` rule and stays clean. */
  .hero-slide{aspect-ratio:4 / 5;min-height:0}
  .hero-slide::after{
    background:linear-gradient(180deg,
      rgba(90,3,8,.28) 0%, rgba(90,3,8,.10) 26%,
      rgba(90,3,8,.70) 62%, rgba(60,2,6,.92) 86%, rgba(60,2,6,.96) 100%);
  }
  .hero-inner{align-self:end;padding-block:0 26px}
  .hero-copy{max-width:none;gap:11px}
  .hero-kick{font-size:11px;letter-spacing:.26em}
  .hero-kick::before{width:22px}
  .hero-title{font-size:clamp(27px,8.4vw,38px);line-height:1.04}
  .hero-sub{
    font-size:13.5px;line-height:1.5;max-width:none;color:rgba(255,241,149,.86);
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .hero-cta{gap:9px;margin-top:2px;width:100%}
  .hero-cta .btn{flex:1 1 auto;justify-content:center;padding:12px 14px;font-size:13px}
  .hero-arrows{display:none}

  /* section heads: title above, controls below — they were colliding */
  .shead{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:18px}
  .shead>div:last-child{display:flex;align-items:center;gap:14px;width:100%}
  .rail-nav{margin-left:auto}
  .rail-nav button{width:34px;height:34px}
  .hero-tiles-wrap{--htile-d:96px}
  .hero-tiles{--per:3.2;--tgap:14px}
  .htile{gap:9px}
  .htile-lbl{font-size:12px;letter-spacing:.06em}
  .htile-cnt{display:none}
  .rail-wide{grid-auto-columns:minmax(270px,1fr)}
  .pgrid,.pgrid-4,.wishgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .rail{grid-auto-columns:minmax(168px,1fr);gap:12px}
  /* cards: compact, and the quick action sits under the price rather than
     as a full slab over the artwork */
  .pcard-body{padding:10px 10px 0}
  .pcard-cat{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pcard-name{font-size:14px;line-height:1.25}
  .pcard-price{font-size:15px}
  .pcard-quick{opacity:1;transform:none;position:static;padding:10px}
  .pcard-quick .qbtn{padding:9px 8px;font-size:12px;letter-spacing:.06em;gap:5px}
  .pcard-quick .qbtn .ico{width:14px;height:14px}
  .qrow{gap:5px}
  .flag{font-size:9.5px;padding:4px 7px}
  .wish-btn{width:32px;height:32px;top:6px;right:6px}
  .wish-btn .ico{width:15px;height:15px}

  /* page intro blocks eat the whole first screen otherwise */
  /* the 'payment link on confirm' tag was pinching the description into a
     one-word column — drop it onto its own line on phones */
  .payopt label{flex-wrap:wrap;padding:12px 13px;gap:10px}
  .payopt .gwtag{order:3;flex-basis:100%;width:fit-content;margin-left:28px}
  .payopt b{font-size:15px;letter-spacing:.05em}
  .payopt span{font-size:12px}

  /* forms were making checkout a 5,000px scroll */
  .field{gap:5px;margin-bottom:11px}
  .field label{font-size:11px;letter-spacing:.07em}
  /* 16px keeps iOS from zooming the page when a field is focused */
  .input,.field input,.field select,.field textarea{padding:11px 12px;font-size:16px}
  .field textarea{min-height:78px}
  .panel-h{padding:12px 14px;font-size:15px;letter-spacing:.07em}
  .panel-b{padding:14px}
  .grid2{gap:0 10px}
  .section{padding:36px 0}

  /* PDP */
  .pdp-title{font-size:22px;line-height:1.12}
  .pdp-cat{font-size:10.5px;letter-spacing:.16em}
  .pdp-info{gap:13px}
  .pdp-stage img{padding:14px}
  .pdp-meta{font-size:11.5px;gap:10px}
  .crumbs{padding:10px 0;font-size:11.5px}

  .wa-float{width:48px;height:48px;right:12px;bottom:12px}
  .wa-float .ico{width:22px;height:22px}

  .pagehead{padding:16px 0 18px}
  .pagehead h1{font-size:25px}
  .pagehead p{font-size:13px;line-height:1.5;margin-top:6px}
  .crumbs{font-size:12px}

  .pdp-gallery{grid-template-columns:1fr}
  .pdp-thumbs{grid-auto-flow:column;grid-auto-columns:66px;overflow-x:auto;max-height:none;order:2}
  .grid2{grid-template-columns:1fr}
  .foot-main{grid-template-columns:1fr}
  .qtyrow .btn{min-width:100%}
  .qty button,.qty-mini button{min-width:36px;min-height:36px}
  .citem-q button{min-width:34px;min-height:34px}
  .stitle{font-size:28px}

  /* ── drawer: was running past the screen with the 10-item menu ───────── */
  .mobnav{width:min(320px,84vw)}
  .mobnav-head{padding:11px 14px}
  .mobnav-head img{height:28px}
  .mobnav .searchbar{padding:10px 14px !important}
  .mobnav .searchbar input{height:40px;font-size:14px}
  .mobnav-links{padding:2px 0}
  .mobnav-links a{padding:10px 16px;font-size:14px;letter-spacing:.07em}
  .mobnav-links a .ico{width:14px;height:14px}
  .mob-group>summary{padding:10px 16px;font-size:14px;letter-spacing:.07em}
  .mob-group>summary .ico{width:14px;height:14px}
  .mobnav-links .mob-kid{padding:8px 16px 8px 30px;font-size:13px;letter-spacing:.04em}
  .mobnav-links .mob-all{padding:8px 16px 8px 30px;font-size:11.5px}
  .mobnav-foot{padding:13px 16px;gap:9px}
}
@media (max-width:420px){
  .brand img{height:38px}
  .pgrid,.pgrid-4,.wishgrid{gap:10px}
}