/* Virsa Foods stylesheet — theme vars in :root (light) & [data-theme=dark] */

:root{
  --bg:#f2e6cd; --bg-2:#e9d9b9; --surface:#fffaef; --surface-2:#ecdcbd;
  --text:#3b2415; --text-soft:#6f5742; --muted:#937b60;
  --gold:#b8860b; --gold-2:#e0b24f; --gold-soft:#f0d9a3;
  --brown:#6b3f1d; --sienna:#a0522d; --cream:#fff7e8;
  --border:rgba(107,63,29,.24); --shadow:rgba(74,42,18,.2);
  --header-bg:rgba(244,233,210,.92);
  --hero-grad:linear-gradient(135deg,#f7eccf 0%,#ecd9a9 55%,#e6c87f 100%);
}
[data-theme="dark"]{
  --bg:#190f08; --bg-2:#21140c; --surface:#271810; --surface-2:#32200f;
  --text:#f3e4cc; --text-soft:#cdb695; --muted:#9c8669;
  --gold:#e6b95a; --gold-2:#f0cf86; --gold-soft:#5a4220;
  --brown:#c79a6a; --sienna:#d98a5a; --cream:#f5e7cf;
  --border:rgba(230,185,90,.18); --shadow:rgba(0,0,0,.5);
  --header-bg:rgba(33,20,12,.85);
  --hero-grad:linear-gradient(135deg,#2a1a0d 0%,#3a250f 55%,#4a2f12 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  background:var(--bg);color:var(--text);
  font-family:'Mukta',sans-serif;font-weight:400;line-height:1.7;
  overflow-x:hidden;transition:background .4s ease,color .4s ease;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:1;
  background:
    radial-gradient(circle at 12% 12%,rgba(224,178,79,.18) 0,transparent 30%),
    radial-gradient(circle at 88% 88%,rgba(160,82,45,.12) 0,transparent 34%),
    linear-gradient(180deg,#f5ead2 0%,#efe1c4 100%);
  transition:opacity .4s;
}
[data-theme="dark"] body::before{
  opacity:1;
  background:
    radial-gradient(circle at 12% 12%,rgba(230,185,90,.08) 0,transparent 32%),
    radial-gradient(circle at 88% 88%,rgba(0,0,0,.25) 0,transparent 40%),
    linear-gradient(180deg,#190f08 0%,#1f130a 100%);
}
.urdu{font-family:'Noto Nastaliq Urdu',serif;direction:rtl;line-height:2.3}
h1,h2,h3,.serif{font-family:'Fraunces',serif}
.container{width:min(1180px,92%);margin-inline:auto}
section{padding:clamp(60px,9vw,110px) 0;position:relative}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:'Mukta',sans-serif;
  font-weight:600;font-size:.98rem;letter-spacing:.03em;cursor:pointer;border:none;
  padding:.85em 1.7em;border-radius:50px;transition:transform .25s,box-shadow .25s,background .3s;
  position:relative;text-transform:uppercase}
.btn-gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#2a1808;
  box-shadow:0 6px 22px -6px var(--gold)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 12px 30px -8px var(--gold)}
.btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--gold)}
.btn-outline:hover{background:var(--gold);color:#2a1808;transform:translateY(-3px)}
.btn-wa{background:#25d366;color:#fff;box-shadow:0 6px 22px -8px #25d366}
.btn-wa:hover{transform:translateY(-3px);box-shadow:0 12px 28px -8px #25d366}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:1000;
  background:var(--header-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);box-shadow:0 2px 18px -8px var(--shadow);
  transition:padding .3s,background .4s}
header.shrink{box-shadow:0 4px 22px -8px var(--shadow)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;transition:padding .3s}
header.shrink .nav{padding:7px 0}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer}
.brand img{height:54px;width:auto;transition:height .3s;filter:drop-shadow(0 2px 5px var(--shadow))}
header.shrink .brand img{height:44px}
.brand-name{display:flex;flex-direction:column;line-height:1}
.brand-name b{font-family:'Fraunces',serif;font-weight:700;font-size:1.28rem;letter-spacing:.04em;color:var(--brown)}
[data-theme="dark"] .brand-name b{color:var(--gold)}
.brand-name .urdu{font-size:.78rem;color:var(--gold);margin-top:3px}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{font-weight:500;font-size:.96rem;padding:.5em .9em;border-radius:30px;
  position:relative;color:var(--text-soft);transition:color .25s,background .25s}
.nav-links a:hover{color:var(--brown)}
[data-theme="dark"] .nav-links a:hover{color:var(--gold)}
.nav-links a::after{content:"";position:absolute;left:50%;bottom:4px;width:0;height:2px;
  background:var(--gold);transition:width .25s,left .25s;border-radius:2px}
.nav-links a:hover::after{width:46%;left:27%}
.nav-actions{display:flex;align-items:center;gap:10px}
.theme-toggle{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--border);
  background:var(--surface);color:var(--gold);cursor:pointer;display:grid;place-items:center;
  transition:transform .4s,background .3s}
