:root{--brand:#e85d24;--brand-dark:#b83b12;--ink:#20272e;--muted:#68727c;--cream:#fff8f3}body{color:var(--ink);background:#fff;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}.topline{background:#20272e;color:#fff;font-size:.82rem;padding:.45rem 0}.navbar{box-shadow:0 5px 18px #1c273008}.navbar-brand img{max-width:154px}.searchbox{width:min(100%,520px)}.searchbox .form-control{border-radius:12px 0 0 12px;padding:.72rem 1rem}.searchbox .btn{border-radius:0 12px 12px 0}.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}.btn-brand:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}.btn-outline-brand{border-color:var(--brand);color:var(--brand);font-weight:700}.btn-outline-brand:hover{background:var(--brand);color:#fff}.hero{background:linear-gradient(115deg,#fff3e9,#fff 58%,#ffdfc8);border-radius:24px;padding:clamp(2rem,6vw,5rem);overflow:hidden;position:relative}.hero h1{font-size:clamp(2.1rem,5vw,4rem);font-weight:850;letter-spacing:-.04em;line-height:1.05}.hero p{font-size:1.12rem;color:#59636c;max-width:570px}.hero-art{background:var(--brand);color:#fff;border-radius:50% 45% 42% 48%;min-height:245px;display:grid;place-items:center;font-size:5rem;box-shadow:15px 20px 0 #ffd6bd}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-weight:800;color:var(--brand);font-size:.78rem}.section-heading{font-weight:800;letter-spacing:-.025em}.category-tile{display:block;border:1px solid #edf0f2;border-radius:16px;padding:1.15rem;text-decoration:none;color:inherit;height:100%;transition:.2s;background:#fff}.category-tile:hover,.product-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px #20272e12}.category-icon{width:52px;height:52px;background:#fff0e7;border-radius:15px;display:grid;place-items:center;font-size:1.7rem;margin-bottom:.8rem}.product-card{border:1px solid #edf0f2;border-radius:17px;overflow:hidden;height:100%;transition:.2s;background:white}.product-img{height:200px;background:linear-gradient(140deg,#fff7f1,#f3f5f7);display:grid;place-items:center;color:var(--brand);font-size:3.5rem;overflow:hidden}.product-body{padding:1rem}.product-title{font-weight:750;min-height:2.8em}.price{font-size:1.15rem;font-weight:850;color:var(--brand-dark)}.small-muted{color:var(--muted);font-size:.88rem}.badge-soft{background:#fff0e7;color:#b83b12}.benefit{border:1px solid #f0e8e3;border-radius:16px;padding:1.25rem;height:100%}.benefit-icon{font-size:1.8rem}.footer{background:#20272e;color:#d8dce0}.footer h6{color:#fff;font-weight:800}.footer a{display:block;color:#d8dce0;text-decoration:none;margin:.45rem 0}.footer a:hover{color:#ffb28c}.footer-bottom{border-top:1px solid #ffffff20;color:#adb5bd;font-size:.9rem}.panel{border:1px solid #edf0f2;border-radius:18px;padding:1.4rem;background:#fff}.form-control,.form-select{padding:.7rem .85rem;border-color:#dce1e5}.form-control:focus,.form-select:focus{border-color:#f4a27d;box-shadow:0 0 0 .2rem #e85d2420}.table>:not(caption)>*>*{padding:.9rem .7rem}.status-pill{background:#eaf8ef;color:#167443;padding:.25rem .6rem;border-radius:999px;font-size:.8rem;font-weight:700}.admin-nav a{display:block;padding:.7rem 1rem;border-radius:10px;color:inherit;text-decoration:none}.admin-nav a:hover{background:#fff0e7;color:var(--brand-dark)}@media(max-width:767px){.hero-art{min-height:150px;font-size:3rem;margin-top:2rem}.product-img{height:130px}.searchbox{width:100%}}
/* ========== Modern Admin & Vendor Panel ========== */
.panel-body{background:#f4f6f9;min-height:100vh;margin:0}
.panel-shell{display:flex;min-height:100vh}
.panel-sidebar{width:260px;background:linear-gradient(180deg,#1a222c 0%,#243040 100%);color:#e8ecf0;display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:1040;transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:4px 0 24px rgba(0,0,0,.12)}
.panel-brand{padding:1.35rem 1.25rem 1rem;border-bottom:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:.55rem}
.panel-brand img{display:block;filter:brightness(1.05)}
.panel-role-badge{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--brand);color:#fff;padding:.28rem .65rem;border-radius:999px;width:fit-content}
.panel-nav{flex:1;padding:1rem .75rem;overflow-y:auto}
.panel-nav-link{display:flex;align-items:center;gap:.75rem;padding:.72rem 1rem;border-radius:12px;color:#c5cdd6;text-decoration:none;font-weight:600;font-size:.92rem;margin-bottom:.25rem;transition:all .2s}
.panel-nav-link:hover{background:rgba(255,255,255,.07);color:#fff}
.panel-nav-link.active{background:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(232,93,36,.35)}
.panel-nav-link .nav-ico{font-size:1.15rem;width:1.5rem;text-align:center}
.panel-sidebar-foot{padding:1rem 1.1rem 1.25rem;border-top:1px solid rgba(255,255,255,.08)}
.panel-user{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}
.panel-user-avatar{width:38px;height:38px;border-radius:10px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.95rem}
.panel-user-meta strong{display:block;font-size:.88rem;color:#fff}
.panel-user-meta small{color:#8b96a3;font-size:.75rem}
.panel-logout{display:block;text-align:center;padding:.55rem;border-radius:10px;background:rgba(255,255,255,.06);color:#c5cdd6;text-decoration:none;font-weight:600;font-size:.85rem;transition:.2s}
.panel-logout:hover{background:rgba(255,80,80,.2);color:#ff8a8a}
.panel-main{flex:1;margin-left:260px;display:flex;flex-direction:column;min-width:0}
.panel-topbar{background:#fff;border-bottom:1px solid #e8ecf0;padding:.85rem 1.5rem;display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,.04)}
.panel-menu-btn{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;padding:.25rem .5rem;border-radius:8px;color:var(--ink)}
.panel-menu-btn:hover{background:#f0f2f5}
.panel-topbar-title{flex:1}
.panel-topbar-title .eyebrow{font-size:.7rem}
.panel-topbar-actions .btn{border-radius:10px;font-weight:600}
.panel-content{padding:1.5rem;flex:1}
.stat-card{background:#fff;border-radius:16px;padding:1.35rem 1.25rem;border:1px solid #e8ecf0;box-shadow:0 2px 8px rgba(0,0,0,.03);height:100%;transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden}
.stat-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.08)}
.stat-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--brand);border-radius:4px 0 0 4px}
.stat-card .stat-label{font-size:.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.35rem}
.stat-card .stat-value{font-size:1.85rem;font-weight:850;letter-spacing:-.03em;color:var(--ink);line-height:1.15}
.stat-card .stat-icon{position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-size:2.2rem;opacity:.12}
.panel-card{background:#fff;border-radius:16px;border:1px solid #e8ecf0;box-shadow:0 2px 8px rgba(0,0,0,.03);padding:1.4rem;margin-bottom:1.25rem}
.panel-card h5,.panel-card .card-title{font-weight:800;letter-spacing:-.02em;margin-bottom:1rem}
.panel-anim-in{animation:panelFadeUp .45s ease both}
@keyframes panelFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.panel-table{margin:0}
.panel-table thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;border-bottom:2px solid #eef1f4;padding:.85rem .75rem;background:#fafbfc}
.panel-table tbody td{padding:.9rem .75rem;vertical-align:middle;border-color:#f0f2f5}
.panel-table tbody tr{transition:background .15s}
.panel-table tbody tr:hover{background:#fafbfc}
.badge-status{display:inline-block;padding:.3rem .7rem;border-radius:999px;font-size:.75rem;font-weight:700}
.badge-pending{background:#fff3e0;color:#e65100}
.badge-approved,.badge-confirmed,.badge-delivered,.badge-paid{background:#e8f5e9;color:#2e7d32}
.badge-processing,.badge-out_for_delivery,.badge-awaiting_payment{background:#e3f2fd;color:#1565c0}
.badge-rejected,.badge-cancelled,.badge-failed,.badge-suspended{background:#fce4ec;color:#c62828}
.badge-unpaid{background:#f5f5f5;color:#616161}
.action-btns{display:flex;gap:.4rem;flex-wrap:wrap}
.btn-soft{background:#fff0e7;color:var(--brand-dark);border:none;font-weight:700;border-radius:10px;padding:.4rem .85rem;font-size:.85rem;text-decoration:none;transition:.2s}
.btn-soft:hover{background:var(--brand);color:#fff}
.btn-soft-danger{background:#fce4ec;color:#c62828}
.btn-soft-danger:hover{background:#c62828;color:#fff}
.form-panel .form-label{font-weight:650;font-size:.85rem;color:var(--ink)}
.empty-state{text-align:center;padding:2.5rem 1rem;color:var(--muted)}
.empty-state .empty-ico{font-size:2.5rem;margin-bottom:.75rem;opacity:.5}
/* Mobile sidebar */
@media(max-width:991px){
  .panel-sidebar{transform:translateX(-100%)}
  .panel-sidebar.open{transform:translateX(0)}
  .panel-main{margin-left:0}
  .panel-menu-btn{display:block}
  body.panel-sidebar-open::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1030}
}
/* Login page enhancements */
.login-split{min-height:calc(100vh - 180px);display:flex;align-items:center}
.login-card{border:none;border-radius:20px;box-shadow:0 12px 40px rgba(0,0,0,.08);overflow:hidden}
.login-tabs{display:flex;gap:.5rem;margin-bottom:1.25rem;flex-wrap:wrap}
.login-tabs a{flex:1;text-align:center;padding:.65rem;border-radius:12px;font-weight:700;font-size:.88rem;text-decoration:none;border:2px solid #edf0f2;color:var(--muted);transition:.2s;min-width:100px}
.login-tabs a:hover,.login-tabs a.active{border-color:var(--brand);color:var(--brand);background:#fff8f3}
.login-hero-side{background:linear-gradient(145deg,var(--brand),#ff8a50);color:#fff;border-radius:20px;padding:2.5rem;display:flex;flex-direction:column;justify-content:center;min-height:320px}
.login-hero-side h2{font-weight:850;letter-spacing:-.03em}

/* Product images — full image visible, high quality */
.product-img-photo{padding:0;background:#f5f6f8}
.product-img-photo img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.product-card .product-img-photo{background:#fafbfc}
.product-card .product-img-photo img{object-fit:cover}
.product-detail-gallery{display:flex;flex-direction:column;gap:.75rem}
.product-detail-main{height:380px;border-radius:18px;overflow:hidden;background:#f5f6f8;display:grid;place-items:center}
.product-detail-main img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.product-detail-thumbs{display:flex;flex-wrap:wrap;gap:.5rem}
.product-detail-thumbs button{border:2px solid #e8ecf0;border-radius:10px;padding:0;width:64px;height:64px;overflow:hidden;background:#fff;cursor:pointer}
.product-detail-thumbs button.active,.product-detail-thumbs button:hover{border-color:var(--brand)}
.product-detail-thumbs img{width:100%;height:100%;object-fit:cover}
.product-thumb,.product-thumb-sm{width:48px;height:48px;border-radius:10px;font-size:1.4rem;flex-shrink:0;overflow:hidden}
.product-thumb-sm{width:40px;height:40px;font-size:1.1rem;border-radius:8px}
.product-thumb.product-img-photo img,.product-thumb-sm.product-img-photo img{object-fit:cover;border-radius:inherit}
.gallery-manage{display:flex;flex-wrap:wrap;gap:.6rem}
.gallery-manage .g-item{position:relative;width:80px;height:80px;border-radius:10px;overflow:hidden;border:1px solid #e8ecf0}
.gallery-manage .g-item img{width:100%;height:100%;object-fit:cover}
.gallery-manage .g-item .g-del{position:absolute;top:2px;right:2px;background:#c62828;color:#fff;border:none;border-radius:6px;font-size:.7rem;padding:0 .35rem;cursor:pointer}
.notif-item{padding:.85rem 1rem;border-radius:12px;border:1px solid #e8ecf0;margin-bottom:.5rem;background:#fff;transition:.2s}
.notif-item.unread{border-color:#ffd0b5;background:#fff8f3}
.stock-alert-row{display:flex;justify-content:space-between;align-items:center;padding:.55rem 0;border-bottom:1px solid #f0f2f5}
@media(max-width:767px){.product-img{height:150px}.product-detail-main{height:260px}}

.verified-badge{display:inline-flex;align-items:center;gap:.2rem;background:linear-gradient(135deg,#1b5e20,#43a047);color:#fff;font-size:.72rem;font-weight:800;padding:.2rem .55rem;border-radius:999px;margin-left:.35rem;letter-spacing:.02em;box-shadow:0 2px 8px rgba(67,160,71,.35)}
.verified-badge::before{content:'★';font-size:.85rem}

.vendor-logo-inline{width:18px;height:18px;border-radius:4px;object-fit:cover;vertical-align:-3px;margin-right:2px}


/* —— Mobile bottom navigation —— */
.mobile-bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:1050;
  display:flex;justify-content:space-around;align-items:center;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-top:1px solid #e8ecf0;
  padding:.35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
  box-shadow:0 -8px 28px rgba(0,0,0,.08)
}
.mbnav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;
  text-decoration:none;color:var(--muted);font-size:.68rem;font-weight:700;
  padding:.35rem .2rem;border-radius:12px;position:relative;transition:transform .2s,color .2s
}
.mbnav-item:active{transform:scale(.92)}
.mbnav-item:hover,.mbnav-item:focus{color:var(--brand)}
.mbnav-ico{font-size:1.25rem;line-height:1;animation:none}
.mbnav-cart .mbnav-ico{animation:cartBob 2.8s ease-in-out infinite}
@keyframes cartBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.mbnav-badge{
  position:absolute;top:.1rem;right:calc(50% - 18px);
  background:var(--brand);color:#fff;font-size:.62rem;min-width:16px;height:16px;
  border-radius:999px;display:grid;place-items:center;padding:0 4px;font-weight:800
}
body{padding-bottom:0}
@media(max-width:991.98px){
  body{padding-bottom:72px}
  .footer{margin-bottom:.5rem}
}

/* —— Fancy animated blocks —— */
.hero{position:relative}
.hero::after{
  content:'';position:absolute;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,93,36,.18),transparent 70%);
  top:-40px;right:-30px;animation:floatOrb 6s ease-in-out infinite;pointer-events:none
}
@keyframes floatOrb{0%,100%{transform:translate(0,0)}50%{transform:translate(-12px,18px)}}
.category-tile,.product-card,.benefit,.panel{
  transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s
}
.stat-card:hover .stat-icon{transform:translateY(-50%) scale(1.12);opacity:.2}
.stat-icon{transition:transform .3s,opacity .3s}
.btn-brand,.btn-outline-brand{transition:transform .2s,box-shadow .2s,background .2s}
.btn-brand:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(232,93,36,.35)}
.btn-outline-brand:hover{transform:translateY(-1px)}

/* Focus visible for a11y */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid #e85d2480;outline-offset:2px
}
img{max-width:100%;height:auto}
.receipt-sheet{border-radius:18px}

/* Skip link */
.skip-link{
  position:absolute;left:-999px;top:0;background:var(--brand);color:#fff;padding:.5rem 1rem;z-index:2000;border-radius:0 0 8px 0
}
.skip-link:focus{left:0}

.location-bar{border-radius:14px;border:1px solid #ffe0c2;background:linear-gradient(90deg,#fff8f3,#fff)}
.loc-pin{font-size:1.4rem}

.account-menu{min-width:200px;border-radius:12px;padding:.4rem;z-index:1080}
.account-menu .dropdown-item{border-radius:8px;font-weight:600;padding:.55rem .85rem}
.account-menu .dropdown-item:hover{background:#fff5f0;color:var(--brand)}
.navbar .dropdown-menu{z-index:1080}

/* News ticker */
.news-ticker{display:flex;align-items:center;background:linear-gradient(90deg,#1a1a1a,#2c2c2c);color:#fff;font-size:.82rem;font-weight:600;overflow:hidden;min-height:34px}
.news-ticker-label{background:var(--brand);padding:.35rem .75rem;text-transform:uppercase;letter-spacing:.06em;font-size:.7rem;flex-shrink:0}
.news-ticker-track-wrap{overflow:hidden;flex:1;mask-image:linear-gradient(90deg,transparent,black 3%,black 97%,transparent)}
.news-ticker-track{display:flex;width:max-content;animation:tickerScroll 28s linear infinite}
.news-ticker-item{padding:0 2.5rem;white-space:nowrap;opacity:.95}
.news-ticker-item::before{content:"•";margin-right:.75rem;color:var(--brand)}
@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.news-ticker:hover .news-ticker-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.news-ticker-track{animation:none}}

/* Floating WhatsApp */
.wa-float{
  position:fixed;right:18px;bottom:88px;z-index:1100;
  display:inline-flex;align-items:center;gap:.5rem;
  background:#25D366;color:#fff!important;text-decoration:none!important;
  font-weight:800;font-size:.9rem;
  padding:.7rem 1rem .7rem .75rem;border-radius:999px;
  box-shadow:0 10px 28px rgba(37,211,102,.45);
  transition:transform .2s,box-shadow .2s
}
.wa-float:hover{transform:translateY(-2px);color:#fff;box-shadow:0 14px 32px rgba(37,211,102,.55)}
.wa-float-ico{display:grid;place-items:center;width:36px;height:36px;background:rgba(255,255,255,.2);border-radius:50%}
@media(max-width:575.98px){
  .wa-float{right:14px;bottom:78px;padding:.65rem}
  .wa-float-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .wa-float{border-radius:50%;width:56px;height:56px;justify-content:center;padding:0}
}
@media(min-width:992px){
  .wa-float{bottom:24px}
}

/* Home hero slider */
.hero-slider{border-radius:20px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.08)}
.hero-slide{position:relative;min-height:min(62vh,520px);max-height:620px}
.hero-slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-slide-overlay{position:absolute;inset:0;background:linear-gradient(105deg,rgba(15,15,20,.78) 0%,rgba(15,15,20,.45) 45%,rgba(15,15,20,.2) 100%)}
.hero-slide-content{position:relative;z-index:2;max-width:640px;padding:clamp(1.5rem,5vw,3.5rem);color:#fff;display:flex;flex-direction:column;justify-content:center;min-height:min(62vh,520px)}
.hero-slide-title{font-size:clamp(1.75rem,4.5vw,3rem);font-weight:800;line-height:1.15;margin:0 0 .5rem;color:#fff}
.hero-slide-sub{font-size:clamp(1rem,2vw,1.2rem);opacity:.92;margin:0;max-width:32rem}
#callbebaHero .carousel-indicators{margin-bottom:1rem}
#callbebaHero .carousel-indicators [data-bs-target]{width:10px;height:10px;border-radius:50%;background:#fff}
#callbebaHero .carousel-control-prev,#callbebaHero .carousel-control-next{width:12%;opacity:.85}
@media(max-width:767.98px){
  .hero-slide{min-height:320px;max-height:420px}
  .hero-slide-content{min-height:320px;padding:1.25rem 1.25rem 2.5rem}
  .hero-slider{border-radius:14px;margin-left:0;margin-right:0}
  #callbebaHero .carousel-control-prev-icon,#callbebaHero .carousel-control-next-icon{width:1.4rem;height:1.4rem}
}


/* Performance & Accessibility improvements */
img { max-width: 100%; height: auto; }
.product-img-photo img, .hero-slide-img { aspect-ratio: 4 / 3; object-fit: cover; }
.hero-slide-img { aspect-ratio: 12 / 5; }

/* Visible focus for keyboard users (WCAG 2.2) */
:focus-visible {
  outline: 3px solid #e85d24;
  outline-offset: 2px;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #e85d24;
  outline-offset: 2px;
}

/* Ensure sufficient tap targets */
.btn, .nav-link, .mbnav-item, button {
  min-height: 44px;
  min-width: 44px;
}

/* Better muted contrast if needed */
.small-muted { color: #5a6570; }

/* Skip link styling */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #e85d24;
  color: #fff;
  padding: 8px 16px;
  z-index: 10000;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}


/* ========== Modern Responsive + Animated Icons ========== */
.icon-anim {
  display: inline-block;
  transition: transform .25s ease, color .25s ease;
}
.mbnav-item:hover .icon-anim,
.mbnav-item:active .icon-anim,
.nav-link:hover .icon-anim {
  transform: translateY(-3px) scale(1.08);
  color: var(--brand);
}
.wa-float .wa-float-ico {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.wa-float:hover .wa-float-ico {
  transform: scale(1.12) rotate(-8deg);
}

/* Mobile bottom nav polish */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #edf0f2;
  display: flex;
  justify-content: space-around;
  padding: .4rem 0 calc(.4rem + env(safe-area-inset-bottom));
  z-index: 1030;
  box-shadow: 0 -4px 20px rgba(0,0,0,.06);
}
.mbnav-item {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: #5a6570;
  font-size: .7rem;
  font-weight: 600;
  padding: .35rem 0;
  position: relative;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.mbnav-item .mbnav-ico {
  font-size: 1.35rem;
  line-height: 1;
}
.mbnav-item.active,
.mbnav-item:hover {
  color: var(--brand);
}
.mbnav-badge {
  position: absolute;
  top: 4px;
  right: 22%;
  background: var(--brand);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 4px;
}

/* Responsive refinements */
@media (max-width: 991.98px) {
  .navbar-brand img { max-width: 130px; }
  .searchbox { width: 100%; margin: .75rem 0; }
  .hero { border-radius: 16px; padding: 1.5rem; }
  .hero h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); }
  .product-img { height: 160px; }
  body { padding-bottom: 72px; }
  .footer { padding-bottom: 1rem; }
}
@media (max-width: 575.98px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
  .product-card { border-radius: 14px; }
  .product-body { padding: .85rem; }
  .btn { font-size: .92rem; }
  .section-heading { font-size: 1.45rem; }
  .category-tile { padding: .9rem; }
  .hero-slide-content { padding: 1.25rem; }
  .topline { font-size: .75rem; text-align: center; }
  .topline .container { justify-content: center !important; }
}
@media (min-width: 992px) {
  .mobile-bottom-nav { display: none !important; }
  body { padding-bottom: 0; }
}
@media (hover: none) and (pointer: coarse) {
  .product-card:hover, .category-tile:hover { transform: none; }
  .btn, .nav-link, .mbnav-item { min-height: 48px; }
}

/* Fancy button micro-interactions */
.btn-brand {
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-brand:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(232,93,36,.35);
}
.btn-brand:active { transform: translateY(0); }

/* News ticker already exists; ensure smooth */
.news-ticker-track { will-change: transform; }