/* ============================================================
   DECCAN eMART — agreed design, locked 17.10.26
     Colour   Crimson Bazaar
     Dark     Crimson · Wine Cellar
     Type     Poppins headings, Inter body
     Layout   Soft & Rounded with elevated tiles
   The tokens below are the whole palette. Change a value here and
   it changes everywhere; do not hard-code a colour further down.
   ============================================================ */
:root{--bg:#FDF8F8;--bg2:#F6E8E9;--card:#FFFFFF;--text:#1F0F11;--muted:#6B5154;--primary:#A50E22;--secondary:#7D0A19;--accent:#8A5200;--border:#EBD5D7;--on-primary:#FFFFFF;
--store:#FF9900;--on-store:#141414;--radius:24px;
--display-f:'Poppins',system-ui,-apple-system,"Segoe UI",sans-serif;--body-f:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif}
html[data-theme="dark"]{--bg:#2A1A20;--bg2:#332128;--card:#3B262E;--text:#F8EDF0;--muted:#C9AFB8;--primary:#F5818D;--secondary:#CE3A4B;--accent:#EFB36A;--border:#4B333C;--on-primary:#280810}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body-f);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{margin:0;font-family:var(--display-f);line-height:1.14;letter-spacing:-.02em}
p{margin:0}ul{margin:0;padding:0;list-style:none}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
button{font:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:780px}
.muted{color:var(--muted)}
/* header */
.site-head{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);padding-top:env(safe-area-inset-top)}
.head-bar{max-width:1120px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display-f);font-weight:700;font-size:17px;flex:0 0 auto}
/* the supplied lockup, used whole: cart above, wordmark below */
.logo-full{height:58px;width:auto;display:block}
@media(max-width:620px){.logo-full{height:46px}}
/* the artwork is solid black, so it is flipped to read on the dark theme */
html[data-theme="dark"] .logo-full,html[data-theme="dark"] .foot-logo{filter:invert(1)}
.site-nav{margin-left:auto;display:flex;gap:24px;font-size:15px;color:var(--muted)}
.site-nav a:hover{color:var(--primary)}
.head-tools{display:flex;align-items:center;gap:8px}
.site-nav+.head-tools{margin-left:0}
.icon-btn{background:none;border:1px solid var(--border);border-radius:9px;width:36px;height:36px;color:var(--text);cursor:pointer}
.pal-switch{display:flex;gap:6px;margin-right:4px}
.pal-dot{width:18px;height:18px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.pal-dot.on{border-color:var(--text)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--border);border-radius:9px;width:38px;height:38px;color:var(--text);cursor:pointer;font-size:16px}
/* buttons */
.btn{display:inline-block;padding:12px 24px;border-radius:10px;font-weight:600;font-size:15px;cursor:pointer;border:1px solid transparent;transition:transform .18s ease,background .18s ease,border-color .18s ease}
.btn.sm{padding:8px 15px;font-size:14px}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border-color:var(--border);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn-store{background:var(--store);color:var(--on-store)}
.btn-store:hover{transform:translateY(-2px)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn-row.centre{justify-content:center}
/* hero */
.hero{padding:80px 0 72px}
.hero h1{font-size:clamp(32px,5.4vw,56px)}
.lede{font-size:18px;color:var(--muted);max-width:52ch;margin-top:16px}
.kicker{display:inline-block;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:16px}
.hero-centre,.hero-edit,.hero-poster{text-align:center}
.hero-centre .lede,.hero-edit .lede{margin:18px auto 0}
.hero-edit{padding:130px 0 110px}
.hero-edit h1{font-size:clamp(38px,7vw,74px)}
.hero-poster h1{text-align:left;font-size:clamp(38px,8vw,86px);line-height:.98;margin-bottom:36px}
.w0{color:var(--text)}.w1{color:var(--primary)}.w2{color:var(--secondary)}
.spark{display:block;margin:40px auto 20px;color:var(--accent);font-size:20px;animation:float 4.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(-6px);opacity:1}}
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;align-items:center;color:var(--muted);font-size:16px;margin-top:20px}
.pills i{color:var(--accent);font-style:normal}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.visual{border:1px solid var(--border);border-radius:14px;background:linear-gradient(140deg,var(--bg2),color-mix(in srgb,var(--primary) 18%,var(--bg2)));aspect-ratio:4/3;display:grid;place-items:center;color:var(--muted);font-size:12px;letter-spacing:.16em}
.visual.wide{aspect-ratio:16/8;max-width:760px;margin:0 auto}
.visual.has-img{background:none;padding:0;overflow:hidden}
.visual.has-img img{width:100%;height:100%;object-fit:contain;display:block}
/* two pictures in one frame: the second drifts in over the first and back out */
.fader{position:relative}
.fader img{position:absolute;inset:0}
.fader .fade-top{animation:crossfade 16s ease-in-out infinite}
@keyframes crossfade{
  0%,6%    {opacity:0}
  44%,56%  {opacity:1}
  94%,100% {opacity:0}
}
@media(prefers-reduced-motion:reduce){.fader .fade-top{animation:none;opacity:0}}