.theme-toggle:hover{transform:rotate(25deg) scale(1.07)}
.theme-toggle svg{width:20px;height:20px}
.theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .moon{display:block}
.hamburger{display:none;flex-direction:column;gap:5px;width:42px;height:42px;border:none;
  background:transparent;cursor:pointer;align-items:center;justify-content:center}
.hamburger span{width:24px;height:2.5px;background:var(--text);border-radius:3px;transition:.3s}
.hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- hero / slider ---------- */
.hero{padding:0;margin-top:0}
.slider{position:relative;height:clamp(500px,72vh,640px);overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease;
  display:flex;align-items:center;justify-content:center}
.slide.active{opacity:1;visibility:visible;z-index:2}
.slide-design{background:var(--hero-grad)}
.slide-design::after{content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23b8860b' stroke-width='1'%3E%3Ccircle cx='60' cy='60' r='40'/%3E%3Ccircle cx='60' cy='60' r='26'/%3E%3Cpath d='M60 10v100M10 60h100M25 25l70 70M95 25l-70 70'/%3E%3C/g%3E%3C/svg%3E")}
.slide-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;
  width:min(1180px,92%);margin-inline:auto;position:relative;z-index:3}
.hero-copy .eyebrow{display:inline-block;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  font-size:.78rem;color:var(--sienna);border:1px solid var(--border);padding:.4em 1.1em;border-radius:30px;
  background:var(--surface);margin-bottom:18px}
.hero-copy h1{font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.18;font-weight:600;color:var(--brown)}
[data-theme="dark"] .hero-copy h1{color:var(--cream)}
.hero-copy .urdu-head{font-size:clamp(1.6rem,4vw,2.7rem);color:var(--brown);margin-bottom:6px;font-weight:700}
[data-theme="dark"] .hero-copy .urdu-head{color:var(--gold)}
.hero-copy .urdu-sub{font-size:clamp(1.2rem,2.6vw,1.7rem);color:var(--sienna)}
[data-theme="dark"] .hero-copy .urdu-sub{color:var(--gold-2)}
.hero-copy p.lead{margin:18px 0 26px;color:var(--text-soft);font-size:1.06rem;max-width:34ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-visual{display:grid;place-items:center}
.hero-visual img{width:min(380px,80%);filter:drop-shadow(0 24px 40px var(--shadow));border-radius:18px}
.hero-disc{position:relative}
.hero-disc::before{content:"";position:absolute;inset:-6% ;border-radius:50%;
  background:radial-gradient(circle,var(--gold-soft) 0,transparent 68%);z-index:-1}

/* banner image slide */
.slide-banner{background:#2a1a0d}
.slide-banner img{width:100%;height:100%;object-fit:cover}
.banner-hotspot{position:absolute;z-index:5;left:0;right:0;bottom:0;top:0;cursor:pointer;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:6%}
.banner-hotspot .btn{pointer-events:auto}
@media(min-width:1000px){.slide-banner img{object-position:center}}

/* slider controls */
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:8;
  width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;
  background:var(--surface);color:var(--gold);box-shadow:0 4px 16px var(--shadow);
  opacity:.85;transition:.25s}
.slider-arrow:hover{opacity:1;transform:translateY(-50%) scale(1.1)}
.slider-arrow.prev{left:18px}.slider-arrow.next{right:18px}
.slider-dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:8;
  display:flex;gap:10px}
