/* Main site styles (home, about, products, gallery, contact). Loaded by index.html and about.html. */
:root{
  --ivory:#F6EFDD;
  --parchment:#EFE2C0;
  --parchment-deep:#E5D3A3;
  --gold:#B8862C;
  --gold-deep:#8C6318;
  --gold-light:#E7C77E;
  --ink:#2A2015;
  --ink-soft:#6B5B42;
  --cream-white:#FFFCF5;
  --danger:#9A3324;
  --ok:#3E6B3A;
  --shadow: 0 10px 30px rgba(42,32,21,0.12);
  --radius: 14px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
@font-face{
  font-family:'Jameel Noori Nastaleeq';
  src:url('/fonts/jameel-noori-nastaleeq.woff2') format('woff2');
  font-display:swap;
  size-adjust:125%;
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F;
}
/* Urdu mode: Jameel Noori for all Urdu text; Latin text and numbers fall through to Inter.
   Letter-spacing breaks Nastaleeq joins, so it is reset. */
body[data-lang="ur"], body[data-lang="ur"] *{ font-family:'Jameel Noori Nastaleeq','Noto Sans Urdu','Inter',sans-serif !important; letter-spacing:0 !important; }
body[data-lang="ur"]{ line-height:2; }
body[data-lang="ur"] h1, body[data-lang="ur"] h2, body[data-lang="ur"] h3, body[data-lang="ur"] h4{ line-height:1.7; }
#app[dir="rtl"]{ direction:rtl; text-align:right; }
#app[dir="rtl"] .contact-row,
#app[dir="rtl"] .about-list li,
#app[dir="rtl"] .cart-item,
#app[dir="rtl"] .summary-row,
#app[dir="rtl"] .value-icon{ flex-direction:row-reverse; }
#app[dir="rtl"] .cart-item > div:last-child{ text-align:left; }
#app[dir="rtl"] .qty-row{ flex-direction:row-reverse; justify-content:center; }
#app[dir="rtl"] .field label{ text-align:right; }
#app[dir="rtl"] .btn-row,
#app[dir="rtl"] .cat-tabs{ direction:ltr; } /* keep button/tab rows in a natural tap order */
h1,h2,h3,.display{
  font-family:'Fraunces',serif;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--ink);
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
img{max-width:100%;display:block;}
.container{max-width:1160px;margin:0 auto;padding:0 24px;}
.hidden{display:none !important;}

/* HEADER */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(246,239,221,0.68);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,0.45);
  box-shadow:0 4px 24px rgba(140,99,24,0.07);
}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;gap:16px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{height:48px;width:auto;}
.brand-text{font-family:'Fraunces',serif;font-weight:800;font-size:1.05rem;line-height:1.1;color:var(--gold-deep);}
.brand-text small{display:block;font-family:'Inter';font-weight:600;font-size:0.62rem;letter-spacing:0.14em;color:var(--ink-soft);text-transform:uppercase;}
nav.links{display:flex;gap:28px;align-items:center;}
nav.links a{font-weight:600;font-size:0.92rem;color:var(--ink);padding:6px 2px;border-bottom:2px solid transparent;transition:.2s;}
nav.links a.active,nav.links a:hover{border-bottom-color:var(--gold);color:var(--gold-deep);}
.nav-actions{display:flex;align-items:center;gap:14px;}
.lang-toggle{
  display:flex;border:1.5px solid var(--gold-deep);border-radius:999px;overflow:hidden;font-size:0.78rem;font-weight:700;
}
.lang-toggle button{border:none;background:transparent;padding:6px 12px;color:var(--gold-deep);}
.lang-toggle button.active{background:var(--gold-deep);color:var(--cream-white);}
.cart-btn{position:relative;background:var(--gold);color:var(--cream-white);border:none;border-radius:999px;padding:9px 16px;font-weight:700;font-size:0.85rem;display:flex;align-items:center;gap:8px;}
.cart-btn:hover{background:var(--gold-deep);}
.cart-btn[hidden]{display:none;}
.cart-count{background:var(--ink);color:var(--cream-white);border-radius:999px;font-size:0.68rem;padding:1px 7px;min-width:18px;text-align:center;}
.menu-toggle{display:none;background:none;border:none;font-size:1.4rem;color:var(--gold-deep);}

/* SPLASH DIVIDER (signature element) */
.splash-divider{width:100%;height:46px;display:block;margin-top:-1px;}

