/* ═══════════════════════════════════════════════════════
   PakHub v47 — PRODUCTION CSS (All Bugs Fixed + Firebase Ready)
   FIX: lang/dir | SEO | A11y | Performance | Mobile | Confirm Dialogs | Validation
═══════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
  --amber:#F59E0B; --amber-d:#D97706; --amber-dd:#92400E;
  --amber-l:#FEF3C7; --amber-xl:#FFFBEB;
  --black:#0A0908; --black-2:#1C1917; --black-3:#292524;
  --white:#FAFAF9; --off:#F5F5F4;
  --border:#D6D3D1; --border-d:#A8A29E;
  --text:#1C1917; --muted:#57534E; --light:#78716C;
  --green:#059669; --green-l:#D1FAE5;
  --red:#DC2626; --red-l:#FEE2E2;
  --blue:#2563EB; --blue-l:#DBEAFE;
  --purple:#7C3AED; --purple-l:#EDE9FE;
  --gold:#EAB308; --orange:#EA580C;
  --r4:4px; --r8:8px; --r12:12px; --r16:16px; --r24:24px; --r-full:9999px;
  --s1:0 1px 3px rgba(0,0,0,.07);
  --s2:0 4px 12px rgba(0,0,0,.09);
  --s3:0 8px 24px rgba(0,0,0,.11);
  --s4:0 20px 48px rgba(0,0,0,.16);
  --glow:0 4px 16px rgba(245,158,11,.28);
  --nav-h:58px; --bnav-h:64px;
  --fd:'Syne',sans-serif;
  --fb:'DM Sans',sans-serif;
  --fu:'Noto Nastaliq Urdu',serif;
  --ease-back:cubic-bezier(.34,1.4,.64,1);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ── REDUCED MOTION — low-end device support ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ── RESET ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html { font-size:93.75%; scroll-behavior:smooth; -webkit-text-size-adjust:100%; } /* 15px base via % preserves user zoom prefs */
body {
  font-family:var(--fb); color:var(--text); background:var(--off);
  overflow-x:hidden; padding-top:var(--nav-h); padding-bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px));
  min-height:100vh; min-height:100dvh; -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; height:auto; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { font-family:var(--fb); }
/* FIX: focus-visible — use overflow:visible on parent to avoid clipping */
:focus-visible { outline:2px solid var(--amber); outline-offset:3px; border-radius:var(--r4); }
#pkm-network-banner { font-family:var(--fd); letter-spacing:.3px; box-shadow:0 2px 8px rgba(0,0,0,.3); }
* { scrollbar-width:thin; scrollbar-color:var(--border-d) transparent; }
::-webkit-scrollbar { width:3px; height:3px; }
::-webkit-scrollbar-thumb { background:var(--border-d); border-radius:2px; }

/* ── LOADER ── */
#loader {
  position:fixed; inset:0; background:var(--black); z-index:99999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  transition:opacity .5s var(--ease), visibility .5s;
}
#loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.ld-logo {
  font-family:var(--fd); font-size:clamp(44px,11vw,68px); font-weight:800;
  color:#fff; letter-spacing:-3px; line-height:1;
  /* FIX: use will-change only when animating */
}
.ld-logo em { color:var(--amber); font-style:normal; }
.ld-sub { font-size:10px; color:var(--light); letter-spacing:5px; text-transform:uppercase; font-weight:600; }
.ld-bar-wrap { width:200px; height:3px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; }
.ld-bar-fill {
  height:100%; background:linear-gradient(90deg,var(--amber),#FCD34D,var(--amber));
  background-size:200%; border-radius:2px;
  animation:ld-fill 0.6s var(--ease) forwards;
}
@keyframes ld-fill { from{width:0} to{width:100%} }
.ld-stats { display:flex; gap:24px; margin-top:4px; }
.ld-n { font-family:var(--fd); font-size:17px; font-weight:800; color:var(--amber); text-align:center; }
.ld-l { font-size:9px; color:rgba(255,255,255,.28); letter-spacing:1px; text-transform:uppercase; text-align:center; margin-top:1px; }

/* ── SKELETON LOADER ── */
.skeleton {
  background:linear-gradient(90deg,#e8e8e8 25%,#f2f2f2 50%,#e8e8e8 75%);
  background-size:200% 100%;
  animation:skeleton-shimmer 1.4s ease infinite;
  border-radius:var(--r8);
  /* Pause when page not active (off-screen in SPA) */
  content-visibility:auto;
}
@keyframes skeleton-shimmer { 0%{background-position:200%} 100%{background-position:-200%} }
.skel-card { height:220px; width:100%; }
.skel-line { height:12px; margin-bottom:8px; }
.skel-line.short { width:60%; }

/* ── TOAST ── */
#toast-container {
  position:fixed; top:calc(var(--nav-h) + 8px); right:12px; z-index:9999;
  display:flex; flex-direction:column; gap:7px; pointer-events:none; max-width:280px;
}
[dir="rtl"] #toast-container { right:auto; left:12px; }
.toast {
  background:var(--black-2); color:#fff; padding:10px 14px 10px 12px;
  border-radius:var(--r8); font-size:12.5px; font-weight:500; line-height:1.45;
  box-shadow:var(--s4); border-left:3px solid var(--amber);
  transform:translateX(110%); transition:transform .3s var(--ease-back);
  pointer-events:auto; display:flex; align-items:flex-start; gap:8px;
}
.toast.visible { transform:translateX(0); }
.toast-ok  { border-left-color:var(--green); }
.toast-err { border-left-color:var(--red); }
.toast-warn{ border-left-color:var(--gold); }
.toast-info{ border-left-color:var(--blue); }
/* FIX: close button — min 44px touch target */
.toast-close {
  background:none; border:none; color:rgba(255,255,255,.5); cursor:pointer;
  font-size:16px; line-height:1; padding:4px 6px; margin-left:auto; flex-shrink:0;
  min-width:44px; min-height:44px; /* FIX #16: 44px WCAG touch target */ display:flex; align-items:center; justify-content:center;
  border-radius:var(--r4);
}
.toast-close:hover { color:#fff; background:rgba(255,255,255,.1); }

/* ── NAVBAR ── */
#navbar {
  position:fixed; top:0; inset-inline:0; height:var(--nav-h); background:var(--black);
  border-bottom:1px solid rgba(255,255,255,.12); display:flex; align-items:center;
  z-index:1000;
}
.nav-logo {
  display:flex; align-items:center; gap:4px; padding:0 10px;
  cursor:pointer; flex-shrink:0; user-select:none;
}
.nav-pk {
  font-size:9px; background:var(--amber); color:var(--black); padding:2px 5px;
  border-radius:2px; font-weight:800; letter-spacing:.5px; align-self:flex-start; margin-top:4px;
}
.nav-logo-txt { font-family:var(--fd); font-size:24px; font-weight:800; color:#fff; letter-spacing:-1.5px; line-height:1; }
.nav-logo-txt em { color:var(--amber); font-style:normal; }
/* FIX: search as form for semantics + a11y */
.nav-search-form { flex:1; display:flex; height:36px; margin:0 7px; border-radius:var(--r4); overflow:hidden; min-width:0; }
.nav-search-cat {
  background:var(--amber); border:none; color:var(--black); padding:0 8px;
  font-size:11px; font-weight:800; font-family:var(--fb); cursor:pointer; flex-shrink:0; outline:none;
}
.nav-search-input {
  flex:1; border:none; outline:none; background:#fff; padding:0 10px;
  font-size:13px; font-family:var(--fb); color:var(--text); min-width:0;
}
.nav-search-input::placeholder { color:var(--light); }
.nav-search-btn {
  background:var(--amber-d); border:none; color:#fff; padding:0 13px;
  font-size:15px; cursor:pointer; flex-shrink:0; transition:background .2s;
}
.nav-search-btn:hover, .nav-search-btn:active { background:var(--amber-dd); }
.nav-actions { display:flex; align-items:center; padding-right:6px; gap:2px; flex-shrink:0; }
.nav-btn {
  background:none; border:none; color:#fff; display:flex; flex-direction:column;
  align-items:center; gap:2px; padding:5px 8px; border-radius:var(--r4); cursor:pointer;
  font-size:9.5px; font-weight:600; position:relative; transition:background .15s; white-space:nowrap;
  min-height:44px; min-width:44px; justify-content:center;
}
@media (hover: hover) { .nav-btn:hover { background:rgba(255,255,255,.1); } }
.nav-btn:active { background:rgba(255,255,255,.1); }
.nav-btn .icon { font-size:18px; line-height:1; }
.nav-badge {
  position:absolute; top:2px; right:3px; background:var(--amber); color:var(--black);
  border-radius:var(--r-full); min-width:15px; height:15px; font-size:8.5px; font-weight:800;
  display:none; align-items:center; justify-content:center; padding:0 3px;
}
.nav-badge.visible { display:flex; }

/* ── CATEGORY BAR ── */
#catbar {
  position:-webkit-sticky; position:sticky; top:var(--nav-h); z-index:100; background:var(--black-2);
  border-bottom:1px solid rgba(255,255,255,.08); display:flex; overflow-x:auto; scrollbar-width:none; padding:0 6px;
}
#catbar::-webkit-scrollbar { display:none; }
#catbar.hidden { display:none; }
.cat-tab {
  flex-shrink:0; padding:0 14px; color:rgba(255,255,255,.45); font-size:11.5px; font-weight:600;
  cursor:pointer; border-bottom:2px solid transparent; transition:color .2s,border-color .2s;
  white-space:nowrap; user-select:none;
  min-height:44px; display:flex; align-items:center;
}
.cat-tab:hover, .cat-tab:active { color:rgba(255,255,255,.85); }
.cat-tab.active { color:var(--amber); border-bottom-color:var(--amber); }
.cat-tab.active:focus-visible { outline-offset:0; }

/* ── BOTTOM NAV ── */
#bottom-nav {
  position:fixed; bottom:0; inset-inline:0;
  background:var(--black-2);
  border-top:1px solid rgba(255,255,255,.1); display:flex; z-index:900;
  padding-bottom:env(safe-area-inset-bottom,0px);
  height:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px));
}
.bnav-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; cursor:pointer; color:rgba(255,255,255,.38); font-size:9.5px; font-weight:600;
  transition:color .2s; position:relative; border:none; background:none;
  min-height:44px; padding-bottom:env(safe-area-inset-bottom,0px);
}
.bnav-btn:hover, .bnav-btn:active, .bnav-btn.active { color:var(--amber); }
.bnav-btn .b-icon { font-size:21px; line-height:1; }
/* FIX: active indicator at top, correct position */
.bnav-btn.active::after {
  content:''; position:absolute; top:0; left:25%; right:25%;
  height:2px; background:var(--amber); border-radius:0 0 2px 2px;
}
.bnav-badge {
  position:absolute; top:6px; right:calc(50% - 20px); background:var(--amber); color:var(--black);
  border-radius:var(--r-full); min-width:15px; height:15px; font-size:8.5px; font-weight:800;
  display:none; align-items:center; justify-content:center; padding:0 3px;
}
.bnav-badge.visible { display:flex; }