.dot{width:11px;height:11px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.55);transition:.3s}
.dot.active{background:var(--gold-2);width:30px;border-radius:6px}

/* typing effect headings */
.typing-heading{position:relative;display:inline-block}
.typing-heading::after{content:"|";color:var(--gold);opacity:0;transition:opacity .1s}
.typing-heading.typing-active::after{opacity:1;animation:typingBlink .7s step-end infinite}
@keyframes typingBlink{0%,100%{opacity:1}50%{opacity:0}}

/* ---------- section headings ---------- */
.sec-head{text-align:center;margin-bottom:54px}
.sec-head .kicker{font-weight:600;letter-spacing:.24em;text-transform:uppercase;font-size:.8rem;
  color:var(--gold)}
.sec-head h2{font-size:clamp(1.8rem,4vw,2.7rem);font-weight:600;margin:8px 0 4px;color:var(--brown)}
[data-theme="dark"] .sec-head h2{color:var(--cream)}
.sec-head .urdu{font-size:1.25rem;color:var(--sienna)}
[data-theme="dark"] .sec-head .urdu{color:var(--gold-2)}
.ornament{width:80px;height:auto;margin:14px auto 0;display:block;color:var(--gold);opacity:.8}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.about-img{position:relative}
.about-img img{border-radius:20px;box-shadow:0 24px 50px -16px var(--shadow);width:100%}
.about-img .organic-badge{position:absolute;bottom:-26px;right:-20px;width:150px;height:auto;
  z-index:4;cursor:pointer;transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  animation:badgeFloat 4.5s ease-in-out infinite}
.about-img .organic-badge::before{content:"";position:absolute;inset:-18%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(46,160,67,.55) 0%,rgba(46,160,67,.18) 45%,transparent 72%);
  opacity:0;transform:scale(.7);transition:opacity .45s,transform .45s}
.about-img .organic-badge img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 10px 18px rgba(20,60,25,.28))}
.about-img .organic-badge:hover{transform:rotate(-6deg) scale(1.09);animation-play-state:paused}
.about-img .organic-badge:hover::before{opacity:1;transform:scale(1.05)}
@keyframes badgeFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.about-img .organic-badge{animation:none}}
.about-text h3{font-size:1.7rem;color:var(--brown);margin-bottom:12px;font-weight:600}
[data-theme="dark"] .about-text h3{color:var(--gold)}
.about-text p{color:var(--text-soft);margin-bottom:16px}
.about-text .urdu{font-size:1.18rem;color:var(--text);background:var(--surface-2);
  padding:18px 22px;border-radius:14px;border-right:4px solid var(--gold)}

/* ---------- products ---------- */
#products{background:var(--bg-2)}
.product-card{display:grid;grid-template-columns:.95fr 1.05fr;gap:0;background:var(--surface);
  border-radius:26px;overflow:hidden;box-shadow:0 30px 70px -30px var(--shadow);
  border:1px solid var(--border);max-width:1000px;margin-inline:auto}
.product-media{background:var(--hero-grad);display:grid;place-items:center;padding:34px 18px;position:relative;overflow:hidden}
.product-media .tag{position:absolute;top:22px;left:22px;z-index:6;background:var(--sienna);color:#fff;
  font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.45em 1em;border-radius:30px}

/* 3D coverflow gallery */
.cf{position:relative;width:100%;height:360px;display:flex;align-items:center;justify-content:center}
.cf-stage{position:relative;width:100%;height:100%;transform-style:preserve-3d;perspective:1100px}
.cf-item{position:absolute;top:50%;left:50%;width:200px;height:300px;
  transition:transform .6s cubic-bezier(.4,0,.2,1),opacity .6s,filter .6s;
  transform-origin:center center;will-change:transform;cursor:pointer}
.cf-item img{width:100%;height:100%;object-fit:contain;border-radius:14px;
  filter:drop-shadow(0 18px 30px rgba(40,20,8,.35))}