/* ===== MOTION: intro loader, floating drops, scroll-reveal, flying-drop, shimmer ===== */
@keyframes dropFall{
  0%{ transform:translate(-50%,-130px) rotate(45deg) scale(0.5); opacity:0; }
  55%{ opacity:1; }
  82%{ transform:translate(-50%,64px) rotate(45deg) scale(1); opacity:1; }
  100%{ transform:translate(-50%,64px) rotate(45deg) scale(0.25); opacity:0; }
}
@keyframes splashRing{
  0%{ transform:translateX(-50%) scale(0.2); opacity:0.85; }
  100%{ transform:translateX(-50%) scale(3.4); opacity:0; }
}
@keyframes logoReveal{
  0%{ clip-path:circle(0% at 50% 50%); opacity:0.3; transform:translate(-50%,-50%) scale(0.92); }
  100%{ clip-path:circle(75% at 50% 50%); opacity:1; transform:translate(-50%,-50%) scale(1); }
}
@keyframes introTextIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
@keyframes floatDrop{
  0%{ transform:translateY(0) translateX(0) rotate(45deg); opacity:0; }
  12%{ opacity:0.55; }
  50%{ transform:translateY(-150px) translateX(10px) rotate(45deg); }
  88%{ opacity:0.32; }
  100%{ transform:translateY(-300px) translateX(-8px) rotate(45deg); opacity:0; }
}
@keyframes cartBump{ 0%{transform:scale(1);} 45%{transform:scale(1.2);} 100%{transform:scale(1);} }
@keyframes splashBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(4px);} }
@keyframes idlePulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(184,134,44,0);} 50%{ box-shadow:0 0 0 7px rgba(184,134,44,0.16);} }
@keyframes rippleAnim{ to{ transform:scale(2.8); opacity:0; } }

.intro-overlay{
  position:fixed;inset:0;z-index:999;background:#D6D6D6;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
.intro-overlay.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.intro-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.intro-skip{
  position:absolute; right:18px; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:2;
  border:none; border-radius:999px; padding:10px 20px; cursor:pointer;
  background:rgba(42,32,21,0.72); color:#fff; font:700 0.85rem 'Inter',sans-serif;
}
@media (orientation:portrait){
  /* a tall phone shows the middle of the wide video, faded into the backdrop above and below */
  .intro-video{
    position:relative; inset:auto; width:100vw; height:100vw; max-height:72vh;
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);
    mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);
  }
}

.floating-drops{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.fdrop{
  position:absolute; bottom:-20px; width:9px; height:9px;
  background:radial-gradient(circle at 30% 30%, var(--gold-light), var(--gold));
  border-radius:50% 50% 50% 0; transform:rotate(45deg); opacity:0;
  animation:floatDrop linear infinite;
}

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }

.flying-drop{
  position:fixed; width:16px; height:16px; border-radius:50% 50% 50% 0;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-deep));
  transform:rotate(45deg); z-index:500; pointer-events:none;
  box-shadow:0 4px 10px rgba(140,99,24,0.35);
  transition:transform .6s cubic-bezier(.3,.6,.3,1), opacity .6s ease;
}
.cart-btn.bump{ animation:cartBump .3s ease; }
.splash-divider{ animation:splashBob 4.5s ease-in-out infinite; }
.cart-btn{ animation:idlePulse 3.6s ease-in-out infinite; }
.wa-btn{ animation:idlePulse 3.6s ease-in-out infinite; }
.ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,0.55); transform:scale(0); animation:rippleAnim .6s ease-out forwards; pointer-events:none; }