/* ── PAGES ── */
.page { display:none; min-height:calc(100dvh - var(--nav-h) - var(--bnav-h)); }
.page.active { display:block; animation:page-in .2s var(--ease); }
@keyframes page-in { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }

.back-bar {
  display:flex; align-items:center; gap:8px; padding:11px 14px; background:#fff;
  border-bottom:1px solid var(--border); position:-webkit-sticky; position:sticky;
  top:var(--nav-h); z-index:50;
}
.back-btn {
  background:none; border:none; display:flex; align-items:center; gap:5px;
  font-size:13.5px; font-weight:700; color:var(--amber-d); cursor:pointer;
  padding:6px 2px; flex-shrink:0; min-height:44px;
}
.back-btn:active { opacity:.7; }
.back-title { font-family:var(--fd); font-size:15px; font-weight:800; margin:0 auto; letter-spacing:-.3px; }

/* ── HOME: SCALE BAR ── */
.scale-bar {
  background:linear-gradient(135deg,var(--black),#150800); padding:10px 14px;
  display:flex; align-items:center; overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid rgba(245,158,11,.1);
}
.scale-bar::-webkit-scrollbar { display:none; }
.scale-stat { flex-shrink:0; text-align:center; padding:0 14px; }
.scale-stat-n { font-family:var(--fd); font-size:15px; font-weight:900; color:var(--amber); }
.scale-stat-l { font-size:9px; color:rgba(255,255,255,.35); text-transform:uppercase; letter-spacing:.5px; margin-top:1px; }
.scale-div { width:1px; height:26px; background:rgba(255,255,255,.1); flex-shrink:0; }

/* ── HERO ── */
.hero { background:var(--black); padding:26px 16px 30px; position:relative; overflow:hidden; }
/* FIX: Use CSS only decorations — no filter:blur on mobile (perf) */
.hero::before {
  content:''; position:absolute; top:-60px; right:-60px; width:260px; height:260px;
  background:radial-gradient(circle,rgba(245,158,11,.1) 0%,transparent 70%);
  pointer-events:none;
}
.hero-inner { position:relative; z-index:1; }
.hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.28); color:var(--amber);
  padding:8px 16px; border-radius:var(--r-full); font-size:11px; font-weight:800;
  letter-spacing:.5px; text-transform:uppercase; margin-bottom:14px;
  min-height:44px;
}
.hero h1 {
  font-family:var(--fd); font-size:clamp(26px,7vw,46px); font-weight:800;
  letter-spacing:-2px; line-height:1.1; color:#fff; margin-bottom:8px;
}
.hero h1 em { color:var(--amber); font-style:normal; }
.hero-urdu {
  font-family:var(--fu); direction:rtl; color:rgba(255,255,255,.55);
  font-size:15px; line-height:2.4; margin-bottom:18px;
}
.hero-btns { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:16px; }
.hero-chips { display:flex; align-items:center; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.hero-chips::-webkit-scrollbar { display:none; }
.hero-chip {
  flex-shrink:0; display:inline-flex; align-items:center; gap:5px;
  padding:6px 13px; border-radius:var(--r-full); font-size:10.5px; font-weight:700;
  cursor:default;
}
.hero-chip:focus-visible { outline:2px solid var(--amber); outline-offset:2px; }
.hchip-g { background:rgba(5,150,105,.14); border:1px solid rgba(5,150,105,.24); color:#34D399; }
.hchip-a { background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.24); color:var(--amber); }
.hchip-b { background:rgba(37,99,235,.12); border:1px solid rgba(37,99,235,.24); color:#60A5FA; }

/* ── SECTION HEADER ── */
.sec-head { display:flex; align-items:center; justify-content:space-between; padding:18px 14px 10px; }
.sec-title {
  font-family:var(--fd); font-size:19px; font-weight:800; letter-spacing:-.5px;
  display:flex; align-items:center; gap:9px;
}
.sec-title::before { content:''; width:4px; height:20px; background:var(--amber); border-radius:2px; display:block; flex-shrink:0; }
.see-all { color:var(--amber); font-size:11.5px; font-weight:700; cursor:pointer; border:none; background:none; padding:0; }

/* ── BANNERS ── */
.comm-banner {
  background:linear-gradient(135deg,var(--black),#180400); border:1px solid rgba(245,158,11,.2);
  border-radius:var(--r12); margin:12px; padding:14px 16px; display:flex; align-items:center; gap:12px;
}
.comm-badge {
  background:var(--amber); color:var(--black); font-family:var(--fd); font-size:22px;
  font-weight:900; padding:5px 10px; border-radius:var(--r8); flex-shrink:0; letter-spacing:-1px;
}
.comm-text { color:#fff; font-size:13px; line-height:1.55; }
.comm-text strong { color:var(--amber); }

.partner-banner {
  background:linear-gradient(135deg,#FF6900,#FF3D00); border-radius:var(--r12);
  margin:0 12px 12px; padding:13px 15px; display:flex; align-items:center; gap:12px;
  cursor:pointer; transition:transform .2s,box-shadow .2s; border:1px solid rgba(255,255,255,.1);
  text-decoration:none;
}
@media (hover: hover) { .partner-banner:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(255,61,0,.28); } }
.partner-logo { font-family:var(--fd); font-size:20px; font-weight:900; color:#fff; letter-spacing:-1px; flex-shrink:0; }
.partner-txt { color:rgba(255,255,255,.9); font-size:12.5px; line-height:1.5; flex:1; }
.partner-txt strong { color:#fff; font-size:13.5px; }
.partner-cta {
  background:#fff; color:#FF6900; font-family:var(--fd); font-size:11px; font-weight:900;
  padding:5px 12px; border-radius:var(--r-full); flex-shrink:0; white-space:nowrap;
}

/* ── SHOPIFY / WEBSITE PARTNER BANNER ── */
.partner-banner.shopify-banner {
  background:linear-gradient(135deg,#96BF48,#5A8E2A);
  border:1px solid rgba(255,255,255,.15);
}
@media (hover: hover) { .partner-banner.shopify-banner:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(96,191,72,.35); } }
.shopify-banner .partner-logo { font-size:20px; letter-spacing:-0.5px; }
.shopify-banner .partner-cta { background:var(--black); color:#96BF48; }


/* ── PRODUCT GRID ── */
.pgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:0 12px 12px; }
@media(min-width:460px){.pgrid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:680px){.pgrid{grid-template-columns:repeat(4,1fr);}}
@media(min-width:900px){.pgrid{grid-template-columns:repeat(4,1fr);}}
@media(min-width:1100px){.pgrid{grid-template-columns:repeat(5,1fr);gap:14px;}}

/* ── PRODUCT CARD ── */
.pcard {
  background:#fff; border-radius:var(--r12); overflow:hidden; border:1px solid var(--border);
  cursor:pointer; transition:transform .22s var(--ease-back),border-color .2s,box-shadow .22s;
  animation:card-up .35s var(--ease) both;
}
/* FIX: hover only on non-touch devices — avoids stuck hover on mobile */
@media (hover: hover) {
  .pcard:hover { transform:translateY(-3px); border-color:var(--amber); box-shadow:var(--s3); }
}
@keyframes card-up { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.pcard-img {
  width:100%; aspect-ratio:1/1; background:var(--off); display:flex; align-items:center;
  justify-content:center; font-size:42px; position:relative; overflow:hidden;
}
.pcard-img img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .3s; }
.pcard:hover .pcard-img img { transform:scale(1.04); }
.badge-sale {
  position:absolute; top:6px; left:6px; background:var(--red); color:#fff;
  font-size:8.5px; font-weight:800; padding:2px 6px; border-radius:3px; z-index:1;
}
.badge-cod {
  position:absolute; bottom:6px; right:6px; background:var(--green); color:#fff;
  font-size:8.5px; font-weight:800; padding:2px 6px; border-radius:3px; letter-spacing:.3px; z-index:1;
}
.badge-comm {
  position:absolute; top:6px; right:6px; background:var(--black); color:var(--amber);
  font-size:8px; font-weight:800; padding:2px 5px; border-radius:3px; z-index:1;
}
.badge-oos {
  position:absolute; top:6px; left:6px; background:rgba(0,0,0,.7); color:#fff;
  font-size:8.5px; font-weight:800; padding:2px 8px; border-radius:3px; z-index:1; letter-spacing:.3px;
}
.pcard.out-of-stock { opacity:.65; }
.pcard-body { padding:10px; }
.pcard-name {
  font-size:12px; font-weight:600; line-height:1.35; margin-bottom:3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  /* Fallback for browsers without -webkit-line-clamp */
  max-height:calc(1.35em * 2);
}
.pcard-shop { font-size:10px; color:var(--muted); margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pcard-stars { color:var(--gold); font-size:10.5px; margin-bottom:3px; }
.pcard-price { font-family:var(--fd); font-size:16px; font-weight:800; color:var(--amber-d); }
.pcard-orig { font-size:10.5px; color:var(--light); text-decoration:line-through; margin-right:4px; }
.pcard-footer { display:flex; gap:5px; margin-top:8px; }
/* Fix #6 - add to cart button touch target 44px, Fix #23 */
.btn-ac {
  flex:1; background:var(--amber); color:var(--black); border:none; padding:10px 0;
  border-radius:var(--r4); font-size:11px; font-weight:700; cursor:pointer; transition:background .15s;
  min-height:44px;
}
.btn-ac:hover, .btn-ac:active { background:var(--amber-d); }
.btn-wl {
  background:var(--off); border:1px solid var(--border); padding:10px 12px;
  border-radius:var(--r4); cursor:pointer; font-size:16px; transition:border-color .15s,color .15s;
  color:var(--light); min-height:44px; min-width:48px; display:flex; align-items:center; justify-content:center;
}
.btn-wl:hover, .btn-wl:active { border-color:var(--red); color:var(--red); }
/* FIX: aria-pressed state for wishlist */
.btn-wl[aria-pressed="true"] { color:var(--red); border-color:var(--red); }

/* ── PRODUCT DETAIL ── */
.detail-img { width:100%; height:272px; background:var(--off); display:flex; align-items:center; justify-content:center; font-size:70px; overflow:hidden; }

/* FIX (product gallery CSS missing — reported bug): the multi-image
   gallery markup in js/product.js had zero matching CSS, so uploaded
   images rendered unstyled/oversized or appeared as a blank/black block
   instead of a proper photo gallery. */
.gallery-wrap { width:100%; }
.gallery-main {
  position: relative; width:100%; height:272px; background:var(--off);
  border-radius: var(--r8); overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.gallery-main img#gal-main-img { width:100%; height:100%; object-fit:contain; background:#fff; }
.gal-prev, .gal-next {
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:32px; height:32px; border-radius:50%; border:none;
  background:rgba(0,0,0,.45); color:#fff; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.gal-prev { left:8px; } .gal-next { right:8px; }
.gal-prev:hover, .gal-next:hover { background:rgba(0,0,0,.65); }
.gal-count {
  position:absolute; bottom:8px; right:8px; z-index:2;
  background:rgba(0,0,0,.55); color:#fff; font-size:10.5px; font-weight:700;
  padding:2px 8px; border-radius:10px;
}
.gal-dots { display:flex; justify-content:center; gap:5px; margin:8px 0 4px; }
.gal-dot {
  width:6px; height:6px; border-radius:50%; border:none; padding:0;
  background:var(--border); cursor:pointer;
}
.gal-dot.on { background:var(--amber); width:16px; border-radius:3px; }
.gal-thumb-row { display:flex; gap:7px; overflow-x:auto; padding:2px 0; }
.gal-thumb {
  flex-shrink:0; width:52px; height:52px; border-radius:8px; overflow:hidden;
  border:2px solid transparent; cursor:pointer; background:var(--off);
}
.gal-thumb.on { border-color:var(--amber); }
.gal-thumb img { width:100%; height:100%; object-fit:cover; }
.detail-img img { width:100%; height:100%; object-fit:cover; }
.detail-body { padding:15px; }
.det-cat { display:inline-block; background:var(--amber-xl); color:var(--amber-dd); padding:4px 12px; border-radius:3px; font-size:11.5px; font-weight:700; margin-bottom:8px; text-transform:uppercase; letter-spacing:.4px; }
.det-title { font-family:var(--fd); font-size:clamp(20px,5vw,26px); font-weight:800; line-height:1.2; margin-bottom:10px; letter-spacing:-.5px; }
.det-price-wrap { display:flex; align-items:baseline; gap:8px; margin-bottom:13px; flex-wrap:wrap; }
.det-price { font-family:var(--fd); font-size:30px; font-weight:900; color:var(--amber-d); }
.det-orig { font-size:15px; color:var(--light); text-decoration:line-through; }
.seller-row { display:flex; align-items:center; gap:12px; background:var(--off); padding:12px; border-radius:var(--r8); margin-bottom:13px; }
.seller-av { width:44px; height:44px; background:var(--amber); color:var(--black); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:18px; font-weight:900; flex-shrink:0; overflow:hidden; }
.seller-info { flex:1; min-width:0; }
.seller-nm { font-size:13.5px; font-weight:700; margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seller-loc { font-size:11.5px; color:var(--muted); }
.seller-link { font-size:11px; color:var(--orange); font-weight:700; display:inline-flex; align-items:center; gap:3px; margin-top:3px; }
.trust-bar { height:6px; background:var(--border); border-radius:3px; overflow:hidden; width:90px; margin-top:4px; }
.trust-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--green),#34D399); transition:width .6s; }
.trust-fill.med { background:linear-gradient(90deg,var(--gold),#FCD34D); }
.det-desc { background:var(--off); border-radius:var(--r8); padding:13px; font-size:13px; line-height:1.75; color:var(--muted); margin-bottom:13px; }
.det-acts { display:flex; gap:8px; margin-bottom:13px; }
.btn-buy-now { flex:1; background:var(--amber); color:var(--black); border:none; padding:14px; border-radius:var(--r8); font-size:14px; font-weight:800; cursor:pointer; transition:background .2s,box-shadow .2s; min-height:44px; }
.btn-buy-now:hover, .btn-buy-now:active { background:var(--amber-d); box-shadow:var(--glow); }
.btn-add-lg { flex:1; background:var(--black); color:#fff; border:none; padding:14px; border-radius:var(--r8); font-size:14px; font-weight:700; cursor:pointer; transition:background .2s; min-height:44px; }
.btn-add-lg:hover, .btn-add-lg:active { background:var(--black-3); }
.btn-wa { background:#25D366; color:#fff; border:none; padding:14px; border-radius:var(--r8); font-size:17px; cursor:pointer; width:50px; flex-shrink:0; min-height:44px; display:flex; align-items:center; justify-content:center; }
.comm-info-box { background:var(--amber-xl); border:1.5px solid var(--amber-d); border-radius:var(--r8); padding:10px 13px; font-size:12.5px; margin-bottom:13px; display:flex; align-items:flex-start; gap:8px; line-height:1.55; color:var(--text); }
.comm-info-box strong { color:var(--amber-dd); }
.cod-box { background:var(--green-l); border:1px solid var(--green); border-radius:var(--r8); padding:11px 13px; display:flex; align-items:center; gap:9px; margin-bottom:13px; font-size:12.5px; }
.cod-box strong { color:var(--green); }

/* ── REVIEWS ── */
.reviews-sec { padding:0 15px 15px; }
.review-card { background:var(--off); border-radius:var(--r8); padding:11px 13px; margin-bottom:8px; border:1px solid var(--border); }
.review-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; }
.reviewer-nm { font-size:12px; font-weight:700; }
.review-stars { color:var(--gold); font-size:11px; }
.review-txt { font-size:11.5px; color:var(--muted); line-height:1.55; }
.review-date { font-size:10px; color:var(--light); margin-top:3px; }

/* ── CART ── */
.cart-inner { padding:14px; }
.cart-item {
  background:#fff; border-radius:var(--r12); padding:12px; margin-bottom:9px;
  display:flex; gap:11px; align-items:flex-start; border:1px solid var(--border); transition:border-color .2s;
}
@media (hover: hover) { .cart-item:hover { border-color:var(--amber); } }
.ci-img { width:70px; height:70px; border-radius:var(--r8); background:var(--off); display:flex; align-items:center; justify-content:center; font-size:26px; flex-shrink:0; overflow:hidden; }
.ci-img img { width:100%; height:100%; object-fit:cover; }
.ci-info { flex:1; min-width:0; }
.ci-name { font-size:12.5px; font-weight:600; line-height:1.35; margin-bottom:3px; }
.ci-price { font-family:var(--fd); font-size:15px; font-weight:800; color:var(--amber-d); }
.qty-ctrl { display:flex; align-items:center; gap:8px; margin-top:6px; }
.qty-btn { width:44px; height:44px; border-radius:var(--r4); border:1.5px solid var(--border); background:#fff; cursor:pointer; font-size:18px; font-weight:700; display:flex; align-items:center; justify-content:center; transition:border-color .15s; min-width:44px; /* FIX #16: 44px WCAG touch target */ }
.qty-btn:hover, .qty-btn:active { border-color:var(--amber); }
.qty-val { font-family:var(--fd); font-size:14px; font-weight:800; min-width:22px; text-align:center; }
.qty-tot { font-size:11.5px; color:var(--muted); }
.ci-del { background:none; border:none; color:var(--red); font-size:18px; cursor:pointer; padding:5px; margin-left:auto; flex-shrink:0; align-self:flex-start; }
.sum-card { background:#fff; border-radius:var(--r12); padding:15px; border:1px solid var(--border); margin-top:12px; }
.sum-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--off); font-size:13.5px; }
.sum-row:last-child { border:none; }
.sum-row.tot { font-family:var(--fd); font-size:19px; font-weight:800; color:var(--amber-d); padding-top:12px; }
.sum-val { font-family:var(--fd); font-weight:700; }

/* ── EMPTY STATE ── */
.empty { text-align:center; padding:50px 20px; color:var(--muted); }
.empty .ei { font-size:50px; margin-bottom:12px; }
.empty h3 { font-size:16px; font-weight:700; margin-bottom:5px; color:var(--text); }
.empty p  { font-size:13px; }

/* ── CHECKOUT ── */
.co-inner { padding:14px; }
.auth-wall { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:55px 20px; text-align:center; gap:14px; }
.auth-wall h2 { font-family:var(--fd); font-size:21px; font-weight:800; }
.auth-wall .urdu-txt { color:var(--muted); font-family:var(--fu); direction:rtl; font-size:13px; line-height:2.4; }
.google-btn {
  display:flex; align-items:center; gap:10px; background:#fff; border:2px solid var(--border);
  padding:12px 24px; border-radius:var(--r8); font-size:14px; font-weight:700; cursor:pointer;
  box-shadow:var(--s2); transition:border-color .2s,box-shadow .2s;
}
.google-btn:hover { border-color:var(--amber); box-shadow:var(--glow); }
.bl-wall { background:var(--black); border-radius:var(--r16); padding:45px 20px; margin:20px; text-align:center; }
.bl-title { font-family:var(--fd); font-size:22px; font-weight:900; color:var(--red); margin-bottom:8px; }
.bl-urdu { font-family:var(--fu); direction:rtl; color:rgba(255,255,255,.4); font-size:13px; line-height:2.2; margin-top:7px; }
.form-sec { background:#fff; border-radius:var(--r12); padding:16px; border:1px solid var(--border); margin-bottom:12px; box-shadow:var(--s1); }
.form-sec-title { font-family:var(--fd); font-size:15px; font-weight:800; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.step-num { background:var(--amber); color:var(--black); width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; }

/* ── FORMS ── */
.fgrp { margin-bottom:13px; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.flab { display:block; font-size:11px; font-weight:700; color:var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.5px; }
.flab .req { color:var(--amber); }
.fi {
  width:100%; padding:11px 13px; border:1.5px solid var(--border); border-radius:var(--r8);
  font-size:13.5px; font-family:var(--fb); background:#fff; outline:none; color:var(--text);
  transition:border-color .2s,box-shadow .2s;
}
.fi:focus { border-color:var(--amber); box-shadow:0 0 0 3px rgba(245,158,11,.1); }
.fi::placeholder { color:var(--light); }
.fi.error { border-color:var(--red); }
/* FIX: verified input state */
.fi.verified { background:var(--green-l); color:var(--green); font-weight:700; border-color:var(--green); }
.fi-sel { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath fill='%2378716C' d='M0 0l5 7 5-7z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; cursor:pointer; }
textarea.fi { resize:vertical; min-height:80px; }
.ferr { font-size:11px; color:var(--red); margin-top:4px; display:none; font-weight:600; line-height:1.4; }
.ferr.on { display:block; }
/* Fix #47 - status pills: sentence case more readable than uppercase on small font */
.spill { padding:3px 10px; border-radius:var(--r-full); font-size:10.5px; font-weight:800; font-family:var(--fd); white-space:nowrap; }
.fhint { font-size:11px; color:var(--muted); margin-top:4px; line-height:1.6; }
.fhint.urdu { font-family:var(--fu); direction:rtl; font-size:13px; line-height:2.1; color:var(--muted); }
/* FIX: lang="ur" must be set inline on Urdu elements for screen reader support */

/* Terms */
.terms-wrap { display:flex; gap:10px; align-items:flex-start; background:var(--amber-xl); border:1.5px solid var(--amber); border-radius:var(--r8); padding:12px; margin:12px 0; }
.terms-cb { width:17px; height:17px; accent-color:var(--amber); cursor:pointer; flex-shrink:0; margin-top:2px; }
.terms-txt { font-size:11.5px; line-height:1.65; }
.terms-txt strong { color:var(--amber-dd); }

/* GPS */
.gps-btn { width:100%; padding:11px; background:var(--blue-l); color:var(--blue); border:1.5px solid var(--blue); border-radius:var(--r8); font-size:13px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:background .2s,color .2s; }
.gps-btn:hover { background:var(--blue); color:#fff; }

/* ── SUCCESS ── */
.suc-wrap { text-align:center; padding:45px 20px 30px; }
.suc-icon { font-size:72px; animation:pop .6s var(--ease-back); margin-bottom:16px; }
@keyframes pop { 0%{transform:scale(0)} 70%{transform:scale(1.15)} 100%{transform:scale(1)} }
.suc-title { font-family:var(--fd); font-size:28px; font-weight:900; color:var(--green); letter-spacing:-.8px; margin-bottom:7px; }
.oid-box { background:var(--green-l); border:2px dashed var(--green); border-radius:var(--r12); padding:15px; margin:18px 0; }
.oid-lbl { font-size:10px; color:var(--green); text-transform:uppercase; letter-spacing:1.5px; font-weight:700; margin-bottom:4px; }
.oid-val { font-family:var(--fd); font-size:22px; font-weight:900; color:var(--green); letter-spacing:1px; }

/* ── TRACK ── */
.track-inner { padding:14px; }
.tl-step { display:flex; gap:13px; padding-bottom:18px; position:relative; }
.tl-step:not(:last-child)::after { content:''; position:absolute; top:30px; left:13px; bottom:0; width:2px; background:var(--border); }
.tl-dot { width:28px; height:28px; border-radius:50%; border:2.5px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; z-index:1; position:relative; }
.tl-dot.done { border-color:var(--green); background:var(--green); color:#fff; }
.tl-dot.cur { border-color:var(--amber); background:var(--amber); color:var(--black); box-shadow:0 0 0 5px rgba(245,158,11,.18); }
.tl-info { flex:1; padding-top:3px; }
.tl-ttl { font-size:13.5px; font-weight:700; margin-bottom:2px; }
.tl-desc { font-size:11.5px; color:var(--muted); }
.tl-time { font-size:10.5px; color:var(--light); font-family:var(--fd); margin-top:2px; font-weight:600; }
.trk-num-box { background:var(--blue-l); border:1px solid var(--blue); border-radius:var(--r8); padding:10px 13px; display:flex; align-items:center; gap:10px; margin:8px 0; }
.trk-courier { font-size:9.5px; font-weight:700; color:var(--blue); text-transform:uppercase; letter-spacing:.5px; }
.trk-num { font-family:var(--fd); font-size:16px; font-weight:900; color:var(--blue); }

/* ── SELLER AUTH ── */
.auth-wrap { min-height:calc(100vh - var(--nav-h) - var(--bnav-h)); display:flex; align-items:flex-start; justify-content:center; padding:20px 14px 30px; }
.auth-card { background:#fff; border-radius:var(--r24); padding:28px 22px; width:100%; max-width:460px; box-shadow:var(--s4); border:1px solid var(--border); }
.auth-brand { text-align:center; margin-bottom:22px; }
.auth-logo { font-family:var(--fd); font-size:34px; font-weight:800; color:var(--text); letter-spacing:-1.5px; }
.auth-logo em { color:var(--amber); font-style:normal; }
.auth-sub { font-size:11.5px; color:var(--muted); margin-top:3px; }
.auth-tabs { display:flex; background:var(--off); border-radius:var(--r8); padding:3px; gap:3px; margin-bottom:20px; }
.atab { flex:1; text-align:center; padding:9px; border-radius:6px; font-size:12.5px; font-weight:700; cursor:pointer; border:none; background:transparent; color:var(--muted); transition:all .2s; }
.atab.active { background:#fff; color:var(--amber); box-shadow:var(--s1); }
.daraz-req { background:linear-gradient(135deg,#FF6900,#FF3D00); border-radius:var(--r8); padding:11px 14px; margin-bottom:16px; font-size:12px; color:#fff; display:flex; align-items:center; gap:10px; line-height:1.5; }
.ai-anim { display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,var(--black),var(--black-2)); border-radius:var(--r8); padding:14px; margin:12px 0; }
.ai-spin { width:26px; height:26px; border:3px solid rgba(245,158,11,.2); border-top-color:var(--amber); border-radius:50%; animation:spin .8s linear infinite; flex-shrink:0; }
@keyframes spin { to{transform:rotate(360deg)} }
.ai-txt { color:#fff; font-size:12.5px; line-height:1.55; }
.ai-txt strong { color:var(--amber); }

/* ── SELLER DASH ── */
.dash-top { background:var(--black); padding:11px 15px; display:flex; justify-content:space-between; align-items:center; }
.dash-top-title { font-family:var(--fd); font-size:19px; font-weight:800; color:#fff; }
.dash-inner { padding:14px; }
.info-banner { background:var(--amber-xl); border:1.5px solid var(--amber); border-radius:var(--r8); padding:11px 14px; font-size:12.5px; margin-bottom:13px; line-height:1.55; }
.info-banner strong { color:var(--amber-dd); }
.danger-banner { background:var(--red-l); border-color:var(--red); }
.danger-banner strong { color:var(--red); }

.dash-hero { background:linear-gradient(135deg,var(--black),#180400); border-radius:var(--r16); padding:19px; margin-bottom:14px; position:relative; overflow:hidden; }
.dash-hero::before { content:''; position:absolute; top:-30px; right:-30px; width:150px; height:150px; background:radial-gradient(circle,rgba(245,158,11,.1) 0%,transparent 70%); }
.dash-hero-inner { position:relative; z-index:1; }
.dash-shop { font-family:var(--fd); font-size:22px; font-weight:900; color:#fff; letter-spacing:-.5px; }
.dash-city { font-size:11.5px; color:rgba(255,255,255,.36); margin-top:2px; }
.dash-comm-badge { display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(245,158,11,.3); color:var(--amber); padding:4px 11px; border-radius:var(--r-full); font-size:10.5px; font-weight:700; margin-top:9px; background:rgba(245,158,11,.08); }

.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px; }
@media(min-width:480px){ .stats-grid{grid-template-columns:repeat(4,1fr);} }
.stat-card { background:#fff; border-radius:var(--r8); padding:13px; border:1px solid var(--border); position:relative; overflow:hidden; box-shadow:var(--s1); }
.stat-card::after { content:''; position:absolute; bottom:0; inset-inline:0; height:3px; border-radius:0 0 var(--r8) var(--r8); }
.stat-card.earn::after { background:var(--green); }
.stat-card.pend::after { background:var(--amber); }
.stat-card.ord::after  { background:var(--blue); }
.stat-card.ret::after  { background:var(--red); }
.stat-val { font-family:var(--fd); font-size:21px; font-weight:900; margin-bottom:2px; letter-spacing:-.5px; }
.stat-lbl { font-size:10.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.3px; }

.rating-card { background:#fff; border-radius:var(--r12); padding:14px; border:1px solid var(--border); margin-bottom:14px; box-shadow:var(--s1); }
.stars-big { font-size:28px; color:var(--gold); letter-spacing:2px; }

.ref-card { background:linear-gradient(135deg,var(--black),#180400); border-radius:var(--r16); padding:17px; margin-bottom:14px; position:relative; overflow:hidden; }
.ref-card::after { content:'🎁'; position:absolute; right:15px; top:50%; transform:translateY(-50%); font-size:58px; opacity:.1; pointer-events:none; }
.ref-title { font-family:var(--fd); font-size:17px; font-weight:800; color:#fff; margin-bottom:3px; }
.ref-sub { font-size:11.5px; color:rgba(255,255,255,.36); }
.ref-bar-wrap { height:7px; background:rgba(255,255,255,.1); border-radius:4px; overflow:hidden; margin:8px 0; }
.ref-fill { height:100%; background:linear-gradient(90deg,var(--amber),#FCD34D); border-radius:4px; transition:width .8s; }
.ref-labels { display:flex; justify-content:space-between; font-size:10px; color:rgba(255,255,255,.28); }
.ref-reward { display:inline-flex; align-items:center; gap:6px; background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.3); color:var(--amber); padding:5px 12px; border-radius:var(--r-full); font-size:11.5px; font-weight:700; margin-top:9px; }

.dash-tabs { display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; margin-bottom:14px; }
.dash-tabs::-webkit-scrollbar { display:none; }
.dtab { flex-shrink:0; padding:8px 16px; border-radius:var(--r-full); border:1.5px solid var(--border); background:#fff; cursor:pointer; font-size:11.5px; font-weight:700; color:var(--muted); transition:all .2s; white-space:nowrap; }
.dtab.active { background:var(--amber); color:var(--black); border-color:var(--amber); }

.drug-warn { background:var(--red-l); border:2px solid var(--red); border-radius:var(--r12); padding:16px; text-align:center; display:none; margin-bottom:13px; }
.drug-warn.on { display:block; animation:pop .4s var(--ease-back); }
.drug-urdu { font-family:var(--fu); direction:rtl; font-size:14px; color:var(--red); line-height:2.2; margin-top:6px; }
.comm-preview { background:var(--amber-xl); border:1px solid var(--amber); border-radius:var(--r8); padding:11px 13px; margin-bottom:13px; font-size:12.5px; line-height:1.55; }
.comm-preview strong { color:var(--amber-dd); }

.spi { display:flex; gap:11px; align-items:center; background:#fff; border-radius:var(--r8); padding:11px; margin-bottom:8px; border:1px solid var(--border); transition:border-color .15s; }
@media (hover: hover) { .spi:hover { border-color:var(--amber); } }
.spi-img { width:52px; height:52px; border-radius:var(--r8); background:var(--off); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; overflow:hidden; }
.spi-img img { width:100%; height:100%; object-fit:cover; }
.spi-info { flex:1; min-width:0; }
.spi-nm { font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spi-cat { font-size:10.5px; color:var(--muted); margin-bottom:2px; }
.spi-pr { font-family:var(--fd); font-size:14px; font-weight:800; color:var(--amber-d); }
.spi-acts { display:flex; gap:5px; flex-shrink:0; }

.ocard { background:#fff; border-radius:var(--r12); padding:13px; margin-bottom:9px; border:1px solid var(--border); box-shadow:var(--s1); }
.ocard-hdr { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:9px; gap:9px; }
.oid-tag { font-family:var(--fd); font-size:11px; color:var(--muted); font-weight:700; letter-spacing:.3px; }
.odate { font-size:10.5px; color:var(--light); margin-top:1px; }
.oitems { font-size:11.5px; color:var(--muted); margin-bottom:7px; line-height:1.5; }
.otot { font-family:var(--fd); font-size:16px; font-weight:800; color:var(--amber-d); }
.oacts { display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }

.sla-row { display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); padding:4px 0; border-top:1px dashed var(--border); margin-top:6px; }
.sla-row b { color:var(--text); font-weight:700; }
.sla-warn b { color:var(--red); }
.pstat-row { display:flex; align-items:center; gap:10px; font-size:11px; color:var(--muted); padding:4px 0; flex-wrap:wrap; }
.pstat-item { display:inline-flex; align-items:center; gap:3px; cursor:pointer; background:none; border:none; padding:0; font-size:11px; color:var(--muted); }
.pstat-item.done { color:var(--green); font-weight:700; }
.cxl-banner { display:flex; align-items:center; gap:9px; background:var(--blue-l); border:1px solid var(--blue); border-radius:var(--r8); padding:11px 13px; margin-bottom:12px; font-size:12.5px; color:var(--blue); cursor:pointer; }
.cxl-banner span { flex:1; }

.sp-pending   { background:var(--amber-l);  color:var(--amber-dd); }
.sp-confirmed { background:var(--blue-l);   color:var(--blue); }
.sp-shipped   { background:var(--purple-l); color:var(--purple); }
.sp-delivered { background:var(--green-l);  color:var(--green); }
.sp-cancelled { background:var(--red-l);    color:var(--red); }

/* ── WALLET ── */
.wallet-hero { background:linear-gradient(135deg,var(--black),#180400); border-radius:var(--r16); padding:22px; margin-bottom:14px; position:relative; overflow:hidden; }
.wallet-hero::before { content:'💰'; position:absolute; right:13px; top:50%; transform:translateY(-50%); font-size:72px; opacity:.07; pointer-events:none; }
.w-bal-lbl { font-size:10.5px; color:rgba(255,255,255,.3); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.w-bal { font-family:var(--fd); font-size:34px; font-weight:900; color:#fff; letter-spacing:-1px; }
.w-bal em { color:var(--amber); font-style:normal; }
.w2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.wsc { background:rgba(255,255,255,.07); border-radius:var(--r8); padding:11px; }
.wsc-lbl { font-size:9.5px; color:rgba(255,255,255,.3); margin-bottom:3px; text-transform:uppercase; letter-spacing:.5px; }
.wsc-val { font-family:var(--fd); font-size:18px; font-weight:800; color:#fff; }
.wsc-val.green { color:#34D399; }
.wsc-val.amber { color:var(--amber); }
.pw-row { background:#fff; border-radius:var(--r8); padding:11px; margin-bottom:8px; border:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:9px; }
.pw-nm { font-size:13px; font-weight:700; }
.pw-detail { font-size:10.5px; color:var(--muted); margin-top:1px; }
.pw-amt { font-family:var(--fd); font-size:15px; font-weight:800; color:var(--amber-d); flex-shrink:0; }
.m-tabs { display:flex; gap:7px; margin-bottom:14px; }
.m-tab { flex:1; padding:9px; border-radius:var(--r8); border:1.5px solid var(--border); cursor:pointer; text-align:center; font-size:11.5px; font-weight:700; transition:all .2s; background:#fff; color:var(--muted); }
.m-tab.active { border-color:var(--amber); color:var(--amber-d); background:var(--amber-xl); }

/* ── ADMIN ── */
.admin-top { background:var(--black); padding:11px 15px; display:flex; justify-content:space-between; align-items:center; }
.admin-inner { padding:14px; }
.tog-wrap { position:relative; width:48px; height:26px; flex-shrink:0; }
.tog-wrap input { display:none; }
.tog-wrap label { position:absolute; inset:0; background:var(--border); border-radius:13px; cursor:pointer; transition:background .3s; }
.tog-wrap input:checked + label { background:var(--green); }
.tog-wrap label::after { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50%; transition:transform .3s; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.tog-wrap input:checked + label::after { transform:translateX(22px); }
.adm-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); }
.adm-row:last-child { border:none; }
.adm-row-title { font-size:13.5px; font-weight:700; }
.adm-row-sub { font-size:10.5px; color:var(--muted); margin-top:1px; }
.adm-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px; }
@media(min-width:480px){ .adm-stats{grid-template-columns:repeat(4,1fr);} }
.adm-seller-row { background:#fff; border-radius:var(--r8); padding:12px; margin-bottom:8px; border:1px solid var(--border); display:flex; justify-content:space-between; align-items:flex-start; gap:9px; }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 19px; border-radius:var(--r8); font-size:13.5px; font-weight:700;
  cursor:pointer; border:none; transition:all .2s; white-space:nowrap; text-align:center;
  /* FIX: min touch target 44px */
  min-height:44px;
}
.btn:disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }
/* FIX: active press state */
.btn:active:not(:disabled) { transform:scale(.97); }
.btn-amber { background:var(--amber); color:var(--black); }
.btn-amber:hover { background:var(--amber-d); box-shadow:var(--glow); }
.btn-dark  { background:var(--black); color:#fff; }
.btn-dark:hover { background:var(--black-3); }
.btn-outline { background:transparent; border:1.5px solid var(--border-d); color:var(--text); }
.btn-outline:hover { border-color:var(--amber); color:var(--amber); }
.btn-green { background:var(--green); color:#fff; }
.btn-green:hover { background:#047857; }
.btn-red { background:var(--red); color:#fff; }
.btn-red:hover { background:#b91c1c; }
.btn-ghost { background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:13.5px; }
.btn-ghost:hover { color:var(--amber); }
.btn-sm  { padding:7px 12px; font-size:11.5px; min-height:36px; }
.btn-lg  { padding:14px 24px; font-size:14.5px; font-weight:800; }
.btn-full { width:100%; }
/* Loading state */
.btn.loading { pointer-events:none; opacity:.8; }
.btn.loading::after { content:''; width:14px; height:14px; border:2px solid rgba(0,0,0,.2); border-top-color:currentColor; border-radius:50%; animation:spin .6s linear infinite; margin-left:4px; }

/* ── MODALS ── */
.mover {
  position:fixed; inset:0; background:rgba(0,0,0,.62); z-index:3000; display:none;
  align-items:flex-end; justify-content:center;
}
/* FIX: backdrop-filter only on non-touch devices (desktop) — expensive on mobile */
@media(hover:hover) and (min-width:768px) {
  @supports (backdrop-filter:blur(6px)) { .mover { backdrop-filter:blur(6px); } }
}
.mover.open { display:flex; }
.msheet { background:#fff; border-radius:var(--r24) var(--r24) 0 0; width:100%; max-width:540px; max-height:90vh; overflow-y:auto; animation:sheet-up .3s var(--ease-back); overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
@keyframes sheet-up { from{transform:translateY(100%)} to{transform:translateY(0)} }
.mhandle { width:34px; height:4px; background:var(--border); border-radius:2px; margin:12px auto 0; }
.mbody { padding:17px; }
.mttl { font-family:var(--fd); font-size:19px; font-weight:800; margin-bottom:16px; display:flex; align-items:center; gap:7px; letter-spacing:-.4px; }
.ai-res { background:var(--off); border-radius:var(--r8); padding:13px; border:1.5px solid var(--amber); font-size:12.5px; line-height:1.75; min-height:80px; margin-top:11px; white-space:pre-wrap; display:none; }
.ai-ld { display:none; align-items:center; gap:10px; font-size:12.5px; color:var(--muted); padding:9px 0; }
.ai-ld.on { display:flex; }

/* ── UTILITY ── */
.divider { height:1px; background:var(--border); margin:13px 0; }
.pad { padding:14px; }
.chip { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:var(--r-full); font-size:10.5px; font-weight:700; }
.chip-a { background:var(--amber-xl); color:var(--amber-dd); }
.chip-g { background:var(--green-l);  color:var(--green); }
.chip-b { background:var(--blue-l);   color:var(--blue); }
.chip-r { background:var(--red-l);    color:var(--red); }

/* ── RESPONSIVE DESKTOP ── */
@media(min-width:768px){
  .auth-wrap { padding-top:30px; }
  .msheet { border-radius:var(--r24); margin-bottom:20px; }
  .mover { align-items:center; }
  .dash-inner, .admin-inner { max-width:720px; margin:0 auto; }
  .co-inner { max-width:620px; margin:0 auto; }
}

/* ── PERFORMANCE: content-visibility for off-screen sections ── */
/* content-visibility handled via display:none on .page — animation safe */
.pcard {
  contain: layout style paint;
}
/* GPU compositing via contain:layout style paint — no will-change needed */
/* pcard hover defined above in media(hover:hover) block */
/* Sentinel for infinite scroll */
.scroll-sentinel { height: 1px; }


/* ══════════════════════════════════════════════════════════
   v25: FLASH SALE / COUNTDOWN
══════════════════════════════════════════════════════════ */
.flash-sale-banner {
  background: linear-gradient(135deg,#DC2626,#FF6900);
  border-radius: var(--r12); margin: 12px; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px; overflow: hidden; position: relative;
}
.flash-sale-banner::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0,rgba(255,255,255,.04) 10px,transparent 10px,transparent 20px); pointer-events:none; }
.flash-fire { font-size:28px; flex-shrink:0; }
@media (prefers-reduced-motion: no-preference) { .flash-fire { animation:fire-pulse 1s ease-in-out infinite; } }
@keyframes fire-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.flash-info { flex:1; }
.flash-title { font-family:var(--fd); font-size:17px; font-weight:900; color:#fff; letter-spacing:-.3px; }
.flash-sub { font-size:11px; color:rgba(255,255,255,.8); margin-top:2px; }
.flash-timer { display:flex; gap:5px; align-items:center; flex-shrink:0; }
.flash-unit { background:rgba(0,0,0,.35); border-radius:var(--r4); padding:5px 7px; text-align:center; min-width:38px; }
.flash-num { font-family:var(--fd); font-size:18px; font-weight:900; color:#fff; line-height:1; display:block; }
.flash-lbl { font-size:8px; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.5px; }
.flash-sep { font-family:var(--fd); font-size:18px; font-weight:900; color:rgba(255,255,255,.6); }

/* ══════════════════════════════════════════════════════════
   v25: SELLER SHOP PROFILE PAGE
══════════════════════════════════════════════════════════ */
#page-shop-profile { padding: 0 0 20px; }
.shop-hero { background: linear-gradient(135deg,var(--black),#180400); padding: 22px 15px 18px; position: relative; overflow: hidden; }
.shop-hero::before { content:''; position:absolute; top:-40px; right:-40px; width:180px; height:180px; background:radial-gradient(circle,rgba(245,158,11,.12) 0%,transparent 70%); pointer-events:none; }
.shop-av-big { width:64px; height:64px; border-radius:50%; background:var(--amber); display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:28px; font-weight:900; color:var(--black); flex-shrink:0; border:3px solid rgba(255,255,255,.15); }
.shop-name-big { font-family:var(--fd); font-size:22px; font-weight:900; color:#fff; letter-spacing:-.5px; margin-top:10px; }
.shop-meta { font-size:11.5px; color:rgba(255,255,255,.5); margin-top:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.shop-stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:12px 14px; }
.shop-stat { background:#fff; border-radius:var(--r8); padding:10px 8px; text-align:center; border:1px solid var(--border); }
.shop-stat-n { font-family:var(--fd); font-size:20px; font-weight:800; color:var(--amber-d); }
.shop-stat-l { font-size:10px; color:var(--muted); margin-top:2px; }

/* ══════════════════════════════════════════════════════════
   v25: ONLINE PAYMENT SECTION
══════════════════════════════════════════════════════════ */
.payment-methods { display:flex; flex-direction:column; gap:8px; margin:10px 0; }
.payment-opt { display:flex; align-items:center; gap:11px; padding:12px 13px; border:2px solid var(--border); border-radius:var(--r8); cursor:pointer; transition:border-color .2s,background .2s; background:#fff; }
.payment-opt.selected { border-color:var(--amber); background:var(--amber-xl); }
.payment-opt-icon { font-size:22px; flex-shrink:0; }
.payment-opt-info { flex:1; }
.payment-opt-name { font-size:13.5px; font-weight:700; }
.payment-opt-sub { font-size:11px; color:var(--muted); }
.payment-opt-radio { width:18px; height:18px; accent-color:var(--amber); flex-shrink:0; }
.online-pay-form { background:var(--off); border-radius:var(--r8); padding:12px; margin-top:8px; border:1px solid var(--border); display:none; }
.online-pay-form.show { display:block; }

/* ══════════════════════════════════════════════════════════
   v25: BUYER-SELLER CHAT / CONTACT
══════════════════════════════════════════════════════════ */
.chat-modal-body { max-height:60vh; overflow-y:auto; }
/* ── CHAT CSS REMOVED v40 — feature disabled to minimize Firebase reads. Restore from v39. ── */
.chat-back-btn { background:rgba(255,255,255,.12); border:none; color:#fff; width:28px; height:28px; border-radius:50%; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chat-date-sep { text-align:center; font-size:10.5px; color:var(--muted); padding:4px 0; }
.chat-empty { text-align:center; padding:30px 20px; color:var(--muted); }
.chat-empty-icon { font-size:36px; margin-bottom:8px; }

/* ── BRAND SYSTEM CSS v41 ── */
.brand-badge {
  display:inline-flex; align-items:center; gap:3px;
  background:linear-gradient(135deg,#7C3AED,#5B21B6);
  color:#fff; border-radius:var(--r-full);
  padding:2px 8px; font-size:9.5px; font-weight:800; letter-spacing:.3px;
}
.pcard-brand { border-color:rgba(124,58,237,.3) !important; }
.brand-hero {
  background:linear-gradient(135deg,#7C3AED,#4C1D95);
  border-radius:var(--r16); padding:20px; text-align:center;
  position:relative; overflow:hidden; margin-bottom:14px;
}
.brand-hero::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 10px,transparent 10px,transparent 20px);
  pointer-events:none;
}
#home-brands-section { overflow:hidden; }
#home-brands-section::-webkit-scrollbar { display:none; }

/* ── AD SYSTEM CSS ── */
.ad-pkg-card { transition:border-color .2s, box-shadow .2s, transform .15s; }
.ad-pkg-card:hover { border-color: var(--amber) !important; box-shadow: 0 2px 12px rgba(245,158,11,.18); }
.ad-pkg-card.selected { border-color: var(--amber) !important; box-shadow: 0 0 0 3px rgba(245,158,11,.25) !important; transform: translateY(-1px); }
.ad-pkg-card.selected[data-pkg="premium"] { box-shadow: 0 0 0 3px rgba(245,158,11,.4) !important; }
.badge-sponsored { position:absolute; top:6px; left:6px; background:linear-gradient(135deg,#0f2027,#203a43); color:var(--amber); font-size:8px; font-weight:800; padding:2px 7px; border-radius:3px; z-index:2; border:1px solid rgba(245,158,11,.3); letter-spacing:.3px; }
.sponsored-section { margin:12px; padding:14px 16px; background:linear-gradient(135deg,rgba(245,158,11,.06),rgba(245,158,11,.02)); border:1px solid rgba(245,158,11,.2); border-radius:var(--r12); }
.sponsored-label { font-size:10.5px; font-weight:800; color:var(--amber-d); letter-spacing:.5px; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.sponsored-label::after { content:''; flex:1; height:1px; background:rgba(245,158,11,.2); }
.ad-status-badge { display:inline-block; padding:3px 9px; border-radius:3px; font-size:9.5px; font-weight:800; }
.ad-status-pending  { background:rgba(245,158,11,.15); color:var(--amber-dd); border:1px solid rgba(245,158,11,.3); }
.ad-status-active   { background:rgba(5,150,105,.12); color:var(--green); border:1px solid rgba(5,150,105,.25); }
.ad-status-rejected { background:rgba(220,38,38,.1); color:var(--red); border:1px solid rgba(220,38,38,.2); }
.ad-status-expired  { background:rgba(0,0,0,.06); color:var(--muted); border:1px solid var(--border); }
.m-tab { padding:8px 12px; border-radius:var(--r8); font-size:12px; font-weight:700; cursor:pointer; border:2px solid var(--border); background:#fff; color:var(--text); transition:all .15s; }
.m-tab.active { background:var(--black); color:var(--amber); border-color:var(--black); }

/* ── Brand Product Card — Premium styling ── */
.pcard-brand { border:2px solid #7C3AED !important; box-shadow:0 2px 12px rgba(124,58,237,.15) !important; }
.pcard-brand .pcard-body { background:linear-gradient(180deg,#fff 0%,#FAF5FF 100%); }
.brand-shop-badge { color:#7C3AED; font-size:10px; }

/* ── Order Quick Access Icons (Daraz style) ── */
.oqa-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;position:relative;flex:1;padding:2px;}
.oqa-item:active{opacity:.7;}
.oqa-icon{font-size:26px;line-height:1;}
.oqa-label{font-size:10px;color:var(--muted);text-align:center;line-height:1.3;font-weight:600;}
.oqa-badge{position:absolute;top:-2px;right:6px;background:var(--red);color:#fff;border-radius:99px;font-size:9px;font-weight:800;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 3px;}



/* ---- patch styles ---- */


    #loader { display:none !important; }
    .noscript-msg { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:#0A0908; color:#fff; font-family:system-ui,sans-serif; text-align:center; padding:20px; z-index:999999; }
    .noscript-msg h2 { font-size:22px; margin-bottom:10px; }
    .noscript-msg a { color:#F59E0B; }