/* Punjab Aatta Biscuits — shared styles for the shop (index.html), order desk (admin.html) and policies.
   Look: warm white + brown, serif headlines (Playfair Display), clean sans body (Poppins).
   Big photos are used as soft backgrounds that fade into the page; product photos stay small. */
:root{
  color-scheme:light;
  --bg:#f9eddb;           /* biscuit cream page (24 Oct: thoda halka kiya) */
  --cream:#fcf4e6;        /* halka biscuit: cards, alag sections */
  --white:#ffffff;
  --tint:#ecd3ab;         /* seka hua biscuit section */
  --brown:#7a3e14;        /* buttons */
  --brown-deep:#3f1d08;   /* headline brown */
  --brown-mid:#9a5a2b;    /* eyebrow, icons */
  --brown-light:#c79a72;
  --gold:#b8741a;          /* wordmark ka PUNJAB */
  --ink:#2b1a10;
  --muted:#76665a;
  --line:#e2c79c;
  --grey:#f3e2c4;         /* inputs, admin bg */
  --new:#c2410c; --ok:#1d4ed8; --veg:#1e8a3c; --bad:#9f1239;
  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
  --font:"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-data:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius:20px;
  --shadow:0 18px 40px -22px rgba(63,29,8,.35);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
/* saare titles wordmark wale saaf Poppins bold mein */
h1,h2,h3{margin:0;font-family:"Poppins",system-ui,sans-serif;font-weight:700;color:var(--brown-deep);letter-spacing:-.02em;text-wrap:balance;line-height:1.1}
p{margin:0}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--brown-light);outline-offset:2px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:24px;position:relative}
.wrap > *{min-width:0}
.eyebrow{font-size:12.5px;font-weight:600;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--brown-mid)}
.eyebrow.lined{display:inline-flex;align-items:center;gap:12px}
.eyebrow.lined::before,.eyebrow.lined::after{content:"";width:32px;height:1px;background:var(--brown-light)}
.intro{color:var(--muted);font-size:16px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;padding:11px 22px;font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap;transition:transform .15s ease, background .15s ease, box-shadow .15s ease}
.btn svg{width:18px;height:18px;flex:none}
.btn:active{transform:scale(.98)}
.btn-brown{background:var(--brown);color:#fff;box-shadow:0 10px 22px -12px rgba(122,62,20,.8)}
.btn-brown:hover{background:#6a3410}
.btn-dark{background:var(--brown-deep);color:#fff}
.btn-dark:hover{background:#2c1405}
.btn-dark:disabled{background:#cdbfb3;cursor:not-allowed}
.btn-outline{background:#fff;color:var(--brown-deep);box-shadow:inset 0 0 0 1.5px var(--brown-light)}
.btn-outline:hover{box-shadow:inset 0 0 0 1.5px var(--brown)}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn-lg{padding:15px 28px;font-size:16px}
.btn-sm{padding:8px 14px;font-size:13.5px}

/* header */
.top{position:sticky;top:0;z-index:30;background:rgba(252,244,230,.97);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1;padding:8px 0;flex-shrink:0;white-space:nowrap}
/* wordmark (logo aur hero title ek hi design): "PUNJAB" chhote spaced capitals, "Aatta Biscuits" Poppins bold (saaf, seedha, bina style).
   Gap golden ratio se: PUNJAB ki baseline se "A" ke top tak = PUNJAB ki cap-height ÷ 1.618 */
.brand-name,.brand b{font-family:"Poppins",system-ui,sans-serif;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:2px;margin-left:.2em}
.brand-sub,.brand span:not(.brand-name){font-family:"Poppins",system-ui,sans-serif;font-weight:700;font-size:26px;line-height:1;letter-spacing:-.02em;color:var(--brown-deep);margin:3.2px 0 0}
.brand small{font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:6px 0 0 14px}
.links{display:flex;gap:34px;list-style:none;margin:0;padding:0}
.links a{font-size:14px;font-weight:500;text-decoration:none;color:var(--ink);padding:6px 0;border-bottom:2px solid transparent;transition:border-color .15s}
.links a:hover,.links a[aria-current]{border-bottom-color:var(--brown)}
.tools{display:flex;align-items:center;gap:14px}
.icon-btn{width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--brown-deep);display:grid;place-items:center;position:relative}
.icon-btn:hover{background:var(--tint)}
.icon-btn svg{width:26px;height:26px}
.badge{position:absolute;top:3px;right:2px;background:var(--brown);color:#fff;font-size:10px;font-weight:600;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px}
/* Help button + popup (phone, WhatsApp) */
.help-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px 0 10px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--brown-deep);font:500 13.5px/1 "Poppins",system-ui,sans-serif}
.help-btn:hover{border-color:var(--brown-light);background:var(--tint)}
.help-btn svg{width:18px;height:18px}
.help-pop{position:fixed;inset:auto;margin:0;width:268px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--cream);color:var(--ink);box-shadow:0 24px 48px -20px rgba(63,29,8,.45)}
.help-pop > b{display:block;font-size:16px;color:var(--brown-deep)}
.help-pop > p{font-size:13px;color:var(--muted);margin:2px 0 12px}
.help-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;text-decoration:none;color:inherit}
.help-row:hover{background:var(--tint)}
.help-row .ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--tint);color:var(--brown);flex:none}
.help-row .ic.wa{background:#e7f6ec;color:#1e8a3c}
.help-row .ic svg{width:19px;height:19px}
.help-row small{display:block;font-size:11.5px;color:var(--muted)}
.help-row span span{font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.demo-bar{background:#fff4e5;color:var(--ink);font-size:13px;border-bottom:1px solid #f3d9b5}
.demo-bar .wrap{padding-block:8px}

/* hero: photo on the right fading into the page.
   Photo mirrored so the big front biscuit sits fully in view (not in the faded edge);
   mask is mirrored too, so 270deg here = fade on the left side on screen */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--cream),var(--bg))}
