/* ============================================================
   TELTORKARI.COM — প্রোডাকশন স্টাইলশিট — ৬ পেজ + সাইডবার + কুইক ভিউ
   ============================================================ */
/* ============================================================
   TELTORKARI — Design System (Mobile First)
   Palette: Primary #22C55E · Secondary #16A34A · Accent #F59E0B
   ============================================================ */
:root{
  --g50:#F0FDF4;  --g100:#DCFCE7; --g200:#BBF7D0; --g300:#86EFAC;
  --g500:#22C55E; --g600:#16A34A; --g700:#15803D; --g800:#166534; --g900:#14532D;
  --deep:#0B3B24; --deep2:#0C2E1C;
  --amber:#F59E0B; --amber-d:#D97706; --amber-50:#FFFBEB;
  --bg:#F8FAFC; --card:#FFFFFF;
  --ink:#0F172A; --ink-2:#334155; --muted:#64748B; --line:#E2E8F0; --line-soft:#EEF2F7;
  --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:28px;
  --sh-sm:0 1px 2px rgba(15,23,42,.04),0 4px 14px -4px rgba(15,23,42,.07);
  --sh-md:0 8px 26px -10px rgba(6,78,59,.20);
  --sh-lg:0 22px 44px -18px rgba(6,78,59,.30);
  --sh-glow:0 12px 26px -10px rgba(34,197,94,.55);
  --font-display:'Baloo Da 2','Hind Siliguri',sans-serif;
  --font-body:'Hind Siliguri','Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.7,.35,1);
}
*{-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body); background:var(--bg); color:var(--ink);
  line-height:1.6; padding-bottom:72px; /* mobile bottom-nav space */
  overflow-x:hidden;
}
@media(min-width:992px){ body{padding-bottom:0} }
img{max-width:100%}
a{text-decoration:none; color:inherit}
button{font-family:inherit}
::selection{background:var(--g200); color:var(--g900)}