@media (prefers-reduced-motion: reduce){
  .intro-overlay{ display:none !important; }
  .fdrop{ display:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .flying-drop{ display:none !important; }
  .cart-btn.bump{ animation:none !important; }
  .splash-divider,.cart-btn,.wa-btn{ animation:none !important; }
  .ripple{ display:none !important; }
}

/* HERO */
.hero{padding:64px 0 0;background:var(--ivory);position:relative;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:center;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:0.72rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold-deep);background:var(--gold-light);padding:6px 14px;border-radius:999px;margin-bottom:18px;}
.hero h1{font-size:clamp(2.3rem,4.2vw,3.6rem);line-height:1.06;margin-bottom:20px;}
.hero h1 em{font-style:normal;color:var(--gold);}
.hero p.lead b{color:var(--ink);}
.hero p.lead{font-size:1.08rem;color:var(--ink-soft);max-width:480px;margin-bottom:30px;}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-weight:700;font-size:0.95rem;border:2px solid transparent;transition:background .2s, transform .2s, box-shadow .2s;position:relative;overflow:hidden;}
.btn-primary{background:var(--gold);color:var(--cream-white);position:relative;overflow:hidden;}
.btn-primary:hover{background:var(--gold-deep);transform:translateY(-2px);box-shadow:0 10px 24px rgba(140,99,24,0.3);}
.btn-primary::after{content:'';position:absolute;top:0;left:-60%;width:35%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,0.55),transparent);transform:skewX(-20deg);transition:left .6s ease;}
.btn-primary:hover::after{left:130%;}
.btn-outline{border-color:var(--gold-deep);color:var(--gold-deep);}
.btn-outline:hover{background:var(--gold-deep);color:var(--cream-white);}
.hero-img-wrap{position:relative;perspective:800px;display:flex;align-items:center;justify-content:center;}
.hero-img-wrap::before{
  content:'';position:absolute;inset:6% 8%;
  background:radial-gradient(circle, rgba(184,134,44,0.28) 0%, rgba(184,134,44,0.12) 45%, transparent 72%);
  filter:blur(18px); z-index:0; pointer-events:none;
}
.hero-img-wrap img{
  max-width:100%;height:auto;
  filter:drop-shadow(0 18px 30px rgba(140,99,24,0.28));
}
.hero-can{transition:transform .25s ease-out;transform-style:preserve-3d;}
/* tap the can: a splash video plays exactly on top of the picture, then fades back to it */
.hero-can{position:relative;z-index:1;display:block;max-width:100%;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.hero-can img{display:block;}
.hero-can video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;pointer-events:none;
  transition:opacity .35s ease;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 80%,transparent 100%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 80%,transparent 100%);
}
.hero-can.playing video{opacity:1;}
.can-hint{position:absolute;top:6%;right:4%;z-index:2;background:var(--cream-white);border:1px solid var(--gold-light);color:var(--gold-deep);border-radius:999px;padding:5px 12px;font-size:0.7rem;font-weight:700;box-shadow:var(--shadow);pointer-events:none;transition:opacity .3s;}
.hero-can.playing ~ .can-hint,.hero-img-wrap.played .can-hint{opacity:0;}
.plaque{position:absolute;bottom:2%;right:2%;background:var(--cream-white);border:1px solid var(--gold-light);padding:10px 16px;border-radius:10px;box-shadow:var(--shadow);font-size:0.72rem;z-index:2;}
.plaque b{display:block;font-family:'Fraunces';font-size:0.85rem;color:var(--gold-deep);}

/* VALUE STRIP */
.value-strip{background:var(--parchment);padding:56px 0;}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.value-card{background:var(--cream-white);border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow);border:1px solid rgba(184,134,44,0.15);transition:transform .3s ease, box-shadow .3s ease;}
.value-card:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(184,134,44,0.24);}
.value-icon{width:46px;height:46px;margin-bottom:14px;}
.value-card h3{font-size:1.08rem;margin-bottom:8px;}
.value-card p{color:var(--ink-soft);font-size:0.92rem;margin:0;}