.hero-photo{display:contents}
.hero-bg{position:absolute;top:0;right:0;width:52%;height:100%;object-fit:cover;object-position:0% 40%;transform:scaleX(-1);
  -webkit-mask-image:linear-gradient(270deg,transparent 0,rgba(0,0,0,.6) 18%,#000 38%);mask-image:linear-gradient(270deg,transparent 0,rgba(0,0,0,.6) 18%,#000 38%)}
.hero .wrap{min-height:520px;display:flex;align-items:center;padding-block:48px}
.hero-copy{max-width:600px;position:relative}
/* main title: logo wala hi wordmark, bade size mein */
.hero h1{font-family:"Poppins",system-ui,sans-serif;font-weight:700;font-size:clamp(40px,6vw,80px);line-height:1;letter-spacing:-.025em}
.hero h1 span{display:block;color:var(--brown-deep)}
.hero h1 span:first-child{font-family:"Poppins",system-ui,sans-serif;font-size:.4em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:0 0 .159em .22em}
/* tagline: halka, khula aur saaf; desi ghee aur shuddh aatta dark mein */
.hero .lead{font-size:16.5px;font-weight:400;line-height:1.45;letter-spacing:.01em;color:var(--muted);white-space:nowrap;margin-top:22px;padding:2px 0 2px 18px;border-left:2px solid color-mix(in srgb,var(--gold) 70%,transparent)}
.hero .lead b{font-weight:600;color:var(--brown-deep)}
.hero .intro{margin-top:8px;max-width:440px}
.marks{display:flex;flex-wrap:nowrap;gap:16px;margin:28px 0 32px;padding:0;list-style:none}
.marks li{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;line-height:1.3;white-space:nowrap}
.marks .ic{width:40px;height:40px}
.marks .ic svg{width:19px;height:19px}
.ic{width:46px;height:46px;flex:none;border-radius:50%;border:1.5px solid var(--brown-mid);color:var(--brown);display:grid;place-items:center;background:#fff}
.ic svg{width:22px;height:22px}
.ctas{display:flex;flex-wrap:wrap;gap:14px}
/* ingredients ab hero ke andar hi (pehla aur doosra page jode hue) */
.hero-ing{margin-top:4px}
/* photo par gol mohar: gehun ki baali, "मैदा वाले बिस्कुट को / — बोलो — / बाय-बाय!" aur neeche sunehri swoosh.
   Do ring: bahar patli sunehri line + halka gap, andar dotted ring */
.hero-badge{position:absolute;z-index:2;right:7%;bottom:9%;width:170px;height:170px;margin:0;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  font-family:"Mukta","Poppins",system-ui,sans-serif;
  background:radial-gradient(circle at 38% 30%,#fffefb 0%,#fdf6ec 55%,#f6e9d6 100%);
  border:1.5px solid var(--gold);
  box-shadow:0 0 0 4px rgba(255,250,242,.75),0 0 0 5px color-mix(in srgb,var(--gold) 45%,transparent),0 20px 40px -16px rgba(63,29,8,.55);
  transform:rotate(-8deg)}
.hero-badge::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1.2px dotted color-mix(in srgb,var(--gold) 65%,transparent);pointer-events:none}
.hb-wheat{width:21px;height:21px;color:var(--gold);opacity:.9;margin-bottom:3px;transform:rotate(-35deg)}
.hb-top{font-size:15px;font-weight:600;color:var(--gold);line-height:1.1;display:flex;align-items:center;gap:6px}
.hb-big{font-family:"Poppins",system-ui,sans-serif;font-weight:700;font-size:29px;line-height:1.05;color:var(--brown-deep);margin:5px 0 0;letter-spacing:-.01em;text-shadow:0 1px 0 #fff}
.hb-bot{font-size:16.5px;font-weight:600;color:var(--brown-mid);line-height:1.1;display:flex;align-items:center;gap:7px}
.hb-bot::before,.hb-bot::after{content:"";width:5px;height:5px;background:var(--gold);opacity:.6;transform:rotate(45deg)}
.hb-top + .hb-bot{margin-top:5px}
.hb-swoosh{width:84px;height:9px;margin-top:2px;fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;opacity:.8}
.hero-ing h2{font-size:clamp(22px,2.4vw,28px);margin:0;font-weight:500;color:var(--brown-mid);letter-spacing:.01em}
.hero-ing .intro{font-size:15px;max-width:460px}
.hero-ing .ing{margin:18px 0 0;gap:12px}
.hero-ing .ing img{width:76px;height:76px;margin-bottom:10px}
/* Order Now / WhatsApp buttons prices wale page ke upar */

/* section headings */
.sec-head{text-align:center;margin-bottom:32px}
.sec-head h2{font-size:clamp(32px,4.2vw,46px);margin-top:4px;display:flex;justify-content:center;align-items:center;gap:16px}
.sec-head p:last-child{color:var(--muted);margin-top:8px}
.wheat{width:38px;height:38px;color:var(--brown-light);flex:none}
.wheat.r{transform:scaleX(-1)}

/* products */
.products{padding-block:44px 64px;background:var(--bg)}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.pcard{background:linear-gradient(160deg,var(--cream) 0%,#f1dcb8 100%);border:1px solid var(--line);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:24px;box-shadow:var(--shadow)}
.ptop{display:grid;grid-template-columns:1fr 192px;gap:18px;align-items:center}
/* "Option 1 / Option 2" chhota tag, taaki saaf dikhe ki do biscuit mein se chunna hai */
.opt{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--gold);border-radius:999px;padding:3px 12px;margin-bottom:10px}
.pcard h3{font-size:clamp(24px,2.4vw,30px);line-height:1.12}
.pcard .d{color:var(--muted);font-size:14.5px;margin-top:12px;max-width:30ch}
.ptop img{width:192px;aspect-ratio:16/9;height:auto;object-fit:cover;border-radius:14px;border:3px solid #fff;box-shadow:0 12px 24px -12px rgba(63,29,8,.45)}
.out-note{color:var(--bad);font-weight:600;font-size:13px;margin-top:10px}
/* khane ki photos thodi zyada rangeen aur taaza (vibrance + saturation) */
.hero-bg,.ing img,.ptop img,.trad-bg{filter:saturate(1.22) contrast(1.04) brightness(1.02)}
.pcard.out .ptop img{filter:grayscale(.8);opacity:.6}
.packs{margin-top:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pack{background:#fffaf1;border:1px solid var(--line);border-radius:16px;padding:16px 10px 14px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.pack b{font-family:"Poppins",system-ui,sans-serif;font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--brown-deep);font-variant-numeric:tabular-nums}
.pack span{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.pack .free-del{display:block;font-size:11px;font-weight:500;color:var(--veg);margin-top:1px}
.pack .free-del.paid{color:var(--muted)}
.pack .btn{width:100%;padding:8px 6px;font-size:13px;gap:6px}
.pack .btn svg{width:15px;height:15px}

/* ingredients: photo on the right fading in */
.ingredients{position:relative;overflow:hidden;background:var(--tint);padding-block:64px}
.ing-bg{position:absolute;top:0;right:0;width:36%;height:100%;object-fit:cover;object-position:50% 50%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 35%);mask-image:linear-gradient(90deg,transparent 0,#000 35%)}
.ing-copy{max-width:640px;position:relative}
.ingredients h2,.tradition h2{font-size:clamp(32px,4.2vw,46px);margin:4px 0 12px}
.ingredients .intro{max-width:440px}
.ing{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ing li{display:flex;flex-direction:column;align-items:center;text-align:center}
.ing img{width:92px;height:92px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 10px 20px -10px rgba(63,29,8,.45);margin-bottom:12px}
.ing b{font-size:14.5px;font-weight:600}
.ing span{font-size:12.5px;color:var(--muted)}

/* tradition */
.tradition{position:relative;overflow:hidden;background:var(--cream);padding-block:64px}
.trad-bg{position:absolute;top:0;right:0;width:56%;height:100%;object-fit:cover;object-position:60% 50%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%);mask-image:linear-gradient(90deg,transparent 0,#000 40%)}
.trad-copy{max-width:430px;position:relative}
.trad-copy .intro{margin-bottom:28px}

/* feature strip */
.features{background:var(--cream);border-block:1px solid var(--line)}
.features ul{list-style:none;margin:0;padding:24px 0;display:grid;grid-template-columns:repeat(2,auto);justify-content:center;column-gap:56px}
.features li{display:flex;align-items:center;gap:14px;padding-inline:56px 0;border-left:1px solid var(--line)}
.features li:first-child{border-left:0;padding-left:0}
.features b{display:block;font-size:14.5px;font-weight:600}
.features span:not(.ic){font-size:12.5px;color:var(--muted)}

/* story */
.story{padding-block:68px;background:var(--bg);text-align:center}
.story .wrap{max-width:820px}
.story h1,.story h2{font-size:clamp(32px,4.2vw,46px);margin:4px 0 24px}
.story-back{margin-top:32px}
.story-text p{color:var(--muted);font-size:17px;margin-bottom:16px}
.story-tag{display:inline-block;font-family:"Poppins",system-ui,sans-serif;font-weight:600;font-size:17px;color:var(--brown-deep);border-top:1px solid var(--line);padding-top:20px;margin-top:10px}

/* reviews */
.reviews{padding-block:56px;background:var(--tint);text-align:center}
.reviews h2{font-size:clamp(30px,3.8vw,40px);margin:4px 0 12px}
.reviews .intro{max-width:520px;margin:0 auto 24px}
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:8px 0 26px;text-align:left}
.rev{margin:0;background:#fffaf1;border:1px solid var(--line);border-radius:18px;padding:44px 18px 16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 14px 28px -22px rgba(63,29,8,.45);position:relative}
.rev::before{content:"“";position:absolute;top:10px;left:16px;font:700 48px/1 "Poppins",sans-serif;color:var(--gold);opacity:.35}
.rev-stars{position:absolute;top:18px;right:16px;color:var(--gold);font-size:14px;letter-spacing:1px}
.rev-stars span{color:var(--line)}
.rev blockquote{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink);flex:1}
.rev figcaption{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.rev figcaption b{display:block;font-size:14px;color:var(--brown-deep)}
.rev-empty{background:transparent;border-style:dashed;box-shadow:none}
.rev-empty::before{opacity:.15}
.rev-empty blockquote{color:var(--muted);font-style:italic}

/* halka hover lift, sirf mouse wale screens par */
@media (hover:hover){
  .pcard,.rev,.ing img{transition:transform .25s ease}
  .pcard:hover{transform:translateY(-3px)}
  .rev:not(.rev-empty):hover{transform:translateY(-3px)}
  .ing li:hover img{transform:scale(1.05)}
}

/* contact + footer */
.contact{padding-block:56px;background:var(--cream)}
.contact h2{font-size:clamp(30px,3.8vw,40px);margin-bottom:28px}
.contact dl{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:0}
.contact dt{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.contact dd{margin:0;font-size:16px;font-weight:500;overflow-wrap:anywhere}
.contact dd a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.contact dd a:hover{border-bottom-color:var(--brown)}
footer{background:var(--brown-deep);color:#e9dccf;font-size:12.5px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:22px}
footer a{text-decoration:none;color:#fff}
footer a:hover{text-decoration:underline}

/* cart drawer */
.scrim{position:fixed;inset:0;background:rgba(43,26,16,.4);z-index:40;opacity:0;pointer-events:none;transition:opacity .25s}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--cream);z-index:41;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;gap:16px;padding:24px;overflow:auto}
body.cart-open .scrim{opacity:1;pointer-events:auto}
body.cart-open .drawer{transform:none;box-shadow:-20px 0 50px rgba(0,0,0,.18)}
.drawer h2{font-size:28px}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.close{border:0;background:var(--grey);border-radius:50%;width:36px;height:36px;font-size:18px;line-height:1}
.lines{display:flex;flex-direction:column;gap:14px}
.line{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;font-size:14.5px;border-bottom:1px solid #f0e8df;padding-bottom:14px}
.line img{width:56px;height:56px;border-radius:12px;object-fit:contain;background:var(--grey);padding:4px}
.meta{color:var(--muted);font-size:13px}
.qty{display:flex;align-items:center;gap:8px}
.qty button{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink)}
.qty span{min-width:16px;text-align:center;font-variant-numeric:tabular-nums}
.empty{color:var(--muted);font-size:15px;text-align:center;padding:24px 0}
.totals{display:grid;grid-template-columns:1fr auto;gap:6px;font-size:15px;font-variant-numeric:tabular-nums}
.totals .grand{font-weight:600;font-size:18px;border-top:1px solid #f0e8df;padding-top:10px;margin-top:4px}
.note{font-size:13px;color:var(--muted)}
form{display:flex;flex-direction:column;gap:12px}
label{font-size:13px;font-weight:500;color:var(--muted);display:flex;flex-direction:column;gap:6px}
input,textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--grey);border:1px solid transparent;border-radius:12px;padding:11px 14px}
input:focus,textarea:focus{outline:none;border-color:var(--brown);background:#fff}
.place{background:var(--brown);color:#fff;border:0;border-radius:999px;padding:14px;font-weight:600;font-size:16px}
.place:disabled{opacity:.45;cursor:not-allowed}
.done{background:#f3f8f1;border:1px solid #cfe3c8;border-radius:14px;padding:14px;font-size:14.5px}
.done.warn{background:#fff4e5;border-color:#f3d9b5}
.bad{color:var(--bad)}
.form-err{color:var(--bad);font-size:14px;font-weight:500;background:#fdf1f3;border-radius:10px;padding:8px 12px}
.link-btn{border:0;background:none;color:var(--brown);font-weight:600;font-size:13px;padding:0}
.my-orders{border-top:1px solid #f0e8df;padding-top:14px}
.my-orders h3{font-size:18px}
.my-orders ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.my-orders li{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}
.code{font-family:var(--font-data);font-size:13px}

/* status pills */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st-new{color:var(--new);background:color-mix(in srgb,var(--new) 13%,transparent)}
.st-confirmed{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent)}
.st-delivered{color:var(--veg);background:color-mix(in srgb,var(--veg) 13%,transparent)}
.st-cancelled{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent)}

/* admin */
.admin-page{background:var(--grey);min-height:100vh}
.admin{padding-block:40px 64px;display:flex;flex-direction:column;gap:22px}
.admin-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px}
.admin-head h2{font-size:40px}
.admin-head p{margin-top:4px;color:var(--muted);font-size:15px}
.head-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.live{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--veg)}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line)}
.tabs button{border:0;background:none;padding:10px 14px;font-size:15px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--brown)}
.pane{display:flex;flex-direction:column;gap:18px}
.pane[hidden]{display:none}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{background:#fff;border-radius:18px;padding:16px 18px}
.tile span{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tile b{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums}
.tile.hot b{color:var(--new)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap}
.toolbar input{flex:1 1 260px;background:#fff;border:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:7px 16px;font-size:14px;font-weight:500}
.chip[aria-pressed="true"]{background:var(--brown-deep);color:#fff;border-color:var(--brown-deep)}
.orders{display:flex;flex-direction:column;gap:12px}
.order{background:#fff;border-radius:18px;border-left:5px solid #d2d2d7;padding:16px 18px;display:grid;grid-template-columns:190px 1fr 1fr auto;gap:18px;align-items:start}
.order.s-new{border-left-color:var(--new)}
.order.s-confirmed{border-left-color:var(--ok)}
.order.s-delivered{border-left-color:var(--veg)}
.order.s-cancelled{border-left-color:var(--bad);opacity:.75}
.order h3{font-family:var(--font-data);font-size:14px;font-weight:600;letter-spacing:0;color:var(--ink)}
.order .who{font-weight:600}
.order .addr{color:var(--muted);font-size:14px;white-space:pre-line}
.order ul{margin:0;padding:0;list-style:none;font-size:14px;display:flex;flex-direction:column;gap:2px}
.order .sum{font-weight:600;margin-top:6px}
.contact-btns{display:flex;gap:8px;margin-top:8px}
.contact-btns a{font-size:13px;font-weight:500;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:4px 10px;background:#fff}
.contact-btns a:hover{border-color:var(--brown)}
.price-warn{margin-top:10px;background:#fdf1f3;border:1px solid #f3c2cc;color:var(--bad);border-radius:12px;padding:8px 10px;font-size:13px}
.price-warn b{display:block}
.acts{display:flex;flex-direction:column;gap:6px;min-width:140px}
.acts button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:500}
.acts button.primary{background:var(--brown);border-color:var(--brown);color:#fff}
.acts button.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.acts button.quiet{color:var(--muted);border-color:transparent;background:transparent}
.acts button:disabled{opacity:.5;cursor:wait}
.admin-empty{background:#fff;border-radius:18px;padding:36px;text-align:center;color:var(--muted)}
.admin-empty b{display:block;font-size:22px;color:var(--ink);margin-bottom:6px}
.admin-empty.left{text-align:left;font-size:15px;padding:22px 24px}
.admin-empty.left b{font-size:19px}
.prod-table{background:#fff;border-radius:18px;padding:6px 18px}
.prow{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr .7fr;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid #f0e8df;font-size:15px}
.prow:last-child{border-bottom:0}
.v-h{font-size:18px;margin:28px 0 10px}
.vtable{background:#fff;border-radius:18px;padding:4px 18px;margin-bottom:6px}
.vtable:empty{display:none}
.vrow{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1fr;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid #f0e8df;font-size:14.5px}
.vrow:last-child{border-bottom:0}
.vrow.head{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.vrow a{color:var(--brown)}
.prow.head{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pinput{font-weight:400;gap:4px}
.prow input[type=number]{width:100%;max-width:140px;padding:8px 10px}
.prow input[type=checkbox]{width:20px;height:20px;accent-color:var(--bad)}
.prod-actions{justify-content:flex-end}
.login{max-width:400px;margin:64px auto;background:#fff;border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:14px}
.login h2{font-size:30px}
.login .err{color:var(--bad);font-size:14px}

/* policies page */
.policy{max-width:760px;padding-block:48px 80px}
.policy h1{font-size:clamp(34px,5vw,48px)}
.policy h2{font-size:26px;margin:40px 0 10px;scroll-margin-top:90px}
.policy p,.policy li{color:#4a3a30;font-size:16px;margin-bottom:10px}
.policy .draft{background:#fff4e5;border:1px solid #f3d9b5;border-radius:14px;padding:12px 16px;font-size:14px;margin:18px 0}
.policy mark{background:#fff1b8;padding:0 3px;border-radius:4px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--brown-deep);color:#fff;padding:11px 20px;border-radius:999px;font-size:14.5px;font-weight:500;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.2);max-width:calc(100% - 32px);text-align:center}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero-bg{width:44%}
  .hero-copy{max-width:480px}
  .pgrid{grid-template-columns:minmax(0,1fr);max-width:620px;margin-inline:auto}
  .links{display:none}
  .features ul{column-gap:28px}
  .features li{padding-left:28px}
  .contact dl{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){

  /* photos go on top instead of behind the text */
  .hero-bg,.ing-bg,.trad-bg{position:relative;width:100%;height:280px;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
  .hero .wrap{min-height:0;padding-block:8px 20px}
  .products{padding-top:24px}
  .ingredients,.tradition{padding-top:0}
  .ing-copy,.trad-copy{margin-top:8px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .order{grid-template-columns:1fr}
  .acts{flex-direction:row;flex-wrap:wrap}
  .prow{grid-template-columns:1fr 1fr;row-gap:8px}
  .prow.head{display:none}
  .vrow{grid-template-columns:1fr 1fr;row-gap:4px}
  .vrow.head{display:none}
  .prow > span:first-child{grid-column:1/-1}
}
@media (max-width:560px){
  .wrap{padding-inline:16px}
  .top .wrap{min-height:64px}
  .brand-name,.brand b{font-size:12px}
  .brand-sub,.brand span:not(.brand-name){font-size:23px}
  .hero-badge{width:122px;height:122px;bottom:auto;top:36px;right:auto;left:26px}
  /* mobile: saamne wala biscuit zoom karke beech ki taraf, stamp left mein taaki biscuit na dhake */
  .hero-bg{object-position:0% 32%;transform:scaleX(-1) scale(1.3);transform-origin:43.5% 60%}
  .hb-top{font-size:11px;gap:4px}.hb-big{font-size:20px;margin:3px 0 0}.hb-bot{font-size:12.5px;gap:5px}.hb-bot::before,.hb-bot::after{width:4px;height:4px}.hero-badge::before{inset:4px}.hb-wheat{width:14px;height:14px;margin-bottom:1px}.hb-swoosh{width:60px;height:7px}.hb-top + .hb-bot{margin-top:3px}
  .hero .lead{font-size:15px;padding-left:14px}
  .top-cta{display:none}
  .hero-bg,.ing-bg,.trad-bg{height:220px}
  /* phone: biscuit photo ek gol-kone wale rectangle card mein, thodi chhoti aur upar */
  .hero-photo{display:block;position:relative;margin:4px 16px 0;height:186px;border-radius:18px;overflow:hidden;box-shadow:0 16px 30px -18px rgba(63,29,8,.55)}
  .hero-photo .hero-bg{height:100%;-webkit-mask-image:none;mask-image:none}
  .marks{display:grid;grid-template-columns:1fr 1fr}
  .ctas .btn{flex:1 1 100%}
  .sec-head h2{gap:8px}
  .wheat{width:26px;height:26px}
  .pcard{padding:20px}
  .ptop{grid-template-columns:1fr 96px}
  .pcard h3{font-size:21px}
  .ptop img{width:96px}
  .pack .free-del{font-size:10px;white-space:nowrap;letter-spacing:-.01em}
  .packs{gap:8px}
  .pack{padding:12px 6px}
  .pack b{font-size:19px}
  .pack .btn{font-size:12px;gap:5px;padding:7px 4px}
  .pack .btn svg{display:none}
  .ing{grid-template-columns:repeat(2,1fr);row-gap:24px}
  .features ul{grid-template-columns:1fr 1fr;column-gap:12px}
  .features li{border-left:0;padding-left:0;gap:10px}
  .features .ic{width:38px;height:38px}
  .features b{font-size:13.5px;line-height:1.3}
  .contact dl{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* bilkul halka grain texture (kaagaz jaisa) poore background par; photos aur cards par nahi */
:root{--tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .22 0 0 0 0 .1 .26 0 0 0 -.07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body,.products,.tradition,.features,.reviews,.contact{background-image:var(--tex)}
.hero{background:var(--tex),linear-gradient(180deg,#fff,var(--bg))}

/* chhoti polish: brand rang ka text selection, scroll karne par header ke neeche halki parchhayi */
::selection{background:color-mix(in srgb,var(--gold) 28%,transparent);color:var(--brown-deep)}
.top{transition:box-shadow .2s}
.top.scrolled{box-shadow:0 8px 24px -18px rgba(63,29,8,.45)}

/* Option 3: customized biscuit, dono cards ke neeche poori chaudai mein */
.pcard-custom{grid-column:1/-1;gap:22px}
.custom-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.custom-head .d{max-width:52ch}
.custom-ways{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.custom-ways li{background:#fffaf1;border:1px solid var(--line);border-radius:16px;padding:16px 14px;display:flex;flex-direction:column;gap:10px}
.custom-ways .ic{width:40px;height:40px}
.custom-ways .ic svg{width:19px;height:19px}
.custom-ways b{display:block;font-size:14px;font-weight:600;line-height:1.3;color:var(--brown-deep)}
.custom-ways small{display:block;font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:3px}
/* chhote Android (360px): logo ek hi line mein rahe, isliye logo thoda chhota aur Help/cart paas-paas */
@media (max-width:380px){
  .top .wrap{gap:10px}
  .brand-sub,.brand span:not(.brand-name){font-size:21px}
  .tools{gap:4px}
  .help-btn{height:34px;padding:0 10px 0 8px;font-size:13px}
}
@media (max-width:1080px){.custom-ways{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.custom-ways{grid-template-columns:minmax(0,1fr)}.custom-ways li{flex-direction:row;align-items:center}.custom-head .btn{width:100%}}

/* hero video (photo ki jagah): photo ki tarah mirror nahi, isliye fade 90deg = left side.
   Video khadi (9:16) hai; cover se beech ka plate wala hissa dikhta hai aur neeche ka Gemini nishaan kat jaata hai */
.hero-bg.hero-vid{transform:none;object-position:50% 55%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 18%,#000 38%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 18%,#000 38%)}
@media (max-width:900px){
  .hero-bg.hero-vid{height:440px;object-position:50% 45%;-webkit-mask-image:linear-gradient(180deg,#000 75%,transparent);mask-image:linear-gradient(180deg,#000 75%,transparent)}
}
/* phone: photo wala gol-kone card video ke liye lamba, biscuit ki plate dikhe (Gemini nishaan neeche kat jaata hai) */
@media (max-width:560px){
  .hero-photo:has(.hero-vid){height:340px}
  .hero-photo .hero-bg.hero-vid{height:100%;object-position:50% 75%;-webkit-mask-image:none;mask-image:none}
}

/* hero video crossfade (js/shop.js): doosri copy pehli ke theek upar, opacity se andar aati hai */
.hero-vid-twin{position:absolute!important;top:0;right:0}
.hero-vid{transition:opacity 1.6s linear}
.hero-vid-twin:not(.on){opacity:0}
.hero-vid-twin{z-index:1}
@media (max-width:900px){ .hero-vid-twin{left:0;width:100%} }
@media (max-width:560px){ .hero-vid-twin{inset:0;height:100%!important} }

/* ---------- smoothness ----------
   video par halka saturation (user ki pasand), photos jitna tez nahi taaki phone par bhaari na pade.
   Neeche ke sections tab tak render nahi hote jab tak screen ke paas na aayein (pehla load halka). */
.hero-bg.hero-vid{filter:saturate(1.15) contrast(1.03)}
.tradition,.features,.reviews,.contact{content-visibility:auto;contain-intrinsic-size:auto 640px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* hamesha tairta WhatsApp button, neeche daayein. Cart khulne par chhup jaata hai; toast iske upar dikhta hai */
.wa-float{position:fixed;right:20px;bottom:36px;z-index:35;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 19px 0 15px;
  border:0;border-radius:999px;background:#1fa855;color:#fff;font:600 14px/1 var(--font);
  box-shadow:0 12px 28px -10px rgba(16,94,48,.7),0 2px 6px rgba(0,0,0,.12);transition:transform .2s ease,opacity .2s ease}
.wa-float svg{width:23px;height:23px;flex:none}
.wa-float:hover{background:#1a9a4d}
.wa-float:active{transform:scale(.96)}
body.cart-open .wa-float{opacity:0;pointer-events:none}
.toast{z-index:60}
@media (max-width:560px){
  .wa-float{right:14px;bottom:26px;height:45px;padding:0 16px 0 13px;font-size:13px}
  .wa-float svg{width:21px;height:21px}
  footer .wrap{padding-bottom:96px}  /* footer ka aakhri likha button ke neeche na chhupe */
}

/* "बाय-बाय!" mohar biscuits ke upar nahi, upar ki khaali (dhundhli) jagah mein.
   Video thoda neeche khiskaya (object-position) taaki upar background ki jagah bane */
.hero-bg.hero-vid{object-position:50% 30%}
.hero-badge{top:6%;bottom:auto;right:4%}
@media (max-width:900px){
  .hero-bg.hero-vid{object-position:50% 30%}
  .hero-badge{top:20px;right:24px;left:auto}
}
@media (max-width:560px){
  .hero-photo .hero-bg.hero-vid{object-position:50% 38%}
  .hero-badge{width:104px;height:104px;top:14px;right:26px;left:auto}
  .hero-badge .hb-big{font-size:17px}.hero-badge .hb-top{font-size:9.5px}.hero-badge .hb-bot{font-size:11px}.hero-badge .hb-swoosh{width:50px}
}

/* WhatsApp button ke kinaron par halki hari chamak, dheere saans leti hui.
   Glow alag layer (::after) par hai aur sirf opacity badalti hai, taaki animation smooth rahe */
.wa-float::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 0 10px 2px rgba(37,211,102,.55),0 0 22px 4px rgba(37,211,102,.25);
  opacity:.35;animation:wa-glow 2.6s ease-in-out infinite}
@keyframes wa-glow{50%{opacity:1}}
/* kinare se bahar failti halki hari lehar (sirf transform + opacity = smooth) */
.wa-float::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:2px solid rgba(37,211,102,.7);animation:wa-ring 2.6s ease-out infinite}
@keyframes wa-ring{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(1.18,1.4);opacity:0}}

/* Contact patla: desktop par heading baayein aur chaaron details daayein, ek hi line mein */
.contact{padding-block:30px;contain-intrinsic-size:auto 160px}
.contact .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:56px}
.contact h2{font-size:clamp(26px,2.6vw,32px);margin:0}
.contact dl{gap:14px 28px}
.contact dt{margin-bottom:3px}
.contact dd{font-size:15px}
@media (max-width:1080px){
  .contact .wrap{grid-template-columns:1fr;row-gap:16px}
}
@media (max-width:560px){
  .contact{padding-block:26px}
  .contact dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact dl > div:nth-child(3){grid-column:1/-1}  /* email lamba hai, poori line le */
}
@media (min-width:1081px){
  .contact dl{grid-template-columns:repeat(4,auto);justify-content:space-between}
  .contact dd{white-space:nowrap}
}

/* Our Biscuits: teeno options ek line mein, khade (portrait) cards. Photo upar, packs ek ke neeche ek.
   Phone (900px se chhota) par pehle jaisa ek ke neeche ek. */
@media (min-width:900px){
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:22px;align-items:stretch}
  .pcard{padding:20px 20px 22px;gap:18px}
  .ptop{display:flex;flex-direction:column-reverse;align-items:stretch;gap:16px}
  .ptop img{width:100%;aspect-ratio:16/9}
  .pcard h3{font-size:clamp(21px,2vw,25px)}
  .pcard .d{max-width:none;font-size:14px;margin-top:8px}
  .packs{grid-template-columns:minmax(0,1fr);gap:8px}
  .pack{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:10px;text-align:left;padding:10px 10px 10px 16px}
  .pack b{font-size:21px;line-height:1.15}
  .pack span{grid-row:2;margin:0;font-size:12px;line-height:1.3}
  .pack .free-del{white-space:nowrap}
  .pack .btn{grid-column:2;grid-row:1/3;width:auto;padding:9px 14px}
  /* Option 3: bina photo ke, isliye tareeke list mein aur button sabse neeche */
  .pcard-custom{grid-column:auto}
  .custom-head{display:contents}
  .custom-head > div{order:0}
  .custom-ways{order:1;grid-template-columns:minmax(0,1fr);gap:6px}
  .custom-ways li{flex-direction:row;align-items:center;gap:10px;padding:7px 12px}
  .custom-ways .ic{width:30px;height:30px;flex:none}
  .custom-ways .ic svg{width:15px;height:15px}
  .custom-ways b{font-size:13.5px}
  .custom-ways small{display:none}  /* card chhota rahe, teeno ek screen mein aayein */
  .custom-head .btn{order:2;margin-top:auto;width:100%}
}

/* Option 3 ki photo, Option 1/2 ki photo jaisi */
.custom-img{width:100%;aspect-ratio:16/7;height:auto;object-fit:cover;border-radius:14px;border:3px solid #fff;box-shadow:0 12px 24px -12px rgba(63,29,8,.45);filter:saturate(1.22) contrast(1.04) brightness(1.02)}
@media (min-width:900px){ .custom-img{order:-1;aspect-ratio:16/9} }

/* "Maida Kills": pehle page aur Our Biscuits ke beech alag patli patti, laal-kaale rang mein.
   Computer par 3:1 (X cover jaisa); phone par itna patla text ke liye kam padta, isliye wahan apni lambai. */
.maida-kills{padding-block:8px 0;background:var(--bg)}
.mk-banner{position:relative;display:grid;grid-template-columns:minmax(0,30%) minmax(0,1fr);align-items:center;overflow:hidden;
  aspect-ratio:4/1;max-height:300px;width:100%;margin-inline:auto;  /* X cover (3:1) se bhi patla */
  background:radial-gradient(90% 130% at 100% 0%,#3a0e0e 0%,#151010 55%,#0b0909 100%);color:#f5ece6;
  border-radius:22px;box-shadow:0 28px 50px -30px rgba(20,5,5,.8)}
.mk-banner::before,.mk-banner::after{content:"";position:absolute;left:0;right:0;height:8px;
  background:repeating-linear-gradient(-45deg,#dc2626 0 12px,#111 12px 24px)}
.mk-banner::before{top:0}.mk-banner::after{bottom:0}
.mk-photo{position:relative;height:100%;display:grid;place-items:center;background:linear-gradient(160deg,#c81e1e,#7f1d1d)}
.mk-photo img{width:min(64%,170px);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;border:5px solid #fff;box-shadow:0 18px 36px -12px rgba(0,0,0,.7)}
.mk-stamp{position:absolute;left:50%;bottom:16%;transform:translateX(-50%) rotate(-4deg);white-space:nowrap;
  background:#111;color:#fff;font:700 13px/1 "Poppins",system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;padding:7px 12px;border-radius:6px;
  box-shadow:0 0 0 2px #fff}
.mk-copy{position:relative;padding:28px clamp(22px,4vw,52px)}
.mk-copy::after{content:"!";position:absolute;right:clamp(16px,3vw,40px);top:50%;transform:translateY(-50%);font:800 clamp(140px,16vw,230px)/1 "Poppins",system-ui,sans-serif;color:#dc2626;opacity:.1;pointer-events:none}
.mk-kicker{margin:0;display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:#f87171}
.mk-kicker::before{content:"";width:26px;height:2px;background:#dc2626}
.mk-title{margin:6px 0 0;font:800 clamp(40px,5.4vw,72px)/.95 "Poppins",system-ui,sans-serif;letter-spacing:-.01em;text-transform:uppercase;color:#fff}
.mk-title em{font-style:normal;color:#ef4444}
.mk-sub{margin:10px 0 0;font-size:clamp(14px,1.3vw,17px);color:#d6c8c2}
.mk-points{list-style:none;margin:clamp(14px,2vw,24px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:640px}
.mk-points li{padding:10px 12px 10px 14px;border-left:3px solid #dc2626;background:rgba(255,255,255,.04);border-radius:0 10px 10px 0}
.mk-points b{display:block;font-size:14px;font-weight:700;color:#fff;line-height:1.25}
.mk-points span{display:block;font-size:12px;color:#c9b9b2;line-height:1.35;margin-top:2px}
.mk-cta{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(14px,2vw,22px);padding:9px 18px;border-radius:999px;
  background:#dc2626;color:#fff;font-size:14px;font-weight:600;text-decoration:none;transition:background .2s}
.mk-cta:hover{background:#b91c1c}
@media (max-width:900px){
  .mk-banner{aspect-ratio:auto;max-height:none;grid-template-columns:minmax(0,1fr)}
  .mk-photo{height:auto;padding:18px 0 26px}
  .mk-photo img{width:88px;border-width:4px}
  .mk-stamp{bottom:12px;font-size:11px;padding:5px 10px}
  .mk-copy{padding:16px 18px 24px}
}
@media (max-width:560px){
  .mk-points{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .mk-points li{padding:8px 8px 8px 10px}
  .mk-points b{font-size:12px}
  .mk-points span{display:none}
  .mk-title{font-size:30px;line-height:1.02}
  .mk-banner{border-radius:18px}
}
/* 3:1 patti mein sab samaye: andar ki jagah kasi */
@media (min-width:901px){
  .mk-banner{grid-template-columns:minmax(0,26%) minmax(0,1fr)}
  .mk-photo img{width:min(60%,150px)}
  .mk-stamp{bottom:12%;font-size:11.5px;padding:6px 11px}
  .mk-copy{padding:16px clamp(22px,3.6vw,48px) 18px}
  .mk-title{font-size:clamp(36px,4.6vw,62px)}
  .mk-sub{margin-top:6px}
  .mk-points{margin-top:clamp(10px,1.4vw,18px)}
  .mk-points li{padding:8px 12px 8px 14px}
  .mk-cta{margin-top:clamp(10px,1.4vw,18px);padding:7px 16px;font-size:13.5px}
}
/* 4:1 patti: heading lambi hai ("Maida Biscuits Kill Your Gut"), isliye thodi chhoti; button aur sub-line hata di */
@media (min-width:901px){
  .mk-banner{grid-template-columns:minmax(0,22%) minmax(0,1fr)}
  .mk-photo img{width:min(58%,120px);border-width:4px}
  .mk-stamp{bottom:10%;font-size:10.5px;padding:5px 10px}
  .mk-copy{padding:14px clamp(22px,3.4vw,44px) 16px}
  .mk-title{font-size:clamp(28px,3.4vw,46px);margin-top:4px}
  .mk-points{margin-top:clamp(10px,1.2vw,14px)}
}
/* Maida Kills patti: maide ki photo ki jagah halke rang ka maida biscuit (drawing), img jaisa hi size */
.mk-biscuit{width:min(64%,170px);height:auto;aspect-ratio:1;border-radius:50%;filter:drop-shadow(0 16px 22px rgba(0,0,0,.45))}
@media (min-width:901px){ .mk-biscuit{width:min(70%,140px)} }
@media (max-width:900px){ .mk-biscuit{width:96px} }
/* thappa ab do line ka ("Say No to / Maida Biscuits"), isliye biscuit ke upar nahi, uske neeche */
.mk-photo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.mk-stamp{position:static;transform:rotate(-4deg);text-align:center;line-height:1.25;letter-spacing:.1em}
@media (min-width:901px){ .mk-biscuit{width:min(60%,118px)} .mk-stamp{font-size:10px;padding:5px 9px} }
@media (max-width:900px){ .mk-photo{padding:18px 0 20px} }

/* Maida Kills patti website ka hissa lage: laal-kaala hi, par kaala ab website ke bhure (--brown-deep) se mila hua gehra
   chocolate, safed ki jagah cream, patli dhaariyan, aur baaki cards jaisa kinara aur parchhaai */
.maida-kills{padding-block:20px 4px}
.mk-banner{
  background:
    radial-gradient(70% 120% at 100% 0%,rgba(185,28,28,.28) 0%,transparent 60%),
    linear-gradient(135deg,#2b1309 0%,#1d0d06 55%,#160a05 100%);
  color:#f6e6cc;border-radius:24px;border:1px solid rgba(184,116,26,.35);
  box-shadow:var(--shadow),0 0 0 6px rgba(246,230,204,.55)}
.mk-banner::before,.mk-banner::after{height:5px;opacity:.9;background:repeating-linear-gradient(-45deg,#c0262d 0 10px,#2b1309 10px 20px)}
.mk-photo{background:linear-gradient(160deg,#b8262b 0%,#8a1c17 70%,#6e1a10 100%);box-shadow:inset -18px 0 30px -24px rgba(0,0,0,.6)}
.mk-kicker{color:#f2a07b}
.mk-kicker::before{background:#d64545}
.mk-title{color:#fbf1e2}
.mk-title em{color:#ef4a3c}
.mk-points li{background:rgba(246,230,204,.06);border-left-color:#d64545}
.mk-points b{color:#fbf1e2}
.mk-points span{color:#cdb8a0}
.mk-stamp{background:#2b1309;color:#fbf1e2;box-shadow:0 0 0 2px #f6e6cc}
.mk-copy::after{color:#d64545;opacity:.09}
/* aur patli: 5:1 (24 Oct, dusri baar) */
@media (min-width:901px){
  .mk-banner{aspect-ratio:5/1;max-height:250px}
  .mk-biscuit{width:min(50%,92px)}
  .mk-photo{gap:7px}
  .mk-stamp{font-size:9px;padding:4px 8px}
  .mk-copy{padding:10px clamp(22px,3.4vw,44px) 12px}
  .mk-kicker{font-size:10.5px}
  .mk-title{font-size:clamp(24px,3vw,40px);margin-top:2px}
  .mk-points{margin-top:8px;gap:10px}
  .mk-points li{padding:6px 10px 6px 12px}
  .mk-points b{font-size:13px}
  .mk-points span{font-size:11.5px}
}
@media (min-width:901px) and (max-width:1020px){ .mk-points span{display:none} }  /* chhoti computer screen par 5:1 mein samaye */