/* ================================================================
   Timely Haat v16 — Professional Design
   Green: #006B3F | Orange: #FF6B00 | Yellow: #FFC107
   Font: Hind Siliguri (all Bengali) | Poppins (EN/numbers)
   ================================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --green:     #006B3F; --green-dk:#004d2d; --green-xdk:#002d1a;
  --green-lt:  #e6f4ed; --green-50:#f0faf5;
  --orange:    #FF6B00; --orange-dk:#cc5500; --orange-lt:#fff3e8;
  --yellow:    #FFC107; --yellow-dk:#e6ac00;
  --danger:    #dc3545; --success:#198754; --warning:#f59e0b;
  --gray-50:   #f8fafc; --gray-100:#f1f5f9; --gray-200:#e2e8f0;
  --gray-300:  #cbd5e1; --gray-400:#94a3b8; --gray-500:#64748b;
  --gray-600:  #475569; --gray-700:#334155; --gray-800:#1e293b; --gray-900:#0f172a;
  --shadow-xs: 0 1px 3px rgba(0,0,0,.06); --shadow-sm:0 2px 8px rgba(0,0,0,.08);
  --shadow:    0 4px 16px rgba(0,0,0,.10); --shadow-lg:0 8px 32px rgba(0,0,0,.13);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.16);
  --r-xs:4px; --r-sm:6px; --r:10px; --r-lg:14px; --r-xl:20px; --r-2xl:28px;
  --t:.2s ease;
  --font-bn:'Hind Siliguri','Noto Sans Bengali',sans-serif;
  --font-en:'Poppins',sans-serif;
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; overflow-x:hidden }
body {
  font-family:var(--font-bn); /* Hind Siliguri for all Bengali */
  color:var(--gray-900); background:#f4f6f8;
  line-height:1.65; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* Poppins only for numbers/prices/english */
h1,h2,h3,h4,h5,h6 { font-family:var(--font-en); line-height:1.3 }
.price-now,.price-was,.stat-value,.num,.badge-discount,
code,.order-number { font-family:var(--font-en) }
a { color:var(--green); text-decoration:none; transition:color var(--t) }
a:hover { color:var(--green-dk) }
img { max-width:100%; display:block }
ul,ol { list-style:none; margin:0; padding:0 }
input,textarea,select,button { font-family:var(--font-bn) }
::-webkit-scrollbar { width:5px; height:4px }
::-webkit-scrollbar-thumb { background:var(--green); border-radius:3px }
::-webkit-scrollbar-track { background:var(--gray-100) }

