/* ============================================================
   BazaarX — style.css  v3.0
   Font: Inter (clean, modern, app-like)
   Clean white · Orange accent · Mobile-first · WebView ready
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ─── Variables ──────────────────────────────────────────── */
:root {
  --p:         #FF6B35;
  --p-d:       #e85c26;
  --p-l:       #fff4f0;
  --dark:      #1A1A2E;
  --text:      #212121;
  --text2:     #525252;
  --muted:     #878787;
  --border:    #e0e0e0;
  --bg:        #f1f3f6;
  --white:     #ffffff;
  --light:     #f9f9f9;
  --success:   #26a541;
  --danger:    #ff4444;
  --warning:   #ff9f00;
  --info:      #2874f0;
  --gold:      #FFB800;
  --r:         4px;
  --r-md:      8px;
  --r-lg:      12px;
  --r-xl:      16px;
  --shadow:    0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10);
  --t:         .18s;
  --font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; min-width:0; }
html { overflow-x:hidden; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body.bx-body {
  font-family:var(--font);
  font-size:14px; font-weight:400; line-height:1.5;
  color:var(--text); background:var(--bg);
  overflow-x:hidden; padding-bottom:64px;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
@media(min-width:992px){ body.bx-body{padding-bottom:0} }
h1,h2,h3,h4,h5,h6 { font-family:var(--font); font-weight:700; line-height:1.2; color:var(--text); }
a { color:var(--p); text-decoration:none; transition:color var(--t); }
a:hover { color:var(--p-d); }
img { max-width:100%; height:auto; display:block; }
button,input,select,textarea { font-family:var(--font); }

/* ─── Container ──────────────────────────────────────────── */
.container,.container-fluid,.container-xl,.container-lg,.container-md,.container-sm {
  width:100%; padding-left:12px; padding-right:12px; margin:0 auto; box-sizing:border-box;
}
@media(min-width:576px)  { .container,.container-sm { max-width:540px; padding-left:14px; padding-right:14px; } }
@media(min-width:768px)  { .container,.container-sm,.container-md { max-width:720px; padding-left:16px; padding-right:16px; } }
@media(min-width:992px)  { .container,.container-sm,.container-md,.container-lg { max-width:960px; padding-left:20px; padding-right:20px; } }
@media(min-width:1200px) { .container,.container-xl { max-width:1200px; padding-left:24px; padding-right:24px; } }
.row { margin-left:0 !important; margin-right:0 !important; }
@media(max-width:575px) {
  .row > * { padding-left:5px !important; padding-right:5px !important; }
  .row.g-3 { gap:10px 0 !important; }
}

/* ─── Preloader ──────────────────────────────────────────── */
#bx-preloader {
  position:fixed; inset:0; z-index:9999; background:var(--white);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .4s, visibility .4s;
}
#bx-preloader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.bx-loader-ring { width:44px; height:44px; position:relative; }
.bx-loader-ring div {
  position:absolute; width:36px; height:36px; margin:4px;
  border-radius:50%; border:3px solid transparent;
  border-top-color:var(--p);
  animation:bxSpin 1.1s cubic-bezier(.5,0,.5,1) infinite;
}
.bx-loader-ring div:nth-child(1){animation-delay:-.45s}
.bx-loader-ring div:nth-child(2){animation-delay:-.3s}
.bx-loader-ring div:nth-child(3){animation-delay:-.15s}
@keyframes bxSpin{to{transform:rotate(360deg)}}

/* ─── Top Bar ────────────────────────────────────────────── */
.bx-topbar { background:var(--dark); color:rgba(255,255,255,.7); font-size:12px; font-weight:500; }
.bx-topbar a { color:rgba(255,255,255,.65); }
.bx-topbar a:hover { color:var(--p); }

/* ─── Header ─────────────────────────────────────────────── */
.bx-header { background:var(--p); z-index:1000; position:sticky; top:0; box-shadow:0 2px 8px rgba(255,107,53,.25); }
.bx-header-inner { display:flex; align-items:center; gap:8px; padding:10px 0; flex-wrap:nowrap; }

/* Logo */
.bx-logo { display:inline-flex; align-items:center; gap:7px; text-decoration:none; flex-shrink:0; }
.bx-logo-icon {
  width:32px; height:32px; background:rgba(255,255,255,.2); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:15px; flex-shrink:0;
}
.bx-logo-text { font-family:var(--font); font-size:18px; font-weight:800; color:#fff; letter-spacing:-.3px; line-height:1; }
.bx-logo-text span { color:rgba(255,255,255,.7); }
@media(min-width:768px){ .bx-logo-text{font-size:20px} }

/* Search */
.bx-search-wrap { flex:1; max-width:600px; position:relative; }
.bx-search-inner {
  display:flex; background:#fff; border-radius:var(--r-md);
  overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.bx-search-cat {
  display:none; width:100px; border:none; border-right:1px solid var(--border);
  font-size:12px; font-family:var(--font); background:#f9f9f9; color:var(--text2);
  flex-shrink:0; padding:0 8px;
}
.bx-search-cat:focus { outline:none; }
.bx-search-input {
  flex:1; min-width:0; border:none; padding:10px 12px;
  font-size:14px; font-family:var(--font); color:var(--text); background:transparent;
}
.bx-search-input:focus { outline:none; }
.bx-search-input::placeholder { color:#aaa; font-size:13px; }
.bx-search-btn {
  background:transparent; border:none; color:var(--p);
  width:44px; font-size:16px; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:background var(--t);
}
.bx-search-btn:hover { background:rgba(255,107,53,.08); }
@media(min-width:992px){ .bx-search-cat{display:block} }

/* Search suggestions */
.bx-search-suggest {
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--shadow-md); z-index:999; max-height:360px; overflow-y:auto;
}
.bx-suggest-item { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; border-bottom:1px solid #f5f5f5; transition:background var(--t); }
.bx-suggest-item:last-child { border-bottom:none; }
.bx-suggest-item:hover { background:#f9f9f9; }
.bx-suggest-img { width:38px; height:38px; object-fit:cover; border-radius:4px; flex-shrink:0; }
.bx-suggest-name { font-size:13px; font-weight:500; line-height:1.3; }
.bx-suggest-price { font-size:12px; color:var(--p); font-weight:700; margin-top:2px; }

/* Header icons */
.bx-icon-btn {
  position:relative; width:36px; height:36px;
  background:rgba(255,255,255,.15); border:none; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:#fff; cursor:pointer; transition:background var(--t);
  text-decoration:none; flex-shrink:0;
}
.bx-icon-btn:hover { background:rgba(255,255,255,.25); color:#fff; }
.bx-badge-count {
  position:absolute; top:-3px; right:-3px;
  background:#fff; color:var(--p); font-size:9px; font-weight:800;
  min-width:16px; height:16px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; padding:0 3px; line-height:1;
}

/* User dropdown */
.bx-user-menu { min-width:200px; border:1px solid var(--border); box-shadow:var(--shadow-md); border-radius:var(--r-lg); overflow:hidden; padding:0; }
.bx-user-menu-header { background:linear-gradient(135deg,var(--dark),#16213E); color:#fff; padding:14px 16px; display:flex; align-items:center; gap:10px; }
.bx-user-menu .dropdown-item { padding:10px 16px; font-size:13px; transition:background var(--t); }
.bx-user-menu .dropdown-item:hover { background:#f9f9f9; }

/* Mobile search */
.bx-mobile-search { padding:0 0 8px; display:none; }
.bx-mobile-search.open { display:block; }

/* ─── Category Nav ───────────────────────────────────────── */
.bx-cat-nav { background:var(--white); border-bottom:1px solid var(--border); box-shadow:0 1px 4px rgba(0,0,0,.06); }
.bx-cat-list { list-style:none; display:flex; align-items:center; height:auto; overflow-x:auto; scrollbar-width:none; gap:0; padding:0; }
.bx-cat-list::-webkit-scrollbar { display:none; }
.bx-cat-item { position:relative; flex-shrink:0; }
.bx-cat-link {
  display:flex; align-items:center; gap:5px; padding:10px 14px;
  color:var(--text2); font-size:12.5px; font-weight:500; white-space:nowrap; cursor:pointer;
  transition:color var(--t), border-color var(--t); border-bottom:3px solid transparent;
}
.bx-cat-link:hover,.bx-cat-link.active { color:var(--p); border-bottom-color:var(--p); }
.bx-cat-link i { font-size:14px; }
.bx-sale-link { color:var(--p) !important; font-weight:700; }

/* Mega Menu */
.bx-mega-menu {
  position:absolute; top:100%; left:0; width:min(900px,95vw);
  background:#fff; border:1px solid var(--border); border-radius:0 var(--r-lg) var(--r-lg) var(--r-lg);
  box-shadow:var(--shadow-md); z-index:1001;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--t), transform var(--t), visibility var(--t);
}
.bx-mega-menu.open { opacity:1; visibility:visible; transform:translateY(0); }
.bx-mega-inner { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:0; padding:16px; }
.bx-mega-col { padding:6px; }
.bx-mega-head { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--text); padding:6px 8px; border-radius:6px; transition:background var(--t); text-decoration:none; }
.bx-mega-head:hover { background:#f9f9f9; color:var(--p); }
.bx-mega-head i { color:var(--p); width:15px; text-align:center; }
.bx-mega-sub { list-style:none; margin:4px 0 0; padding-left:22px; }
.bx-mega-sub li a { display:block; font-size:12px; color:var(--muted); padding:4px 6px; border-radius:4px; transition:color var(--t); }
.bx-mega-sub li a:hover { color:var(--p); }

/* ─── Mobile Sidebar ─────────────────────────────────────── */
.bx-sidebar-overlay { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:opacity var(--t), visibility var(--t); }
.bx-sidebar-overlay.open { opacity:1; visibility:visible; }
.bx-sidebar { position:fixed; top:0; left:0; bottom:0; width:280px; max-width:85vw; background:#fff; z-index:2001; transform:translateX(-100%); transition:transform .3s ease; overflow-y:auto; display:flex; flex-direction:column; }
.bx-sidebar.open { transform:translateX(0); }
.bx-sidebar-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:var(--p); flex-shrink:0; }
.bx-sidebar-head .bx-logo-text { color:#fff; font-size:17px; }
.bx-sidebar-close { background:rgba(255,255,255,.15); border:none; color:#fff; font-size:18px; cursor:pointer; padding:5px; border-radius:6px; display:flex; align-items:center; justify-content:center; }
.bx-sidebar-user,.bx-sidebar-auth { padding:12px 16px; background:var(--dark); color:#fff; display:flex; align-items:center; gap:10px; flex-shrink:0; }
.bx-sidebar-user a { color:rgba(255,255,255,.7); font-size:12px; }
.bx-sidebar-nav { list-style:none; padding:4px 0; flex:1; }
.bx-sidebar-nav > li > a { display:flex; align-items:center; gap:12px; padding:12px 16px; font-size:13.5px; font-weight:500; color:var(--text); border-bottom:1px solid #f5f5f5; transition:background var(--t); }
.bx-sidebar-nav > li > a:hover { background:#f9f9f9; color:var(--p); }
.bx-sidebar-nav > li > a i { width:18px; text-align:center; color:var(--p); font-size:14px; }
.bx-sidebar-sub { list-style:none; background:#f9f9f9; }
.bx-sidebar-sub li a { display:block; padding:10px 16px 10px 46px; font-size:13px; color:var(--muted); border-bottom:1px solid #efefef; transition:color var(--t); }
.bx-sidebar-sub li a:hover { color:var(--p); }

/* ─── Cart Drawer ────────────────────────────────────────── */
.bx-cart-overlay { position:fixed; inset:0; z-index:1090; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:opacity var(--t), visibility var(--t); }
.bx-cart-overlay.open { opacity:1; visibility:visible; }
.bx-cart-drawer { position:fixed; top:0; right:0; bottom:0; width:360px; max-width:96vw; background:#fff; z-index:1091; transform:translateX(100%); transition:transform .3s ease; display:flex; flex-direction:column; box-shadow:-4px 0 24px rgba(0,0,0,.12); }
.bx-cart-drawer.open { transform:translateX(0); }
.bx-cart-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); flex-shrink:0; background:var(--p); }
.bx-cart-head h5 { font-size:15px; margin:0; color:#fff; font-weight:700; }
.bx-cart-close { background:rgba(255,255,255,.2); border:none; font-size:16px; cursor:pointer; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; }
.bx-cart-body { flex:1; overflow-y:auto; padding:14px; }
.bx-cart-foot { padding:14px 16px; border-top:1px solid var(--border); flex-shrink:0; }
.bx-cart-total { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:14px; }
.bx-cart-total strong { color:var(--p); font-size:18px; font-weight:800; }
.bx-drawer-item { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid #f5f5f5; }
.bx-drawer-item-img { width:58px; height:58px; object-fit:cover; border-radius:var(--r-md); flex-shrink:0; border:1px solid var(--border); }
.bx-drawer-item-info { flex:1; min-width:0; }
.bx-drawer-item-name { font-size:13px; font-weight:500; line-height:1.3; }
.bx-drawer-item-price { font-size:13px; color:var(--p); font-weight:700; margin-top:3px; }
.bx-drawer-item-actions { display:flex; align-items:center; gap:6px; margin-top:6px; }
.bx-qty-btn { width:24px; height:24px; border:1px solid var(--border); background:#f9f9f9; border-radius:4px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:13px; font-weight:700; transition:all var(--t); }
.bx-qty-btn:hover { background:var(--p); color:#fff; border-color:var(--p); }
.bx-qty-val { font-size:13px; font-weight:700; min-width:20px; text-align:center; }
.bx-remove-item { color:var(--danger); background:none; border:none; cursor:pointer; font-size:14px; margin-left:auto; opacity:.7; }
.bx-remove-item:hover { opacity:1; }

/* ─── Main ───────────────────────────────────────────────── */
.bx-main { min-height:60vh; }

/* ─── Buttons ────────────────────────────────────────────── */
.btn { font-family:var(--font); font-weight:600; border-radius:var(--r-md); font-size:14px; }
.btn-primary { background:var(--p); border-color:var(--p); }
.btn-primary:hover,.btn-primary:focus { background:var(--p-d); border-color:var(--p-d); }
.btn-outline-primary { color:var(--p); border-color:var(--p); border-width:2px; }
.btn-outline-primary:hover { background:var(--p); border-color:var(--p); }
.btn-dark { background:var(--dark); border-color:var(--dark); }
.bx-btn-lg { padding:11px 24px; font-size:14px; font-weight:700; }
.bx-btn-load { padding:10px 32px; font-size:13.5px; font-weight:700; border-radius:var(--r-md); border-width:2px; }
@media(max-width:575px){ .bx-btn-lg{padding:10px 18px;font-size:13px} }

/* ─── Section ────────────────────────────────────────────── */
.bx-section { padding:16px 0; }
.bx-section-alt { background:var(--white); }
.bx-section-white { background:var(--white); }
.bx-section-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; border-bottom:1px solid #f5f5f5; margin-bottom:2px; }
.bx-section-title { font-size:16px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:6px; }
.bx-section-title .bx-st-accent { color:var(--p); }
.bx-section-link { font-size:12.5px; color:var(--p); font-weight:600; display:flex; align-items:center; gap:3px; white-space:nowrap; }
.bx-section-link:hover { gap:6px; }

/* ─── Hero ───────────────────────────────────────────────── */
.bx-hero { position:relative; overflow:hidden; }
.bx-hero-slide { position:relative; overflow:hidden; width:100%; }
.bx-hero-slide-inner { position:relative; overflow:hidden; min-height:200px; display:flex; align-items:center; }
@media(min-width:768px){ .bx-hero-slide-inner{min-height:320px} }
@media(min-width:992px){ .bx-hero-slide-inner{min-height:380px} }
.bx-hero-content { position:relative; z-index:2; padding:28px 0 24px; width:100%; }
@media(min-width:768px){ .bx-hero-content{padding:48px 0} }
.bx-hero-tag {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.18); backdrop-filter:blur(6px);
  color:#fff; font-size:10.5px; font-weight:700;
  padding:4px 12px; border-radius:20px; margin-bottom:10px;
  letter-spacing:1px; text-transform:uppercase; border:1px solid rgba(255,255,255,.25);
}
.bx-hero-title { font-size:clamp(22px,5vw,46px); font-weight:900; color:#fff; line-height:1.1; margin-bottom:10px; word-break:break-word; }
.bx-hero-title span { color:var(--p); }
.bx-hero-sub { font-size:clamp(12px,1.8vw,15px); color:rgba(255,255,255,.8); margin-bottom:20px; max-width:460px; line-height:1.6; }
.bx-hero-actions { display:flex; gap:10px; flex-wrap:wrap; }
.bx-hero-product { position:relative; z-index:2; text-align:center; }
.bx-hero .swiper-pagination-bullet { background:rgba(255,255,255,.5); width:7px; height:7px; }
.bx-hero .swiper-pagination-bullet-active { background:#fff; width:20px; border-radius:4px; }
.bx-hero .swiper-button-prev,.bx-hero .swiper-button-next { width:38px; height:38px; background:rgba(255,255,255,.15); backdrop-filter:blur(6px); border-radius:50%; color:#fff; border:1px solid rgba(255,255,255,.3); }
.bx-hero .swiper-button-prev:hover,.bx-hero .swiper-button-next:hover { background:var(--p); }
.bx-hero .swiper-button-prev::after,.bx-hero .swiper-button-next::after { font-size:12px; font-weight:900; }
@media(max-width:767px){
  .bx-hero-title{font-size:22px;line-height:1.15}
  .bx-hero-sub{font-size:12.5px;margin-bottom:16px}
  .bx-hero-tag{font-size:10px;margin-bottom:8px}
  .bx-hero-actions{flex-direction:column;gap:8px}
  .bx-hero-actions .btn{width:100%;justify-content:center;text-align:center;padding:11px 16px}
  .bx-hero-product{display:none !important}
  .bx-hero .swiper-button-prev,.bx-hero .swiper-button-next{display:none !important}
}

/* ─── Flipkart Category Icons ────────────────────────────── */
.bx-fk-cats { background:var(--white); border-bottom:1px solid var(--border); overflow:hidden; }
.bx-fk-cats-list { display:flex; overflow-x:auto; scrollbar-width:none; padding:14px 10px; gap:4px; }
.bx-fk-cats-list::-webkit-scrollbar { display:none; }
.bx-fk-cat-item { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:62px; cursor:pointer; text-decoration:none; padding:4px; transition:transform var(--t); flex-shrink:0; }
.bx-fk-cat-item:hover { transform:scale(1.06); }
.bx-fk-cat-icon { width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.10); transition:box-shadow var(--t); }
.bx-fk-cat-item:hover .bx-fk-cat-icon { box-shadow:0 4px 14px rgba(0,0,0,.18); }
.bx-fk-cat-label { font-size:11px; font-weight:600; color:var(--text2); text-align:center; line-height:1.2; white-space:nowrap; }
.bx-cat-count { font-size:11px; color:var(--muted); margin-top:2px; font-weight:500; }
@media(min-width:576px){ .bx-fk-cat-icon{width:58px;height:58px;font-size:24px} .bx-fk-cat-label{font-size:11.5px} }

/* ─── Trust Strip ────────────────────────────────────────── */
.bx-trust-strip { background:var(--dark); padding:10px 0; }
.bx-trust-item { display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px; }
.bx-trust-item i { font-size:18px; color:var(--p); }
.bx-trust-item strong { font-size:11.5px; font-weight:700; color:#fff; font-family:var(--font); }
.bx-trust-item span { font-size:10.5px; color:rgba(255,255,255,.5); }

/* ─── Product Card ───────────────────────────────────────── */
.bx-product-card {
  background:var(--white); border-radius:var(--r); overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.07); transition:box-shadow var(--t), transform var(--t);
  position:relative; height:100%; display:flex; flex-direction:column; border:1px solid var(--border);
}
.bx-product-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.bx-product-img-wrap { position:relative; background:#f9f9f9; overflow:hidden; padding-top:100%; border-bottom:1px solid #f5f5f5; }
.bx-product-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.bx-product-card:hover .bx-product-img { transform:scale(1.04); }
.bx-badges { position:absolute; top:6px; left:6px; display:flex; flex-direction:column; gap:3px; }
.bx-badge { display:inline-block; font-size:9.5px; font-weight:800; padding:2px 6px; border-radius:3px; text-transform:uppercase; letter-spacing:.3px; }
.bx-badge-off  { background:var(--danger);  color:#fff; }
.bx-badge-hot  { background:var(--p);        color:#fff; }
.bx-badge-oos  { background:#bbb; color:#fff; }
.bx-badge-new  { background:var(--success);  color:#fff; }
.bx-product-actions { position:absolute; right:6px; top:6px; display:flex; flex-direction:column; gap:5px; opacity:0; transform:translateX(6px); transition:opacity var(--t), transform var(--t); }
.bx-product-card:hover .bx-product-actions { opacity:1; transform:translateX(0); }
.bx-btn-icon { width:30px; height:30px; background:rgba(255,255,255,.9); border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--text); cursor:pointer; transition:background var(--t), color var(--t); }
.bx-btn-icon:hover { background:var(--p); color:#fff; border-color:var(--p); }
.bx-btn-icon.wishlisted { color:var(--danger); background:rgba(255,68,68,.08); }
.bx-product-body { padding:10px; flex:1; display:flex; flex-direction:column; gap:4px; }
.bx-product-rating { display:flex; align-items:center; gap:3px; }
.stars { color:var(--gold); font-size:11px; }
.stars small { color:var(--muted); font-size:10.5px; }
.bx-product-name { font-size:12.5px; font-weight:500; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.4; transition:color var(--t); }
.bx-product-name:hover { color:var(--p); }
.bx-product-price-row { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:auto; }
.bx-price-sale { font-size:14px; font-weight:800; color:var(--text); }
.bx-price-original { font-size:11.5px; color:var(--muted); text-decoration:line-through; }
.bx-price-off { font-size:11.5px; color:var(--success); font-weight:700; }
.bx-sold-badge { font-size:10px; font-weight:600; color:var(--danger); }
.bx-btn-cart {
  width:100%; padding:8px; background:var(--p); color:#fff; border:none;
  border-radius:var(--r-md); font-size:12.5px; font-weight:700; font-family:var(--font);
  cursor:pointer; transition:background var(--t);
  display:flex; align-items:center; justify-content:center; gap:5px; margin-top:8px; min-height:36px;
}
.bx-btn-cart:hover:not(:disabled) { background:var(--p-d); }
.bx-btn-cart:disabled { background:#e0e0e0; color:#aaa; cursor:not-allowed; }
.bx-btn-cart.added { background:var(--success); }

/* ─── Promo Banners ──────────────────────────────────────── */
.bx-promo-card {
  border-radius:var(--r-lg); overflow:hidden; position:relative;
  display:flex; align-items:center; cursor:pointer; width:100%;
  text-decoration:none !important; min-height:130px;
  transition:transform var(--t), box-shadow var(--t);
}
.bx-promo-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.bx-promo-bg { position:absolute; inset:0; z-index:0; }
.bx-promo-shine { position:absolute; inset:0; z-index:1; background:linear-gradient(135deg,rgba(255,255,255,.07) 0%,transparent 60%); }
.bx-promo-content { position:relative; z-index:2; padding:20px; color:#fff; width:100%; }
.bx-promo-tag { font-size:10px; text-transform:uppercase; letter-spacing:2px; font-weight:700; color:var(--p); margin-bottom:5px; display:block; }
.bx-promo-title { font-size:clamp(14px,2vw,18px); font-weight:800; line-height:1.25; color:#fff; margin-bottom:4px; }
.bx-promo-sub { font-size:12px; color:rgba(255,255,255,.7); margin-bottom:12px; }
.bx-promo-btn { display:inline-flex; align-items:center; gap:5px; background:var(--p); color:#fff; padding:6px 14px; border-radius:6px; font-size:12px; font-weight:700; transition:background var(--t); text-decoration:none; }
.bx-promo-btn:hover { background:var(--p-d); color:#fff; }
.bx-promo-deco-icon { position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:64px; color:rgba(255,255,255,.10); z-index:1; pointer-events:none; }
@media(max-width:767px){ .bx-promo-content{padding:16px} .bx-promo-title{font-size:14px} .bx-promo-deco-icon{font-size:46px;right:10px} }

/* ─── Coupon Banner ──────────────────────────────────────── */
.bx-coupon-banner { position:relative; border-radius:var(--r-xl); overflow:hidden; }
.bx-coupon-banner-bg { position:absolute; inset:0; background:linear-gradient(135deg,var(--p),#FF8C42); z-index:0; }
.bx-coupon-banner-body { position:relative; z-index:2; display:flex; align-items:center; gap:16px; padding:20px; flex-wrap:wrap; color:#fff; }
.bx-coupon-banner-icon { width:50px; height:50px; background:rgba(255,255,255,.2); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; flex-shrink:0; }
.bx-coupon-banner-text { flex:1; min-width:160px; }
.bx-coupon-banner-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:rgba(255,255,255,.8); margin-bottom:4px; }
.bx-coupon-banner-title { font-size:clamp(14px,2.5vw,18px); font-weight:800; color:#fff; line-height:1.3; margin-bottom:3px; }
.bx-coupon-code-badge { display:inline-block; background:rgba(255,255,255,.2); border:1px dashed rgba(255,255,255,.5); padding:1px 8px; border-radius:5px; letter-spacing:2px; font-size:1em; }
.bx-coupon-banner-sub { font-size:12px; color:rgba(255,255,255,.75); }
.bx-coupon-banner-btn { display:inline-flex; align-items:center; gap:7px; background:#fff; color:var(--p) !important; font-weight:800; padding:10px 20px; border-radius:8px; font-size:13px; text-decoration:none !important; white-space:nowrap; flex-shrink:0; transition:box-shadow var(--t); }
.bx-coupon-banner-btn:hover { box-shadow:0 4px 16px rgba(0,0,0,.2); }
@media(max-width:575px){ .bx-coupon-banner-body{padding:16px;gap:12px} .bx-coupon-banner-btn{width:100%;justify-content:center} }

/* ─── Swiper product ─────────────────────────────────────── */
.bx-swiper-wrap { position:relative; margin:0; padding:8px 4px 12px; }
.bx-swiper-wrap .swiper { overflow:visible; padding:2px; }
.bx-swiper-wrap .swiper-slide{width:155px}
@media(min-width:400px)  {.bx-swiper-wrap .swiper-slide{width:165px}}
@media(min-width:576px)  {.bx-swiper-wrap .swiper-slide{width:185px}}
@media(min-width:768px)  {.bx-swiper-wrap .swiper-slide{width:210px}}
@media(min-width:992px)  {.bx-swiper-wrap .swiper-slide{width:230px}}
@media(min-width:1200px) {.bx-swiper-wrap .swiper-slide{width:248px}}
.bx-swiper-prev,.bx-swiper-next { top:38% !important; width:34px !important; height:34px !important; background:var(--white) !important; border-radius:50% !important; box-shadow:0 2px 10px rgba(0,0,0,.14) !important; border:1px solid var(--border) !important; }
.bx-swiper-prev{left:-5px !important}
.bx-swiper-next{right:-5px !important}
.bx-swiper-prev::after,.bx-swiper-next::after{font-size:11px !important;color:var(--text);font-weight:900}
.bx-swiper-prev:hover,.bx-swiper-next:hover{background:var(--p) !important;border-color:var(--p) !important}
.bx-swiper-prev:hover::after,.bx-swiper-next:hover::after{color:#fff}
@media(max-width:575px){.bx-swiper-prev,.bx-swiper-next{display:none !important}}

/* ─── Forms ──────────────────────────────────────────────── */
.bx-form-card { background:var(--white); border-radius:var(--r-xl); box-shadow:var(--shadow-md); overflow:hidden; }
.bx-form-side { background:linear-gradient(160deg,var(--dark),#16213E); padding:32px; color:#fff; display:flex; flex-direction:column; justify-content:center; min-height:360px; }
.bx-form-side-title { font-size:22px; font-weight:800; margin-bottom:10px; }
.bx-form-side-sub { color:rgba(255,255,255,.7); font-size:13.5px; line-height:1.7; }
.bx-form-side-list { list-style:none; margin-top:18px; }
.bx-form-side-list li { display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:13.5px; }
.bx-form-side-list li i { color:var(--p); }
.bx-form-body { padding:28px 32px; }
.bx-form-title { font-size:21px; font-weight:800; margin-bottom:4px; }
.bx-form-subtitle { color:var(--muted); font-size:13.5px; margin-bottom:22px; }
.bx-input-group { margin-bottom:14px; }
.bx-input-group label { display:block; font-size:12.5px; font-weight:600; margin-bottom:5px; color:var(--text2); }
.bx-input { width:100%; padding:10px 12px; border:1.5px solid var(--border); border-radius:var(--r-md); font-size:14px; font-family:var(--font); color:var(--text); background:#fff; transition:border-color var(--t), box-shadow var(--t); outline:none; }
.bx-input:focus { border-color:var(--p); box-shadow:0 0 0 3px rgba(255,107,53,.1); }
.bx-input.is-invalid { border-color:var(--danger); }
.bx-input-icon-wrap { position:relative; }
.bx-input-icon-wrap .bx-input { padding-left:38px; }
.bx-input-icon-wrap > i { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:14px; pointer-events:none; }
.bx-input-icon-wrap .bx-pass-toggle { position:absolute; right:11px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--muted); cursor:pointer; font-size:14px; padding:4px; }
@media(max-width:767px){ .bx-form-body{padding:20px 16px} .bx-form-side{padding:22px 16px;min-height:auto} .bx-form-card{border-radius:var(--r-lg)} }

/* OTP */
.bx-otp-wrap { display:flex; gap:8px; justify-content:center; }
.bx-otp-input { width:48px; height:54px; text-align:center; font-size:22px; font-weight:800; border:2px solid var(--border); border-radius:var(--r-md); font-family:var(--font); transition:border-color var(--t), box-shadow var(--t); outline:none; color:var(--text); }
.bx-otp-input:focus { border-color:var(--p); box-shadow:0 0 0 3px rgba(255,107,53,.1); }
@media(max-width:479px){ .bx-otp-wrap{gap:6px} .bx-otp-input{width:36px;height:44px;font-size:18px} }
.bx-pass-strength { height:3px; border-radius:2px; background:var(--border); margin-top:5px; overflow:hidden; }
.bx-pass-strength-bar { height:100%; border-radius:2px; transition:width .4s, background .4s; width:0%; }

/* ─── Product Detail ─────────────────────────────────────── */
.bx-product-gallery-main { border-radius:var(--r-lg); overflow:hidden; background:#f9f9f9; aspect-ratio:1; border:1px solid var(--border); }
.bx-product-gallery-main img { width:100%; height:100%; object-fit:contain; }
.bx-gallery-thumb { border-radius:var(--r-md); overflow:hidden; cursor:pointer; border:2px solid transparent; transition:border-color var(--t); aspect-ratio:1; background:#f9f9f9; }
.bx-gallery-thumb.active,.bx-gallery-thumb:hover { border-color:var(--p); }
.bx-gallery-thumb img { width:100%; height:100%; object-fit:cover; }
.bx-product-detail-title { font-size:clamp(17px,3vw,26px); font-weight:800; }
.bx-product-detail-price { font-size:24px; font-weight:900; color:var(--text); }
.bx-product-detail-original { font-size:15px; color:var(--muted); text-decoration:line-through; margin-left:8px; }
.bx-product-detail-discount { font-size:14px; color:var(--success); font-weight:700; margin-left:8px; }
.bx-variant-btn { padding:6px 14px; border:1.5px solid var(--border); background:#fff; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; transition:all var(--t); font-family:var(--font); }
.bx-variant-btn:hover,.bx-variant-btn.active { border-color:var(--p); color:var(--p); background:var(--p-l); }
.bx-qty-control { display:inline-flex; align-items:center; border:1.5px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.bx-qty-control button { width:38px; height:40px; background:#f9f9f9; border:none; font-size:16px; cursor:pointer; font-weight:700; transition:background var(--t); }
.bx-qty-control button:hover { background:var(--p); color:#fff; }
.bx-qty-control input { width:50px; height:40px; text-align:center; border:none; border-left:1.5px solid var(--border); border-right:1.5px solid var(--border); font-size:14px; font-weight:700; font-family:var(--font); outline:none; }
.bx-product-tabs .nav-link { color:var(--muted); font-weight:600; font-size:13.5px; border:none; padding:10px 16px; border-bottom:2px solid transparent; border-radius:0; transition:color var(--t), border-color var(--t); }
.bx-product-tabs .nav-link.active,.bx-product-tabs .nav-link:hover { color:var(--p); border-bottom-color:var(--p); background:transparent; }

/* ─── Cart / Checkout ────────────────────────────────────── */
.bx-cart-table thead th { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); background:#f9f9f9; font-family:var(--font); }
.bx-cart-table tbody tr { vertical-align:middle; }
.bx-cart-product-img { width:62px; height:62px; object-fit:cover; border-radius:var(--r-md); border:1px solid var(--border); }
.bx-cart-product-name { font-weight:600; font-size:14px; }
.bx-order-summary-card { background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow); border:1px solid var(--border); overflow:hidden; }
.bx-order-summary-head { background:var(--p); color:#fff; padding:12px 18px; font-weight:700; font-size:14px; }
.bx-order-summary-body { padding:16px; }
.bx-summary-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #f5f5f5; font-size:13.5px; }
.bx-summary-row:last-child { border-bottom:none; }
.bx-summary-total { font-size:17px; font-weight:800; color:var(--p); }
.bx-coupon-form { display:flex; gap:8px; margin-top:10px; }
.bx-coupon-form input { flex:1; min-width:0; }
.bx-checkout-step { background:var(--white); border-radius:var(--r-lg); margin-bottom:12px; overflow:hidden; border:1px solid var(--border); }
.bx-checkout-step-head { display:flex; align-items:center; gap:10px; padding:12px 16px; background:#f9f9f9; border-bottom:1px solid var(--border); }
.bx-checkout-step-num { width:28px; height:28px; background:var(--dark); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; flex-shrink:0; }
.bx-checkout-step.active .bx-checkout-step-num { background:var(--p); }
.bx-checkout-step.done .bx-checkout-step-num { background:var(--success); }
.bx-checkout-step-title { font-weight:700; font-size:14px; }
.bx-checkout-step-body { padding:16px; }
.bx-payment-option { border:1.5px solid var(--border); border-radius:var(--r-md); padding:12px 14px; cursor:pointer; transition:border-color var(--t), background var(--t); display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.bx-payment-option:hover { border-color:var(--p); }
.bx-payment-option.active { border-color:var(--p); background:var(--p-l); }
.bx-payment-option input[type="radio"] { accent-color:var(--p); }

/* ─── Orders ─────────────────────────────────────────────── */
.bx-order-card { background:var(--white); border-radius:var(--r-lg); margin-bottom:10px; overflow:hidden; border:1px solid var(--border); transition:box-shadow var(--t); }
.bx-order-card:hover { box-shadow:var(--shadow); }
.bx-order-card-head { padding:12px 16px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; border-bottom:1px solid #f5f5f5; background:#f9f9f9; }
.bx-order-number { font-weight:800; color:var(--text); font-size:13.5px; }
.bx-order-card-body { padding:12px 16px; }
.bx-order-item-thumb { width:48px; height:48px; object-fit:cover; border-radius:var(--r-md); border:1px solid var(--border); }
.bx-tracking-timeline { position:relative; padding-left:24px; }
.bx-tracking-timeline::before { content:''; position:absolute; left:8px; top:0; bottom:0; width:2px; background:var(--border); }
.bx-track-step { position:relative; padding-bottom:18px; }
.bx-track-step::before { content:''; position:absolute; left:-20px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--border); border:2px solid #fff; z-index:1; }
.bx-track-step.done::before { background:var(--success); }
.bx-track-step.current::before { background:var(--p); box-shadow:0 0 0 3px rgba(255,107,53,.2); }
.bx-track-step-title { font-size:13.5px; font-weight:700; }
.bx-track-step-time { font-size:11.5px; color:var(--muted); margin-top:1px; }
.bx-track-step-note { font-size:12.5px; color:var(--muted); margin-top:3px; }

/* ─── Profile ────────────────────────────────────────────── */
.bx-profile-card { background:linear-gradient(135deg,var(--p),#FF8C42); color:#fff; border-radius:var(--r-xl); padding:24px; text-align:center; }
.bx-profile-avatar { width:76px; height:76px; border-radius:50%; border:3px solid rgba(255,255,255,.4); margin:0 auto 12px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.2); font-size:26px; color:#fff; }
.bx-profile-name { font-size:18px; font-weight:800; }
.bx-profile-email { font-size:12.5px; color:rgba(255,255,255,.7); margin-top:3px; }
.bx-profile-stats { display:flex; gap:20px; justify-content:center; margin-top:16px; }
.bx-profile-stat strong { display:block; font-size:20px; font-weight:800; color:#fff; }
.bx-profile-stat span { font-size:11.5px; color:rgba(255,255,255,.7); }
.bx-tab-card { background:var(--white); border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border); }
.bx-tab-nav .nav-link { border:none; border-radius:0; color:var(--muted); font-weight:600; font-size:13.5px; padding:12px 16px; text-align:left; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; transition:background var(--t), color var(--t); }
.bx-tab-nav .nav-link:hover { background:#f9f9f9; color:var(--p); }
.bx-tab-nav .nav-link.active { background:var(--p); color:#fff; }
.bx-tab-nav .nav-link i { width:16px; text-align:center; }

/* ─── Filters ────────────────────────────────────────────── */
.bx-filter-card { background:var(--white); border-radius:var(--r-lg); overflow:hidden; margin-bottom:12px; position:sticky; top:12px; border:1px solid var(--border); }
.bx-filter-head { padding:11px 14px; background:var(--p); color:#fff; display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:13.5px; }
.bx-filter-section { padding:12px 14px; border-bottom:1px solid #f5f5f5; }
.bx-filter-section-title { font-size:11.5px; font-weight:700; margin-bottom:8px; text-transform:uppercase; letter-spacing:.5px; color:var(--text2); }
.bx-filter-option { display:flex; align-items:center; gap:8px; margin-bottom:7px; cursor:pointer; }
.bx-filter-option input { accent-color:var(--p); }
.bx-filter-option label { font-size:13px; cursor:pointer; }

/* ─── Breadcrumb ─────────────────────────────────────────── */
.bx-breadcrumb { background:var(--white); padding:9px 0; border-bottom:1px solid var(--border); }
.bx-breadcrumb .breadcrumb { margin:0; font-size:12.5px; }
.bx-breadcrumb .breadcrumb-item+.breadcrumb-item::before { color:var(--muted); }
.bx-breadcrumb .breadcrumb-item a { color:var(--p); }

/* ─── Alerts ─────────────────────────────────────────────── */
.bx-alert { border:none; border-radius:var(--r-md); font-size:13.5px; }
.bx-flash-container { position:fixed; top:68px; right:12px; z-index:9000; max-width:340px; width:92%; }
.bx-flash-container .bx-alert { box-shadow:var(--shadow-md); }

/* ─── Empty State ────────────────────────────────────────── */
.bx-empty-state { text-align:center; padding:44px 16px; }
.bx-empty-state i { font-size:48px; color:var(--border); margin-bottom:12px; display:block; }
.bx-empty-state h4 { color:var(--muted); margin-bottom:8px; font-size:16px; }
.bx-empty-state p { color:var(--muted); font-size:13.5px; }

/* ─── Toast ──────────────────────────────────────────────── */
.bx-toast { position:fixed; bottom:70px; left:50%; transform:translateX(-50%) translateY(16px); background:var(--dark); color:#fff; padding:10px 18px; border-radius:24px; font-size:13px; font-weight:600; z-index:9999; opacity:0; transition:opacity .28s, transform .28s; white-space:nowrap; pointer-events:none; display:flex; align-items:center; gap:7px; max-width:88vw; }
.bx-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.bx-toast.success { background:var(--success); }
.bx-toast.error   { background:var(--danger); }
@media(min-width:992px){ .bx-toast{bottom:22px} }

/* ─── Stat Cards ─────────────────────────────────────────── */
.bx-stat-card { background:var(--white); border-radius:var(--r-lg); padding:18px; box-shadow:var(--shadow); display:flex; gap:13px; align-items:center; border-left:4px solid var(--p); transition:box-shadow var(--t); }
.bx-stat-card:hover { box-shadow:var(--shadow-md); }
.bx-stat-icon { width:46px; height:46px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
.bx-stat-value { font-size:22px; font-weight:800; color:var(--text); line-height:1; }
.bx-stat-label { font-size:11.5px; color:var(--muted); font-weight:500; margin-top:3px; }

/* ─── Footer ─────────────────────────────────────────────── */
.bx-footer { background:var(--dark); color:rgba(255,255,255,.75); }
.bx-footer-top { padding:40px 0 30px; }
.bx-footer-brand .bx-logo-text { color:#fff; }
.bx-footer-desc { font-size:12.5px; color:rgba(255,255,255,.5); line-height:1.75; margin:8px 0; }
.bx-footer-social { display:flex; gap:8px; flex-wrap:wrap; }
.bx-footer-social a { width:32px; height:32px; border:1px solid rgba(255,255,255,.18); border-radius:50%; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.55); font-size:13px; transition:all var(--t); }
.bx-footer-social a:hover { background:var(--p); border-color:var(--p); color:#fff; }
.bx-footer-heading { font-size:12px; font-weight:700; color:#fff; margin-bottom:12px; letter-spacing:.5px; text-transform:uppercase; }
.bx-footer-list { list-style:none; padding:0; }
.bx-footer-list li { margin-bottom:7px; }
.bx-footer-list li a { font-size:12.5px; color:rgba(255,255,255,.5); transition:color var(--t); display:flex; align-items:center; gap:5px; }
.bx-footer-list li a i { color:var(--p); font-size:10px; }
.bx-footer-list li a:hover { color:var(--p); }
.bx-newsletter-input-wrap { display:flex; border:1px solid rgba(255,255,255,.18); border-radius:var(--r-md); overflow:hidden; }
.bx-newsletter-input-wrap input { flex:1; min-width:0; background:rgba(255,255,255,.06); border:none; color:#fff; padding:9px 12px; font-size:12.5px; outline:none; font-family:var(--font); }
.bx-newsletter-input-wrap input::placeholder { color:rgba(255,255,255,.3); }
.bx-newsletter-btn { background:var(--p); border:none; color:#fff; width:40px; cursor:pointer; flex-shrink:0; transition:background var(--t); }
.bx-newsletter-btn:hover { background:var(--p-d); }
.bx-footer-contact p { font-size:12px; display:flex; gap:7px; margin-bottom:6px; color:rgba(255,255,255,.5); align-items:flex-start; word-break:break-word; }
.bx-footer-contact i { color:var(--p); margin-top:2px; flex-shrink:0; }
.bx-footer-mid { background:rgba(0,0,0,.2); padding:14px 0; border-top:1px solid rgba(255,255,255,.07); }
.bx-app-btn { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.18); padding:7px 12px; border-radius:7px; font-size:12px; transition:all var(--t); }
.bx-app-btn:hover { background:var(--p); border-color:var(--p); color:#fff; }
.bx-payment-icons { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.bx-pay-icon { color:rgba(255,255,255,.55); font-size:12px; }
.bx-upi-icon { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:3px; padding:2px 7px; font-size:11px; font-weight:700; color:#fff; }
.bx-footer-bottom { background:rgba(0,0,0,.3); padding:10px 0; border-top:1px solid rgba(255,255,255,.06); }
.bx-footer-badges { display:flex; gap:12px; flex-wrap:wrap; }
.bx-footer-badges span { font-size:11.5px; color:rgba(255,255,255,.4); display:flex; align-items:center; gap:4px; }
.bx-footer-badges i { color:var(--p); }

/* ─── Mobile Bottom Nav ──────────────────────────────────── */
.bx-bottom-nav { position:fixed; bottom:0; left:0; right:0; background:var(--white); border-top:1px solid var(--border); z-index:1000; display:flex; height:58px; box-shadow:0 -2px 12px rgba(0,0,0,.08); }
.bx-bnav-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-decoration:none; color:var(--muted); font-size:9.5px; font-weight:600; position:relative; transition:color var(--t); padding:4px 0; }
.bx-bnav-item i { font-size:20px; transition:transform var(--t); }
.bx-bnav-item.active { color:var(--p); }
.bx-bnav-item.active i { transform:scale(1.1); }
.bx-bnav-item:hover { color:var(--p); }
.bx-bnav-cart { position:relative; background:var(--p); color:#fff !important; border-radius:14px 14px 0 0; margin:-8px 3px 0; box-shadow:0 -3px 12px rgba(255,107,53,.3); }
.bx-bnav-cart:hover { background:var(--p-d) !important; }
.bx-bnav-badge { position:absolute; top:-3px; right:14%; background:var(--dark); color:#fff; font-size:9px; font-weight:800; border-radius:50%; width:16px; height:16px; display:flex; align-items:center; justify-content:center; }

/* ─── Back to Top ────────────────────────────────────────── */
.bx-back-top { position:fixed; bottom:68px; right:14px; width:40px; height:40px; background:var(--p); color:#fff; border:none; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer; z-index:999; box-shadow:0 3px 12px rgba(255,107,53,.3); opacity:0; transform:translateY(14px); transition:opacity var(--t), transform var(--t); }
.bx-back-top.visible { opacity:1; transform:translateY(0); }
.bx-back-top:hover { background:var(--p-d); }
@media(min-width:992px){ .bx-back-top{bottom:22px} }

/* ─── Misc ───────────────────────────────────────────────── */
.bx-card { background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:18px; border:1px solid var(--border); }
.bx-divider { height:1px; background:var(--border); margin:14px 0; }
.text-primary { color:var(--p) !important; }
.bg-primary   { background-color:var(--p) !important; }
.fw-600 { font-weight:600 !important; }
.fw-700 { font-weight:700 !important; }
.fw-800 { font-weight:800 !important; }
.lh-base { line-height:1.5; }
.bx-skeleton { background:linear-gradient(90deg,var(--border) 25%,#ebebeb 37%,var(--border) 63%); background-size:400% 100%; animation:bxShimmer 1.4s ease infinite; border-radius:var(--r); }
@keyframes bxShimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.swiper-button-prev,.swiper-button-next { width:32px!important; height:32px!important; background:var(--white); border-radius:50%; box-shadow:var(--shadow); }
.swiper-button-prev::after,.swiper-button-next::after { font-size:11px!important; color:var(--text); font-weight:900; }

/* ─── Responsive ─────────────────────────────────────────── */
@media(max-width:991px){ .bx-search-cat{display:none} .bx-cat-nav{overflow:hidden} }
@media(max-width:767px){ .bx-section-alt{background:var(--bg)} }

/* ─── WebView & Safe Area ────────────────────────────────── */
@supports(padding:max(0px)){
  .bx-bottom-nav{height:calc(58px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
  body.bx-body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  @media(min-width:992px){body.bx-body{padding-bottom:0}}
}
@media(hover:none){
  .bx-btn-cart,.btn,.bx-icon-btn{min-height:44px}
  .bx-cat-link{min-height:40px}
  .bx-fk-cat-item{-webkit-tap-highlight-color:transparent}
}

/* ============================================================
   REVIEW SYSTEM
   ============================================================ */

/* ── Interactive Star Picker ─────────────────────────────── */
.bx-star-picker {
  display:flex; flex-direction:row-reverse; gap:4px; width:fit-content;
}
.bx-star-picker input[type="radio"] { display:none; }
.bx-star-picker label {
  font-size:34px; color:#ddd; cursor:pointer;
  transition:color .15s, transform .15s; line-height:1;
}
.bx-star-picker label:hover,
.bx-star-picker label:hover ~ label,
.bx-star-picker input:checked ~ label { color:#FFB800; transform:scale(1.1); }
@media(max-width:400px){ .bx-star-picker label{font-size:28px} }

/* ── Review Cards (product page) ─────────────────────────── */
.bx-review-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; transition:box-shadow var(--t); }
.bx-review-card:hover { box-shadow:var(--shadow); }
.bx-review-mine { border-color:var(--p); background:#fff8f5; }
.bx-review-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--p),#FF8C42); color:#fff; font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bx-review-stars .stars { font-size:13px; }

/* ── Rating Summary Bar ──────────────────────────────────── */
.bx-rating-summary { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; margin-bottom:20px; }

/* ── Rate & Review Prompt (orders page) ─────────────────── */
.bx-review-prompt { background:#f9f9f9; border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px; margin-top:4px; }
.bx-review-prompt-label { font-size:12.5px; font-weight:700; color:var(--text2); }
.bx-review-item-btn { display:flex; align-items:center; gap:9px; background:var(--white); border:1.5px solid var(--border); border-radius:var(--r-md); padding:8px 10px; text-decoration:none !important; color:var(--text) !important; transition:border-color var(--t), box-shadow var(--t); max-width:220px; min-width:160px; }
.bx-review-item-btn:hover { border-color:var(--p); box-shadow:0 2px 8px rgba(255,107,53,.15); }
.bx-review-item-btn.bx-review-item-done { border-color:var(--success); background:#f0fdf4; }
.bx-review-item-btn img { width:40px; height:40px; object-fit:cover; border-radius:6px; border:1px solid var(--border); flex-shrink:0; }
.bx-review-item-info { flex:1; min-width:0; }
.bx-review-item-name { font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; margin-bottom:3px; }
.bx-review-item-status { font-size:11px; color:var(--success); font-weight:600; display:flex; align-items:center; }
@media(max-width:575px){ .bx-review-item-btn{min-width:100%;max-width:100%} }

/* ── Language Toggle ─────────────────────────────────────── */
.bx-lang-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  padding: 3px 5px;
  flex-shrink: 0;
}
.bx-lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 22px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: all .18s;
  letter-spacing: .3px;
}
.bx-lang-btn:hover { color: #fff; background: rgba(255,255,255,.15); }
.bx-lang-btn.active {
  background: #FF6B35;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(255,107,53,.4);
}
.bx-lang-sep {
  color: rgba(255,255,255,.25);
  font-size: 11px;
  font-weight: 300;
}
/* Mobile responsive */
@media(max-width:576px) {
  .bx-lang-toggle { padding: 2px 4px; }
  .bx-lang-btn { width: 24px; height: 20px; font-size: 10px; }
}