/* position classes set by JS */
.cf-item.pos-center{transform:translate(-50%,-50%) translateZ(80px) scale(1.12);opacity:1;z-index:5}
.cf-item.pos-left{transform:translate(-50%,-50%) translateX(-118px) translateZ(-40px) rotateY(38deg) scale(.82);opacity:.62;z-index:3}
.cf-item.pos-right{transform:translate(-50%,-50%) translateX(118px) translateZ(-40px) rotateY(-38deg) scale(.82);opacity:.62;z-index:3}
.cf-item.pos-hide{transform:translate(-50%,-50%) translateZ(-200px) scale(.6);opacity:0;z-index:1;pointer-events:none}
.cf-item.pos-left img,.cf-item.pos-right img{filter:drop-shadow(0 10px 18px rgba(40,20,8,.3)) brightness(.82)}
.cf-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:8;width:44px;height:44px;
  border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;
  background:var(--surface);color:var(--gold);box-shadow:0 5px 16px rgba(40,20,8,.25);
  transition:transform .25s,background .25s}
.cf-arrow:hover{transform:translateY(-50%) scale(1.12);background:var(--gold);color:#2a1808}
.cf-prev{left:4px}.cf-next{right:4px}
.cf-dots{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:8}
.cf-dot{width:9px;height:9px;border-radius:50%;border:none;cursor:pointer;background:rgba(107,63,29,.3);transition:.3s}
[data-theme="dark"] .cf-dot{background:rgba(230,185,90,.35)}
.cf-dot.active{background:var(--gold);width:24px;border-radius:5px}

.product-info{padding:clamp(26px,4vw,46px)}
.product-info h3{font-size:2.1rem;color:var(--brown);font-weight:700}
[data-theme="dark"] .product-info h3{color:var(--gold)}
.product-info .urdu{font-size:1.15rem;color:var(--sienna);margin-bottom:14px}
.product-info>p{color:var(--text-soft);margin-bottom:18px}
.stars{color:var(--gold);letter-spacing:2px;margin-bottom:6px}
.ingredients{margin:18px 0}
.ingredients .lbl,.variant .lbl{font-weight:600;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px}

/* ingredients table */
.ing-table{width:100%;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}
.ing-row{display:flex;align-items:stretch;border-bottom:1px solid var(--border)}
.ing-extra .ing-row:last-child{border-bottom:none}
.ing-table>.ing-row:last-child{border-bottom:none}
.ing-cat{flex:0 0 110px;display:flex;align-items:center;background:var(--surface-2);color:var(--brown);
  font-family:'Fraunces',serif;font-weight:600;font-size:.84rem;letter-spacing:.03em;
  padding:12px 14px;border-right:1px solid var(--border)}
[data-theme="dark"] .ing-cat{color:var(--gold-2)}
.ing-cell{flex:1;display:flex;flex-wrap:wrap;gap:7px;padding:11px 14px}
.ing{display:inline-flex;align-items:center;gap:.3em;background:var(--bg);border:1px solid var(--border);
  color:var(--text);font-size:.83rem;font-weight:500;padding:.32em .8em;border-radius:30px}
.ing i{font-style:normal;color:var(--muted);font-size:.78rem}
.ing-shakar.removed{text-decoration:line-through;opacity:.55;background:transparent}
.ing-shakar.removed i{text-decoration:line-through}
.ing-shakar.removed::after{content:"removed";text-decoration:none;margin-left:.4em;font-size:.66rem;
  color:#c0392b;font-weight:700;letter-spacing:.04em}
/* collapsible */
.ing-extra{max-height:0;opacity:0;overflow:hidden;transition:max-height .55s ease,opacity .4s ease}
.ing-extra.open{max-height:700px;opacity:1}
.ing-toggle{margin-top:12px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:transparent;border:1.5px solid var(--gold);color:var(--gold);font-family:'Mukta',sans-serif;
  font-weight:600;font-size:.86rem;padding:.55em 1.2em;border-radius:30px;transition:.25s}
.ing-toggle:hover{background:var(--gold);color:#2a1808}
.ing-toggle svg{transition:transform .35s}
.ing-toggle.open svg{transform:rotate(180deg)}

/* variant selector */
.variant{margin:20px 0}
.variant-opts{display:flex;gap:10px;flex-wrap:wrap}
.vopt{cursor:pointer;background:var(--surface);border:1.5px solid var(--border);color:var(--text-soft);
  font-family:'Mukta',sans-serif;font-weight:600;font-size:.9rem;padding:.65em 1.2em;border-radius:12px;
  transition:.25s;display:inline-flex;flex-direction:column;line-height:1.2;align-items:flex-start}
.vopt small{font-weight:500;font-size:.72rem;color:var(--muted)}
.vopt:hover{border-color:var(--gold)}
.vopt.active{border-color:var(--gold);background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#2a1808}
.vopt.active small{color:#3a2408}
.variant-note{margin-top:10px;font-size:.86rem;color:var(--sienna);min-height:1.1em;font-weight:500}
[data-theme="dark"] .variant-note{color:var(--gold-2)}

.price-row{display:flex;align-items:center;gap:16px;margin:22px 0;flex-wrap:wrap}
.price{font-family:'Fraunces',serif;font-size:2rem;font-weight:700;color:var(--brown)}
[data-theme="dark"] .price{color:var(--gold-2)}
.price small{font-size:.95rem;color:var(--muted);text-decoration:line-through;font-weight:400;margin-left:8px}
.weight{background:var(--surface-2);border:1px solid var(--border);color:var(--text-soft);
  font-size:.82rem;font-weight:600;padding:.35em .9em;border-radius:30px}
.in-stock{font-size:.86rem;color:#2e8b57;font-weight:600;display:flex;align-items:center;gap:6px}
.in-stock::before{content:"";width:9px;height:9px;border-radius:50%;background:#2e8b57}
.product-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- why us ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.feat-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:32px 24px;text-align:center;transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden;
  box-shadow:0 12px 30px -22px var(--shadow)}
.feat-card:hover{transform:translateY(-8px);box-shadow:0 24px 44px -20px var(--shadow)}
.feat-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--gold-2),var(--gold))}
.feat-icon{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold-soft),transparent);color:var(--gold)}
[data-theme="dark"] .feat-icon{background:linear-gradient(135deg,#3a2810,transparent)}
.feat-icon svg{width:30px;height:30px}
.feat-card h4{font-family:'Fraunces',serif;font-size:1.18rem;color:var(--brown);margin-bottom:8px;font-weight:600}
[data-theme="dark"] .feat-card h4{color:var(--gold-2)}
.feat-card .urdu{font-size:.95rem;color:var(--gold);margin-bottom:8px}
.feat-card p{font-size:.92rem;color:var(--text-soft)}

/* ---------- contact ---------- */
#contact{background:var(--bg-2)}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:46px;align-items:stretch}
.contact-info{background:linear-gradient(150deg,var(--brown),var(--sienna));color:var(--cream);
  border-radius:22px;padding:40px;display:flex;flex-direction:column;gap:22px;position:relative;overflow:hidden}
[data-theme="dark"] .contact-info{background:linear-gradient(150deg,#3a250f,#5a3318)}
.contact-info h3{color:var(--cream);font-size:1.6rem;font-weight:600}
.contact-info .urdu{font-size:1.05rem;opacity:.9}
.ci-item{display:flex;align-items:center;gap:14px;font-size:1rem}
.ci-item svg{width:22px;height:22px;flex-shrink:0;color:var(--gold-2)}
.ci-item a:hover{color:var(--gold-2)}
.ci-socials{display:flex;gap:12px;margin-top:4px}
.ci-socials a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:var(--cream);transition:.25s}
.ci-socials a:hover{background:var(--gold-2);color:#2a1808;transform:translateY(-3px)}
.ci-socials svg{width:18px;height:18px}
.contact-form{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:36px}
.field{margin-bottom:18px}
.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:7px;color:var(--text-soft)}
.field input,.field textarea{width:100%;padding:13px 16px;border-radius:12px;border:1.5px solid var(--border);
  background:var(--bg);color:var(--text);font-family:'Mukta',sans-serif;font-size:.97rem;transition:border .25s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.field textarea{resize:vertical;min-height:110px}
.form-msg{display:none;margin-top:14px;padding:13px 16px;border-radius:12px;background:#e6f6ec;
  color:#1d7a45;font-weight:600;font-size:.92rem;border:1px solid #b9e3c9}
.form-msg.show{display:block;animation:pop .4s}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}

/* ---------- footer ---------- */
footer{background:var(--surface);border-top:1px solid var(--border);padding:54px 0 22px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:40px;margin-bottom:34px}
.foot-brand img{height:74px;margin-bottom:14px}
.foot-brand .urdu{color:var(--gold);font-size:1.05rem}
.foot-brand p{color:var(--text-soft);font-size:.92rem;margin-top:10px;max-width:32ch}
.foot-col h5{font-family:'Fraunces',serif;font-size:1.05rem;color:var(--brown);margin-bottom:16px;font-weight:600}
[data-theme="dark"] .foot-col h5{color:var(--gold-2)}
.foot-col a{display:block;color:var(--text-soft);padding:5px 0;font-size:.94rem;transition:color .2s,padding .2s}
.foot-col a:hover{color:var(--gold);padding-left:6px}
.socials{display:flex;gap:12px;margin-top:8px}
.socials a{width:42px;height:42px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;
  color:var(--text-soft);transition:.25s}
.socials a:hover{background:var(--gold);color:#2a1808;transform:translateY(-3px);border-color:var(--gold)}
.socials svg{width:19px;height:19px}
.foot-bottom{border-top:1px solid var(--border);padding-top:20px;text-align:center;
  color:var(--muted);font-size:.86rem}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- floating whatsapp ---------- */
.wa-float{position:fixed;right:22px;bottom:24px;z-index:1100;display:flex;align-items:center;gap:0;
  height:60px;width:60px;border-radius:32px;background:#25d366;color:#fff;
  box-shadow:0 10px 30px -6px rgba(37,211,102,.6);overflow:hidden;
  transition:width .35s ease,box-shadow .3s;padding-left:18px}
.wa-float svg{width:30px;height:30px;flex-shrink:0}
.wa-float-label{white-space:nowrap;font-weight:600;font-size:.95rem;opacity:0;width:0;
  margin-left:0;transition:opacity .3s,margin .3s}
.wa-float:hover{width:236px;box-shadow:0 14px 36px -6px rgba(37,211,102,.7)}
.wa-float:hover .wa-float-label{opacity:1;margin-left:12px}
.wa-float-ring{position:absolute;inset:0;border-radius:32px;border:2px solid #25d366;
  animation:waPulse 2.4s ease-out infinite;pointer-events:none}
@keyframes waPulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
@media(max-width:760px){
  .wa-float{height:54px;width:54px;right:16px;bottom:18px;padding-left:15px}
  .wa-float svg{width:27px;height:27px}
  .wa-float:hover{width:54px}
  .wa-float:hover .wa-float-label{opacity:0;margin-left:0}
}
@media(prefers-reduced-motion:reduce){.wa-float-ring{animation:none}}

/* ---------- mobile performance ---------- */
@media(max-width:760px){
  /* disable expensive backdrop-filter on mobile */
  header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--header-bg)}
  /* remove fixed decorative background — causes repaint on every scroll */
  body::before{position:absolute;height:300px}
  /* disable slide pattern overlay — GPU expensive */
  .slide-design::after{display:none}
  /* disable floating badge animation on mobile */
  .about-img .organic-badge{animation:none}
  /* remove hover-only transforms that fire on tap */
  .feat-card:hover{transform:none;box-shadow:0 12px 30px -22px var(--shadow)}
  .btn-gold:hover,.btn-outline:hover,.btn-wa:hover{transform:none}
  /* flat coverflow on mobile — no 3D transforms */
  .cf-stage{transform-style:flat;perspective:none}
  .cf-item{transition:opacity .4s ease}
  .cf-item.pos-center{transform:translate(-50%,-50%) scale(1);opacity:1;z-index:5}
  .cf-item.pos-left,.cf-item.pos-right,.cf-item.pos-hide{transform:translate(-50%,-50%) scale(1);opacity:0;z-index:1;pointer-events:none}
  .cf-item.pos-left img,.cf-item.pos-right img{filter:none}
  /* reduce reveal animation distance */
  .reveal{transform:translateY(16px)}
  /* contain paint within slider */
  .slider{contain:layout style paint}
}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .product-card{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .slide-inner{grid-template-columns:1fr;text-align:center;gap:14px}
  .hero-cta{justify-content:center}
  .hero-copy p.lead{margin-inline:auto}
  .hero-visual{order:-1}
  .hero-visual img{width:min(180px,42%)}
  .slider{height:clamp(480px,82vh,560px)}
  .ci-socials{justify-content:center}
  .contact-info{align-items:center;text-align:center}
  .ci-item{justify-content:center}
  .product-info{padding:28px 24px}
}
@media(max-width:760px){
  .nav-links{position:fixed;top:0;right:-100%;height:100vh;width:min(78%,320px);
    flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;
    background:var(--surface);padding:96px 28px;box-shadow:-12px 0 40px var(--shadow);
    transition:right .4s ease;z-index:999}
  .nav-links.open{right:0}
  .nav-links a{width:100%;font-size:1.05rem;padding:.8em 0;border-bottom:1px solid var(--border)}
  .nav-links a::after{display:none}
  .hamburger{display:flex}
  .nav-actions .btn-gold{display:none}
  .foot-grid{grid-template-columns:1fr;gap:30px;text-align:center}
  .foot-brand img,.foot-brand .urdu{margin-inline:auto}
  .foot-brand p{margin-inline:auto}
  .socials{justify-content:center}
  .feat-grid{grid-template-columns:1fr}
  .slider-arrow{display:none}
  .product-media{padding:24px 10px}
  .product-info{padding:22px 18px}
  .product-info h3{font-size:1.6rem}
  .product-actions{flex-direction:column}
  .product-actions .btn{width:100%;justify-content:center}
  .price-row{gap:10px}
  .cf{height:300px}
  .cf-item{width:160px;height:240px}
  .cf-item.pos-left{transform:translate(-50%,-50%) translateX(-92px) translateZ(-40px) rotateY(38deg) scale(.8)}
  .cf-item.pos-right{transform:translate(-50%,-50%) translateX(92px) translateZ(-40px) rotateY(-38deg) scale(.8)}
  .about-grid{gap:34px}
  .about-img .organic-badge{width:112px;right:2px;bottom:-18px}
  .about-text h3{font-size:1.35rem}
  .slider{height:clamp(420px,78vh,500px)}
  .slide{padding:0 6px}
  .hero-copy .eyebrow{margin-bottom:10px;font-size:.7rem}
  .hero-copy p.lead{display:none}
  .hero-visual img{width:min(150px,38%)}
  .slide-banner{background:var(--hero-grad)}
  .slide-banner img{object-fit:contain;padding:54px 10px 24px}
  .ing-row{flex-direction:column}
  .ing-cat{flex:none;width:100%;border-right:none;border-bottom:1px solid var(--border);padding:8px 12px}
  .ing-cell{padding:10px 12px}
  .vopt{flex:1}
  .contact-form{padding:22px 18px}
  .feat-card{padding:24px 18px}
  .sec-head{margin-bottom:36px}
  section{padding:clamp(44px,8vw,80px) 0}
}
@media(max-width:420px){
  .brand-name b{font-size:1.06rem}
  .brand img{height:44px}
  .hero-visual img{width:min(120px,34%)}
  .slide-inner{gap:10px}
  .feat-grid{gap:14px}
  .feat-card{padding:20px 14px}
  .contact-grid{gap:22px}
  .cf-item{width:130px;height:200px}
  .cf-item.pos-left{transform:translate(-50%,-50%) translateX(-74px) translateZ(-40px) rotateY(38deg) scale(.78)}
  .cf-item.pos-right{transform:translate(-50%,-50%) translateX(74px) translateZ(-40px) rotateY(-38deg) scale(.78)}
}
.nav-overlay{position:fixed;inset:0;background:rgba(20,10,4,.45);z-index:998;opacity:0;
  visibility:hidden;transition:.3s}
.nav-overlay.show{opacity:1;visibility:visible}