/* ── Announcement Bar ───────────────────────────────────────── */
.announcement-bar {
  background:var(--green-dk); color:rgba(255,255,255,.9);
  font-size:.75rem; padding:.3rem 0; text-align:center;
}
.announcement-bar a { color:#FFD700; font-weight:600 }
.ann-sep { color:rgba(255,255,255,.3); margin:0 .65rem }

/* ── HEADER — Sticky Always ────────────────────────────────── */
.site-header {
  background:#fff;
  box-shadow:0 2px 12px rgba(0,107,63,.08);
  position:sticky !important; top:0; z-index:900;
  border-bottom:3px solid var(--green);
}
.header-main { padding:.5rem 0 }
.header-row { display:flex; align-items:center; gap:.5rem; width:100% }

/* Logo */
.site-logo { display:flex; align-items:center; flex-shrink:0; text-decoration:none }
.site-logo img { height:44px; width:auto; object-fit:contain; max-width:170px }
.logo-fb { font-family:var(--font-en); font-size:1.4rem; font-weight:900; color:var(--green) }
.logo-fb span { color:var(--orange) }

/* Desktop Search */
.search-wrap { position:relative; flex:1; min-width:0 }
.search-group { display:flex; border-radius:50px; overflow:hidden; border:2px solid var(--gray-300); transition:border-color var(--t),box-shadow var(--t); background:var(--gray-50) }
.search-group:focus-within { border-color:var(--green); background:#fff; box-shadow:0 0 0 3px rgba(0,107,63,.1) }
.search-input { border:none; padding:.6rem 1.1rem; font-size:.88rem; outline:none; width:100%; background:transparent; font-family:var(--font-bn) }
.btn-search { background:linear-gradient(135deg,var(--green),var(--green-dk)); color:#fff; border:none; padding:0 1.4rem; font-size:1rem; cursor:pointer; flex-shrink:0 }

/* Mobile search button */
.mobile-search-btn { display:none; width:38px; height:38px; border-radius:50%; background:var(--green-lt); border:none; color:var(--green); font-size:1.05rem; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:all var(--t) }
.mobile-search-btn:hover { background:var(--green); color:#fff }
.mobile-search-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:9999; align-items:flex-start; padding:70px 1rem 0 }
.mobile-search-overlay.open { display:flex }
.mobile-search-box { background:#fff; border-radius:var(--r-xl); padding:1.25rem; width:100%; max-width:540px; margin:0 auto; box-shadow:var(--shadow-xl); animation:slideDown .2s ease }
@keyframes slideDown { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
.live-search-dd { position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-xl); z-index:9000; max-height:380px; overflow-y:auto; display:none; border:1px solid var(--gray-200) }
.live-search-dd.active { display:block }
.lsi-item { display:flex; align-items:center; gap:.85rem; padding:.7rem 1rem; border-bottom:1px solid var(--gray-100); transition:background var(--t); text-decoration:none; color:inherit }
.lsi-item:hover { background:var(--green-50) }
.lsi-item img { width:48px; height:48px; object-fit:cover; border-radius:var(--r-sm); flex-shrink:0 }
.lsi-name { font-size:.86rem; font-weight:600; color:var(--gray-900) }
.lsi-price { font-size:.82rem; color:var(--green); font-weight:700; font-family:var(--font-en) }

/* Header icons */
.header-icon-btn { display:flex; flex-direction:column; align-items:center; position:relative; color:var(--gray-600); padding:.3rem .5rem; border-radius:var(--r); transition:all var(--t); cursor:pointer; text-decoration:none; min-width:40px; background:none; border:none }
.header-icon-btn i { font-size:1.3rem }
.header-icon-btn:hover { color:var(--green); background:var(--green-lt) }
.icon-label { font-size:.6rem; font-weight:600; margin-top:2px; white-space:nowrap }
.icon-badge { position:absolute; top:1px; right:1px; background:var(--orange); color:#fff; font-size:.58rem; font-weight:700; border-radius:10px; padding:0 4px; min-width:16px; height:16px; display:flex; align-items:center; justify-content:center; font-family:var(--font-en); border:1.5px solid #fff }
.mobile-menu-btn { width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:none; border:none; color:var(--gray-700); font-size:1.25rem; cursor:pointer; border-radius:var(--r); transition:all var(--t); flex-shrink:0 }
.mobile-menu-btn:hover { background:var(--green-lt); color:var(--green) }

/* ── Category Nav (desktop) ────────────────────────────────── */
.cat-nav-bar { background:linear-gradient(90deg,var(--green-dk),var(--green),var(--green-dk)); min-height:44px }
.cat-nav-list { display:flex; align-items:center; list-style:none; margin:0; padding:0 }
.cat-nav-item { position:relative; flex-shrink:0 }
.cat-nav-link { display:flex; align-items:center; gap:.28rem; color:rgba(255,255,255,.88); font-size:.82rem; font-weight:500; padding:.55rem .85rem; transition:all var(--t); cursor:pointer; background:none; border:none; text-decoration:none; white-space:nowrap }
.cat-nav-link:hover { color:#fff; background:rgba(255,255,255,.15); border-radius:var(--r) }
.flash-nav { color:#FFD700!important; font-weight:700 }
.has-mega { position:static }
.mega-dropdown { display:none; position:absolute; left:0; right:0; top:100%; background:#fff; box-shadow:var(--shadow-xl); z-index:8000; border-top:3px solid var(--orange); border-radius:0 0 var(--r-lg) var(--r-lg); max-height:420px; overflow-y:auto }
.mega-inner { display:flex; flex-wrap:wrap; padding:1.5rem; gap:0 }
.mega-col { flex:0 0 170px; padding:0 .75rem 1rem 0 }
.mega-parent { font-size:.84rem; font-weight:700; color:var(--green); display:block; margin-bottom:.45rem; padding-bottom:.3rem; border-bottom:2px solid var(--green-lt) }
.mega-sub li a { display:block; font-size:.79rem; color:var(--gray-500); padding:.18rem 0; transition:all var(--t) }
.mega-sub li a:hover { color:var(--orange); padding-left:6px }

/* ── Hero Slider — 16:9 ────────────────────────────────────── */
.hero-slider-section { overflow:hidden; background:var(--green-lt) }
.heroSwiper { width:100% }
.swiper-slide { position:relative; overflow:hidden }
.hero-slide-inner { position:relative; padding-bottom:37.5%; overflow:hidden; background:var(--green-dk) }
.hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.hero-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center }
.hero-content { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:10; text-align:center; width:90%; max-width:640px }
.hero-tag { display:inline-block; background:var(--orange); color:#fff; font-size:.72rem; font-weight:700; padding:.22rem .75rem; border-radius:30px; margin-bottom:.65rem; font-family:var(--font-en) }
.hero-content h2 { font-size:clamp(1.3rem,3.5vw,2.4rem); font-weight:800; color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.5); margin-bottom:.4rem }
.hero-content p { font-size:clamp(.82rem,1.5vw,1rem); color:rgba(255,255,255,.85); margin-bottom:1.1rem }
.btn-hero { display:inline-flex; align-items:center; gap:.4rem; background:linear-gradient(135deg,var(--orange),var(--orange-dk)); color:#fff; font-weight:700; padding:.65rem 1.75rem; border-radius:30px; font-size:.88rem; box-shadow:0 4px 16px rgba(255,107,0,.4); transition:all var(--t) }
.btn-hero:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(255,107,0,.5); color:#fff }
.swiper-button-next,.swiper-button-prev { color:#fff; background:rgba(0,0,0,.3); width:38px; height:38px; border-radius:50%; --swiper-navigation-size:15px; transition:background var(--t) }
.swiper-button-next:hover,.swiper-button-prev:hover { background:var(--orange) }
.swiper-pagination-bullet-active { background:var(--orange)!important }

/* ── Section ────────────────────────────────────────────────── */
.section-pad { padding:2.25rem 0 }
.section-pad-sm { padding:1.5rem 0 }
.section-hd { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; margin-bottom:1.5rem }
.section-title { font-size:clamp(1.05rem,2.5vw,1.45rem); font-weight:800; color:var(--gray-900); margin:0; position:relative; display:inline-block; padding-bottom:.35rem }
.section-title::after { content:''; position:absolute; bottom:0; left:0; width:36px; height:3px; background:var(--orange); border-radius:2px }
.view-all-btn { font-size:.8rem; font-weight:600; color:var(--green); border:1.5px solid var(--green); padding:.3rem .9rem; border-radius:30px; transition:all var(--t); white-space:nowrap; text-decoration:none }
.view-all-btn:hover { background:var(--green); color:#fff }

/* ── Promo Banners ──────────────────────────────────────────── */
.promo-banner { border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-sm); display:block; position:relative; text-decoration:none }
.promo-banner-img { width:100%; height:150px; object-fit:cover; display:block; transition:transform .45s ease }
.promo-banner:hover .promo-banner-img { transform:scale(1.04) }
/* Text overlay that stays ALWAYS visible */
.promo-banner-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.65) 0%,rgba(0,0,0,.15) 60%,transparent 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:1rem;
  border-radius:var(--r-xl);
}
.promo-banner-title { color:#fff; font-size:.92rem; font-weight:700; line-height:1.2; margin-bottom:.2rem }
.promo-banner-sub { color:rgba(255,255,255,.8); font-size:.76rem }
.promo-banner-ph { height:150px; display:flex; align-items:center; justify-content:center; border-radius:var(--r-xl) }

/* Promo banner slider on mobile (16:9) */
.promoBannerSwiper { display:none }
.promo-banner-grid { display:block }

/* ── Category Cards (no icon) ───────────────────────────────── */
.cat-card { background:#fff; border-radius:var(--r-lg); padding:.85rem .6rem; text-align:center; box-shadow:var(--shadow-xs); border:2px solid transparent; transition:all var(--t); display:block; text-decoration:none }
.cat-card:hover { border-color:var(--orange); transform:translateY(-3px); box-shadow:var(--shadow) }
.cat-name { font-size:.82rem; font-weight:700; color:var(--gray-800); transition:color var(--t) }
.cat-card:hover .cat-name { color:var(--green) }
.cat-count { font-size:.7rem; color:var(--gray-400); margin-top:.15rem }

/* ── Product Card ───────────────────────────────────────────── */
.product-card { background:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-xs); transition:transform var(--t),box-shadow var(--t); position:relative; display:flex; flex-direction:column; height:100%; border:1px solid var(--gray-200) }
.product-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:rgba(0,107,63,.2) }
.product-card-img { position:relative; overflow:hidden; background:var(--gray-50); aspect-ratio:1/1 }
.product-card-img a { display:block; height:100% }
.product-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
.product-card:hover .product-card-img img { transform:scale(1.06) }
.product-badges { position:absolute; top:7px; left:7px; z-index:2; display:flex; flex-direction:column; gap:3px }
.badge-discount { background:var(--orange); color:#fff; font-size:.65rem; font-weight:700; padding:.18rem .5rem; border-radius:var(--r-xs); font-family:var(--font-en) }
.badge-new      { background:var(--green); color:#fff; font-size:.65rem; font-weight:700; padding:.18rem .5rem; border-radius:var(--r-xs) }
.badge-flash    { background:#e53935; color:#fff; font-size:.65rem; font-weight:700; padding:.18rem .5rem; border-radius:var(--r-xs) }
.product-card-body { padding:.8rem .85rem; flex:1; display:flex; flex-direction:column }
.product-brand { font-size:.65rem; color:var(--orange); text-transform:uppercase; letter-spacing:.6px; font-weight:700; margin-bottom:.12rem }
.product-title { font-size:.84rem; font-weight:600; color:var(--gray-800); margin-bottom:.35rem; line-height:1.35; flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.product-price { display:flex; align-items:baseline; gap:.4rem; margin-bottom:.5rem; flex-wrap:wrap }
.price-now { font-size:1rem; font-weight:800; color:var(--green); font-family:var(--font-en) }
.price-was { font-size:.76rem; color:var(--gray-400); text-decoration:line-through; font-family:var(--font-en) }
.price-save { font-size:.66rem; background:var(--orange-lt); color:var(--orange); font-weight:700; padding:.06rem .32rem; border-radius:var(--r-xs) }

/* Product card footer: qty + cart */
.product-card-footer { display:flex; align-items:center; gap:.4rem; margin-top:auto }
.qty-mini { display:flex; align-items:center; border:1.5px solid var(--gray-300); border-radius:var(--r-sm); overflow:hidden; flex-shrink:0 }
.qty-mini button { width:26px; height:30px; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; font-size:.85rem; color:var(--gray-700); transition:background var(--t); font-weight:700 }
.qty-mini button:hover { background:var(--green); color:#fff }
.qty-mini input { width:28px; height:30px; text-align:center; border:none; border-inline:1px solid var(--gray-300); font-size:.8rem; font-weight:700; outline:none; font-family:var(--font-en); background:#fff }
.qty-mini input::-webkit-inner-spin-button,.qty-mini input::-webkit-outer-spin-button { -webkit-appearance:none }
.qty-mini input[type=number] { -moz-appearance:textfield }

/* Cart button — full text on desktop, icon only on mobile */
.btn-cart {
  flex:1; background:linear-gradient(135deg,var(--green),var(--green-dk));
  color:#fff; border:none; border-radius:var(--r-sm);
  padding:.45rem .4rem; font-size:.78rem; font-weight:600;
  transition:all var(--t); display:flex; align-items:center;
  justify-content:center; gap:.3rem; cursor:pointer; white-space:nowrap;
}
.btn-cart:hover { background:linear-gradient(135deg,var(--green-dk),var(--green-xdk)); transform:translateY(-1px) }
.btn-cart:disabled { background:var(--gray-200); color:var(--gray-500); cursor:not-allowed; transform:none }
.btn-cart-text { display:inline } /* hide on mobile via media query */

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary { background:var(--green); border-color:var(--green); color:#fff; font-weight:600 }
.btn-primary:hover { background:var(--green-dk); border-color:var(--green-dk); color:#fff }
.btn-outline-primary { border-color:var(--green); color:var(--green) }
.btn-outline-primary:hover { background:var(--green); color:#fff }
.btn-yellow { background:var(--yellow); border-color:var(--yellow-dk); color:#1a1a1a; font-weight:700 }
.btn-yellow:hover { background:var(--yellow-dk); color:#1a1a1a }
.form-control:focus,.form-select:focus { border-color:var(--green); box-shadow:0 0 0 .18rem rgba(0,107,63,.12) }
.form-label { font-size:.84rem; font-weight:600; color:var(--gray-700); margin-bottom:.3rem }

/* ── Auth ───────────────────────────────────────────────────── */
.auth-page { min-height:100dvh; display:flex; align-items:center; background:linear-gradient(135deg,var(--green-xdk),var(--green),#1a4010) }
.auth-card { background:#fff; border-radius:var(--r-xl); box-shadow:var(--shadow-xl); overflow:hidden; width:100%; max-width:460px }
.auth-card-header { background:linear-gradient(135deg,var(--green),var(--green-dk)); padding:1.75rem 2rem; text-align:center; color:#fff }
.auth-card-body { padding:1.75rem 2rem }

/* ── Checkout ───────────────────────────────────────────────── */
.checkout-section { background:#fff; border-radius:var(--r-lg); border:1px solid var(--gray-200); padding:1.5rem; margin-bottom:1rem }
.checkout-section h5 { font-size:.95rem; font-weight:800; margin-bottom:1.25rem; padding-bottom:.6rem; border-bottom:2px solid var(--green-lt); display:flex; align-items:center; gap:.5rem }
.payment-option { border:2px solid var(--gray-200); border-radius:var(--r-lg); padding:.9rem 1rem; margin-bottom:.65rem; cursor:pointer; transition:all var(--t); display:flex; align-items:flex-start; gap:.75rem }
.payment-option:hover  { border-color:var(--green-lt); background:var(--green-50) }
.payment-option.selected { border-color:var(--green); background:var(--green-50); box-shadow:0 0 0 2px rgba(0,107,63,.1) }
.payment-radio { accent-color:var(--green); flex-shrink:0; margin-top:3px }
.merchant-input-wrap { background:var(--orange-lt); border:1.5px solid rgba(255,107,0,.3); border-radius:var(--r); padding:.75rem 1rem; margin-top:.6rem }
.order-summary-card { background:#fff; border-radius:var(--r-lg); border:1px solid var(--gray-200); padding:1.5rem; position:sticky; top:80px }
.order-sum-row { display:flex; justify-content:space-between; align-items:center; padding:.45rem 0; border-bottom:1px solid var(--gray-100); font-size:.88rem }
.order-sum-row:last-of-type { border-bottom:none }
.order-sum-row.total { font-size:1.05rem; font-weight:800; color:var(--green); border-top:2px solid var(--gray-200); padding-top:.75rem }

/* ── Status Badges ──────────────────────────────────────────── */
.order-status-badge { font-size:.72rem; font-weight:700; padding:.28rem .65rem; border-radius:30px }
.status-pending  { background:#fef9c3; color:#713f12 }
.status-confirmed{ background:#cffafe; color:#155e75 }
.status-processing{ background:#e0e7ff; color:#3730a3 }
.status-packed   { background:#d1fae5; color:#065f46 }
.status-shipped  { background:#dbeafe; color:#1e3a8a }
.status-delivered{ background:#dcfce7; color:#14532d }
.status-cancelled{ background:#fee2e2; color:#7f1d1d }
.status-returned { background:#ede9fe; color:#6d28d9 }

/* ── Toasts ─────────────────────────────────────────────────── */
.alert-flash { position:fixed; top:80px; right:1rem; z-index:99990; display:flex; align-items:center; gap:.65rem; padding:.85rem 1.2rem; border-radius:var(--r-lg); font-size:.88rem; font-weight:500; box-shadow:var(--shadow-xl); max-width:360px; animation:slideInRight .3s ease }
.alert-flash-success { background:#f0fdf4; color:#064e3b; border-left:4px solid var(--green) }
.alert-flash-error   { background:#fef2f2; color:#7f1d1d; border-left:4px solid var(--danger) }
.flash-close { background:none; border:none; cursor:pointer; color:inherit; margin-left:auto }
@keyframes slideInRight { from{transform:translateX(110%);opacity:0} to{transform:translateX(0);opacity:1} }
.toast-container { position:fixed; bottom:1.5rem; right:1rem; z-index:99999; display:flex; flex-direction:column; gap:.5rem; max-width:340px }
.toast-custom { background:#fff; border-radius:var(--r-lg); padding:.85rem 1.1rem; box-shadow:var(--shadow-xl); display:flex; align-items:center; gap:.75rem; animation:slideInRight .3s ease }
.toast-custom.success{ border-left:4px solid var(--green) }
.toast-custom.error  { border-left:4px solid var(--danger) }
.toast-custom.warning{ border-left:4px solid var(--warning) }
.toast-custom.info   { border-left:4px solid #0ea5e9 }
.toast-msg  { flex:1; font-size:.86rem; font-weight:500 }
.toast-close{ color:var(--gray-400); cursor:pointer; background:none; border:none }

/* ── Sidebar ────────────────────────────────────────────────── */
.mobile-sidebar { position:fixed; top:0; left:-100%; width:85%; max-width:320px; height:100dvh; background:#fff; z-index:9999; overflow-y:auto; transition:left .3s cubic-bezier(.4,0,.2,1); box-shadow:6px 0 30px rgba(0,0,0,.2); overscroll-behavior:contain }
.mobile-sidebar.open { left:0 }
.sidebar-head { background:linear-gradient(135deg,var(--green-dk),var(--green)); padding:1rem 1.1rem; display:flex; align-items:center; justify-content:space-between }
.sidebar-head img { height:34px; object-fit:contain; filter:brightness(0)invert(1) }
.sidebar-brand { font-family:var(--font-en); font-weight:900; font-size:1.15rem; color:#fff }
.sidebar-brand span { color:var(--orange) }
.sidebar-close { color:#fff; background:rgba(255,255,255,.2); border:none; border-radius:50%; width:30px; height:30px; display:flex; align-items:center; justify-content:center; cursor:pointer }
.sidebar-user { background:var(--green-lt); color:var(--green); display:flex; align-items:center; padding:.75rem 1.1rem; border-bottom:1px solid rgba(0,107,63,.1) }
.sidebar-nav-item { display:flex; align-items:center; gap:.7rem; padding:.65rem 1.1rem; color:var(--gray-800); font-size:.88rem; border-bottom:1px solid var(--gray-100); transition:all var(--t); background:none; border-top:none; border-left:none; border-right:none; text-align:left; width:100%; text-decoration:none; cursor:pointer }
.sidebar-nav-item:hover { background:var(--green-50); color:var(--green) }
.sidebar-nav-item i { width:18px; text-align:center; color:var(--green); flex-shrink:0 }
.sidebar-sub-item { display:flex; align-items:center; padding:.5rem 1.1rem .5rem 2.9rem; color:var(--gray-500); font-size:.82rem; border-bottom:1px solid var(--gray-50); transition:all var(--t); text-decoration:none }
.sidebar-sub-item:hover { background:var(--orange-lt); color:var(--orange) }
.sidebar-divider { height:5px; background:var(--gray-100) }
.sidebar-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9998; opacity:0; visibility:hidden; transition:all .3s }
.sidebar-overlay.active { opacity:1; visibility:visible }

/* ── Cart Drawer ─────────────────────────────────────────────── */
.cart-drawer { position:fixed; top:0; right:-420px; width:min(420px,100vw); height:100dvh; background:#fff; z-index:99999; box-shadow:-4px 0 30px rgba(0,0,0,.15); transition:right .3s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column }
.cart-drawer.open { right:0 }
.cart-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99998; opacity:0; visibility:hidden; transition:all .3s }
.cart-overlay.active { opacity:1; visibility:visible }
.drawer-head { padding:1rem 1.25rem; display:flex; align-items:center; justify-content:space-between; background:linear-gradient(135deg,var(--green),var(--green-dk)); color:#fff }
.drawer-close-btn { color:#fff; background:rgba(255,255,255,.2); border-radius:50%; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:none; cursor:pointer }
.drawer-close-btn:hover { background:rgba(255,255,255,.35) }
.drawer-body { flex:1; overflow-y:auto; padding:1rem }
.drawer-foot { padding:1rem; border-top:1px solid var(--gray-200); background:var(--gray-50) }
.cart-drawer-item { display:flex; gap:.75rem; padding:.75rem 0; border-bottom:1px solid var(--gray-100) }
.cart-drawer-item img { width:64px; height:64px; object-fit:cover; border-radius:var(--r); flex-shrink:0; border:1px solid var(--gray-200) }
.qty-stepper { display:flex; align-items:center; border:1.5px solid var(--gray-300); border-radius:var(--r); overflow:hidden; width:fit-content; margin-top:.4rem }
.qty-stepper button { width:30px; height:28px; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; font-size:.9rem; transition:background var(--t) }
.qty-stepper button:hover { background:var(--green); color:#fff }
.qty-stepper input { width:34px; height:28px; text-align:center; border:none; border-inline:1px solid var(--gray-300); font-size:.82rem; font-weight:700; outline:none; font-family:var(--font-en) }
.qty-stepper input::-webkit-inner-spin-button,.qty-stepper input::-webkit-outer-spin-button { -webkit-appearance:none }

/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer { background:linear-gradient(175deg,#071507 0%,#0d1f0d 40%,#0a1a0a 100%) }

/* Footer Hero Strip */
.footer-hero {
  background:linear-gradient(135deg,var(--green-dk),var(--green));
  padding:2.5rem 0; text-align:center; color:#fff;
}
.footer-hero h3 { font-family:var(--font-en); font-size:1.4rem; font-weight:800; margin-bottom:.4rem }
.footer-hero p  { color:rgba(255,255,255,.8); margin-bottom:1.25rem; font-size:.9rem }
.newsletter-form { display:flex; gap:.45rem; max-width:440px; margin:0 auto }
.newsletter-form input {
  flex:1; padding:.65rem 1rem; border:none; border-radius:var(--r-lg);
  font-size:.86rem; outline:none;
  background:rgba(255,255,255,.15); color:#fff; backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.2);
}
.newsletter-form input::placeholder { color:rgba(255,255,255,.55) }
.newsletter-form input:focus { background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.4) }
.newsletter-form button {
  background:#fff; color:var(--green); font-weight:700;
  border:none; border-radius:var(--r-lg); padding:.65rem 1.5rem;
  font-size:.86rem; cursor:pointer; transition:all var(--t); white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.newsletter-form button:hover { background:var(--orange-lt); color:var(--orange) }

/* Footer Main */
.footer-main { padding:3rem 0 2rem; color:rgba(255,255,255,.7) }
.footer-logo-wrap { margin-bottom:1rem }
.footer-logo-wrap img { height:44px; object-fit:contain; max-width:180px; filter:brightness(0)invert(1); opacity:.9 }
.footer-logo-wrap .logo-text { font-family:var(--font-en); font-size:1.4rem; font-weight:900; color:#fff }
.footer-logo-wrap .logo-text span { color:var(--orange) }
.footer-tagline { font-size:.82rem; color:rgba(255,255,255,.45); margin-bottom:1.1rem }
.footer-contact-item,.footer-contact a { display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:rgba(255,255,255,.6); margin-bottom:.4rem; text-decoration:none; transition:color var(--t) }
.footer-contact-item:hover,.footer-contact a:hover { color:var(--orange) }
.footer-contact-item i,.footer-contact a i { color:var(--green); width:16px; flex-shrink:0 }

.footer-col-title { font-size:.78rem; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:1.2px; margin-bottom:1.1rem; padding-bottom:.5rem; position:relative; display:inline-block; font-family:var(--font-en) }
.footer-col-title::after { content:''; position:absolute; bottom:0; left:0; width:28px; height:2px; background:var(--orange); border-radius:2px }
.footer-link-list li { margin-bottom:.38rem }
.footer-link-list a { font-size:.8rem; color:rgba(255,255,255,.55); transition:all var(--t); display:inline-flex; align-items:center; gap:.3rem; text-decoration:none }
.footer-link-list a:hover { color:var(--orange); padding-left:4px }
.footer-link-list a i { font-size:.66rem; color:var(--green); flex-shrink:0 }

/* Social icons */
.social-icons { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem }
.social-icon-btn { width:36px; height:36px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.65); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.88rem; transition:all var(--t); text-decoration:none; border:1px solid rgba(255,255,255,.1) }
.social-icon-btn:hover { color:#fff; transform:translateY(-2px) }
.social-icon-btn.fb    { --sc:#1877f2 }
.social-icon-btn.ig    { --sc:#e1306c }
.social-icon-btn.yt    { --sc:#ff0000 }
.social-icon-btn.wa    { --sc:#25d366 }
.social-icon-btn.tt    { --sc:#000 }
.social-icon-btn.tw    { --sc:#1da1f2 }
.social-icon-btn:hover { background:var(--sc,var(--orange)); border-color:var(--sc,var(--orange)) }

/* Payment icons */
.pay-badges { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem }
.pay-badge { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-sm); padding:.25rem .6rem; font-size:.7rem; font-weight:700; font-family:var(--font-en) }
.pay-badge.bkash  { background:rgba(229,0,125,.18); border-color:rgba(229,0,125,.35); color:#ff6eb8 }
.pay-badge.nagad  { background:rgba(243,114,34,.18); border-color:rgba(243,114,34,.35); color:#ffb17c }
.pay-badge.rocket { background:rgba(123,31,162,.18); border-color:rgba(123,31,162,.35); color:#d8a9ff }
.pay-badge.cod    { background:rgba(25,135,84,.18); border-color:rgba(25,135,84,.35); color:#86efac }

/* Footer Bottom */
.footer-bottom-strip { border-top:1px solid rgba(255,255,255,.07); padding:1rem 0 }
.footer-bottom-strip p,.footer-bottom-strip a { font-size:.75rem; color:rgba(255,255,255,.32); margin:0 }
.footer-bottom-strip a:hover { color:rgba(255,255,255,.65) }
.footer-bottom-links { display:flex; gap:1rem; justify-content:flex-end; flex-wrap:wrap }

/* ── Mobile Bottom Nav ──────────────────────────────────────── */
.mobile-bottom-nav { position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--gray-200); z-index:800; padding:.25rem 0; box-shadow:0 -4px 16px rgba(0,0,0,.08) }
.mob-nav-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:.25rem; color:var(--gray-500); font-size:.6rem; font-weight:600; transition:color var(--t); text-decoration:none; position:relative }
.mob-nav-item:hover,.mob-nav-item.active { color:var(--green) }
.mob-nav-item i { font-size:1.22rem }
.mob-nav-badge { position:absolute; top:.1rem; right:calc(50% - 16px); background:var(--orange); color:#fff; border-radius:10px; font-size:.58rem; font-weight:700; padding:0 4px; min-width:15px; height:15px; display:flex; align-items:center; justify-content:center; font-family:var(--font-en); border:1.5px solid #fff }

/* ── Trust Bar ──────────────────────────────────────────────── */
.trust-bar { display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem; padding:1.25rem 0 }
.trust-item { display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--gray-700) }
.trust-item i { font-size:1.1rem; color:var(--green) }

/* ── Misc ───────────────────────────────────────────────────── */
.back-to-top { position:fixed; bottom:5.5rem; right:1rem; width:42px; height:42px; background:linear-gradient(135deg,var(--green),var(--green-dk)); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; z-index:999; opacity:0; visibility:hidden; transition:all var(--t); box-shadow:var(--shadow); border:none; cursor:pointer }
.back-to-top.show { opacity:1; visibility:visible }
.back-to-top:hover { transform:translateY(-3px) }
.empty-state { text-align:center; padding:3.5rem 1rem; color:var(--gray-500) }
.empty-state .empty-icon { font-size:3.5rem; opacity:.2; display:block; margin-bottom:1rem }
.empty-state h4 { font-size:1.05rem; font-weight:700 }
.breadcrumb-section { background:#fff; border-bottom:1px solid var(--gray-200); padding:.55rem 0 }
.breadcrumb { margin:0 }
.breadcrumb-item a { color:var(--green); font-size:.8rem }
.breadcrumb-item a:hover { color:var(--orange) }
.breadcrumb-item.active { font-size:.8rem; color:var(--gray-500) }
.breadcrumb-item+.breadcrumb-item::before { color:var(--gray-400) }
.pagination .page-link { color:var(--green); border-color:var(--gray-200); font-size:.82rem }
.pagination .page-link:hover { background:var(--green-lt) }
.pagination .page-item.active .page-link { background:var(--green); border-color:var(--green) }

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media(max-width:991.98px){
  .announcement-bar { display:none!important }
  .cat-nav-bar       { display:none!important }
  .hero-slide-inner  { padding-bottom:42% }
  .icon-label        { display:none }
}

@media(max-width:767.98px){
  body { padding-bottom:60px }

  /* Header mobile: hamburger | logo(center) | search+cart */
  .header-row { gap:.3rem }
  .mobile-menu-btn { order:1; flex-shrink:0 }
  .site-logo { order:2; flex:1; justify-content:center }
  .site-logo img { height:36px!important; max-width:130px }
  .search-wrap { display:none!important }
  .mobile-search-btn { display:flex!important; order:3 }
  .header-actions { order:4; flex-shrink:0; gap:.1rem }
  .icon-label { display:none!important }
  .header-icon-btn { min-width:34px; padding:.3rem .3rem }
  .header-icon-btn i { font-size:1.2rem }
  .hide-mobile { display:none!important }

  /* Hero 16:9 mobile */
  .hero-slide-inner { padding-bottom:56.25% }
  .hero-content h2  { font-size:1rem }
  .hero-content p   { display:none }
  .btn-hero         { font-size:.74rem; padding:.4rem .95rem }
  .swiper-button-next,.swiper-button-prev { display:none }

  /* Promo banners: 16:9 slider on mobile */
  .promo-banner-grid { display:none }
  .promoBannerSwiper { display:block }
  .promo-slide-inner { position:relative; padding-bottom:56.25%; overflow:hidden; border-radius:var(--r-xl) }
  .promo-slide-inner img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
  .promo-slide-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.65) 0%,rgba(0,0,0,.1) 60%,transparent 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:.85rem; border-radius:var(--r-xl) }

  /* Cart button: icon only on mobile */
  .btn-cart-text { display:none }
  .btn-cart { padding:.45rem .5rem; min-width:36px }
  .qty-mini button { width:24px; height:28px }
  .qty-mini input  { width:26px; height:28px; font-size:.75rem }

  /* Toasts */
  .toast-container { left:.75rem; right:.75rem; max-width:none }
  .alert-flash { left:.75rem; right:.75rem; max-width:none; top:70px }

  /* Footer */
  .footer-main { padding:2rem 0 1.5rem }
  .footer-bottom-links { justify-content:center }
  .newsletter-form { flex-direction:column }
  .newsletter-form button { width:100% }
}

@media(max-width:575.98px){
  .hero-content { width:92% }
  .product-card-body { padding:.65rem .7rem }
  .section-title { font-size:1rem }
  .promo-banner-title { font-size:.82rem }
}

@media(hover:none){
  /* Touch: always show actions */
}
@media print {
  .site-header,.site-footer,.mobile-bottom-nav,.back-to-top,.cart-drawer,.mobile-sidebar { display:none!important }
  body { padding-bottom:0!important; background:#fff }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important }
}

.footer-divider{border:none;border-top:1px solid rgba(255,255,255,.08);margin:0}