/* SECTION GENERIC */
section.page-section{padding:72px 0;}
.section-head{max-width:640px;margin:0 auto 44px;text-align:center;}
.section-head .eyebrow{margin-bottom:14px;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:12px;}
.section-head p{color:var(--ink-soft);font-size:1rem;}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:center;}
.about-grid img{filter:drop-shadow(0 16px 26px rgba(140,99,24,0.22));max-width:100%;height:auto;}
.about-title{font-size:clamp(1.9rem,4vw,2.6rem);margin:0 0 8px;line-height:1.2;}
.about-tag{font-weight:700;color:var(--gold-deep);font-size:1.05rem;margin:0 0 16px;}
.about-roman{color:var(--ink);font-weight:500;margin-top:12px;padding-inline-start:14px;border-inline-start:3px solid var(--gold-light);}
.about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:56px 0 0;}
.about-stats div{background:var(--ink);color:var(--gold-light);border-radius:16px;padding:18px 12px;text-align:center;font-size:0.82rem;font-weight:600;}
.about-stats b{display:block;font-family:'Fraunces',serif;font-size:1.7rem;line-height:1.2;color:#fff;}
.about-block{margin-top:56px;}
.about-block h2,.about-cta h2{font-size:1.6rem;margin:0 0 6px;}
.about-sub{color:var(--ink-soft);margin:0 0 20px;}
.about-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.about-cards.four{grid-template-columns:repeat(4,1fr);}
.about-card{background:var(--cream-white);border-radius:16px;padding:18px;box-shadow:0 8px 22px rgba(42,32,21,0.08);}
.about-card h3{font-size:1.05rem;margin:8px 0 4px;}
.about-card p{margin:0;font-size:0.88rem;color:var(--ink-soft);}
.about-ico{font-size:1.6rem;}
.about-more{font-weight:700;color:var(--gold-deep);text-decoration:underline;}
.about-faq details{background:var(--cream-white);border-radius:14px;padding:14px 18px;margin-top:10px;box-shadow:0 6px 16px rgba(42,32,21,0.06);}
.about-faq summary{font-weight:700;cursor:pointer;color:var(--ink);}
.about-faq p{margin:10px 0 0;color:var(--ink-soft);font-size:0.95rem;}
.about-cta{margin-top:56px;text-align:center;background:var(--parchment);border-radius:20px;padding:32px 20px;}
.about-cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:16px;}
@media (max-width:860px){
  .about-stats{grid-template-columns:repeat(2,1fr);}
  .about-cards,.about-cards.four{grid-template-columns:repeat(2,1fr);}
  .about-block,.about-cta,.about-stats{margin-top:40px;}
}
.about-list{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:14px;}
.about-list li{display:flex;gap:12px;align-items:flex-start;font-size:0.95rem;color:var(--ink-soft);}
.about-list li b{color:var(--ink);}
.check{flex:none;width:22px;height:22px;border-radius:50%;background:var(--gold-light);color:var(--gold-deep);display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:800;}

/* PRODUCTS */
.cat-tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:38px;}
.cat-tab{padding:9px 18px;border-radius:999px;border:1.5px solid var(--gold-deep);color:var(--gold-deep);font-weight:700;font-size:0.85rem;background:transparent;}
.cat-tab.active{background:var(--gold-deep);color:var(--cream-white);}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;}
.product-card{background:var(--cream-white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(184,134,44,0.15);display:flex;flex-direction:column;transition:transform .3s ease, box-shadow .3s ease;}
.product-card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(184,134,44,0.28);}
.product-emoji{font-size:2.1rem;margin-bottom:10px;}
.product-img{aspect-ratio:4/3;background:var(--parchment-deep);overflow:hidden;}
.product-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.product-card:hover .product-img img{transform:scale(1.05);}
.product-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;}
.product-tag{align-self:flex-start;font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-deep);background:var(--parchment-deep);border-radius:999px;padding:3px 10px;margin-bottom:8px;}
.product-price small{display:block;font:600 .74rem/1.45 Inter,sans-serif;color:var(--ink-soft);margin-top:3px;}
.product-price .per{font-size:.65em;font-weight:600;color:var(--ink-soft);}
.qty-row label{font-size:.78rem;font-weight:700;color:var(--ink-soft);}
.qty-milk{gap:8px;}
.qty-milk label{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0;}
.qty-milk input{width:100%;font-size:16px;padding:7px 4px;}
/* the mandi rate that milk is billed at right now */
.mandi-now{max-width:760px;margin:0 auto 26px;background:var(--ink);color:var(--gold-light);border-radius:var(--radius);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;box-shadow:var(--shadow);}
.mandi-now small{display:block;font-size:.76rem;font-weight:700;opacity:.85;}
.mandi-now b{font:800 1.7rem Fraunces,serif;color:#fff;}
.mandi-now b span{font:600 .8rem Inter,sans-serif;color:var(--gold-light);}
.mandi-now p{margin:4px 0 0;font-size:.74rem;opacity:.8;}
.mandi-now a{color:var(--ink);background:var(--gold-light);border-radius:999px;padding:9px 16px;font-weight:800;font-size:.82rem;white-space:nowrap;}
.mandi-now.off{background:var(--parchment-deep);color:var(--ink);}
.cart-item-rate{font-size:.78rem;color:var(--ink-soft);}
.product-card h3{font-size:1.03rem;margin-bottom:2px;}
.product-card .unit{font-size:0.78rem;color:var(--ink-soft);margin-bottom:10px;}
.product-price{font-family:'Fraunces';font-weight:700;color:var(--gold-deep);font-size:1.15rem;margin-bottom:14px;}
.product-price.rate-note{font-size:0.85rem;font-family:'Inter';font-weight:700;color:var(--ink-soft);}
.qty-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
@media (max-width:560px){
  .product-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .product-body{padding:12px 12px 14px;}
  .product-card h3{font-size:.95rem;}
  .product-price{font-size:1.05rem;}
  .qty-row:not(.qty-milk) label{display:none;}
  .other-card{grid-column:1/-1;}
  .mandi-now{padding:14px 16px;}
  .mandi-now b{font-size:1.45rem;}
}
.qty-row button{width:30px;height:30px;border-radius:8px;border:1.5px solid var(--gold-light);background:var(--ivory);font-weight:800;color:var(--gold-deep);}
.qty-row input{width:48px;text-align:center;border:1.5px solid var(--gold-light);border-radius:8px;padding:5px;font-weight:700;background:var(--ivory);}
.add-cart-btn{margin-top:auto;background:var(--gold);color:var(--cream-white);border:none;border-radius:999px;padding:11px;font-weight:700;font-size:0.88rem;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;}
.add-cart-btn:hover{background:var(--gold-deep);}
.other-card{padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--parchment-deep);}