/* ---- hero: the products tumbling out of a carton ----------------------
   Three stacked layers inside one 4:3 frame — the back of the box, then the
   products, then the front of the box, so each item rises out of the mouth
   rather than over the lip. Distances are container units, so the whole
   scene scales with the panel and needs no media queries of its own.
   Two nested transforms per item: the span carries X (linear), the image
   carries Y, spin and scale (eased), which together make an arc. */
.hero-art{display:block;padding:0;overflow:hidden}
.hb-scene{position:relative;width:100%;height:100%;container-type:size}
.hb-layer{position:absolute;left:50%;bottom:6%;width:50%;translate:-50% 0;
  overflow:visible;pointer-events:none}
.hb-items{position:absolute;inset:0;pointer-events:none}
.hb-item{position:absolute;left:50%;bottom:23cqh;width:var(--w);
  margin-left:calc(var(--w) / -2);opacity:0;
  animation:hb-x 8.4s cubic-bezier(.22,.68,.4,1) var(--d) infinite}
.hb-item img{display:block;width:100%;height:auto;transform-origin:50% 80%;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.22));
  animation:hb-y 8.4s var(--d) infinite}
@keyframes hb-x{
  0%        {transform:translateX(0);opacity:0}
  4%        {opacity:1}
  58%       {opacity:1}
  86%,100%  {opacity:0}
  100%      {transform:translateX(var(--x))}
}
/* up fast, hang, then fall away again — the two halves get their own easing */
@keyframes hb-y{
  0%   {transform:translateY(0) rotate(0deg) scale(.22);
        animation-timing-function:cubic-bezier(.13,.72,.33,1)}
  45%  {transform:translateY(var(--y)) rotate(calc(var(--r) * .5)) scale(1);
        animation-timing-function:cubic-bezier(.58,.02,.86,.52)}
  100% {transform:translateY(calc(var(--y) * -.4)) rotate(var(--r)) scale(1.04)}
}
html[data-theme="dark"] .hb-layer{filter:brightness(.86) saturate(.92)}
/* No container-query units: hold the products in a still fan above the box. */
@supports not (height:1cqh){
  .hb-item{bottom:34%;width:16%;margin-left:-8%;opacity:1;animation:none;
    transform:translateX(var(--x))}
  .hb-item img{animation:none;transform:translateY(var(--y)) rotate(var(--r))}
}
/* Motion turned down: the same products, held still in mid-air. */
@media(prefers-reduced-motion:reduce){
  .hb-item{opacity:1;transform:translateX(var(--x))}
  .hb-item img{transform:translateY(calc(var(--y) * .8)) rotate(var(--r))}
}
.band-img{margin-top:52px;border:1px solid var(--border);border-radius:14px;aspect-ratio:21/8;background:linear-gradient(135deg,var(--bg2),color-mix(in srgb,var(--secondary) 24%,var(--bg2)));display:grid;place-items:center;color:var(--muted);font-size:12px;letter-spacing:.16em}
/* sections */
.sec{padding:76px 0;border-top:1px solid var(--border)}
.sec.alt{background:var(--bg2)}
.sec-head{max-width:58ch;margin:0 auto 40px;text-align:center}
.sec-head.left{margin-left:0;text-align:left}
.sec-head h2{font-size:clamp(26px,3.6vw,38px)}
.sec-head p{color:var(--muted);margin-top:12px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:26px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 28px rgba(0,0,0,.06)}
.cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.card h3{font-size:19px;margin:10px 0 8px}
.card p,.point p,.step p{color:var(--muted);font-size:15.5px}
.num{font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--accent)}
.steps{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.step{flex:1 1 200px;max-width:260px;text-align:center;padding:6px 10px}
.step h3{font-size:19px;margin:10px 0 8px}
.arrow{align-self:center;color:var(--primary);opacity:.6}
.points{display:grid;gap:20px}
.point{border-left:3px solid var(--accent);padding-left:16px}
.point h4{font-size:17px;margin-bottom:4px}
.work{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.thumb{aspect-ratio:4/3;border-radius:11px;border:1px solid var(--border);background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 18%,var(--bg2)),color-mix(in srgb,var(--accent) 18%,var(--bg2)));display:grid;place-items:center;color:var(--muted);font-size:11.5px;letter-spacing:.16em;margin-bottom:16px}
.thumb.big{aspect-ratio:16/9}
.w1 .thumb{background:linear-gradient(135deg,color-mix(in srgb,var(--secondary) 20%,var(--bg2)),var(--bg2))}
.w2 .thumb{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 24%,var(--bg2)),var(--bg2))}
.feat-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:18px 0 12px;border-bottom:1px solid var(--border)}
.feat-bar h3{font-size:24px}
.arrow-link{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.tier-on{border-color:var(--primary)}
.price{font-family:var(--display-f);font-size:28px;margin:10px 0 8px}

/* panels hero (three-panel landscape) */
.hero-panels{padding:52px 0}
.panels{display:grid;grid-template-columns:1fr 1.55fr 1fr;gap:16px;align-items:stretch}
.panels .col{grid-row:1}
.panels .left{grid-column:1}
.panels .mid{grid-column:2;text-align:center;display:grid;align-content:center;gap:4px;padding:8px}
.panels .right{grid-column:3}
.panels .mid h1{font-size:clamp(28px,4vw,46px)}
.panels .mid .lede{margin:14px auto 0}
.panel-img{height:100%;min-height:250px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(150deg,var(--bg2),color-mix(in srgb,var(--secondary) 22%,var(--bg2)));display:grid;place-items:center;color:var(--muted);font-size:11.5px;letter-spacing:.18em}
/* tabbed list */
.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:22px}
.tab{padding:9px 18px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:14px;font-weight:600;cursor:pointer}
.tab.on{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.tab-panel{display:none}
.tab-panel.on{display:block}
.menu-list{columns:2;column-gap:32px}
.menu-list li{break-inside:avoid;padding:9px 0;border-bottom:1px solid var(--border);color:var(--muted);font-size:15.5px}
/* hero trust strip */
/* product cards */
.prod-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(236px,1fr))}
.prod{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.prod:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.prod .shot{aspect-ratio:1;border-bottom:1px solid var(--border);display:grid;place-items:center;color:var(--muted);font-size:11.5px;letter-spacing:.18em;background:linear-gradient(140deg,var(--bg2),color-mix(in srgb,var(--primary) 16%,var(--bg2)))}
.prod-body{flex:1;display:flex;flex-direction:column;gap:7px;padding:18px}
.prod h3{font-size:17.5px}
.prod .blurb{flex:1;color:var(--muted);font-size:14.5px;line-height:1.55}
.prod-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.prod .price{font-size:21px;margin:0}
/* star rating */
.stars{display:inline-flex;gap:2px;color:var(--store);font-size:13.5px;line-height:1}
.stars .off{color:var(--border)}
/* reviews */
.reviews{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(262px,1fr))}
.review{display:flex;flex-direction:column}
.review p{color:var(--muted);font-size:15.5px;margin-top:12px;flex:1}
.reviewer{display:flex;align-items:center;gap:11px;margin-top:18px;padding-top:15px;border-top:1px solid var(--border)}
.avatar{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-size:13.5px;font-weight:700}
.rev-name{font-size:14.5px;font-weight:600}
.rev-meta{font-size:12.5px;color:var(--muted)}
/* business details */
.reg-grid{display:grid;gap:0 36px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:0}
.reg{display:grid;gap:3px;padding:14px 0;border-bottom:1px solid var(--border)}
.reg dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700}
.reg dd{margin:0;font-size:15.5px}
.fine.centre{text-align:center;margin-top:18px}
/* offer cards (double frame) */
.offer{border:1px solid var(--primary);border-radius:14px;padding:6px;background:var(--card)}
.offer-inner{border:1px solid var(--border);border-radius:14px;padding:22px;height:100%}
.offer h3{font-size:19px;margin-bottom:6px}
.offer p{color:var(--muted);font-size:15.5px}
.offer-price{color:var(--accent);font-weight:700;font-family:var(--display-f);font-size:20px;margin-bottom:8px}
@media(max-width:900px){
.panels{grid-template-columns:1fr}
.panels .col{grid-row:auto;grid-column:1}
.panels .mid{order:-1}
.panel-img{min-height:150px}
.menu-list{columns:1}
}
/* review writer */
.banner{border-radius:10px;padding:13px 16px;margin:0 0 22px;font-size:14.5px;
  border:1px solid var(--primary);background:color-mix(in srgb,var(--primary) 10%,var(--bg));
  color:var(--primary);font-weight:600}