.skip-link{position:absolute; left:-999px; top:0; background:var(--g700); color:#fff; padding:.6rem 1.2rem; border-radius:0 0 12px 0; z-index:2000}
.skip-link:focus{left:0; color:#fff}

/* ---------- Buttons ---------- */
.btn-brand{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  background:linear-gradient(135deg,var(--g500),var(--g600));
  color:#fff; font-weight:700; border:0; border-radius:999px;
  padding:.7rem 1.6rem; box-shadow:var(--sh-glow);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s;
}
.btn-brand:hover,.btn-brand:focus{color:#fff; transform:translateY(-2px); filter:brightness(1.04); box-shadow:0 16px 32px -10px rgba(34,197,94,.6)}
.btn-brand:active{transform:translateY(0) scale(.98)}
.btn-brand.btn-lg2{padding:.85rem 2rem; font-size:1.05rem}
.btn-ghost{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  background:#fff; color:var(--ink); font-weight:600; border:1.5px solid var(--line);
  border-radius:999px; padding:.7rem 1.5rem; transition:all .25s var(--ease);
}
.btn-ghost:hover{border-color:var(--g500); color:var(--g700); background:var(--g50); transform:translateY(-2px)}
.btn-light-pill{
  display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22); color:#fff; font-weight:600;
  border-radius:999px; padding:.55rem 1.3rem; backdrop-filter:blur(6px); transition:all .25s;
}
.btn-light-pill:hover{background:#fff; color:var(--g800)}

/* ---------- Top Bar ---------- */
.topbar{background:linear-gradient(90deg,var(--deep2),var(--g900) 55%,var(--g800)); color:#CDEBD9; font-size:.82rem}
.topbar .inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:38px; padding:.3rem 0}
.topbar i{color:var(--g300)}
.topbar .tb-loc{display:inline-flex; align-items:center; gap:.4rem; font-weight:500; white-space:nowrap}
.topbar .tb-loc .bi-geo-alt-fill{color:var(--amber)}
.topbar .tb-msg{display:none; align-items:center; gap:.45rem; font-weight:500}
.topbar .tb-msg b{color:#fff; font-weight:700}
.topbar .tb-links{display:none; align-items:center; gap:1.1rem}
.topbar .tb-links a{display:inline-flex; align-items:center; gap:.35rem; color:#CDEBD9; transition:color .2s}
.topbar .tb-links a:hover{color:#fff}
.topbar .tb-sep{width:1px; height:14px; background:rgba(255,255,255,.18)}
@media(min-width:768px){ .topbar .tb-msg{display:inline-flex} }
@media(min-width:1200px){ .topbar .tb-links{display:inline-flex} }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:1030;
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft); box-shadow:0 6px 24px -18px rgba(2,44,34,.35);
}
.header-inner{display:flex; align-items:center; flex-wrap:wrap; gap:.7rem 1rem; padding:.65rem 0}
.brand{display:flex; align-items:center; gap:.6rem; margin-right:auto}
.brand-icon{
  width:44px; height:44px; flex:none; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--g500),var(--g700)); color:#fff; font-size:1.35rem;
  box-shadow:0 8px 18px -6px rgba(22,163,74,.55); position:relative; overflow:hidden;
}
.brand-icon::after{content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 45%)}
.brand-name{font-family:var(--font-display); font-weight:800; font-size:1.4rem; line-height:1.05; letter-spacing:-.01em}
.brand-name .t1{color:var(--ink)} .brand-name .t2{color:var(--g600)}
.brand-tag{font-size:.68rem; color:var(--muted); font-weight:500; letter-spacing:.02em}
.loc-pill{
  display:none; align-items:center; gap:.55rem; background:var(--g50); border:1px solid var(--g100);
  border-radius:14px; padding:.42rem .85rem; cursor:pointer; transition:all .25s; line-height:1.2;
}
.loc-pill:hover{border-color:var(--g300); box-shadow:var(--sh-sm)}
.loc-pill .lp-cap{font-size:.66rem; color:var(--muted); font-weight:500}
.loc-pill .lp-val{font-size:.85rem; font-weight:700; color:var(--g800); display:flex; align-items:center; gap:.3rem}
@media(min-width:1200px){ .loc-pill{display:inline-flex} }

.search-wrap{
  order:3; width:100%;
  display:flex; align-items:center; background:#F1F5F9; border:1.5px solid transparent;
  border-radius:999px; padding:4px; transition:all .25s var(--ease);
}
.search-wrap:focus-within{background:#fff; border-color:var(--g500); box-shadow:0 0 0 4px rgba(34,197,94,.14)}
.search-cat{
  display:none; align-items:center; gap:.4rem; border:0; background:transparent; font-weight:600;
  font-size:.85rem; color:var(--ink-2); padding:.35rem .9rem; border-right:1.5px solid var(--line); white-space:nowrap;
}
.search-cat:hover{color:var(--g700)}
.search-input{flex:1; min-width:0; border:0; outline:0; background:transparent; padding:.42rem .9rem; font-size:.95rem; color:var(--ink)}
.search-input::placeholder{color:#94A3B8}
.search-btn{
  flex:none; border:0; border-radius:999px; background:linear-gradient(135deg,var(--g500),var(--g600));
  color:#fff; width:40px; height:40px; display:grid; place-items:center; font-size:1.05rem;
  box-shadow:0 6px 14px -6px rgba(34,197,94,.6); transition:transform .2s;
}
.search-btn:hover{transform:scale(1.06)}
@media(min-width:768px){ .search-cat{display:inline-flex} }
@media(min-width:992px){
  .search-wrap{order:0; width:auto; flex:1 1 340px; max-width:620px; margin-inline:.5rem}
}

.act-group{display:flex; align-items:center; gap:.45rem}
.act-btn{
  position:relative; width:42px; height:42px; border:0; border-radius:14px; display:grid; place-items:center;
  background:#F1F5F9; color:var(--ink-2); font-size:1.12rem; transition:all .25s var(--ease);
}
.act-btn:hover{background:var(--g50); color:var(--g700); transform:translateY(-2px)}
.act-badge{
  position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 4px;
  background:var(--amber); color:#fff; font-size:.62rem; font-weight:800; border-radius:999px;
  display:grid; place-items:center; border:2px solid #fff;
}
.act-badge.dot{min-width:10px; height:10px; padding:0; top:2px; right:2px}
.act-label{display:none; font-size:.63rem; font-weight:600; color:var(--muted); margin-top:2px}
.cart-pill{
  display:flex; align-items:center; gap:.55rem; border:0; border-radius:16px; padding:.42rem .5rem;
  background:linear-gradient(135deg,var(--g600),var(--g700)); color:#fff; transition:all .25s var(--ease);
  box-shadow:0 8px 18px -8px rgba(21,128,61,.55);
}
.cart-pill:hover{transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(21,128,61,.6)}
.cart-pill .cp-ic{position:relative; width:34px; height:34px; border-radius:12px; background:rgba(255,255,255,.16); display:grid; place-items:center; font-size:1.05rem}
.cart-pill .cp-txt{display:none; text-align:left; line-height:1.15; padding-right:.4rem}
.cart-pill .cp-cap{font-size:.62rem; opacity:.85}
.cart-pill .cp-amt{font-size:.9rem; font-weight:800}
@media(min-width:1200px){ .cart-pill .cp-txt{display:block} }
.profile-btn{display:none}
@media(min-width:768px){ .profile-btn{display:grid} }

/* ---------- Category Nav (quick links) ---------- */
.cat-nav{background:#fff; border-bottom:1px solid var(--line-soft)}
.cat-nav .inner{display:flex; align-items:center; gap:.55rem; padding:.6rem 0; overflow-x:auto; scrollbar-width:none}
.cat-nav .inner::-webkit-scrollbar{display:none}
.all-cat-btn{
  flex:none; display:inline-flex; align-items:center; gap:.55rem; border:0; border-radius:999px;
  background:var(--ink); color:#fff; font-weight:700; font-size:.88rem; padding:.55rem 1.15rem;
  transition:all .25s var(--ease); box-shadow:0 6px 16px -8px rgba(15,23,42,.5);
}
.all-cat-btn:hover{background:var(--g800); transform:translateY(-1px)}
.qlink{
  flex:none; display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:600;
  color:var(--ink-2); background:var(--bg); border:1px solid var(--line); border-radius:999px;
  padding:.5rem 1rem; transition:all .22s var(--ease); white-space:nowrap;
}
.qlink:hover{border-color:var(--g300); background:var(--g50); color:var(--g800); transform:translateY(-1px)}
.qlink.hot{background:linear-gradient(135deg,#FFF7ED,#FFEDD5); border-color:#FED7AA; color:#C2410C}
.qlink.hot:hover{border-color:var(--amber)}

/* ---------- Offcanvas: Category Menu ---------- */
.oc-green .offcanvas-header{
  background:linear-gradient(120deg,var(--g900),var(--g700)); color:#fff; padding:1.1rem 1.25rem;
}
.oc-green .offcanvas-title{font-family:var(--font-display); font-weight:700}
.oc-green .btn-close{filter:invert(1); opacity:.8}
.oc-cat-list{padding:.6rem}
.oc-cat-item{
  display:flex; align-items:center; gap:.8rem; padding:.5rem .65rem; border-radius:14px; transition:background .2s;
}
.oc-cat-item:hover{background:var(--g50)}
.oc-thumb{display:block; width:42px; height:42px; flex:none; border-radius:50%; overflow:hidden; background:var(--bg); border:1px solid var(--line-soft)}
.oc-thumb img{width:100%; height:100%; object-fit:cover}
.oc-cat-item .name{font-weight:600; font-size:.92rem; line-height:1.25}
.oc-cat-item .cnt{font-size:.72rem; color:var(--muted)}
.oc-cat-item .bi-chevron-right{margin-left:auto; font-size:.8rem; color:#CBD5E1; transition:all .2s}
.oc-cat-item:hover .bi-chevron-right{color:var(--g600); transform:translateX(3px)}
.oc-promo{
  margin:.6rem; padding:1rem 1.1rem; border-radius:16px; color:#fff;
  background:linear-gradient(120deg,var(--g700),var(--g500));
}
.oc-promo b{font-family:var(--font-display)}

/* ---------- Offcanvas: Cart ---------- */
.cart-item{display:flex; gap:.8rem; padding:.85rem 0; border-bottom:1px dashed var(--line)}
.cart-thumb{display:block; width:58px; height:58px; flex:none; border-radius:14px; overflow:hidden; border:1px solid var(--line-soft); background:var(--bg)}
.cart-thumb img{width:100%; height:100%; object-fit:cover}
.cart-item .ci-name{font-weight:600; font-size:.9rem; line-height:1.3}
.cart-item .ci-unit{font-size:.74rem; color:var(--muted)}
.cart-item .ci-price{font-weight:800; font-size:.92rem}
.ci-qty{display:inline-flex; align-items:center; gap:.55rem; border:1.5px solid var(--line); border-radius:999px; padding:.12rem .55rem; font-weight:700; font-size:.82rem}
.ci-qty button{border:0; background:none; color:var(--g700); font-size:.95rem; display:grid; place-items:center}
.ci-del{border:0; background:none; color:#CBD5E1; font-size:1rem; align-self:flex-start}
.ci-del:hover{color:#EF4444}
.fd-note{background:var(--g50); border:1px dashed var(--g300); border-radius:14px; padding:.8rem .95rem; font-size:.83rem}
.fd-bar{height:8px; border-radius:99px; background:#E2E8F0; overflow:hidden; margin-top:.5rem}
.fd-bar span{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--g500),var(--g600))}

/* ---------- Section shell ---------- */
.sec{padding:2.6rem 0}
@media(min-width:992px){ .sec{padding:4rem 0} }
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.5rem}
@media(min-width:992px){ .sec-head{margin-bottom:2rem} }
.sec-eyebrow{
  display:inline-flex; align-items:center; gap:.45rem; font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--g600); margin-bottom:.35rem;
}
.sec-eyebrow::before{content:""; width:22px; height:2.5px; border-radius:99px; background:linear-gradient(90deg,var(--g500),var(--amber))}
.sec-title{font-family:var(--font-display); font-weight:700; font-size:clamp(1.45rem,3.2vw,2.05rem); line-height:1.2; margin:0; letter-spacing:-.01em}
.sec-sub{color:var(--muted); font-size:.92rem; margin:.3rem 0 0}
.sec-link{
  flex:none; display:inline-flex; align-items:center; gap:.4rem; font-weight:700; font-size:.87rem;
  color:var(--g700); background:var(--g50); border:1px solid var(--g100); border-radius:999px;
  padding:.5rem 1.1rem; transition:all .25s var(--ease); white-space:nowrap;
}
.sec-link:hover{background:var(--g600); border-color:var(--g600); color:#fff; gap:.6rem}
/* ---------- Hero ---------- */
.hero-wrap{padding-top:1.1rem}
.hero-frame{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-md)}
.hero-slide{--tint:#ECFDF5; --tint2:#D7F5E4; --mark:#BBF7D0; background:linear-gradient(135deg,var(--tint),var(--tint2))}
.hero-slide.s2{--tint:#FFF8ED; --tint2:#FFEFD6; --mark:#FDE68A}
.hero-slide.s3{--tint:#F0F7FF; --tint2:#DFEEFF; --mark:#BAE6FD}
.hero-grid{display:grid; grid-template-columns:1fr; min-height:auto}
.hero-copy{padding:1.9rem 1.4rem 1.6rem; position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; justify-content:center}
.hero-badge{
  display:inline-flex; align-items:center; gap:.45rem; background:rgba(255,255,255,.8); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.9); color:#B45309; font-weight:700; font-size:.8rem;
  border-radius:999px; padding:.35rem .95rem; box-shadow:var(--sh-sm); margin-bottom:1rem;
}
.hero-title{
  font-family:var(--font-display); font-weight:800; letter-spacing:-.015em;
  font-size:clamp(1.75rem,5.2vw,3.1rem); line-height:1.22; color:var(--ink); margin-bottom:.7rem;
}
.hero-title .mark{background:linear-gradient(transparent 64%, var(--mark) 64%); padding:0 .1em; border-radius:4px; color:var(--g800)}
.hero-sub{color:var(--ink-2); font-size:clamp(.95rem,1.6vw,1.12rem); max-width:32rem; margin-bottom:1.4rem}
.hero-cta{display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:1.2rem}
.hero-chips{display:flex; flex-wrap:wrap; gap:.45rem .9rem; font-size:.82rem; font-weight:600; color:var(--ink-2)}
.hero-chips span{display:inline-flex; align-items:center; gap:.35rem}
.hero-chips i{color:var(--g600)}
.hero-media{position:relative; min-height:230px}
.hero-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-media::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,var(--tint) 0%,transparent 38%)}
@media(min-width:992px){
  .hero-grid{grid-template-columns:1.02fr .98fr; min-height:470px}
  .hero-copy{padding:3rem 1rem 3rem 3.2rem}
  .hero-media{min-height:470px}
  .hero-media::before{background:linear-gradient(90deg,var(--tint) 0%,transparent 42%)}
}
.float-card{
  position:absolute; z-index:3; display:flex; align-items:center; gap:.6rem;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.8);
  border-radius:16px; padding:.6rem .9rem; box-shadow:var(--sh-lg);
  animation:floaty 5.5s ease-in-out infinite;
}
.float-card .fc-ic{width:38px; height:38px; flex:none; border-radius:12px; display:grid; place-items:center; font-size:1.1rem; color:#fff}
.float-card .fc-t{font-size:.82rem; font-weight:800; line-height:1.2; color:var(--ink)}
.float-card .fc-s{font-size:.68rem; color:var(--muted); font-weight:500}
.fc-a{top:14px; right:14px}
.fc-b{bottom:18px; left:14px; animation-delay:1.6s}
@media(min-width:992px){ .fc-a{top:44px; right:40px} .fc-b{bottom:44px; left:-14px} }
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hero-frame .carousel-indicators{margin-bottom:.85rem; gap:4px}
.hero-frame .carousel-indicators [data-bs-target]{
  width:20px; height:6px; border-radius:99px; background:var(--g900); opacity:.25; border:0; transition:all .3s;
}
.hero-frame .carousel-indicators .active{width:34px; opacity:1; background:var(--g600)}
.hero-ctrl{
  width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--ink);
  display:grid; place-items:center; font-size:1rem; box-shadow:var(--sh-md); border:0; opacity:0;
  transition:all .25s var(--ease);
}
.hero-frame:hover .hero-ctrl{opacity:1}
.hero-ctrl:hover{background:var(--g600); color:#fff}
.carousel-control-prev,.carousel-control-next{width:auto; padding:0 .9rem; opacity:1}
/* hero entrance */
.carousel-item.active .hero-badge{animation:riseIn .6s var(--ease) both}
.carousel-item.active .hero-title{animation:riseIn .6s .08s var(--ease) both}
.carousel-item.active .hero-sub{animation:riseIn .6s .16s var(--ease) both}
.carousel-item.active .hero-cta{animation:riseIn .6s .24s var(--ease) both}
.carousel-item.active .hero-chips{animation:riseIn .6s .32s var(--ease) both}
@keyframes riseIn{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:translateY(0)}}

/* ---------- Trust strip ---------- */
.trust-card{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm); display:grid; grid-template-columns:repeat(2,1fr); overflow:hidden;
}
.trust-item{display:flex; align-items:center; gap:.75rem; padding:1rem .95rem; border:1px solid var(--line-soft); margin:-1px 0 0 -1px}
.trust-item .ti-ic{width:44px; height:44px; flex:none; border-radius:14px; display:grid; place-items:center; font-size:1.2rem; background:var(--tint,#ECFDF5); color:var(--tc,#15803D); transition:transform .3s var(--ease)}
.trust-item:hover .ti-ic{transform:scale(1.1) rotate(-6deg)}
.trust-item .ti-t{font-weight:700; font-size:.88rem; line-height:1.25}
.trust-item .ti-s{font-size:.72rem; color:var(--muted)}
@media(min-width:768px){ .trust-card{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1200px){ .trust-card{grid-template-columns:repeat(6,1fr)} .trust-item{padding:1.15rem 1.1rem} }

/* ---------- Shop by Category ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.05rem .55rem}
@media(min-width:576px){ .cat-grid{grid-template-columns:repeat(5,1fr)} }
@media(min-width:768px){ .cat-grid{grid-template-columns:repeat(6,1fr); gap:1.3rem .8rem} }
@media(min-width:1200px){ .cat-grid{grid-template-columns:repeat(9,1fr)} }
.cat-card{text-align:center; display:block}
.cat-thumb{
  display:block; width:min(100%,92px); aspect-ratio:1/1; margin-inline:auto; border-radius:50%; padding:5px;
  background:var(--tint,#ECFDF5); position:relative; transition:all .3s var(--ease);
}
.cat-thumb::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:2px dashed transparent; transition:all .35s var(--ease)}
.cat-thumb img{display:block; width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; border-radius:50%}
.cat-card:hover .cat-thumb{transform:translateY(-6px); box-shadow:var(--sh-md)}
.cat-card:hover .cat-thumb::after{border-color:var(--g500); transform:rotate(25deg)}
.cat-name{font-size:.82rem; font-weight:700; margin-top:.55rem; line-height:1.25; color:var(--ink)}
.cat-cnt{font-size:.68rem; color:var(--muted)}
@media(min-width:768px){ .cat-name{font-size:.88rem} }

/* ---------- Promo trio ---------- */
.promo-card{
  position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:210px;
  display:flex; align-items:center; padding:1.6rem 1.5rem; color:#fff; isolation:isolate;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.promo-card:hover{transform:translateY(-5px); box-shadow:var(--sh-lg)}
.promo-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .8s var(--ease)}
.promo-card:hover img{transform:scale(1.07)}
.promo-card::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--ov)}
.promo-card.p1{--ov:linear-gradient(100deg,rgba(9,68,38,.94) 30%,rgba(20,83,45,.55) 65%,rgba(20,83,45,.15))}
.promo-card.p2{--ov:linear-gradient(100deg,rgba(120,53,15,.93) 30%,rgba(180,83,9,.55) 65%,rgba(217,119,6,.15))}
.promo-card.p3{--ov:linear-gradient(100deg,rgba(30,27,75,.94) 30%,rgba(67,56,202,.55) 65%,rgba(79,70,229,.15))}
.promo-chip{display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:.25rem .8rem; margin-bottom:.6rem}
.promo-title{font-family:var(--font-display); font-weight:700; font-size:1.3rem; line-height:1.3; margin-bottom:.2rem}
.promo-sub{font-size:.85rem; opacity:.85; margin-bottom:1rem}
.promo-link{display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.85rem; color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:.45rem 1.1rem; transition:all .25s}
.promo-card:hover .promo-link{background:#fff; color:var(--ink); gap:.7rem}

/* ---------- Flash Sale panel ---------- */
.flash-panel{
  border-radius:var(--r-lg); padding:1.6rem 1.1rem 1.4rem; position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(900px 340px at 85% -20%, rgba(34,197,94,.28), transparent 60%),
    radial-gradient(600px 300px at -10% 110%, rgba(245,158,11,.16), transparent 55%),
    linear-gradient(135deg,var(--deep2),var(--g900) 55%,var(--g800));
}
.flash-panel::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1.6px); background-size:22px 22px;
}
@media(min-width:992px){ .flash-panel{padding:2.2rem 2rem 2rem} }
.flash-head{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem; margin-bottom:1.4rem}
.flash-title{display:flex; align-items:center; gap:.8rem; color:#fff}
.flash-bolt{width:46px; height:46px; flex:none; border-radius:14px; display:grid; place-items:center; font-size:1.3rem; color:#fff; background:linear-gradient(135deg,var(--amber),#F97316); box-shadow:0 10px 22px -8px rgba(245,158,11,.65); animation:pulseGlow 2.2s infinite}
@keyframes pulseGlow{0%,100%{box-shadow:0 10px 22px -8px rgba(245,158,11,.65)}50%{box-shadow:0 10px 30px -4px rgba(245,158,11,.9)}}
.flash-title h2{font-family:var(--font-display); font-weight:800; font-size:clamp(1.3rem,2.6vw,1.7rem); margin:0; line-height:1.15}
.flash-title small{display:block; color:var(--g300); font-size:.78rem; font-weight:500}
.cd-group{display:flex; align-items:center; gap:.45rem}
.cd-cap{color:#A7F3D0; font-size:.75rem; font-weight:600; margin-right:.2rem}
.cd-chip{min-width:52px; text-align:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(6px); border-radius:12px; padding:.4rem .3rem .3rem; color:#fff}
.cd-chip b{display:block; font-size:1.12rem; font-weight:800; line-height:1; font-variant-numeric:tabular-nums}
.cd-chip small{font-size:.58rem; color:#A7F3D0; font-weight:600; letter-spacing:.05em}
.cd-colon{color:#6EE7B7; font-weight:800}
.flash-link{margin-left:auto}

/* ---------- Product Card ---------- */
.hscroll{display:flex; gap:.9rem; overflow-x:auto; padding:.2rem .2rem 1rem; scroll-snap-type:x mandatory; scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.hscroll > *{scroll-snap-align:start}
.p-card{
  background:var(--card); border:1px solid var(--line-soft); border-radius:18px; overflow:hidden;
  position:relative; display:flex; flex-direction:column; height:100%;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.p-card:hover{transform:translateY(-5px); box-shadow:var(--sh-lg); border-color:var(--g200)}
.hscroll .p-card{flex:0 0 232px}
.p-media{position:relative; aspect-ratio:1; overflow:hidden; background:#F1F5F9}
.p-media img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.p-card:hover .p-media img{transform:scale(1.08)}
.p-off{
  position:absolute; top:10px; left:10px; z-index:2; font-size:.7rem; font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--amber),#F97316); border-radius:999px; padding:.22rem .6rem;
  box-shadow:0 6px 14px -6px rgba(249,115,22,.7);
}
.p-flag{
  position:absolute; top:10px; left:10px; z-index:2; font-size:.68rem; font-weight:800; color:#fff;
  background:var(--ink); border-radius:999px; padding:.22rem .6rem; display:inline-flex; align-items:center; gap:.3rem;
}
.p-acts{position:absolute; top:10px; right:10px; z-index:2; display:flex; flex-direction:column; gap:.4rem}
.p-act{
  width:34px; height:34px; border:0; border-radius:12px; display:grid; place-items:center; font-size:.95rem;
  background:rgba(255,255,255,.95); color:var(--ink-2); box-shadow:var(--sh-sm); transition:all .25s var(--ease);
}
.p-act:hover{background:var(--g600); color:#fff; transform:scale(1.08)}
@media(hover:hover){
  .p-acts .p-act{opacity:0; transform:translateX(10px)}
  .p-card:hover .p-acts .p-act{opacity:1; transform:translateX(0)}
  .p-acts .p-act:nth-child(2){transition-delay:.05s}
}
.p-body{padding:.8rem .9rem .95rem; display:flex; flex-direction:column; flex:1}
.p-cat{font-size:.7rem; font-weight:600; color:var(--muted); letter-spacing:.02em}
.p-name{font-weight:700; font-size:.93rem; line-height:1.35; margin:.15rem 0 .25rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.5em}
.p-rate{display:flex; align-items:center; gap:.3rem; font-size:.74rem; margin-bottom:.35rem}
.p-rate .stars{color:var(--amber); letter-spacing:.5px}
.p-rate .rc{color:var(--muted)}
.p-price{display:flex; align-items:baseline; gap:.5rem; margin-top:auto}
.p-now{font-weight:800; font-size:1.1rem; color:var(--ink); font-variant-numeric:tabular-nums}
.p-was{font-size:.8rem; color:#94A3B8; text-decoration:line-through}
.p-save{font-size:.68rem; font-weight:700; color:var(--g700); background:var(--g50); border-radius:999px; padding:.1rem .5rem}
.p-foot{display:flex; align-items:center; gap:.5rem; margin-top:.65rem}
.qty{display:flex; align-items:center; border:1.5px solid var(--line); border-radius:999px; overflow:hidden; flex:none}
.qty button{width:28px; height:32px; border:0; background:transparent; color:var(--g700); font-size:.9rem; display:grid; place-items:center; transition:background .2s}
.qty button:hover{background:var(--g50)}
.qty b{width:24px; text-align:center; font-size:.85rem; font-variant-numeric:tabular-nums}
.add-btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  border:1.5px solid var(--g200); border-radius:999px; background:var(--g50); color:var(--g700);
  font-weight:700; font-size:.82rem; padding:.45rem .4rem; transition:all .25s var(--ease); white-space:nowrap;
}
.add-btn:hover{background:linear-gradient(135deg,var(--g500),var(--g600)); border-color:transparent; color:#fff; box-shadow:var(--sh-glow)}
.stock-wrap{margin-top:.55rem}
.stock-bar{height:6px; border-radius:99px; background:#F1F5F9; overflow:hidden}
.stock-bar span{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--amber),#EF4444)}
.stock-cap{font-size:.68rem; color:var(--muted); margin-top:.25rem; display:flex; justify-content:space-between}
.stock-cap b{color:#DC2626}
/* ---------- Best selling / rank ---------- */
.rank-chip{
  position:absolute; top:10px; left:10px; z-index:2; width:30px; height:30px; border-radius:10px;
  display:grid; place-items:center; font-weight:800; font-size:.78rem; color:#fff;
  background:linear-gradient(135deg,#1E293B,#0F172A); box-shadow:var(--sh-sm);
}
.rank-chip.gold{background:linear-gradient(135deg,#F59E0B,#D97706)}

/* ---------- Deal of the day ---------- */
.deal-card{
  border-radius:var(--r-lg); overflow:hidden; background:#0F172A; color:#CBD5E1;
  display:grid; grid-template-columns:1fr; box-shadow:var(--sh-lg); position:relative;
}
.deal-media{position:relative; min-height:220px}
.deal-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.deal-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,#0F172A 100%)}
.deal-flag{position:absolute; top:14px; left:14px; z-index:2; display:inline-flex; align-items:center; gap:.4rem; background:linear-gradient(135deg,var(--amber),#F97316); color:#fff; font-weight:800; font-size:.75rem; border-radius:999px; padding:.3rem .85rem; box-shadow:0 8px 18px -6px rgba(249,115,22,.7)}
.deal-body{padding:1.5rem 1.3rem 1.7rem; display:flex; flex-direction:column; gap:.85rem}
.deal-eyebrow{display:inline-flex; align-items:center; gap:.45rem; color:var(--amber); font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase}
.deal-title{font-family:var(--font-display); color:#fff; font-weight:800; font-size:clamp(1.35rem,2.6vw,1.9rem); line-height:1.25; margin:0}
.deal-desc{font-size:.9rem; color:#94A3B8; margin:0}
.deal-price{display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap}
.deal-now{font-size:clamp(1.7rem,3vw,2.3rem); font-weight:800; color:#fff; font-variant-numeric:tabular-nums}
.deal-was{font-size:1rem; color:#64748B; text-decoration:line-through}
.deal-save{font-size:.75rem; font-weight:800; color:#052E16; background:var(--g300); border-radius:999px; padding:.25rem .75rem}
.deal-cd{display:flex; align-items:center; gap:.45rem}
.deal-cd .cd-chip{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12)}
.deal-cd .cd-chip small{color:#94A3B8}
.deal-prog .stock-bar{background:rgba(255,255,255,.1); height:8px}
.deal-prog .stock-bar span{background:linear-gradient(90deg,var(--g500),var(--g300))}
.deal-prog .stock-cap{color:#94A3B8; font-size:.75rem}
.deal-prog .stock-cap b{color:var(--g300)}
.deal-cta{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.2rem}
@media(min-width:992px){
  .deal-card{grid-template-columns:.95fr 1.05fr}
  .deal-media{min-height:100%}
  .deal-media::after{background:linear-gradient(90deg,transparent 40%,#0F172A 100%)}
  .deal-body{padding:2.6rem 2.6rem 2.6rem 1.6rem}
}

/* ---------- Dinajpur Special ---------- */
.din-sec{
  background:linear-gradient(180deg,var(--g50),#F8FAFC 90%);
  border-block:1px solid var(--g100); position:relative; overflow:hidden;
}
.din-sec::before{
  content:"🌾"; position:absolute; font-size:9rem; opacity:.06; right:-1.2rem; top:-2rem; transform:rotate(18deg); pointer-events:none;
}
.din-badge{
  display:inline-flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--g200);
  color:var(--g800); font-weight:700; font-size:.8rem; border-radius:999px; padding:.35rem 1rem; box-shadow:var(--sh-sm);
}
.din-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem}
@media(min-width:768px){ .din-grid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1200px){ .din-grid{grid-template-columns:repeat(5,1fr)} }
.din-origin{display:inline-flex; align-items:center; gap:.3rem; font-size:.7rem; font-weight:600; color:#B45309; background:#FFF7ED; border-radius:999px; padding:.12rem .55rem; margin-bottom:.3rem}
.b-gi{background:linear-gradient(135deg,#4F46E5,#7C3AED)!important}
.b-season{background:linear-gradient(135deg,#E11D48,#F43F5E)!important}
.b-pure{background:linear-gradient(135deg,var(--g600),var(--g500))!important}
.b-farm{background:linear-gradient(135deg,#0D9488,#14B8A6)!important}

/* ---------- Brands marquee ---------- */
.brand-marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.brand-track{display:flex; gap:.9rem; width:max-content; animation:marq 30s linear infinite; padding:.4rem 0}
.brand-marquee:hover .brand-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.brand-chip{
  flex:none; display:flex; align-items:center; gap:.65rem; background:#fff; border:1px solid var(--line-soft);
  border-radius:999px; padding:.55rem 1.3rem .55rem .6rem; box-shadow:var(--sh-sm); transition:all .25s var(--ease);
}
.brand-chip:hover{transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--g200)}
.brand-mono{width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-size:.8rem; font-family:var(--font-display); background:var(--bc,#334155)}
.brand-chip .bn{font-weight:700; font-size:.9rem; color:var(--ink-2); white-space:nowrap}
.brand-chip .bs{display:block; font-size:.66rem; color:var(--muted); font-weight:500}

/* ---------- Why choose us ---------- */
.why-grid{display:grid; grid-template-columns:1fr; gap:.9rem}
@media(min-width:576px){ .why-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:992px){ .why-grid{grid-template-columns:repeat(3,1fr); gap:1.1rem} }
.why-card{
  background:#fff; border:1px solid var(--line-soft); border-radius:20px; padding:1.4rem 1.3rem;
  transition:all .3s var(--ease); position:relative; overflow:hidden;
}
.why-card::after{content:""; position:absolute; width:120px; height:120px; border-radius:50%; right:-46px; top:-46px; background:var(--tint,#ECFDF5); opacity:0; transition:opacity .35s}
.why-card:hover{transform:translateY(-5px); box-shadow:var(--sh-md); border-color:var(--g200)}
.why-card:hover::after{opacity:.6}
.why-ic{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-size:1.35rem; background:var(--tint,#ECFDF5); color:var(--tc,#15803D); margin-bottom:.85rem; position:relative; z-index:1; transition:transform .3s var(--ease)}
.why-card:hover .why-ic{transform:scale(1.08) rotate(-6deg)}
.why-card h3{font-size:1.02rem; font-weight:700; margin-bottom:.3rem; position:relative; z-index:1}
.why-card p{font-size:.85rem; color:var(--muted); margin:0; position:relative; z-index:1}
.stats-band{
  margin-top:1.4rem; display:grid; grid-template-columns:repeat(2,1fr); gap:1rem;
  background:linear-gradient(120deg,var(--g50),#F0FDFA); border:1px solid var(--g100);
  border-radius:20px; padding:1.4rem 1.2rem;
}
@media(min-width:992px){ .stats-band{grid-template-columns:repeat(4,1fr); padding:1.7rem 2rem} }
.stat b{display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(1.35rem,2.4vw,1.8rem); color:var(--g800); line-height:1.1}
.stat span{font-size:.8rem; color:var(--muted); font-weight:500}

/* ---------- App section ---------- */
.app-panel{
  position:relative; overflow:hidden; isolation:isolate; border-radius:var(--r-lg); color:#fff;
  padding:2.2rem 1.4rem;
  background:
    radial-gradient(700px 300px at 110% -10%, rgba(245,158,11,.22), transparent 55%),
    radial-gradient(700px 380px at -15% 115%, rgba(34,197,94,.3), transparent 55%),
    linear-gradient(130deg,var(--g900),var(--g800) 55%,var(--g700));
}
.app-panel::after{content:""; position:absolute; inset:0; z-index:-1; opacity:.4; background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.6px); background-size:24px 24px}
@media(min-width:992px){ .app-panel{padding:3.2rem 3rem} }
.app-chip{display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:.35rem 1rem; font-size:.8rem; font-weight:700; margin-bottom:1rem}
.app-title{font-family:var(--font-display); font-weight:800; font-size:clamp(1.55rem,3.4vw,2.3rem); line-height:1.25; margin-bottom:.6rem}
.app-title .hl{color:var(--g300)}
.app-sub{color:#BBF7D0; opacity:.9; font-size:.95rem; max-width:30rem}
.app-points{list-style:none; padding:0; margin:1.1rem 0 1.4rem; display:grid; gap:.5rem}
.app-points li{display:flex; align-items:center; gap:.6rem; font-size:.92rem; font-weight:500}
.app-points i{color:var(--g300); font-size:1.05rem}
.store-row{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem}
.store-btn{
  display:inline-flex; align-items:center; gap:.65rem; background:#0B1220; border:1px solid rgba(255,255,255,.18);
  border-radius:14px; padding:.55rem 1.15rem; color:#fff; transition:all .25s var(--ease);
}
.store-btn:hover{transform:translateY(-3px); border-color:var(--g300); color:#fff; box-shadow:0 14px 28px -12px rgba(0,0,0,.6)}
.store-btn i{font-size:1.5rem}
.store-btn .st-cap{font-size:.62rem; opacity:.75; line-height:1}
.store-btn .st-name{font-weight:700; font-size:.95rem; line-height:1.2}
.qr-card{display:none; align-items:center; gap:.8rem; background:#fff; border-radius:18px; padding:.7rem .95rem; color:var(--ink); box-shadow:var(--sh-lg)}
.qr-card img{width:86px; height:86px; border-radius:10px}
.qr-card .qr-t{font-weight:700; font-size:.85rem; line-height:1.3}
.qr-card .qr-s{font-size:.72rem; color:var(--muted)}
@media(min-width:768px){ .qr-card{display:inline-flex} }
/* CSS phone mockup */
.phone-col{display:flex; justify-content:center; margin-top:2rem}
@media(min-width:992px){ .phone-col{margin-top:0} }
.phone{
  width:min(292px,86%); background:#0B1220; border-radius:44px; padding:12px;
  box-shadow:0 48px 90px -34px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08);
  transform:rotate(-3deg); animation:floaty 6.5s ease-in-out infinite;
}
.phone-screen{background:#F6F8FB; border-radius:34px; overflow:hidden}
.ph-notch{width:112px; height:22px; margin:0 auto; background:#0B1220; border-radius:0 0 16px 16px}
.ph-head{background:linear-gradient(135deg,var(--g600),var(--g700)); margin:-22px 0 0; padding:2rem .95rem 1rem; color:#fff}
.ph-hi{font-size:.72rem; opacity:.85}
.ph-name{font-weight:700; font-size:.95rem; line-height:1.2}
.ph-loc{display:inline-flex; align-items:center; gap:.3rem; font-size:.62rem; background:rgba(255,255,255,.16); border-radius:99px; padding:.14rem .5rem; margin-top:.4rem}
.ph-search{display:flex; align-items:center; gap:.5rem; background:#fff; border-radius:12px; margin:.8rem 0 0; padding:.5rem .7rem; color:#94A3B8; font-size:.72rem; box-shadow:0 6px 14px -8px rgba(0,0,0,.3)}
.ph-body{padding:.8rem .95rem 1rem}
.ph-cats{display:flex; gap:.4rem; margin-bottom:.75rem}
.ph-cats span{font-size:.62rem; font-weight:700; padding:.25rem .6rem; border-radius:99px; background:#fff; border:1px solid var(--line); color:var(--ink-2)}
.ph-cats span.on{background:var(--g600); border-color:var(--g600); color:#fff}
.ph-card{display:flex; align-items:center; gap:.6rem; background:#fff; border-radius:14px; padding:.5rem; margin-bottom:.55rem; box-shadow:var(--sh-sm)}
.ph-card img{width:44px; height:44px; border-radius:10px; object-fit:cover}
.ph-card .pc-n{font-size:.72rem; font-weight:700; line-height:1.25}
.ph-card .pc-p{font-size:.72rem; font-weight:800; color:var(--g700)}
.ph-card .pc-add{margin-left:auto; width:26px; height:26px; flex:none; border-radius:9px; border:0; background:var(--g50); color:var(--g700); font-weight:800; display:grid; place-items:center; font-size:.85rem}
.ph-nav{display:flex; justify-content:space-around; background:#fff; border-top:1px solid var(--line-soft); padding:.5rem 0 .65rem; font-size:.85rem; color:#94A3B8}
.ph-nav i.on{color:var(--g600)}

/* ---------- Reviews ---------- */
.rev-summary{display:flex; align-items:center; gap:.9rem; background:#fff; border:1px solid var(--line-soft); border-radius:18px; padding:.9rem 1.2rem; box-shadow:var(--sh-sm)}
.rev-summary .rs-num{font-family:var(--font-display); font-weight:800; font-size:2rem; color:var(--g800); line-height:1}
.rev-summary .stars{color:var(--amber); font-size:.85rem}
.rev-summary .rs-cap{font-size:.75rem; color:var(--muted)}
.rev-card{
  background:#fff; border:1px solid var(--line-soft); border-radius:20px; padding:1.35rem 1.3rem;
  height:100%; position:relative; transition:all .3s var(--ease);
}
.rev-card:hover{transform:translateY(-5px); box-shadow:var(--sh-md); border-color:var(--g200)}
.rev-card .quote{position:absolute; top:.9rem; right:1.1rem; font-size:2.4rem; color:var(--g100); line-height:1}
.rev-stars{color:var(--amber); font-size:.82rem; letter-spacing:1px; margin-bottom:.6rem}
.rev-text{font-size:.9rem; color:var(--ink-2); min-height:5.2em}
.rev-foot{display:flex; align-items:center; gap:.7rem; margin-top:1rem; padding-top:1rem; border-top:1px dashed var(--line)}
.rev-foot img{width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid var(--g100)}
.rev-foot .rf-n{font-weight:700; font-size:.9rem; line-height:1.2}
.rev-foot .rf-a{font-size:.72rem; color:var(--muted); display:inline-flex; align-items:center; gap:.25rem}
.rev-verified{margin-left:auto; font-size:.68rem; font-weight:700; color:var(--g700); background:var(--g50); border-radius:999px; padding:.22rem .6rem; display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap}

/* ---------- Blog ---------- */
.blog-card{background:#fff; border:1px solid var(--line-soft); border-radius:20px; overflow:hidden; height:100%; display:flex; flex-direction:column; transition:all .3s var(--ease)}
.blog-card:hover{transform:translateY(-5px); box-shadow:var(--sh-md); border-color:var(--g200)}
.blog-media{aspect-ratio:16/9.6; overflow:hidden}
.blog-media img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.blog-card:hover .blog-media img{transform:scale(1.07)}
.blog-body{padding:1.1rem 1.15rem 1.25rem; display:flex; flex-direction:column; flex:1}
.blog-tag{align-self:flex-start; font-size:.68rem; font-weight:800; border-radius:999px; padding:.22rem .7rem; margin-bottom:.55rem; background:var(--tint,#ECFDF5); color:var(--tc,#15803D)}
.blog-title{font-weight:700; font-size:1.02rem; line-height:1.4; margin-bottom:.35rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.blog-ex{font-size:.84rem; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:.8rem}
.blog-meta{margin-top:auto; display:flex; align-items:center; gap:.9rem; font-size:.74rem; color:var(--muted)}
.blog-meta span{display:inline-flex; align-items:center; gap:.3rem}
.blog-more{margin-left:auto; color:var(--g700); font-weight:700; display:inline-flex; align-items:center; gap:.3rem; transition:gap .25s}
.blog-card:hover .blog-more{gap:.55rem}

/* ---------- Newsletter ---------- */
.news-panel{
  position:relative; overflow:hidden; isolation:isolate; border-radius:var(--r-lg); color:#fff;
  padding:2.4rem 1.3rem; text-align:center;
  background:radial-gradient(640px 300px at 12% -20%, rgba(34,197,94,.35), transparent 55%),
             radial-gradient(640px 300px at 92% 120%, rgba(245,158,11,.3), transparent 55%),
             #0F172A;
}
@media(min-width:992px){ .news-panel{padding:3.3rem 2rem} }
.news-ic{width:60px; height:60px; margin:0 auto 1rem; border-radius:20px; display:grid; place-items:center; font-size:1.5rem; color:var(--g300); background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.3)}
.news-title{font-family:var(--font-display); font-weight:800; font-size:clamp(1.4rem,3vw,2rem); margin-bottom:.4rem}
.news-sub{color:#94A3B8; font-size:.92rem; max-width:34rem; margin:0 auto 1.5rem}
.news-form{display:flex; gap:.45rem; background:#fff; border-radius:999px; padding:6px; max-width:520px; margin:0 auto; box-shadow:0 22px 48px -20px rgba(0,0,0,.55)}
.news-form input{flex:1; min-width:0; border:0; outline:0; background:transparent; padding:.55rem 1.05rem; font-size:.92rem; color:var(--ink)}
.news-form .btn-brand{padding:.6rem 1.35rem; white-space:nowrap}
.news-note{font-size:.75rem; color:#64748B; margin-top:.85rem}

/* ---------- Footer ---------- */
.footer{background:var(--deep); color:#A8CDB8; font-size:.9rem; margin-top:2.5rem}
.footer-top{padding:3rem 0 2rem; display:grid; gap:2rem; grid-template-columns:1fr}
@media(min-width:768px){ .footer-top{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1200px){ .footer-top{grid-template-columns:2fr 1fr 1fr 1.1fr 1.3fr; gap:2.4rem} }
.f-brand .brand-name{font-size:1.5rem}
.f-brand .brand-name .t1{color:#fff}
.f-brand .brand-name .t2{color:var(--g300)}
.f-desc{font-size:.86rem; color:#7FAE93; margin:.8rem 0 1.2rem; max-width:21rem}
.f-contact{display:flex; align-items:center; gap:.7rem; margin-bottom:.8rem}
.f-contact .ic{width:38px; height:38px; flex:none; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.07); color:var(--g300)}
.f-contact .cap{font-size:.68rem; color:#7FAE93}
.f-contact .val{font-weight:700; color:#fff; font-size:.95rem; line-height:1.25}
.soc-row{display:flex; gap:.55rem; margin-top:1.1rem}
.soc{width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.07); color:#CDEBD9; font-size:1rem; transition:all .25s var(--ease)}
.soc:hover{background:var(--g500); color:#fff; transform:translateY(-3px)}
.f-title{color:#fff; font-weight:700; font-size:.95rem; margin-bottom:1rem; font-family:var(--font-display)}
.f-links{list-style:none; padding:0; margin:0}
.f-links li{margin-bottom:.55rem}
.f-links a{color:#A8CDB8; transition:all .2s; display:inline-flex; align-items:center; gap:.35rem}
.f-links a::before{content:"›"; color:var(--g500); font-weight:700; opacity:0; margin-left:-10px; transition:all .2s}
.f-links a:hover{color:#fff; padding-left:12px}
.f-links a:hover::before{opacity:1; margin-left:-12px}
.pay-strip{border-top:1px solid rgba(255,255,255,.1); padding:1.2rem 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.9rem}
.pay-chips{display:flex; flex-wrap:wrap; gap:.45rem; align-items:center}
.pay-chip{background:#fff; border-radius:9px; padding:.28rem .7rem; font-weight:800; font-size:.72rem; font-family:'Inter',sans-serif; letter-spacing:.01em}
.pay-cap{font-size:.78rem; color:#7FAE93; font-weight:600}
.area-cap{font-size:.78rem; color:#7FAE93}
.area-cap b{color:#CDEBD9; font-weight:600}
.f-bottom{border-top:1px solid rgba(255,255,255,.1); padding:1.1rem 0 1.3rem; display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center; justify-content:space-between; font-size:.8rem; color:#6E9E82}
.f-bottom .love{color:#CDEBD9}
.f-bottom .love i{color:#F87171}

/* ---------- Mobile bottom nav ---------- */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:1040; display:flex;
  background:rgba(255,255,255,.96); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line-soft); box-shadow:0 -10px 30px -18px rgba(2,44,34,.35);
  padding:.45rem .4rem calc(.5rem + env(safe-area-inset-bottom));
}
@media(min-width:992px){ .bottom-nav{display:none} }
.bn-item{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; border:0; background:none; color:#64748B; font-size:.66rem; font-weight:600; position:relative}
.bn-item i{font-size:1.22rem; line-height:1.3}
.bn-item.active{color:var(--g700)}
.bn-item.active::before{content:""; position:absolute; top:-9px; width:26px; height:3px; border-radius:0 0 6px 6px; background:var(--g600)}
.bn-badge{position:absolute; top:-3px; right:calc(50% - 18px); min-width:16px; height:16px; padding:0 4px; background:var(--amber); color:#fff; font-size:.58rem; font-weight:800; border-radius:99px; display:grid; place-items:center; border:2px solid #fff}

/* ---------- Skeleton (Phase 3-এ ব্যবহার হবে) ---------- */
.skeleton{position:relative; overflow:hidden; background:#EAEFF5; border-radius:12px; color:transparent!important}
.skeleton::after{content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s!important; transition-duration:.001s!important}
}

/* ============================================================
   ধাপ ২: রেসপন্সিভ ফাইন-টিউনিং
   ব্রেকপয়েন্ট: ≤380 · ≤767 · 768–991 · 992–1199 · টাচ ডিভাইস
   ============================================================ */

/* ---------- অতিরিক্ত ছোট মোবাইল (≤380px) ---------- */
@media(max-width:380px){
  .p-body{padding:.7rem .75rem .85rem}
  .p-name{font-size:.88rem}
  .p-now{font-size:1.02rem}
  .qty button{width:24px; height:30px}
  .qty b{width:20px; font-size:.8rem}
  .add-btn{font-size:.78rem; padding:.4rem .35rem}
  .hero-copy{padding:1.5rem 1.1rem 1.4rem}
  .hero-cta .btn-brand.btn-lg2{padding:.72rem 1.35rem; font-size:.95rem}
  .hero-cta .btn-ghost{padding:.6rem 1.2rem; font-size:.9rem}
  .cat-grid{gap:.9rem .45rem}
  .cat-name{font-size:.76rem}
  .cd-chip{min-width:46px; padding:.35rem .25rem .25rem}
  .news-form{flex-direction:column; border-radius:24px; padding:8px}
  .news-form input{padding:.65rem .9rem; text-align:center}
  .news-form .btn-brand{width:100%}
  .brand-chip{padding:.5rem 1rem .5rem .55rem}
  .header-inner{gap:.6rem}
  .act-btn{width:40px; height:40px}
}

/* ---------- মোবাইল (≤767px) ---------- */
@media(max-width:767.98px){
  .topbar .inner{justify-content:center}
  .sec-head{flex-wrap:wrap}
  .sec-link{padding:.42rem .95rem; font-size:.82rem}
  .hero-media{min-height:min(60vw,310px)}
  .float-card{padding:.5rem .7rem; border-radius:13px}
  .float-card .fc-ic{width:32px; height:32px; font-size:.95rem}
  .float-card .fc-t{font-size:.74rem}
  .float-card .fc-s{font-size:.62rem}
  .fc-a{top:10px; right:10px}
  .fc-b{bottom:14px; left:10px}
  .hero-frame .carousel-indicators{margin-bottom:.5rem}
  .trust-item{padding:.85rem .8rem; gap:.6rem}
  .trust-item .ti-ic{width:40px; height:40px; font-size:1.05rem}
  .flash-panel{border-radius:18px}
  .deal-body{padding:1.35rem 1.15rem 1.5rem}
  .deal-cd .cd-chip b{font-size:1rem}
  .app-points li{font-size:.87rem; align-items:flex-start}
  .app-points i{margin-top:.15rem}
  .rev-summary{width:100%; padding:.7rem 1rem}
  .rev-summary .rs-num{font-size:1.6rem}
  .rev-text{min-height:0}
  .stats-band{gap:.9rem .5rem; padding:1.15rem 1rem; text-align:center}
  .why-card{padding:1.2rem 1.1rem}
  .footer-top{gap:1.7rem; padding:2.4rem 0 1.6rem}
  .pay-strip{justify-content:center; text-align:center}
  .f-bottom{justify-content:center; text-align:center; gap:.35rem 1.5rem}
  .news-panel{border-radius:18px}
  .app-panel{border-radius:18px}
  .deal-card{border-radius:18px}
  .hero-frame{border-radius:18px}
}

/* ---------- ট্যাবলেট পোর্ট্রেট (768–991px) ---------- */
@media(min-width:768px) and (max-width:991.98px){
  .hero-media{min-height:350px}
  .hero-copy{padding:2.4rem 2rem 2.1rem}
  .hero-title{font-size:clamp(2rem,4.6vw,2.6rem)}
  .promo-card{min-height:185px; padding:1.3rem 1.15rem}
  .promo-title{font-size:1.1rem}
  .promo-sub{font-size:.78rem; margin-bottom:.7rem}
  .promo-link{font-size:.78rem; padding:.38rem .9rem}
  .promo-chip{font-size:.62rem}
  .hscroll .p-card{flex-basis:224px}
  .din-grid{gap:.8rem}
  .app-panel{padding:2.5rem 2rem}
  .phone{width:min(265px,62%); transform:rotate(-2deg)}
  .search-cat{padding:.35rem .7rem; font-size:.8rem}
}

/* ---------- ট্যাবলেট ল্যান্ডস্কেপ / ছোট ডেস্কটপ (992–1199px) ---------- */
@media(min-width:992px) and (max-width:1199.98px){
  .hero-grid{min-height:430px}
  .hero-media{min-height:430px}
  .hero-copy{padding:2.6rem 1rem 2.6rem 2.4rem}
  .search-wrap{flex-basis:280px; max-width:520px}
  .cart-pill .cp-ic{width:32px; height:32px}
  .deal-body{padding:2.2rem 2.2rem 2.2rem 1.4rem}
  .app-title{font-size:clamp(1.5rem,2.6vw,1.9rem)}
}

/* ---------- টাচ ডিভাইস: ক্যারোসেল অ্যারো সবসময় দৃশ্যমান ---------- */
@media(hover:none){
  .hero-frame .hero-ctrl{opacity:.92}
}
/* ================= Chaldal-স্টাইল সাইট সাইডবার ================= */
:root{--sbw:276px}
.sb-toggle{
  width:44px; height:44px; flex:none; border:0; border-radius:14px; background:#F1F5F9; color:var(--ink);
  font-size:1.4rem; display:grid; place-items:center; transition:all .25s var(--ease);
}
.sb-toggle:hover{background:var(--g50); color:var(--g700)}
.sb-toggle[aria-expanded="true"]{background:var(--g600); color:#fff; box-shadow:0 8px 18px -8px rgba(22,163,74,.6)}
.sb-backdrop{position:fixed; inset:0; z-index:1048; background:rgba(15,23,42,.45); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .3s}
.sb-backdrop.show{opacity:1; pointer-events:auto}
.site-sb{
  position:fixed; top:0; bottom:0; left:0; width:min(85vw,var(--sbw)); z-index:1049;
  background:#fff; border-right:1px solid var(--line-soft); display:flex; flex-direction:column;
  transform:translateX(-103%); transition:transform .32s var(--ease);
  box-shadow:24px 0 60px -32px rgba(2,44,34,.35);
}
body.sb-open .site-sb{transform:none}
.sb-head{display:flex; align-items:center; gap:.6rem; padding:.8rem .95rem; border-bottom:1px solid var(--line-soft); flex:none}
.sb-head .bi-basket2-fill{width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-size:1.1rem; color:#fff; background:linear-gradient(135deg,var(--g500),var(--g700))}
.sb-head .t{font-family:var(--font-display); font-weight:800; font-size:1.12rem; line-height:1}
.sb-head .t b{color:var(--g600); font-weight:800}
.sb-close{margin-left:auto; width:34px; height:34px; border:0; border-radius:10px; background:#F1F5F9; color:var(--ink-2); display:grid; place-items:center; transition:all .2s}
.sb-close:hover{background:#FEF2F2; color:#DC2626}
.sb-scroll{flex:1; overflow-y:auto; padding:.65rem .65rem 1rem; scrollbar-width:thin; scrollbar-color:#CBD5E1 transparent}
.sb-quick{display:grid; gap:2px; padding-bottom:.55rem; border-bottom:1px dashed var(--line); margin-bottom:.55rem}
.sb-q{display:flex; align-items:center; gap:.65rem; padding:.5rem .65rem; border-radius:12px; font-weight:700; font-size:.88rem; color:var(--ink-2); transition:all .2s}
.sb-q:hover{background:var(--g50); color:var(--g800)}
.sb-q i{width:20px; text-align:center; font-size:1rem}
.sb-title{font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:.45rem .65rem .45rem; margin:0}
.sb-cats{display:grid; gap:1px}
.sb-cat{display:flex; align-items:center; gap:.6rem; padding:.4rem .55rem; border-radius:12px; transition:background .2s}
.sb-cat:hover{background:var(--g50)}
.sb-cat.active{background:var(--g50); box-shadow:inset 3px 0 0 var(--g600)}
.sb-cat.active .name{color:var(--g800)}
.sb-thumb{display:block; width:34px; height:34px; flex:none; border-radius:50%; overflow:hidden; border:1px solid var(--line-soft); background:var(--bg)}
.sb-thumb img{display:block; width:100%; height:100%; object-fit:cover}
.sb-cat .name{font-weight:600; font-size:.86rem; flex:1; line-height:1.25; color:var(--ink-2)}
.sb-cat .cnt{font-size:.64rem; color:var(--muted); background:var(--bg); border-radius:99px; padding:.05rem .45rem}
.sb-cat .bi-chevron-right{font-size:.68rem; color:#CBD5E1; transition:all .2s}
.sb-cat:hover .bi-chevron-right{color:var(--g600); transform:translateX(2px)}
.sb-promo{margin:.8rem .25rem .2rem; padding:.85rem .95rem; border-radius:14px; color:#fff; background:linear-gradient(120deg,var(--g700),var(--g500)); font-size:.79rem; line-height:1.55}
.sb-promo b{font-family:var(--font-display)}
/* ডেস্কটপ ডকড মোড: কনটেন্ট ডানে সরে */
@media(min-width:1200px){
  .sb-backdrop{display:none}
  .site-sb{box-shadow:none}
  .topbar,.site-header,.cat-nav,main,.footer{transition:margin-left .32s var(--ease)}
  body.sb-docked .topbar, body.sb-docked .site-header, body.sb-docked .cat-nav,
  body.sb-docked main, body.sb-docked .footer{margin-left:var(--sbw)}
}
/* ================= সাইডবার v2 টিউনিং ================= */
.sb-close{position:absolute; top:.55rem; right:.55rem; z-index:3}
.sb-scroll{padding-top:.8rem}
@media(max-width:1199.98px){ .sb-scroll{padding-top:2.8rem} }
.sb-q{font-size:.96rem; padding:.6rem .7rem}
.sb-q i{font-size:1.05rem}
.sb-title{font-size:.75rem}
.sb-cat{padding:.48rem .6rem}
.sb-cat .name{font-size:.95rem}
.sb-cat .cnt{font-size:.7rem}
.sb-thumb{width:38px; height:38px}
/* ডকড অবস্থায় ফাঁকা জায়গা দূর: কনটেন্ট পুরো প্রস্থ জুড়ে */
@media(min-width:1200px){
  body.sb-docked .topbar .container-xxl, body.sb-docked .site-header .container-xxl,
  body.sb-docked .cat-nav .container-xxl, body.sb-docked main .container-xxl,
  body.sb-docked .footer .container-xxl{max-width:100%; padding-left:1.4rem; padding-right:1.4rem}
}
/* ================= প্রোডাক্ট কুইক ভিউ পপআপ ================= */
body.qv-open{overflow:hidden}
.p-media img{cursor:pointer}
.qv-wrap{position:fixed; inset:0; z-index:2050; display:none}
.qv-wrap.show{display:block}
.qv-backdrop{position:absolute; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(3px); animation:qvFade .25s}
@keyframes qvFade{from{opacity:0}}
.qv-modal{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(940px,94vw); max-height:92vh; overflow-y:auto; background:#fff; border-radius:24px;
  box-shadow:0 44px 90px -28px rgba(0,0,0,.55); display:grid; grid-template-columns:1fr;
  animation:qvPop .32s var(--ease);
}
@keyframes qvPop{from{opacity:0; transform:translate(-50%,-46%) scale(.95)}to{opacity:1; transform:translate(-50%,-50%) scale(1)}}
@media(min-width:768px){
  .qv-modal{grid-template-columns:1fr 1fr; overflow:hidden; max-height:88vh}
  .qv-body{overflow-y:auto; max-height:88vh}
}
.qv-media{position:relative; background:#F1F5F9; aspect-ratio:1}
@media(min-width:768px){ .qv-media{aspect-ratio:auto; min-height:100%} }
.qv-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; cursor:default}
.qv-media .p-off{position:absolute; top:14px; left:14px; font-size:.8rem; padding:.3rem .8rem}
.qv-close{
  position:absolute; top:12px; right:12px; z-index:5; width:38px; height:38px; border:0; border-radius:12px;
  background:rgba(255,255,255,.95); color:var(--ink-2); display:grid; place-items:center;
  box-shadow:var(--sh-md); transition:all .2s;
}
.qv-close:hover{background:#DC2626; color:#fff}
.qv-body{padding:1.35rem 1.35rem 1.5rem}
.qv-title{font-family:var(--font-display); font-weight:800; font-size:1.35rem; line-height:1.35; margin:.2rem 0 .35rem}
.qv-price{display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; background:var(--g50); border:1px solid var(--g100); border-radius:14px; padding:.7rem .95rem; margin:.75rem 0 .95rem}
.qv-now{font-family:var(--font-display); font-weight:800; font-size:1.65rem; color:var(--g800); line-height:1}
.qv-vlabel{display:block; font-size:.85rem; font-weight:800; margin-bottom:.5rem}
#qvVariants{display:flex; flex-wrap:wrap; gap:.5rem}
.qv-var{border:1.5px solid var(--line); background:#fff; border-radius:13px; padding:.45rem .95rem; text-align:center; transition:all .2s; cursor:pointer}
.qv-var .v-l{display:block; font-weight:700; font-size:.86rem; line-height:1.2}
.qv-var .v-p{display:block; font-size:.72rem; color:var(--muted); font-weight:600}
.qv-var:hover{border-color:var(--g300)}
.qv-var.on{border-color:var(--g600); background:var(--g50); box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.qv-var.on .v-p{color:var(--g700)}
.qv-foot{display:flex; gap:.6rem; align-items:center; margin:1rem 0 .6rem}
.qv-foot .qty button{width:36px; height:44px; font-size:1rem}
.qv-foot .qty b{width:30px; font-size:.98rem}
.qv-add{flex:1}
.qv-link{display:inline-flex; align-items:center; gap:.4rem; margin-top:.75rem; font-weight:700; font-size:.86rem; color:var(--g700)}
.qv-link:hover{text-decoration:underline}
.qv-note{background:#FFFBEB; border:1px dashed #FDE68A; border-radius:12px; padding:.6rem .9rem; font-size:.8rem; margin-top:.9rem}
.qv-note i{color:var(--amber-d); margin-right:.25rem}
.qv-stock{background:#FEF2F2; border:1px dashed #FECACA; color:#B91C1C; font-weight:700; border-radius:12px; padding:.55rem .9rem; font-size:.83rem; margin-top:.7rem}
/* স্ক্রল রিভিল */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .65s var(--ease), transform .65s var(--ease); transition-delay:var(--rd,0ms); will-change:opacity,transform}
.reveal.revealed{opacity:1; transform:none}
/* ইমেজ লোডিং স্কেলেটন */
.is-loading{position:relative}
.is-loading::after{content:""; position:absolute; inset:0; z-index:1; border-radius:inherit;
  background:linear-gradient(100deg,#EEF2F7 30%,#F8FAFC 48%,#EEF2F7 62%); background-size:220% 100%; animation:skelMove 1.1s linear infinite}
@keyframes skelMove{to{background-position:-120% 0}}
/* বাটন রিপল */
.rippleable{position:relative; overflow:hidden}
.ripple-ink{position:absolute; border-radius:50%; transform:scale(0); background:rgba(255,255,255,.5); animation:ripGo .55s ease-out forwards; pointer-events:none}
.add-btn .ripple-ink,.sec-link .ripple-ink{background:rgba(34,197,94,.28)}
@keyframes ripGo{to{transform:scale(2.8); opacity:0}}
/* টোস্ট */
#toasts{position:fixed; z-index:2100; right:14px; left:14px; bottom:calc(86px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; pointer-events:none}
@media(min-width:992px){ #toasts{bottom:24px; left:auto} }
.toast-tk{display:flex; align-items:center; gap:.6rem; background:#0F172A; color:#fff; font-size:.86rem; font-weight:600;
  border-radius:14px; padding:.62rem 1rem; box-shadow:var(--sh-lg); opacity:0; transform:translateY(12px) scale(.97);
  transition:all .35s var(--ease); max-width:min(92vw,340px)}
.toast-tk.in{opacity:1; transform:none}
.toast-tk i{color:var(--g300); font-size:1.05rem; flex:none}
.toast-tk.warn i{color:var(--amber)}
/* ব্যাক টু টপ */
#toTop{position:fixed; right:14px; bottom:calc(150px + env(safe-area-inset-bottom)); z-index:1050; width:44px; height:44px;
  border:1px solid var(--line-soft); border-radius:14px; background:rgba(255,255,255,.95); backdrop-filter:blur(8px); color:var(--g700);
  box-shadow:var(--sh-md); display:grid; place-items:center; font-size:1.05rem; opacity:0; pointer-events:none;
  transform:translateY(10px); transition:all .3s var(--ease)}
#toTop.show{opacity:1; pointer-events:auto; transform:none}
#toTop:hover{background:var(--g600); color:#fff; border-color:var(--g600)}
@media(min-width:992px){ #toTop{bottom:88px; right:22px} }
/* সার্চ সাজেশন */
.search-wrap{position:relative}
.search-sugg{position:absolute; top:calc(100% + 10px); left:0; right:0; background:#fff; border:1px solid var(--line-soft);
  border-radius:18px; box-shadow:var(--sh-lg); padding:.45rem; display:none; z-index:1080; max-height:min(62vh,430px); overflow:auto}
.search-sugg.open{display:block; animation:sugIn .22s var(--ease)}
@keyframes sugIn{from{opacity:0; transform:translateY(-6px)}to{opacity:1}}
.sg-cap{font-size:.68rem; font-weight:800; letter-spacing:.1em; color:var(--muted); padding:.45rem .65rem .25rem; text-transform:uppercase}
.sg-chips{display:flex; flex-wrap:wrap; gap:.4rem; padding:.25rem .55rem .55rem}
.sg-chip{border:1px solid var(--line); background:var(--bg); border-radius:999px; padding:.3rem .85rem; font-size:.8rem; font-weight:600; color:var(--ink-2); cursor:pointer; transition:all .2s}
.sg-chip:hover{background:var(--g50); border-color:var(--g300); color:var(--g800)}
.sg-item{display:flex; align-items:center; gap:.7rem; padding:.45rem .6rem; border-radius:12px; cursor:pointer; transition:background .15s}
.sg-item:hover{background:var(--g50)}
.sg-item img{width:38px; height:38px; border-radius:10px; object-fit:cover; flex:none}
.sg-item .n{font-size:.87rem; font-weight:600; line-height:1.25}
.sg-item .u{font-size:.7rem; color:var(--muted)}
.sg-item .p{margin-left:auto; font-weight:800; font-size:.85rem; color:var(--g700); white-space:nowrap}
.sg-skel{height:46px; border-radius:12px; margin:.35rem .45rem}
.sg-empty{padding:1rem; text-align:center; color:var(--muted); font-size:.85rem}
/* খালি কার্ট */
.cart-empty{text-align:center; padding:2.4rem 1rem; color:var(--muted)}
.cart-empty i{font-size:2.8rem; color:#CBD5E1; display:block; margin-bottom:.6rem}
.cart-empty b{display:block; color:var(--ink-2); font-size:1rem; margin-bottom:.25rem}
/* ব্যাজ পপ + উইশ + হেডার শ্যাডো + স্পিনার */
.badge-pop{animation:badgePop .45s var(--ease)}
@keyframes badgePop{45%{transform:scale(1.45)}}
.p-act.wish-on{background:#FFF1F2!important; color:#E11D48!important; opacity:1!important; transform:none!important}
.site-header.scrolled{box-shadow:0 10px 32px -18px rgba(2,44,34,.5)}
.spin{display:inline-block; animation:spinr .9s linear infinite}
@keyframes spinr{to{transform:rotate(360deg)}}
.add-btn.added{background:linear-gradient(135deg,var(--g500),var(--g600)); border-color:transparent; color:#fff}
/* অ্যাক্সেসিবিলিটি: কিবোর্ড ফোকাস রিং */
:focus-visible{outline:3px solid rgba(22,163,74,.6); outline-offset:2px}
.search-input:focus-visible,.news-form input:focus-visible{outline:none}
/* কনট্রাস্ট উন্নতি: ডিসকাউন্ট ব্যাজ */
.p-off{background:linear-gradient(135deg,#D97706,#EA580C)}

/* ================= প্রোডাক্ট লিস্ট পেজ ================= */
.crumb-wrap{background:#fff; border-bottom:1px solid var(--line-soft)}
.crumb{display:flex; align-items:center; gap:.45rem; list-style:none; margin:0; padding:.6rem 0; font-size:.82rem; color:var(--muted); flex-wrap:wrap}
.crumb a{color:var(--g700); font-weight:600}
.crumb a:hover{text-decoration:underline}
.crumb .sep i{font-size:.6rem; color:#CBD5E1}
.crumb .cur{color:var(--ink); font-weight:600}
.plp-hero{background:linear-gradient(120deg,var(--g50),#F0FDFA 55%,#F8FAFC); border-bottom:1px solid var(--g100); padding:1.3rem 0 1.15rem}
.plp-hero-inner{display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 2rem}
.plp-title{font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,3vw,2.05rem); margin:0; line-height:1.15}
.plp-sub{margin:.15rem 0 0; color:var(--muted); font-size:.9rem}
.plp-sub b{color:var(--g700)}
.plp-cats{display:flex; gap:.45rem; overflow-x:auto; scrollbar-width:none; margin-left:auto; max-width:100%; padding:2px}
.plp-cats::-webkit-scrollbar{display:none}
.pc-chip{flex:none; border:1px solid var(--line); background:#fff; border-radius:999px; padding:.4rem 1rem; font-size:.83rem; font-weight:600; color:var(--ink-2); transition:all .2s; cursor:pointer}
.pc-chip:hover{border-color:var(--g300); color:var(--g800)}
.pc-chip.active{background:var(--g600); border-color:var(--g600); color:#fff; box-shadow:0 6px 14px -6px rgba(22,163,74,.5)}
.plp-wrap{display:grid; grid-template-columns:1fr; gap:1.3rem; align-items:start}
@media(min-width:992px){ .plp-wrap{grid-template-columns:274px 1fr} }

/* ---------- ফিল্টার প্যানেল ---------- */
.fil-card{background:#fff; border:1px solid var(--line-soft); border-radius:18px; padding:1.05rem 1.1rem; box-shadow:var(--sh-sm)}
@media(min-width:992px){ .plp-side{position:sticky; top:86px} }
@media(max-width:991.98px){ .plp-side .fil-card{border:0; box-shadow:none; border-radius:0; padding:.25rem .25rem 1rem} }
.fil-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.3rem}
.fil-head h2{font-size:1rem; font-weight:800; margin:0; display:flex; gap:.5rem; align-items:center}
.fil-clear{border:0; background:none; color:#E11D48; font-size:.78rem; font-weight:700; padding:0}
.fil-group{padding:.8rem 0; border-top:1px dashed var(--line)}
.fil-group:first-of-type{border-top:0}
.fil-title{font-size:.84rem; font-weight:800; margin-bottom:.5rem; color:var(--ink)}
.fil-opt{display:flex; align-items:center; gap:.55rem; padding:.26rem 0; font-size:.88rem; color:var(--ink-2); cursor:pointer; margin:0}
.fil-opt input{accent-color:var(--g600); width:16px; height:16px; flex:none; cursor:pointer; margin:0}
.fil-opt .cnt{margin-left:auto; font-size:.7rem; color:var(--muted); background:var(--bg); border-radius:99px; padding:.05rem .5rem}
.fil-opt:hover{color:var(--g800)}
.stars-sm{color:var(--amber); font-size:.78rem}
.price-row{display:flex; gap:.4rem; margin-top:.55rem}
.price-row input{width:100%; min-width:0; border:1.5px solid var(--line); border-radius:10px; padding:.34rem .55rem; font-size:.85rem; outline:0; font-family:inherit}
.price-row input:focus{border-color:var(--g500); box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.price-apply{flex:none; border:1.5px solid var(--g200); border-radius:10px; background:var(--g50); color:var(--g700); font-weight:700; font-size:.82rem; padding:.34rem .8rem; transition:all .2s}
.price-apply:hover{background:var(--g600); border-color:var(--g600); color:#fff}
.fil-apply-mob{position:sticky; bottom:0; background:#fff; padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); border-top:1px solid var(--line-soft); box-shadow:0 -8px 24px -18px rgba(2,44,34,.4)}

/* ---------- টুলবার ---------- */
.plp-toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:.55rem .7rem; background:#fff; border:1px solid var(--line-soft); border-radius:16px; padding:.55rem .75rem; box-shadow:var(--sh-sm)}
.fil-btn{display:inline-flex; align-items:center; gap:.45rem; border:1.5px solid var(--line); background:var(--bg); border-radius:999px; padding:.42rem 1rem; font-weight:700; font-size:.85rem; position:relative; color:var(--ink-2)}
@media(min-width:992px){ .fil-btn{display:none} }
.fil-btn .fb-badge{position:absolute; top:-7px; right:-7px; min-width:18px; height:18px; background:var(--amber); color:#fff; border-radius:99px; font-size:.62rem; font-weight:800; display:grid; place-items:center; border:2px solid #fff}
.result-info{font-size:.82rem; color:var(--muted)}
.result-info b{color:var(--ink)}
.sort-wrap{margin-left:auto; display:flex; align-items:center; gap:.5rem}
.sort-sel{
  border:1.5px solid var(--line); border-radius:999px; background:#fff; font-size:.84rem; font-weight:600;
  color:var(--ink-2); padding:.4rem 2.1rem .4rem .95rem; outline:0; appearance:none; cursor:pointer; font-family:inherit;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M1 1l4 4 4-4" stroke="%2364748B" stroke-width="1.6" fill="none" stroke-linecap="round"/></svg>');
  background-repeat:no-repeat; background-position:right .85rem center;
}
.sort-sel:focus{border-color:var(--g500); box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.view-tg{display:none; border:1.5px solid var(--line); border-radius:999px; overflow:hidden}
@media(min-width:768px){ .view-tg{display:inline-flex} }
.view-tg button{border:0; background:#fff; width:38px; height:34px; display:grid; place-items:center; color:var(--muted); font-size:.95rem; transition:all .2s}
.view-tg button.on{background:var(--g600); color:#fff}

/* ---------- অ্যাক্টিভ চিপ ---------- */
.chips{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.7rem}
.chips[hidden]{display:none}
.f-chip{display:inline-flex; align-items:center; gap:.45rem; background:var(--g50); border:1px solid var(--g200); color:var(--g800); border-radius:999px; padding:.28rem .45rem .28rem .85rem; font-size:.78rem; font-weight:700}
.f-chip button{border:0; background:rgba(22,163,74,.14); color:var(--g800); width:18px; height:18px; border-radius:99px; display:grid; place-items:center; font-size:.58rem; transition:all .2s}
.f-chip button:hover{background:#E11D48; color:#fff}

/* ---------- গ্রিড ও লিস্ট ভিউ ---------- */
.plp-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; margin-top:1rem}
@media(min-width:768px){ .plp-grid{grid-template-columns:repeat(3,1fr); gap:1rem} }
@media(min-width:1400px){ .plp-grid{grid-template-columns:repeat(4,1fr)} }
.plp-grid.list{grid-template-columns:1fr}
.plp-grid.list .p-card{flex-direction:row; align-items:stretch}
.plp-grid.list .p-media{width:150px; flex:none; aspect-ratio:1; align-self:center; border-radius:14px; margin:.6rem 0 .6rem .6rem; overflow:hidden}
@media(min-width:768px){ .plp-grid.list .p-media{width:190px} }
.plp-grid.list .p-body{padding:.9rem 1.1rem; justify-content:center}
.plp-grid.list .p-name{min-height:0; font-size:1.02rem}
.plp-grid.list .p-foot{max-width:340px}

/* ---------- স্টক ---------- */
.p-card.oos .p-media::after{content:"স্টক নেই"; position:absolute; inset:0; z-index:2; display:grid; place-items:center; background:rgba(15,23,42,.52); color:#fff; font-weight:800; letter-spacing:.04em; backdrop-filter:blur(2px); border-radius:inherit}
.p-card.oos .add-btn{pointer-events:none; opacity:.45; filter:grayscale(1)}
.p-card.oos .qty{opacity:.45; pointer-events:none}
.low-stock{font-size:.7rem; color:#D97706; font-weight:700; margin-top:.3rem}

/* ---------- স্কেলেটন কার্ড ---------- */
.skel-card{background:#fff; border:1px solid var(--line-soft); border-radius:18px; overflow:hidden}
.skel-card .sm{aspect-ratio:1; border-radius:0}
.skel-card .sb{padding:.85rem .9rem}
.skel-card .sl{height:12px; border-radius:8px; margin-bottom:.55rem}

/* ---------- পেজার ---------- */
.pager{display:flex; justify-content:center; align-items:center; gap:.35rem; margin-top:1.6rem; flex-wrap:wrap}
.pg-btn{min-width:40px; height:40px; padding:0 .55rem; border:1.5px solid var(--line); background:#fff; border-radius:12px; font-weight:700; font-size:.9rem; color:var(--ink-2); display:grid; place-items:center; transition:all .2s; cursor:pointer}
.pg-btn:hover{border-color:var(--g300); color:var(--g700); transform:translateY(-1px)}
.pg-btn.on{background:linear-gradient(135deg,var(--g500),var(--g600)); border-color:transparent; color:#fff; box-shadow:var(--sh-glow); pointer-events:none}
.pg-btn:disabled{opacity:.4; pointer-events:none}
.pg-dots{color:#94A3B8; padding:0 .15rem; font-weight:700}

/* ---------- খালি স্টেট ---------- */
.empty-box{text-align:center; padding:3rem 1rem; background:#fff; border:1.5px dashed var(--line); border-radius:20px; margin-top:1rem}
.empty-box i{font-size:3rem; color:#CBD5E1}
.empty-box h3{font-weight:800; font-size:1.1rem; margin:.6rem 0 .2rem}
.empty-box p{color:var(--muted); font-size:.9rem; margin-bottom:.4rem}

/* ================= প্রোডাক্ট ডিটেইল পেজ ================= */
.pd-card{background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:1rem}
@media(min-width:992px){ .pd-card{padding:1.6rem} }
.pd-wrap{display:grid; grid-template-columns:1fr; gap:1.4rem}
@media(min-width:992px){ .pd-wrap{grid-template-columns:1.02fr .98fr; gap:2.2rem} }

/* ---------- গ্যালারি ---------- */
.pd-main{position:relative; aspect-ratio:1; border-radius:18px; overflow:hidden; background:#F1F5F9; cursor:zoom-in}
.pd-main img{width:100%; height:100%; object-fit:cover; transition:transform .35s var(--ease)}
.pd-main img.zoom{transform:scale(1.75)}
.pd-main .p-off,.pd-main .p-flag{top:14px; left:14px; font-size:.8rem; padding:.3rem .8rem}
.pd-wish{position:absolute; top:14px; right:14px; z-index:3; width:42px; height:42px; border-radius:14px; opacity:1!important; transform:none!important; font-size:1.1rem}
.pd-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin-top:.6rem}
.pd-thumb{border:2px solid var(--line); border-radius:14px; overflow:hidden; background:#F1F5F9; aspect-ratio:1; padding:0; transition:all .2s}
.pd-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.pd-thumb.on{border-color:var(--g600); box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.pd-thumb:hover{border-color:var(--g300)}

/* ---------- বাই-বক্স ---------- */
.pd-cat{font-size:.8rem; font-weight:700; color:var(--g700); letter-spacing:.04em}
.pd-cat:hover{text-decoration:underline}
.pd-title{font-family:var(--font-display); font-weight:800; font-size:clamp(1.4rem,2.6vw,1.95rem); line-height:1.3; margin:.25rem 0 .5rem}
.pd-meta{display:flex; align-items:center; flex-wrap:wrap; gap:.35rem .7rem; font-size:.88rem; margin-bottom:.9rem}
.pd-meta .stars{color:var(--amber); letter-spacing:1px}
.pd-revlink{color:var(--g700); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.pd-sold{color:var(--muted); font-size:.8rem}
.pd-price{display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; padding:.85rem 1rem; background:var(--g50); border:1px solid var(--g100); border-radius:16px; margin-bottom:1rem}
.pd-now{font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,3vw,2.1rem); color:var(--g800); line-height:1}
.pd-was{font-size:1.05rem; color:#94A3B8; text-decoration:line-through}
.pd-vlabel{display:block; font-size:.85rem; font-weight:800; margin-bottom:.5rem}
.pd-variants{display:flex; flex-wrap:wrap; gap:.5rem}
.pd-var{border:1.5px solid var(--line); background:#fff; border-radius:14px; padding:.5rem .95rem; text-align:center; transition:all .2s; cursor:pointer}
.pd-var .v-l{display:block; font-weight:700; font-size:.88rem; line-height:1.2}
.pd-var .v-p{display:block; font-size:.75rem; color:var(--muted); font-weight:600}
.pd-var:hover{border-color:var(--g300)}
.pd-var.on{border-color:var(--g600); background:var(--g50); box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.pd-var.on .v-p{color:var(--g700)}
.pd-vwrap{margin-bottom:1rem}
.pd-stock{margin-bottom:1rem; font-size:.85rem}
.pd-stock .in{display:inline-flex; align-items:center; gap:.4rem; color:var(--g700); font-weight:700; background:var(--g50); border:1px solid var(--g200); border-radius:999px; padding:.3rem .9rem}
.pd-stock .out{display:inline-flex; align-items:center; gap:.4rem; color:#B91C1C; font-weight:700; background:#FEF2F2; border:1px solid #FECACA; border-radius:999px; padding:.3rem .9rem}
.pd-stock .low-wrap{max-width:280px; margin-top:.5rem}
.pd-buyrow{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-bottom:1.1rem}
.qty-lg button{width:38px; height:44px; font-size:1rem}
.qty-lg b{width:34px; font-size:1rem}
.pd-add{flex:1 1 200px}
.pd-buynow{flex:1 1 150px}
.pd-delivery{display:grid; gap:.45rem; background:#FFFBEB; border:1px dashed #FDE68A; border-radius:16px; padding:.85rem 1rem; font-size:.84rem; margin-bottom:.9rem}
.pd-delivery i{color:var(--amber-d); margin-right:.25rem}
.pd-trust{display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; font-size:.8rem; color:var(--muted); font-weight:600; margin-bottom:.6rem}
.pd-trust i{color:var(--g600); margin-right:.25rem}
.pd-origin{font-size:.84rem; background:var(--g50); border:1px solid var(--g100); border-radius:12px; padding:.55rem .9rem; color:var(--ink-2)}
.pd-origin i{color:var(--g600)}

/* ---------- ট্যাব ---------- */
.pd-tabs{margin-top:1.6rem; border-top:1px dashed var(--line); padding-top:1.2rem}
.pd-nav{display:flex; gap:.4rem; list-style:none; padding:0; margin:0 0 1rem; flex-wrap:wrap}
.pd-tab{border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:.5rem 1.2rem; font-weight:700; font-size:.88rem; color:var(--ink-2); transition:all .2s}
.pd-tab:hover{border-color:var(--g300); color:var(--g800)}
.pd-tab.active{background:var(--g600); border-color:var(--g600); color:#fff; box-shadow:0 6px 14px -6px rgba(22,163,74,.5)}
.pd-tabbody{font-size:.92rem; color:var(--ink-2); max-width:56rem}
.pd-desc{line-height:1.85}
.pd-highlights{list-style:none; padding:0; margin:.6rem 0 0; display:grid; gap:.5rem}
.pd-highlights li{display:flex; gap:.6rem; align-items:flex-start; line-height:1.6}
.pd-highlights i{color:var(--g600); margin-top:.2rem; flex:none}
.pd-spec{width:100%; max-width:34rem; border-collapse:collapse; font-size:.9rem}
.pd-spec td{padding:.6rem .4rem; border-bottom:1px dashed var(--line)}
.pd-spec td:first-child{color:var(--muted); width:40%; font-weight:600}
.pd-spec td:last-child{font-weight:600; color:var(--ink)}

/* ---------- রিভিউ ---------- */
.pd-rev-wrap{display:grid; grid-template-columns:1fr; gap:1.2rem; align-items:start}
@media(min-width:992px){ .pd-rev-wrap{grid-template-columns:300px 1fr; gap:1.6rem} .pd-rev-summary{position:sticky; top:96px} }
.pd-rev-summary{background:#fff; border:1px solid var(--line-soft); border-radius:20px; padding:1.4rem; text-align:center; box-shadow:var(--sh-sm)}
.rs-big{font-family:var(--font-display); line-height:1}
.rs-big b{font-size:3rem; font-weight:800; color:var(--g800)}
.rs-big span{font-size:1.1rem; color:var(--muted)}
.pd-rev-summary .stars{color:var(--amber); font-size:1rem; letter-spacing:2px; margin:.35rem 0}
.rs-total{font-size:.82rem; color:var(--muted); margin-bottom:1rem}
.rs-bars{display:grid; gap:.45rem; text-align:left}
.rs-bar{display:flex; align-items:center; gap:.6rem; font-size:.78rem; color:var(--muted)}
.rs-bar .lb{width:26px; font-weight:700; color:var(--ink-2); white-space:nowrap}
.rs-bar .tr{flex:1; height:8px; border-radius:99px; background:#EEF2F7; overflow:hidden}
.rs-bar .tr span{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--g500),var(--g600))}
.rs-bar .pc{width:36px; text-align:right; font-weight:600}
.pd-rev-list{display:grid; gap:.9rem}
.rev-item{background:#fff; border:1px solid var(--line-soft); border-radius:18px; padding:1.1rem 1.2rem; box-shadow:var(--sh-sm)}
.rev-item .ri-head{display:flex; align-items:center; gap:.7rem; margin-bottom:.5rem}
.rev-item .ri-av{width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:800; color:#fff; background:var(--av,#16A34A); font-size:.95rem}
.rev-item .ri-n{font-weight:700; font-size:.92rem; line-height:1.2}
.rev-item .ri-a{font-size:.72rem; color:var(--muted)}
.rev-item .ri-stars{margin-left:auto; color:var(--amber); font-size:.8rem; letter-spacing:1px; text-align:right}
.rev-item .ri-date{display:block; font-size:.68rem; color:var(--muted); font-weight:500; letter-spacing:0}
.rev-item p{margin:0; font-size:.9rem; color:var(--ink-2); line-height:1.7}
.ri-new{display:inline-block; font-size:.66rem; font-weight:800; color:#fff; background:var(--amber); border-radius:99px; padding:.1rem .5rem; margin-left:.4rem; vertical-align:middle}
.rev-form{background:#fff; border:1.5px dashed var(--g300); border-radius:18px; padding:1.2rem; display:grid; gap:.75rem}
.rev-form h3{font-size:1rem; font-weight:800; margin:0}
.rf-stars{display:flex; gap:.25rem}
.rf-stars button{border:0; background:none; font-size:1.5rem; color:#D8DEE6; padding:.1rem; transition:all .15s; line-height:1}
.rf-stars button.on{color:var(--amber); transform:scale(1.08)}
.rev-form input,.rev-form textarea{border:1.5px solid var(--line); border-radius:12px; padding:.6rem .85rem; font-size:.9rem; font-family:inherit; outline:0; resize:vertical}
.rev-form input:focus,.rev-form textarea:focus{border-color:var(--g500); box-shadow:0 0 0 3px rgba(34,197,94,.14)}

/* ---------- মোবাইল স্টিকি বাই-বার ---------- */
.pd-buybar{position:fixed; left:0; right:0; bottom:calc(62px + env(safe-area-inset-bottom)); z-index:1035;
  background:rgba(255,255,255,.97); backdrop-filter:blur(14px); border-top:1px solid var(--line-soft);
  box-shadow:0 -10px 30px -18px rgba(2,44,34,.4); padding:.55rem .9rem;
  display:flex; align-items:center; gap:.8rem; transform:translateY(120%); transition:transform .3s var(--ease)}
.pd-buybar.show{transform:none}
@media(min-width:992px){ .pd-buybar{display:none} }
.pd-buybar .bb-p{line-height:1.15}
.pd-buybar .bb-now{font-weight:800; font-size:1.05rem; color:var(--g800)}
.pd-buybar .bb-u{font-size:.7rem; color:var(--muted)}
.pd-buybar .btn-brand{flex:1; padding:.6rem 1rem}
@media(max-width:991.98px){ #main{padding-bottom:64px} }

/* ================= কার্ট ও চেকআউট পেজ ================= */
.ct-wrap{display:grid; grid-template-columns:1fr; gap:1.2rem; align-items:start}
@media(min-width:992px){ .ct-wrap{grid-template-columns:1fr 384px; gap:1.5rem} }
.ct-items-card,.co-card{background:#fff; border:1px solid var(--line-soft); border-radius:20px; padding:1.1rem 1.2rem; box-shadow:var(--sh-sm)}
.ct-row{display:grid; grid-template-columns:76px 1fr auto; gap:.6rem .9rem; align-items:center; padding:.95rem 0; border-bottom:1px dashed var(--line)}
.ct-row:last-child{border-bottom:0}
.ct-row img{width:76px; height:76px; border-radius:14px; object-fit:cover; border:1px solid var(--line-soft); grid-row:span 2}
.ct-n{font-weight:700; font-size:.95rem; line-height:1.35}
.ct-u{font-size:.75rem; color:var(--muted)}
.ct-up{font-size:.75rem; color:var(--muted)}
.ct-right{display:flex; align-items:center; gap:.9rem; grid-column:2/4; justify-content:space-between}
@media(min-width:768px){
  .ct-row{grid-template-columns:84px 1fr auto auto auto}
  .ct-row img{width:84px; height:84px; grid-row:auto}
  .ct-right{display:contents}
}
.ct-line{font-weight:800; font-size:1rem; min-width:84px; text-align:right}
.ct-del{border:0; background:#FEF2F2; color:#DC2626; width:36px; height:36px; border-radius:12px; display:grid; place-items:center; transition:all .2s}
.ct-del:hover{background:#DC2626; color:#fff}
.ct-empty{text-align:center; padding:3.2rem 1rem}
.ct-empty i{font-size:3.4rem; color:#CBD5E1}
.ct-empty h3{font-weight:800; margin:.7rem 0 .25rem}
.ct-empty p{color:var(--muted); font-size:.9rem}
/* সামারি */
.ct-summary{background:#fff; border:1px solid var(--line-soft); border-radius:20px; padding:1.2rem 1.25rem; box-shadow:var(--sh-sm)}
@media(min-width:992px){ .ct-summary{position:sticky; top:90px} }
.ct-summary h2,.co-card h2{font-size:1.02rem; font-weight:800; margin:0 0 .9rem; display:flex; align-items:center; gap:.5rem}
.sum-row{display:flex; justify-content:space-between; align-items:center; font-size:.9rem; padding:.3rem 0; color:var(--ink-2)}
.sum-row b{font-variant-numeric:tabular-nums}
.sum-row.disc{color:var(--g700)}
.sum-total{display:flex; justify-content:space-between; align-items:center; border-top:1.5px dashed var(--line); margin-top:.6rem; padding-top:.8rem; font-weight:800}
.sum-total .amt{font-family:var(--font-display); font-size:1.45rem; color:var(--g800)}
.promo-box{display:flex; gap:.45rem; margin:.9rem 0 .5rem}
.promo-box input{flex:1; min-width:0; border:1.5px solid var(--line); border-radius:12px; padding:.5rem .8rem; font-size:.88rem; font-family:inherit; outline:0; text-transform:uppercase}
.promo-box input:focus{border-color:var(--g500); box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.promo-box button{border:1.5px solid var(--g200); background:var(--g50); color:var(--g700); font-weight:700; border-radius:12px; padding:.5rem 1rem; transition:all .2s}
.promo-box button:hover{background:var(--g600); border-color:var(--g600); color:#fff}
.promo-chip{display:flex; align-items:center; gap:.5rem; background:var(--g50); border:1px dashed var(--g300); border-radius:12px; padding:.5rem .8rem; font-size:.82rem; font-weight:700; color:var(--g800); margin-bottom:.5rem}
.promo-chip button{margin-left:auto; border:0; background:none; color:#DC2626; font-size:.9rem}
.ct-trust{display:flex; flex-wrap:wrap; gap:.4rem .9rem; font-size:.74rem; color:var(--muted); font-weight:600; margin-top:.8rem}
.ct-trust i{color:var(--g600)}
/* চেকআউট ধাপ */
.steps{display:flex; list-style:none; padding:0; margin:0 0 1.3rem; gap:.4rem}
.steps li{flex:1; display:flex; align-items:center; gap:.55rem; background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:.55rem .8rem; font-size:.8rem; font-weight:700; color:var(--muted)}
.steps li .n{width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; background:#EEF2F7; font-size:.78rem}
.steps li.on{border-color:var(--g500); color:var(--g800); box-shadow:0 0 0 3px rgba(34,197,94,.12)}
.steps li.on .n{background:var(--g600); color:#fff}
.steps li.done{border-color:var(--g200); color:var(--g700)}
.steps li.done .n{background:var(--g100); color:var(--g700)}
@media(max-width:575.98px){ .steps li span.t{display:none} .steps li{justify-content:center} }
.co-wrap{display:grid; grid-template-columns:1fr; gap:1.2rem; align-items:start}
@media(min-width:992px){ .co-wrap{grid-template-columns:1fr 372px; gap:1.5rem} .co-side{position:sticky; top:90px} }
.co-left{display:grid; gap:1.2rem}
.co-item{display:flex; align-items:center; gap:.75rem; padding:.55rem 0; border-bottom:1px dashed var(--line); font-size:.88rem}
.co-item:last-child{border-bottom:0}
.co-item img{width:46px; height:46px; border-radius:10px; object-fit:cover; flex:none}
.co-item .q{color:var(--muted); font-size:.78rem}
.co-item b{margin-left:auto; font-variant-numeric:tabular-nums; white-space:nowrap}
/* ফর্ম */
.fi{display:block; margin-bottom:.85rem}
.fi > span{display:block; font-size:.82rem; font-weight:700; margin-bottom:.35rem}
.fi > span .req{color:#DC2626}
.fi input,.fi select,.fi textarea{width:100%; border:1.5px solid var(--line); border-radius:12px; padding:.6rem .85rem; font-size:.9rem; font-family:inherit; outline:0; background:#fff; transition:border .2s, box-shadow .2s}
.fi input:focus,.fi select:focus,.fi textarea:focus{border-color:var(--g500); box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.fi.err input,.fi.err textarea,.fi.err select{border-color:#DC2626; box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.fi .hint{font-size:.72rem; color:#DC2626; margin-top:.25rem; display:none}
.fi.err .hint{display:block}
.co-grid2{display:grid; grid-template-columns:1fr; gap:0 .9rem}
@media(min-width:576px){ .co-grid2{grid-template-columns:1fr 1fr} }
.co-sub{font-size:.95rem; font-weight:800; margin:1.2rem 0 .7rem; display:flex; align-items:center; gap:.5rem}
.co-sub i{color:var(--g600)}
/* তারিখ ও স্লট */
.date-pills{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.7rem}
.dp{border:1.5px solid var(--line); background:#fff; border-radius:14px; padding:.45rem 1rem; font-weight:700; font-size:.84rem; color:var(--ink-2); transition:all .2s}
.dp small{display:block; font-weight:600; font-size:.68rem; color:var(--muted)}
.dp.on{border-color:var(--g600); background:var(--g50); color:var(--g800); box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.slot-grid{display:grid; grid-template-columns:1fr 1fr; gap:.55rem}
@media(min-width:768px){ .slot-grid{grid-template-columns:repeat(3,1fr)} }
.slot{border:1.5px solid var(--line); background:#fff; border-radius:14px; padding:.6rem .75rem; text-align:left; font-size:.82rem; font-weight:700; color:var(--ink-2); transition:all .2s; position:relative}
.slot small{display:block; font-weight:600; font-size:.68rem; color:var(--muted)}
.slot.on{border-color:var(--g600); background:var(--g50); box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.slot.on::after{content:"✓"; position:absolute; top:6px; right:9px; color:var(--g600); font-weight:800}
.slot:disabled{opacity:.42; text-decoration:line-through}
.slot.exp{border-color:#FDE68A; background:#FFFBEB}
.slot.exp.on{border-color:var(--amber); box-shadow:0 0 0 3px rgba(245,158,11,.2)}
/* পেমেন্ট */
.pay-grid2{display:grid; grid-template-columns:1fr 1fr; gap:.55rem}
@media(min-width:768px){ .pay-grid2{grid-template-columns:repeat(4,1fr)} }
.pm{border:1.5px solid var(--line); background:#fff; border-radius:14px; padding:.7rem .6rem; text-align:center; font-size:.8rem; font-weight:700; color:var(--ink-2); transition:all .2s}
.pm i{display:block; font-size:1.25rem; margin-bottom:.25rem; color:var(--pc,#16A34A)}
.pm.on{border-color:var(--g600); background:var(--g50); box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.pay-note{background:#FFFBEB; border:1px dashed #FDE68A; border-radius:12px; padding:.6rem .85rem; font-size:.8rem; color:#92400E; margin-top:.6rem}
/* সাকসেস */
.succ-wrap{max-width:640px; margin:0 auto}
.succ-card{background:#fff; border:1px solid var(--line-soft); border-radius:24px; padding:2.2rem 1.4rem; text-align:center; box-shadow:var(--sh-md)}
.succ-check{width:92px; height:92px; margin:0 auto 1rem; border-radius:50%; display:grid; place-items:center; font-size:2.6rem; color:#fff; background:linear-gradient(135deg,var(--g500),var(--g600)); box-shadow:0 18px 40px -12px rgba(34,197,94,.6); animation:succPop .6s var(--ease) both}
@keyframes succPop{0%{transform:scale(.3); opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1); opacity:1}}
.succ-card h1{font-family:var(--font-display); font-weight:800; font-size:1.6rem; margin-bottom:.3rem}
.succ-card .sub{color:var(--muted); font-size:.92rem}
.succ-id{display:inline-flex; align-items:center; gap:.5rem; background:var(--g50); border:1.5px dashed var(--g300); color:var(--g800); border-radius:999px; padding:.5rem 1.2rem; font-weight:800; margin:1rem 0; font-size:1rem}
.succ-grid{display:grid; grid-template-columns:1fr 1fr; gap:.6rem; text-align:left; margin:1rem 0}
.sg-box{background:var(--bg); border:1px solid var(--line-soft); border-radius:14px; padding:.7rem .85rem}
.sg-box .k{font-size:.7rem; color:var(--muted); font-weight:700}
.sg-box .v{font-size:.86rem; font-weight:700; line-height:1.35}
.succ-tl{text-align:left; margin:1.2rem 0; display:grid; gap:0}
.tl-item{display:flex; gap:.8rem; position:relative; padding-bottom:1.1rem}
.tl-item::before{content:""; position:absolute; left:13px; top:26px; bottom:0; width:2px; background:var(--g100)}
.tl-item:last-child::before{display:none}
.tl-dot{width:28px; height:28px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:.8rem; background:var(--g50); color:var(--g700); border:1.5px solid var(--g200); z-index:1}
.tl-item.now .tl-dot{background:var(--g600); color:#fff; border-color:var(--g600); animation:pulseGlow 2s infinite}
.tl-t{font-weight:700; font-size:.88rem; line-height:1.3}
.tl-s{font-size:.74rem; color:var(--muted)}

/* ================= অর্ডার ট্র্যাকিং পেজ ================= */
.ot-search{background:#fff; border:1px solid var(--line-soft); border-radius:18px; padding:1rem 1.1rem; box-shadow:var(--sh-sm); display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-bottom:1.2rem}
.ot-search .cap{font-weight:800; font-size:.9rem; display:flex; align-items:center; gap:.5rem}
.ot-search .cap i{color:var(--g600)}
.ot-search .box{display:flex; gap:.45rem; flex:1 1 300px}
.ot-search input{flex:1; min-width:0; border:1.5px solid var(--line); border-radius:12px; padding:.55rem .85rem; font-size:.9rem; font-family:inherit; outline:0; text-transform:uppercase; letter-spacing:.03em}
.ot-search input:focus{border-color:var(--g500); box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.demo-chip{font-size:.72rem; font-weight:700; color:#92400E; background:#FFFBEB; border:1px dashed #FDE68A; border-radius:999px; padding:.3rem .8rem}
.ot-card{background:#fff; border:1px solid var(--line-soft); border-radius:20px; padding:1.1rem 1.2rem; box-shadow:var(--sh-sm); margin-bottom:1rem; transition:box-shadow .3s, border-color .3s}
.ot-card.flash{border-color:var(--g500); box-shadow:0 0 0 4px rgba(34,197,94,.18), var(--sh-md)}
.ot-head{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; padding-bottom:.85rem; border-bottom:1px dashed var(--line)}
.ot-id{font-weight:800; font-size:1.02rem; letter-spacing:.02em}
.ot-id i{color:var(--g600); margin-right:.3rem}
.ot-date{display:block; font-size:.74rem; color:var(--muted); font-weight:500}
.ot-badge{margin-left:auto; font-size:.74rem; font-weight:800; border-radius:999px; padding:.32rem .9rem; white-space:nowrap}
.ot-badge.s1{background:#F0F9FF; color:#0369A1; border:1px solid #BAE6FD}
.ot-badge.s2{background:#EEF2FF; color:#4338CA; border:1px solid #C7D2FE}
.ot-badge.s3{background:#FFFBEB; color:#B45309; border:1px solid #FDE68A}
.ot-badge.s4{background:#FAF5FF; color:#7E22CE; border:1px solid #E9D5FF}
.ot-badge.s5{background:var(--g50); color:var(--g800); border:1px solid var(--g200)}
.ot-total{font-family:var(--font-display); font-weight:800; font-size:1.15rem; color:var(--g800); white-space:nowrap}
/* টাইমলাইন স্টেপার */
.ot-tl{display:flex; margin:1.15rem 0 .3rem}
.ot-step{flex:1; text-align:center; position:relative; min-width:0}
.ot-step::before{content:""; position:absolute; top:17px; right:50%; width:100%; height:3px; border-radius:99px; background:#EEF2F7; z-index:0}
.ot-step:first-child::before{display:none}
.ot-step.done::before{background:var(--g500)}
.ot-step.now::before{background:linear-gradient(90deg,var(--g500) 40%,#EEF2F7)}
.ot-dot{width:36px; height:36px; border-radius:50%; margin:0 auto .4rem; display:grid; place-items:center; font-size:.95rem; background:#EEF2F7; color:#94A3B8; position:relative; z-index:1; border:3px solid #fff; transition:all .3s}
.ot-step.done .ot-dot{background:var(--g600); color:#fff}
.ot-step.now .ot-dot{background:#fff; color:var(--g700); box-shadow:0 0 0 2.5px var(--g500); animation:pulseGlow 2s infinite}
.ot-lbl{font-size:.66rem; font-weight:700; color:#94A3B8; line-height:1.25; padding:0 2px}
.ot-step.done .ot-lbl,.ot-step.now .ot-lbl{color:var(--g800)}
.ot-eta{font-size:.76rem; color:var(--muted); text-align:center; margin-bottom:.4rem}
.ot-eta b{color:var(--g700)}
@media(min-width:768px){ .ot-lbl{font-size:.74rem} .ot-dot{width:40px; height:40px} .ot-step::before{top:19px} }
/* অ্যাকশন ও ডিটেইল */
.ot-actions{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem}
.ot-btn{display:inline-flex; align-items:center; gap:.4rem; border:1.5px solid var(--line); background:var(--bg); border-radius:999px; padding:.45rem 1.05rem; font-weight:700; font-size:.82rem; color:var(--ink-2); transition:all .2s}
.ot-btn:hover{border-color:var(--g300); background:var(--g50); color:var(--g800)}
.ot-btn.pri{background:var(--g50); border-color:var(--g200); color:var(--g700)}
.ot-btn.pri:hover{background:var(--g600); border-color:var(--g600); color:#fff}
.ot-btn .bi-chevron-down{transition:transform .25s}
.ot-btn[aria-expanded="true"] .bi-chevron-down{transform:rotate(180deg)}
.ot-det{border-top:1px dashed var(--line); margin-top:1rem; padding-top:1rem; display:grid; gap:1rem}
@media(min-width:992px){ .ot-det{grid-template-columns:1.1fr .9fr; gap:1.4rem} }
.ot-items .co-item img{width:42px; height:42px}
.ot-info{display:grid; gap:.55rem; align-content:start}
.oi-row{display:flex; gap:.6rem; font-size:.84rem; background:var(--bg); border:1px solid var(--line-soft); border-radius:12px; padding:.55rem .8rem}
.oi-row i{color:var(--g600); flex:none; margin-top:.1rem}
.oi-row .k{font-size:.68rem; color:var(--muted); font-weight:700; display:block}
.oi-row .v{font-weight:600; line-height:1.4}
.oi-row.rider{background:#FFFBEB; border-color:#FDE68A}
.oi-row.rider i{color:var(--amber-d)}
.oi-sum{font-size:.84rem; display:grid; gap:.2rem; background:var(--bg); border:1px solid var(--line-soft); border-radius:12px; padding:.7rem .85rem}
.oi-sum div{display:flex; justify-content:space-between}
.oi-sum .tt{border-top:1px dashed var(--line); margin-top:.3rem; padding-top:.4rem; font-weight:800}
.ot-empty{background:#fff; border:1.5px dashed var(--line); border-radius:22px; text-align:center; padding:3.4rem 1rem}
.ot-empty i{font-size:3.4rem; color:#CBD5E1}
.ot-empty h3{font-weight:800; margin:.7rem 0 .25rem}
.ot-empty p{color:var(--muted); font-size:.9rem; max-width:26rem; margin:0 auto 1.1rem}