/* CART */
.cart-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start;}
.cart-item{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid rgba(184,134,44,0.18);gap:14px;}
.cart-item-name{font-weight:700;}
.cart-item-unit{font-size:0.8rem;color:var(--ink-soft);}
.cart-item-remove{background:none;border:none;color:var(--danger);font-size:0.8rem;font-weight:700;}
.summary-card,.form-card{background:var(--cream-white);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);border:1px solid rgba(184,134,44,0.15);}
.summary-row{display:flex;justify-content:space-between;padding:6px 0;font-size:0.92rem;}
.summary-row.total{font-weight:800;font-size:1.1rem;border-top:1px solid rgba(184,134,44,0.25);margin-top:10px;padding-top:14px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:0.8rem;font-weight:700;margin-bottom:6px;color:var(--ink-soft);}
.field input,.field textarea,.field select{width:100%;padding:11px 13px;border:1.5px solid var(--gold-light);border-radius:10px;background:var(--ivory);font-family:inherit;font-size:0.92rem;color:var(--ink);}
.field textarea{resize:vertical;min-height:70px;}
.empty-state{text-align:center;padding:60px 20px;color:var(--ink-soft);}
.empty-state .big-emoji{font-size:3rem;margin-bottom:14px;}

/* DELIVERY / TRUCK VIDEO */

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.map-link{display:inline-block;margin-top:6px;font-weight:700;font-size:0.85rem;color:var(--gold-deep);text-decoration:underline;}
.map-card{margin-top:40px;background:var(--cream-white);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;}
.map-card h3{margin-bottom:14px;}
.map-card iframe{display:block;width:100%;height:380px;border:0;border-radius:12px;}
@media (max-width:760px){ .map-card iframe{height:300px;} }
.contact-info-card{background:var(--cream-white);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);border:1px solid rgba(184,134,44,0.15);}
.contact-row{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px;}
.contact-icon{flex:none;width:42px;height:42px;border-radius:12px;background:var(--gold-light);display:flex;align-items:center;justify-content:center;font-size:1.15rem;}
.contact-row h4{margin:0 0 4px;font-size:0.95rem;}
.contact-row p{margin:0;color:var(--ink-soft);font-size:0.9rem;}
.wa-btn{display:inline-flex;align-items:center;gap:8px;background:#3E6B3A;color:#fff;padding:12px 20px;border-radius:999px;font-weight:700;font-size:0.9rem;margin-top:6px;}

/* FOOTER */
footer{background:var(--ink);color:var(--parchment);padding:50px 0 24px;margin-top:20px;}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1fr;gap:36px;margin-bottom:34px;}
footer h4{font-family:'Fraunces';font-size:1rem;color:var(--gold-light);margin-bottom:14px;}
footer p, footer a{color:#D9CBA8;font-size:0.88rem;}
footer .flogo{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
footer .flogo img{height:40px;border-radius:6px;}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;}
.footer-bottom{border-top:1px solid rgba(217,203,168,0.2);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:0.78rem;color:#B7A87F;}
.footer-bottom a{text-decoration:underline;}

.mini-btn{padding:6px 12px;border-radius:8px;border:1.5px solid var(--gold-deep);background:transparent;color:var(--gold-deep);font-weight:700;font-size:0.76rem;margin-right:6px;}
.mini-btn.danger{border-color:var(--danger);color:var(--danger);}
.mini-btn.primary{background:var(--gold-deep);color:#fff;}
.status-pill{padding:4px 10px;border-radius:999px;font-size:0.72rem;font-weight:700;}
.status-New{background:#F3D9A0;color:#7A4E00;}
.status-Confirmed{background:#CFE3CB;color:#2E5A2A;}
.status-Delivered{background:#CBD9EA;color:#2A4A6B;}
.rate-hero{background:linear-gradient(135deg,var(--ink),#4b351d);color:var(--cream-white);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow);margin-bottom:26px;position:relative;overflow:hidden;}
.rate-hero:after{content:'৳';position:absolute;right:34px;top:-30px;font:900 12rem/1 Fraunces;color:rgba(231,199,126,.12);pointer-events:none;}
.rate-hero h1{color:var(--cream-white);max-width:620px;margin-bottom:10px;position:relative;z-index:1;}
.rate-hero p{color:var(--parchment);max-width:620px;position:relative;z-index:1;}
.rate-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:var(--gold-light);font-size:.82rem;font-weight:700;position:relative;z-index:1;}
.rate-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:26px;}
.rate-card{background:var(--cream-white);border:1px solid rgba(184,134,44,.2);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);position:relative;overflow:hidden;}
.rate-card.morning{border-top:4px solid var(--gold);}
.rate-card.evening{border-top:4px solid var(--gold-deep);}
.rate-card h3{margin:0 0 4px;display:flex;justify-content:space-between;gap:10px;align-items:center;}
.rate-card h3 span{font:700 .78rem Inter;color:var(--ink-soft);background:var(--parchment);padding:5px 9px;border-radius:999px;}
.rate-card .rate-time{color:var(--ink-soft);font-size:.82rem;margin-bottom:16px;}
.rate-values{display:grid;grid-template-columns:1fr;gap:12px;}
.rate-value{background:var(--ivory);border-radius:10px;padding:14px;}
.rate-value small{display:block;color:var(--ink-soft);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px;}
.rate-value strong{font:700 1.55rem Fraunces;color:var(--gold-deep);}
.rate-value em{font-style:normal;font-size:.72rem;color:var(--ink-soft);}
.rate-note{color:var(--ink-soft);font-size:.82rem;margin-top:16px;padding-top:12px;border-top:1px dashed rgba(184,134,44,.3);}
.rate-empty{background:var(--cream-white);border:1px dashed var(--gold);border-radius:var(--radius);padding:34px;text-align:center;color:var(--ink-soft);box-shadow:var(--shadow);}
.rate-history{margin-top:32px;}
.rate-history table{margin-top:14px;}
.rate-history-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.rate-history-head h2{margin:0;}
.rate-range{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;color:var(--ink-soft);}
.rate-range select{padding:8px 12px;border-radius:10px;border:1.5px solid var(--gold-deep);background:var(--cream-white);color:var(--gold-deep);font:700 .85rem Inter;cursor:pointer;}
.rate-avg-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px;}
.rate-history tfoot td{font-weight:800;background:var(--parchment);color:var(--gold-deep);}
.rate-form{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;background:var(--cream-white);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);margin-bottom:26px;}
.rate-form .full{grid-column:1/-1;}
.rate-form h3{grid-column:1/-1;margin:0;}
.rate-form-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;align-items:center;}
.rate-form-actions small{color:var(--ink-soft);margin-right:auto;}
.rate-history .mini-btn{margin:0;}
.rate-admin-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px;}
.rate-stat{background:var(--parchment);border-radius:12px;padding:16px;}
.rate-stat small{display:block;color:var(--ink-soft);font-size:.72rem;font-weight:700;text-transform:uppercase;}
.rate-stat strong{display:block;font:700 1.45rem Fraunces;color:var(--gold-deep);margin-top:4px;}
.modal-overlay{position:fixed;inset:0;background:rgba(42,32,21,0.5);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px;}
.modal-box{background:rgba(255,252,245,0.88);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(255,255,255,0.5);border-radius:var(--radius);padding:28px;max-width:460px;width:100%;max-height:85vh;overflow:auto;box-shadow:var(--shadow);}
.disclaimer-note{background:var(--gold-light);color:var(--ink);border-radius:10px;padding:12px 16px;font-size:0.8rem;margin-bottom:20px;}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--cream-white);padding:12px 22px;border-radius:999px;font-size:0.88rem;font-weight:600;box-shadow:var(--shadow);z-index:300;}