.empty{color:var(--muted);font-size:15.5px;text-align:center;padding:26px 0}
.writer{margin-top:30px;border:1px solid var(--border);border-radius:14px;
  background:var(--card);padding:18px 20px}
.writer summary{cursor:pointer;font-weight:600;font-size:15.5px;color:var(--primary);
  list-style:none}
.writer summary::-webkit-details-marker{display:none}
.writer summary::after{content:" +";font-weight:700}
.writer[open] summary::after{content:" \2212"}
.writer[open] summary{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.writer .two{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:620px){.writer .two{grid-template-columns:1fr}}
.writer select{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:8px;
  background:var(--bg);color:var(--text);font-family:var(--body-f);font-size:16px}
.writer .btn{margin-top:4px}

/* contact */
.crow{display:grid;gap:2px;padding:14px 0;border-bottom:1px solid var(--border)}
.clabel{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700}
.form{display:grid;gap:13px}
.field{display:grid;gap:6px}
.field label{font-size:14px;font-weight:600}
.field input,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font-family:var(--body-f);font-size:16px}
.field input:focus,.field textarea:focus{outline:2px solid var(--primary);outline-offset:1px}
/* spam decoy: a real field, parked off-screen. People never see it; the bots
   that fill in every input give themselves away. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.err{color:#DC2626;font-size:14px;min-height:20px;margin:0}
.fine{font-size:13px;color:var(--muted)}
.ok{color:var(--primary)}
/* ai chat */
.chat{display:grid;gap:10px;max-height:280px;overflow-y:auto;margin-bottom:14px}
.msg{padding:11px 14px;border-radius:10px;font-size:15px;max-width:88%}
.msg.you{background:var(--primary);color:var(--on-primary);justify-self:end}
.msg.bot{background:var(--bg2);border:1px solid var(--border)}
.chat-row{display:flex;gap:10px}
.chat-row input{flex:1;padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font-size:16px}
/* cta band */
.cta-band{text-align:center;padding:78px 0;background:var(--primary);color:var(--on-primary)}
.cta-band h2{font-size:clamp(26px,4vw,40px)}
.cta-band p{max-width:52ch;margin:14px auto 28px;opacity:.85}
.cta-band .btn-primary{background:var(--on-primary);color:var(--primary)}
/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;z-index:90;padding:20px}
.modal-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:28px;width:100%;max-width:400px;position:relative}
.modal-x{position:absolute;top:12px;right:14px;background:none;border:0;font-size:22px;color:var(--muted);cursor:pointer}
.modal-card h3{margin-bottom:16px;font-size:22px}
/* footer */
.site-foot{border-top:1px solid var(--border);background:var(--bg2);padding:50px 0 0;padding-bottom:env(safe-area-inset-bottom)}
.foot-grid{display:grid;grid-template-columns:1.2fr 1.5fr 1fr;gap:40px;align-items:start}
.foot-logo{width:186px;max-width:100%;height:auto;display:block;margin-bottom:14px}
.foot-grid h5{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.foot-grid li{margin-bottom:9px;color:var(--muted);font-size:15px}
.foot-grid a:hover{color:var(--primary)}
/* registration details — a column of the footer grid, set smaller than its neighbours */
.foot-legal li{font-size:12.5px;line-height:1.55;margin-bottom:7px}
.foot-legal b{font-weight:600;color:var(--text);opacity:.78}
.foot-bar{margin-top:18px;border-top:1px solid var(--border);padding:18px 20px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;color:var(--muted);font-size:14px}
/* motion */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
/* responsive: phones and tablets */
@media(max-width:900px){
.grid-2{grid-template-columns:1fr;gap:32px}
.foot-grid{grid-template-columns:1fr 1fr}
.arrow{transform:rotate(90deg)}
.site-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--card);border-bottom:1px solid var(--border);flex-direction:column;gap:0;padding:6px 20px 14px}
.site-nav.open{display:flex}
.site-nav a{padding:12px 0;border-bottom:1px solid var(--border)}
.nav-toggle{display:block;order:3}
.head-tools{order:4;margin-left:auto}
.hero{padding:56px 0 48px}.hero-edit{padding:84px 0 70px}.sec{padding:56px 0}
}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}.btn{width:100%;text-align:center}.btn-row{flex-direction:column}.head-tools .btn,.prod-foot .btn{width:auto}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}html{scroll-behavior:auto}}


/* ============================================================
   CHOSEN LOOK — Soft & Elevated
   Rounded corners with cards lifted off the page on real shadow.
   ============================================================ */
.card,.prod,.writer,.visual,.review,.band-img{border-radius:var(--radius)}
.prod .shot{border-radius:var(--radius) var(--radius) 0 0}
.btn,.icon-btn,.tab{border-radius:999px}
.field input,.field textarea,select{border-radius:15px}
.card,.prod,.writer,.review{border-color:transparent;
  box-shadow:0 12px 34px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.07)}
html[data-theme="dark"] .card,html[data-theme="dark"] .prod,
html[data-theme="dark"] .writer,html[data-theme="dark"] .review{
  box-shadow:0 14px 36px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.3)}
.prod:hover{transform:translateY(-7px);box-shadow:0 20px 48px rgba(0,0,0,.17)}
html[data-theme="dark"] .prod:hover{box-shadow:0 22px 52px rgba(0,0,0,.5)}
.sec.alt{background:var(--bg2)}
.sec{border-top-color:transparent}