@media(max-width:860px){
  .hero-grid,.about-grid,.cart-layout,.contact-grid{grid-template-columns:1fr;}
  .value-grid{grid-template-columns:1fr;}
  .rate-grid,.rate-form,.rate-admin-summary,.rate-avg-strip{grid-template-columns:1fr;}
  .rate-form .full,.rate-form h3,.rate-form-actions{grid-column:auto;}
  .footer-grid{grid-template-columns:1fr;}
  nav.links{position:fixed;top:70px;left:0;right:0;background:var(--ivory);flex-direction:column;padding:20px;box-shadow:var(--shadow);display:none;}
  nav.links.open{display:flex;}
  .menu-toggle{display:block;}
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
/* ---------- Mobile quick links (bottom bar) ---------- */
.quick-bar{display:none;}
@media (max-width:760px){
  .quick-bar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:140;background:var(--cream-white);border-top:1px solid rgba(184,134,44,.3);box-shadow:0 -6px 20px rgba(42,32,21,.12);padding-bottom:env(safe-area-inset-bottom);}
  .quick-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 2px 9px;color:var(--ink);text-decoration:none;}
  .quick-bar a span{font-size:1.35rem;line-height:1;}
  .quick-bar a b{font-size:.72rem;font-weight:700;}
  .quick-bar a.ql-wa{background:#25D366;color:#fff;}
  .quick-bar a:active{background:var(--parchment);}
  .wa-float{display:none !important;}
  body{padding-bottom:64px;}
  .toast{bottom:80px !important;}
}

/* ---------- Home: today's mandi rate strip ---------- */
.home-rate{padding:28px 0 6px;}
.home-rate-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:var(--cream-white);border:1px solid rgba(184,134,44,.25);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 24px;}
.home-rate-inner h3{margin:8px 0 0;font-size:1.3rem;}
.home-rate-inner h3 small{font:600 .85rem Inter;color:var(--ink-soft);margin-left:6px;}
.home-rate-vals{display:flex;gap:26px;}
.home-rate-btns{display:flex;gap:10px;flex-wrap:wrap;}
.home-rate-vals small{display:block;font-size:.72rem;font-weight:700;color:var(--ink-soft);text-transform:uppercase;}
.home-rate-vals b{font:800 1.6rem Fraunces;color:var(--gold-deep);}

/* ---------- Home page on phones: rate first, then the can, then the words ---------- */
@media (max-width:760px){
  #app[data-page="home"]{display:flex;flex-direction:column;}
  #app[data-page="home"] > .home-rate{order:-1;padding:10px 0 0;}
  .home-rate-inner{padding:10px 14px;gap:6px 14px;}
  .home-rate-inner .eyebrow,.home-rate-btns{display:none;}
  .home-rate-inner h3{font-size:.95rem;margin:0;}
  .home-rate-inner h3 small{display:block;margin:2px 0 0;font-size:.72rem;}
  .home-rate-vals{gap:16px;}
  .home-rate-vals small{font-size:.64rem;}
  .home-rate-vals b{font-size:1.2rem;}
  .hero{padding-top:16px;}
  .hero-grid{gap:18px;}
  .hero-img-wrap{order:-1;}
  .hero .btn-row{flex-direction:column-reverse;}
  .hero .btn-row .btn{width:100%;justify-content:center;}
  .nav-actions{gap:8px;}
  .lang-toggle{order:3;font-size:.64rem;border-width:1px;}
  .lang-toggle button{padding:3px 7px;}
}

/* ---------- Since 1982 seal ---------- */
.since-seal{position:absolute;top:4%;left:4%;z-index:2;width:96px;height:96px;border-radius:50%;background:var(--ink);color:var(--gold-light);display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px double var(--gold-light);box-shadow:var(--shadow);transform:rotate(-10deg);}
.since-seal small{font:700 .62rem Inter;letter-spacing:.2em;text-transform:uppercase;}
.since-seal b{font:900 1.6rem/1 Fraunces;}

/* ---------- Social links ---------- */
.social-row{display:flex;gap:10px;flex-wrap:wrap;}
.social-btn{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--parchment);color:var(--gold-deep);transition:transform .2s,background .2s,color .2s;}
.social-btn:hover{transform:translateY(-2px);background:var(--gold-deep);color:#fff;}
.social-btn svg{width:20px;height:20px;}
footer .social-row{margin-top:16px;}
footer .social-btn{background:rgba(231,199,126,.12);color:var(--gold-light);}
footer .social-btn:hover{background:var(--gold-light);color:var(--ink);}
.wa-float{position:fixed;right:20px;bottom:20px;z-index:120;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .2s;}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:30px;height:30px;}

/* ---------- Instagram-style gallery ---------- */
.ig-wrap{max-width:935px;}
.ig-profile{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center;padding:6px 0 34px;border-bottom:1px solid rgba(184,134,44,.25);}
.ig-avatar{width:150px;height:150px;border-radius:50%;padding:4px;background:conic-gradient(from 210deg,var(--gold-light),var(--gold),var(--gold-deep),var(--gold-light));}
.ig-avatar img{width:100%;height:100%;object-fit:contain;border-radius:50%;background:var(--cream-white);border:4px solid var(--ivory);padding:16px;}
.ig-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ig-handle{font:600 1.3rem Inter;margin:0 8px 0 0;color:var(--ink);}
.ig-top .btn{padding:8px 18px;font-size:.85rem;}
.ig-stats{display:flex;gap:28px;list-style:none;padding:0;margin:16px 0;font-size:.95rem;}
.ig-stats b{font-weight:800;}
.ig-bio{margin:0 0 14px;color:var(--ink-soft);font-size:.92rem;}
.ig-bio b{color:var(--ink);}
.ig-tabs{display:flex;justify-content:center;gap:48px;margin-bottom:4px;}
.ig-tabs button{background:none;border:none;border-top:2px solid transparent;margin-top:-1px;padding:14px 4px;font:700 .75rem Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer;display:flex;gap:6px;align-items:center;}
.ig-tabs button svg{width:14px;height:14px;}
.ig-tabs button.active{border-top-color:var(--ink);color:var(--ink);}
.ig-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;}
.ig-tile{position:relative;aspect-ratio:1;overflow:hidden;border:none;padding:0;background:var(--parchment);cursor:pointer;display:block;width:100%;}
.ig-tile img,.ig-tile video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s;}
.ig-tile.contain img{object-fit:contain;padding:10%;}
.ig-tile:hover img,.ig-tile:hover video{transform:scale(1.04);}
.ig-overlay{position:absolute;inset:0;background:rgba(42,32,21,.55);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;font-weight:700;font-size:.9rem;opacity:0;transition:opacity .25s;}
.ig-tile:hover .ig-overlay,.ig-tile:focus-visible .ig-overlay{opacity:1;}
.ig-badge{position:absolute;top:10px;right:10px;width:22px;height:22px;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));}
.ig-more-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;aspect-ratio:1;background:linear-gradient(135deg,var(--ink),#4b351d);color:var(--gold-light);font-weight:700;text-align:center;padding:16px;}
.ig-more-tile svg{width:40px;height:40px;}
.ig-more-tile:hover{color:#fff;}
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(20,14,8,.9);display:flex;align-items:center;justify-content:center;padding:20px;}
.lightbox[hidden]{display:none;}
.lb-figure{margin:0;max-width:min(900px,100%);display:flex;flex-direction:column;align-items:center;gap:12px;}
.lb-figure img,.lb-figure video{max-width:100%;max-height:78vh;border-radius:10px;background:var(--cream-white);}
.lb-figure figcaption{color:var(--parchment);text-align:center;font-weight:600;}
.lb-btn{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:none;width:46px;height:46px;border-radius:50%;font-size:1.6rem;line-height:1;cursor:pointer;}
.lb-btn:hover{background:rgba(255,255,255,.28);}
.lb-close{top:18px;right:18px;}
.lb-prev{left:18px;top:50%;transform:translateY(-50%);}
.lb-next{right:18px;top:50%;transform:translateY(-50%);}
@media (max-width:700px){
  .ig-profile{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px;}
  .ig-avatar{width:110px;height:110px;}
  .ig-top,.ig-stats,.ig-profile .social-row{justify-content:center;}
  .ig-tabs{gap:28px;}
  .since-seal{width:76px;height:76px;}
  .since-seal b{font-size:1.25rem;}
  .wa-float{width:50px;height:50px;right:14px;bottom:14px;}
  .ig-more-tile{font-size:.72rem;gap:6px;padding:8px;}
  .ig-more-tile svg{width:26px;height:26px;}
}
@media (max-width:480px){
  .brand-text{display:none;}
}