:root {
  --bg: #070a12;
  --panel: #101521;
  --panel-soft: #151c2b;
  --text: #f8fafc;
  --muted: #9aa6b2;
  --line: rgba(255, 255, 255, 0.1);
  --brand: #b7ff3c;
  --brand-2: #00d4ff;
  --danger: #ff4d7d;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(circle at 20% 0%, rgba(183,255,60,.18), transparent 28%), radial-gradient(circle at 80% 10%, rgba(0,212,255,.14), transparent 26%), var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html[lang="ar"] body, html[lang="ar"] button, html[lang="ar"] input, html[lang="ar"] textarea, html[lang="ar"] select {
  font-family: "Tajawal", Inter, ui-sans-serif, system-ui, sans-serif;
}
html[lang="fa"] body, html[lang="fa"] button, html[lang="fa"] input, html[lang="fa"] textarea, html[lang="fa"] select {
  font-family: "Estedad", "Vazirmatn", Inter, ui-sans-serif, system-ui, sans-serif;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: 0; background: transparent; color: inherit; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.07); color: var(--text); padding: 14px 16px; margin-top: 8px; outline: 0; }
textarea { min-height: 120px; resize: vertical; }
label { color: var(--muted); display: block; margin-top: 16px; }
main { min-height: 100vh; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 5vw;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(7, 10, 18, .72);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 850; letter-spacing: -.02em; }
.brandMark {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 12px; color: #07100a; background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
nav { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: 13px; }
.topbar > div:last-child { flex: none; }
.ghostButton, .primaryButton, .searchBox button, .productCard button, .categoryStrip button, .categoryStrip a, .buyPill, .resultsBar button, .sellerOfferRow button, .sellerOfferRow a, .dangerButton, .paymentOptions button, .panelHeader button {
  border: 0; border-radius: 14px; font-weight: 750;
}
.primaryButton, .ghostButton, .dangerButton, .buyPill, .searchBox button, .resultsBar button, .paymentOptions button, .panelHeader button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; line-height: 1; white-space: nowrap; letter-spacing: -.01em;
}
.ghostButton { background: rgba(255,255,255,.08); color: var(--text); padding: 12px 18px; border: 1px solid var(--line); }

.hero {
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 40px;
  padding: 64px 5vw 44px;
  align-items: start;
}
.eyebrow { color: var(--brand); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 850; }
h1 { font-size: clamp(40px, 4.6vw, 62px); line-height: .96; letter-spacing: -.05em; margin: 14px 0 16px; max-width: 620px; }
.heroText { color: var(--muted); max-width: 540px; font-size: 16px; line-height: 1.65; }
.searchBox {
  margin-top: 26px; display: flex; max-width: 600px; padding: 8px; border-radius: 22px;
  background: rgba(255,255,255,.09); border: 1px solid var(--line);
}
.searchBox input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); padding: 0 18px; outline: 0; margin: 0; }
.searchBox button, .primaryButton { background: var(--brand); color: #07100a; padding: 16px 24px; }

/* hero search live suggestions */
.heroSearchWrap { position: relative; max-width: 600px; }
.searchIco { display: flex; align-items: center; padding-inline-start: 14px; color: var(--muted); flex: none; }
.searchBox .searchIco + input { padding-inline-start: 10px; }
.searchSuggest { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 30; background: rgba(10,14,22,.97); border: 1px solid var(--line); border-radius: var(--r-2xl, 20px); padding: 8px; box-shadow: 0 24px 70px rgba(0,0,0,.5); backdrop-filter: blur(18px); animation: nbxToast .18s ease; overflow: hidden; }
.suggestRow { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: transparent; border: 0; cursor: pointer; text-align: start; transition: background .15s ease; }
.suggestRow.on, .suggestRow:hover { background: rgba(255,255,255,.06); }
.suggestRow .brandChip { width: 38px; height: 38px; border-radius: 11px; flex: none; }
.suggestText { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.suggestText strong { color: var(--text); font-size: 14px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggestText small { color: var(--brand-2); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.suggestPrice { color: var(--brand); font-weight: 900; font-size: 14px; flex: none; white-space: nowrap; }
.suggestAll { width: 100%; display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 4px; padding: 11px; border-radius: 13px; border: 0; cursor: pointer; background: rgba(183,255,60,.10); color: var(--brand); font-weight: 750; font-size: 13px; transition: background .15s ease; }
.suggestAll:hover { background: rgba(183,255,60,.18); }
.suggestEmpty { display: flex; align-items: center; gap: 9px; justify-content: center; padding: 22px; color: var(--muted); font-weight: 600; font-size: 14px; }
html[data-theme="light"] .searchSuggest { background: rgba(255,255,255,.98); }
html[data-theme="light"] .suggestRow.on, html[data-theme="light"] .suggestRow:hover { background: rgba(13,21,38,.05); }
.trustRow { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; color: var(--muted); font-size: 13px; }
.heroAccent { background: linear-gradient(120deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brandStrip { margin-top: 26px; }
.brandStripLabel { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; color: var(--brand); margin-bottom: 10px; }
.brandStripLabel::before { content: "\25CF"; color: var(--brand); font-size: 9px; margin-right: 7px; vertical-align: middle; animation: nbxPulse 2.2s ease-in-out infinite; }
@keyframes nbxPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.brandStripRow { display: flex; flex-wrap: wrap; gap: 8px; }
.brandChip { width: 46px; height: 46px; border-radius: 12px; background: rgba(7,10,18,.55); border: 1px solid var(--line); display: grid; place-items: center; flex: none; transition: transform .2s ease, border-color .2s ease; }
.brandChip:hover { transform: translateY(-3px); border-color: var(--brand-border); }
.brandChipLogo, .brandChip .artLogo { width: 25px; height: 25px; object-fit: contain; display: block; }
.brandChipWord { font-size: 8px; font-weight: 900; letter-spacing: -.02em; text-align: center; line-height: 1; padding: 0 3px; color: inherit; }
.brandChipMono { font-size: 22px; font-weight: 900; background: linear-gradient(135deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.heroPanel {
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border: 1px solid var(--line); border-radius: 34px; padding: 30px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}
/* Deal of the day panel */
.dealPanel {
  position: relative; overflow: hidden;
  background: linear-gradient(170deg, rgba(183,255,60,.10), rgba(0,212,255,.06) 55%, rgba(255,255,255,.04));
  border: 1px solid var(--brand-border); border-radius: 28px; padding: 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,.4);
}
.dealPanel::before {
  content: ""; position: absolute; top: -40%; right: -20%; width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(183,255,60,.22), transparent 70%); pointer-events: none;
}
.dealTop { display: flex; align-items: center; justify-content: space-between; position: relative; }
.dealKicker { font-size: 12px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.dealSave { background: var(--danger); color: #fff; font-weight: 900; font-size: 14px; padding: 6px 12px; border-radius: 999px; }
.dealProduct { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.dealProduct .brandChip { width: 56px; height: 56px; border-radius: 16px; }
.dealProduct .brandChip .artLogo, .dealProduct .brandChipLogo { width: 30px; height: 30px; }
.dealCat { color: var(--brand-2); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; margin-bottom: 4px; }
.dealName { font-size: 22px; letter-spacing: -.03em; line-height: 1.1; }
.dealPriceRow { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 18px; flex-wrap: wrap; }
.dealPrice { font-size: 44px; font-weight: 900; color: var(--brand); letter-spacing: -.03em; white-space: nowrap; }
.dealOld { color: var(--muted); font-size: 18px; white-space: nowrap; }
.dealSavePill { background: var(--brand-tint); color: var(--brand); border: 1px solid var(--brand-border); font-weight: 800; font-size: 12px; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.dealTimer { background: rgba(7,10,18,.5); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.dealTimerLabel { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--muted); margin-bottom: 8px; }
.dealClock { display: flex; align-items: center; gap: 10px; }
.dealUnit { display: flex; flex-direction: column; align-items: center; min-width: 46px; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 12px; padding: 8px 0; }
.dealUnit strong { font-size: 26px; font-weight: 900; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.dealUnit small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.dealSep { font-size: 24px; font-weight: 900; color: var(--muted); margin-top: -8px; }
.dealStock { margin: 18px 0; }
.dealStockHead { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 8px; white-space: nowrap; }
.dealStockHead span:first-child { color: var(--danger); }
.dealStockBar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.dealStockBar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--danger), #ff8aa6); }
.dealMeta { text-align: center; color: var(--muted); font-size: 12px; font-weight: 600; margin-top: 12px; }
.dealHeader { display: flex; justify-content: space-between; color: var(--muted); }
.dealHeader strong { color: var(--danger); }
.heroPanel h2 { font-size: 34px; letter-spacing: -.04em; }
.heroPanel p { color: var(--muted); line-height: 1.6; }
.priceLine { display: flex; align-items: baseline; gap: 14px; margin: 26px 0; }
.priceLine span { font-size: 42px; font-weight: 900; color: var(--brand); }
del { color: var(--muted); }
.linkButton { display: inline-flex; justify-content: center; align-items: center; }

.categoryStrip { display: flex; gap: 12px; overflow-x: auto; padding: 10px 5vw 44px; }
.categoryStrip button, .categoryStrip a { white-space: nowrap; padding: 14px 18px; background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.sectionHeader { display: flex; justify-content: space-between; align-items: end; padding: 0 5vw 18px; }
.sectionHeader h2 { font-size: 34px; margin: 0; letter-spacing: -.04em; }
.sectionHeader a { color: var(--brand); font-weight: 800; }
.cardsGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0 5vw 54px; }
.productCard { background: var(--panel); border: 1px solid var(--line); border-radius: 28px; padding: 18px; transition: transform .2s ease, border-color .2s ease; }
.productCard:hover { transform: translateY(-4px); border-color: rgba(183,255,60,.35); }
.productLink { display: block; }
.cardArt, .productMedia { position: relative; background: linear-gradient(135deg, rgba(183,255,60,.22), rgba(0,212,255,.14)), #0b0f18; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cardArt { height: 150px; border-radius: 22px; background: radial-gradient(circle at 50% 44%, rgba(255,255,255,.10), transparent 62%), radial-gradient(120% 90% at 50% 130%, rgba(0,212,255,.16), transparent 60%), linear-gradient(135deg, rgba(183,255,60,.24), rgba(0,212,255,.12)), #0b0f18; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.artBadge { position: absolute; top: 14px; right: 14px; background: rgba(7,10,18,.78); padding: 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--text); }
.artChip { width: 96px; height: 96px; border-radius: 22px; background: rgba(7,10,18,.55); border: 1px solid var(--line); display: grid; place-items: center; }
.artLogo { width: 56px; height: 56px; object-fit: contain; display: block; }
.artMono { font-size: 40px; font-weight: 900; background: linear-gradient(135deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.artChipLg { width: 168px; height: 168px; border-radius: 32px; position: relative; z-index: 1; }
.productMedia::before { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(183,255,60,.18), rgba(0,212,255,.10) 55%, transparent 72%); filter: blur(8px); z-index: 0; }
.productMedia::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 38px; border: 1px solid rgba(255,255,255,.08); z-index: 0; }
.artChipLg .artLogo { width: 104px; height: 104px; }
.artChipLg .artMono { font-size: 72px; }
.artWord { font-size: 22px; font-weight: 900; letter-spacing: -.04em; line-height: 1; text-align: center; padding: 0 6px; color: inherit; }
.artWordLg { font-size: 40px; }
.categoryLabel { color: var(--brand-2); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.productCard h3 { min-height: 56px; font-size: 22px; letter-spacing: -.03em; }
.productDescription { color: var(--muted); line-height: 1.55; min-height: 76px; }
.sellerRow, .cardFooter, .tableHead, .offerRow { display: grid; align-items: center; }
.sellerRow { grid-template-columns: 1fr auto; color: var(--muted); font-size: 14px; }
.delivery { margin: 14px 0; color: var(--brand); font-size: 14px; }
.cardFooter { grid-template-columns: 1fr auto; border-top: 1px solid var(--line); padding-top: 16px; }
.price { display: block; font-weight: 900; font-size: 24px; }
.productCard button, .buyPill { background: var(--text); color: var(--bg); padding: 12px 18px; display: inline-flex; align-items: center; }

.marketLayout { display: grid; grid-template-columns: 260px 1fr; gap: 22px; padding: 0 5vw 80px; }
aside, .offerTable { background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 26px; padding: 22px; }
aside label { display: block; margin: 16px 0; color: var(--muted); }
.tableHead, .offerRow { grid-template-columns: 1.4fr .6fr .5fr .6fr; gap: 12px; }
.tableHead { color: var(--muted); font-size: 13px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.offerRow { padding: 18px 0; border-bottom: 1px solid var(--line); }
.offerRow:last-child { border-bottom: 0; }
.offerRow strong { color: var(--brand); }

.listingHero { padding: 64px 5vw 28px; }
.listingHero h1 { margin-bottom: 16px; }
.listingHero p:not(.eyebrow), .commerceHero p:not(.eyebrow) { color: var(--muted); max-width: 760px; line-height: 1.7; font-size: 18px; }
.compactSearch { max-width: 640px; margin-top: 24px; }
.listingLayout { align-items: start; }
.categoryResults { min-width: 0; }
.resultsBar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; color: var(--muted); }
.resultsBar button { background: rgba(255,255,255,.08); color: var(--text); padding: 12px 16px; }
.categoryGrid { grid-template-columns: repeat(2, 1fr); padding: 0; }

.productHero {
  display: grid;
  align-items: start;
  grid-template-columns: .85fr 1.2fr .7fr;
  gap: 26px;
  align-items: start;
  padding: 54px 5vw 40px;
}
.productMedia {
  min-height: 340px;
  aspect-ratio: 1 / 1;
  max-height: 440px;
  border: 1px solid var(--line);
  border-radius: 34px;
}
.productMedia .artBadge { top: 20px; right: 20px; padding: 10px 14px; font-weight: 850; }
.breadcrumb { color: var(--brand); font-weight: 800; }
.productInfo h1 { font-size: clamp(40px, 5vw, 68px); }
.productInfo p { color: var(--muted); font-size: 18px; line-height: 1.7; }
.productDetails { display: grid; gap: 12px; margin-top: 26px; }
.productDetails div { background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; color: var(--muted); }
.checkoutPanel { position: sticky; top: 96px; }
.smallPrice span { font-size: 34px; }
.checkoutMeta { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 20px 0; }
.checkoutMeta span { color: var(--muted); font-size: 13px; }
.checkoutMeta strong { margin-bottom: 8px; }
.fullButton { width: 100%; justify-content: center; margin-top: 10px; display: inline-flex; text-align: center; align-items: center; }
.offersSection { padding: 0 5vw 80px; }
.innerHeader { padding: 0 0 18px; }
.innerHeader span { color: var(--muted); }
.sellerOfferTable { background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 28px; overflow: hidden; }
.sellerOfferHead, .sellerOfferRow {
  display: grid;
  grid-template-columns: 1.4fr .8fr .7fr .45fr .55fr .45fr;
  gap: 14px;
  align-items: center;
  padding: 18px 22px;
}
.sellerOfferHead { color: var(--muted); font-size: 13px; border-bottom: 1px solid var(--line); }
.sellerOfferRow { border-bottom: 1px solid var(--line); }
.sellerOfferRow:last-child { border-bottom: 0; }
.sellerOfferRow small { display: block; color: var(--muted); margin-top: 4px; }
.offerPrice { color: var(--brand); }
.sellerOfferRow button, .sellerOfferRow a { background: var(--brand); color: #07100a; padding: 10px 16px; text-align: center; }

.commerceHero { padding: 64px 5vw 30px; }
.checkoutGrid, .cartLayout, .dashboardLayout, .orderStatusLayout, .supportLayout { display: grid; grid-template-columns: 1.3fr .7fr; gap: 24px; padding: 0 5vw 80px; align-items: start; }
.checkoutForm, .cartList { display: grid; gap: 18px; }
.formCard, .orderSummary, .dashboardPanel, .policyCard, .metricCard, .cartItem { background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 26px; padding: 22px; }
.formCard h2, .orderSummary h2, .dashboardPanel h2, .policyCard h2 { margin-top: 0; }
.paymentOptions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.paymentOptions button, .panelHeader button { background: rgba(255,255,255,.08); color: var(--text); padding: 12px; }
.summaryProduct, .cartItem { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; }
.summaryProduct { grid-template-columns: 64px 1fr; padding: 18px 0; border-bottom: 1px solid var(--line); }
.summaryProduct span, .cartItem span, .cartItem p, .finePrint, .dashboardPanel p { color: var(--muted); line-height: 1.6; }
.summaryArt { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #07100a; font-weight: 900; }
.summaryRows { display: grid; grid-template-columns: 1fr auto; gap: 14px; margin: 18px 0; color: var(--muted); }
.summaryRows strong { color: var(--text); }
.totalPrice { color: var(--brand) !important; font-size: 22px; }
.dashboardGrid, .policyGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 0 5vw 28px; }
.policyGrid { grid-template-columns: repeat(2, 1fr); padding-bottom: 80px; }
.metricCard span { color: var(--muted); }
.metricCard strong { display: block; font-size: 34px; margin-top: 10px; color: var(--brand); }
.dashboardPanel label { color: var(--muted); }
.panelHeader { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.adminTable { margin-top: 16px; }
.adminHead, .adminRow { display: grid; grid-template-columns: .7fr 1.5fr .6fr .8fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: center; }
.adminHead { color: var(--muted); font-size: 13px; }
.adminRow span { color: var(--muted); }
.widePanel { margin: 0 5vw 80px; }
.dangerButton { background: rgba(255,77,125,.14); color: #ffb5c8; padding: 14px 18px; border: 1px solid rgba(255,77,125,.35); }
.statusPill { background: rgba(183,255,60,.12); color: var(--brand); padding: 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.timeline { display: grid; gap: 16px; margin-top: 20px; }
.timelineItem { display: grid; grid-template-columns: 42px 1fr; gap: 14px; }
.timelineItem > span { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--brand); color: #07100a; font-weight: 900; }
.timelineItem p { color: var(--muted); margin-top: 6px; }
.supportLink { display: block; color: var(--brand); font-weight: 800; margin-top: 18px; }

/* ---- Functional filters ---- */
.filterPanel { display: flex; flex-direction: column; gap: 22px; align-self: start; }
.filterHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.filterCount { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 8px; border-radius: 999px; background: var(--brand); color: #07100a; font-size: 12px; font-weight: 800; vertical-align: middle; }
[dir="rtl"] .filterCount { margin-left: 0; margin-right: 8px; }
.filterClear { background: transparent; color: var(--brand); font-weight: 800; font-size: 13px; padding: 0; }
html[data-theme="light"] .filterClear { color: var(--brand-strong); }
.filterGroup { display: flex; flex-direction: column; gap: 12px; }
.filterLabel { font-size: 13px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.filterLabel strong { color: var(--brand); font-size: 15px; letter-spacing: -.02em; text-transform: none; white-space: nowrap; }
html[data-theme="light"] .filterLabel strong { color: var(--brand-strong); }
.priceRange { width: 100%; margin: 0; padding: 0; height: 6px; cursor: pointer; }
.rangeBounds { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.filterChips { display: flex; flex-direction: column; gap: 8px; }
.filterChip { text-align: left; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--muted); font-weight: 700; font-size: 14px; transition: border-color .2s ease, color .2s ease, background .2s ease; }
[dir="rtl"] .filterChip { text-align: right; }
.filterChip:hover { color: var(--text); border-color: var(--brand-border); }
.filterChip.on { background: var(--brand-tint); border-color: var(--brand-border); color: var(--brand); }
html[data-theme="light"] .filterChip { background: rgba(13,21,38,.03); }
html[data-theme="light"] .filterChip.on { color: var(--brand-strong); }
.filterTrust { font-size: 12px; color: var(--muted); line-height: 1.6; border-top: 1px solid var(--line); padding-top: 16px; }
.sortSelect { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; font-weight: 700; margin: 0; white-space: nowrap; }
.sortSelect select { width: auto; margin: 0; padding: 10px 14px; min-width: 170px; }

/* ---- Checkout ---- */
.checkoutGrid { gap: 30px !important; }
.checkoutForm { gap: 20px !important; }
.checkoutForm .formCard { padding: 26px 26px 28px; }
.stepHead { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.stepHead h2 { margin: 0; font-size: 20px; }
.stepNum { width: 30px; height: 30px; flex: none; border-radius: 999px; display: grid; place-items: center; background: var(--brand); color: #07100a; font-weight: 900; font-size: 15px; }
.checkoutForm .formCard label { margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--muted); }
.checkoutForm .formCard label:first-of-type { margin-top: 0; }
.fieldError { display: block; color: var(--danger); font-size: 12px; font-weight: 700; margin-top: 6px; }
.inputError { border-color: var(--danger) !important; }
.payMethods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 0; }
.payMethod { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px; min-height: 64px; justify-content: center; transition: border-color .2s ease, background .2s ease; }
[dir="rtl"] .payMethod { text-align: right; align-items: flex-end; }
html[data-theme="light"] .payMethod { background: var(--panel-soft); border-color: rgba(13,21,38,.16); }
html[data-theme="light"] .payMethod.active { background: var(--brand-tint); border-color: var(--brand-border); }
.payMethod strong { font-size: 15px; }
.payMethod span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.payMethod.active { border-color: var(--brand-border); background: var(--brand-tint); }
.payMethod.active strong { color: var(--brand); }
html[data-theme="light"] .payMethod.active strong { color: var(--brand-strong); }
.payDetail { margin-top: 18px; }
.cryptoBox, .payNote { background: rgba(7,10,18,.4); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
html[data-theme="light"] .cryptoBox, html[data-theme="light"] .payNote { background: var(--panel-soft); }
.payNote { color: var(--muted); font-size: 14px; line-height: 1.6; }
.cryptoRow { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cryptoRow:last-of-type { border-bottom: 0; }
.cryptoRow span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.cryptoRow strong { text-align: right; white-space: nowrap; }
.cryptoAmt { color: var(--brand); font-size: 18px; font-weight: 900; }
html[data-theme="light"] .cryptoAmt { color: var(--brand-strong); }
.cryptoBox label { display: block; margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--muted); }
.addrRow { display: flex; gap: 8px; align-items: stretch; margin-top: 10px; }
.addrRow code { flex: 1; min-width: 0; overflow-wrap: anywhere; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; font-size: 12px; color: var(--brand-2); line-height: 1.5; }
html[data-theme="light"] .addrRow code { background: #fff; }
.copyBtn { flex: none; background: var(--brand); color: #07100a; border-radius: 12px; padding: 0 16px; font-weight: 800; font-size: 13px; white-space: nowrap; }
.cardRow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.promoRow { display: flex; gap: 8px; margin: 0 0 4px; }
.promoRow input { margin: 0; }
.promoRow .ghostButton { flex: none; padding: 0 18px; }
.promoOk { display: block; color: var(--brand); font-size: 13px; font-weight: 700; margin: 8px 0 0; }
html[data-theme="light"] .promoOk { color: var(--brand-strong); }
.promoBad { display: block; color: var(--danger); font-size: 13px; font-weight: 700; margin: 8px 0 0; }
.discountVal { color: var(--danger) !important; }
.checkoutSummary { display: flex; flex-direction: column; }
.checkoutSummary h2 { margin: 0 0 18px; }
.checkoutSummary .summaryProduct { grid-template-columns: 56px 1fr; gap: 14px; align-items: center; padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.checkoutSummary .summaryArt { overflow: hidden; width: 56px; height: 56px; }
.checkoutSummary .summaryArt .cardArt { width: 56px; height: 56px; border-radius: 16px; }
.checkoutSummary .summaryArt .artChip { width: 38px; height: 38px; border-radius: 11px; }
.checkoutSummary .summaryArt .artChip .artLogo, .checkoutSummary .summaryArt .artChip .brandChipLogo { width: 22px; height: 22px; }
.checkoutSummary .summaryArt .artBadge { display: none; }
.summaryProduct strong { display: block; font-size: 15px; letter-spacing: -.02em; }
.summaryProduct span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; }
.checkoutSummary .summaryProduct .sumSeller { color: var(--text); font-weight: 600; margin-top: 5px; }
.checkoutSummary .summaryProduct .sumPlan { color: var(--muted); margin-top: 2px; }
.checkoutSummary .promoRow { margin-top: 0; }
.checkoutSummary .summaryRows { padding-top: 18px; margin: 18px 0 0; border-top: 1px solid var(--line); row-gap: 13px; }
.checkoutSummary .summaryRows .totalPrice { font-size: 24px; }
.checkoutSummary .fullButton { margin-top: 18px; min-height: 52px; font-size: 16px; }
.checkoutTrust { margin: 18px 0 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.checkoutTrust .trustRow { margin-top: 0; flex-direction: column; gap: 10px; font-size: 13px; }
.checkoutTrust .trustRow span { white-space: nowrap; }
.checkoutSummary .finePrint { font-size: 12px; line-height: 1.6; }
.isLoading { opacity: .75; cursor: progress; }

@media (max-width: 1100px) {
  .productHero { grid-template-columns: 1fr; }
  .productMedia { aspect-ratio: auto; min-height: 300px; max-height: 360px; width: 100%; }
  .checkoutPanel { position: static; }
  .dashboardGrid, .policyGrid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- UI-kit interactive additions (states the source had no JS for) ---------- */
nav a { cursor: pointer; transition: color .15s ease; }
nav a:hover { color: var(--text); }
.brand { cursor: pointer; }
.ghostButton, .primaryButton, .buyPill, .dangerButton { transition: filter .15s ease, transform .12s ease, box-shadow .15s ease; }
.primaryButton, .searchBox button { box-shadow: 0 6px 20px rgba(183,255,60,.18); }
.primaryButton:active, .ghostButton:active, .buyPill:active, .dangerButton:active { transform: translateY(0) scale(.98); }
.primaryButton:hover, .buyPill:hover { filter: brightness(1.06); transform: translateY(-1px); }
.primaryButton:hover { box-shadow: 0 10px 28px rgba(183,255,60,.3); }
.ghostButton:hover { filter: brightness(1.25); transform: translateY(-1px); }
.dangerButton:hover { filter: brightness(1.15); transform: translateY(-1px); }
.primaryButton:active, .buyPill:active, .ghostButton:active, .dangerButton:active { transform: translateY(0) scale(.97); }
.primaryButton:focus-visible, .ghostButton:focus-visible, .dangerButton:focus-visible, .buyPill:focus-visible, .signinBtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.categoryStrip a:hover, .categoryStrip button:hover { border-color: var(--brand-border, rgba(183,255,60,.35)); }
.categoryStrip a.active { background: var(--brand); color: #07100a; border-color: var(--brand); }
.paymentOptions button.active { background: var(--brand); color: #07100a; }
aside label { cursor: pointer; transition: color .15s ease; }
aside label:hover { color: var(--text); }
.sellerOfferRow.active { background: rgba(183,255,60,.06); }
.timelineItem.done > span { background: var(--brand); }
.timelineItem.todo > span { background: rgba(255,255,255,.08); color: var(--muted); }
.timelineItem.current > span { background: var(--brand-2); color: #04121a; }
.buyerTimeline { gap: 12px; margin-top: 6px; }
.buyerTimeline .timelineItem { grid-template-columns: 34px 1fr; gap: 12px; }
.buyerTimeline .timelineItem > span { width: 34px; height: 34px; border-radius: 11px; font-size: 14px; background: rgba(255,255,255,.08); color: var(--muted); }
.buyerTimeline .timelineItem.tlDone > span { background: var(--brand); color: #07100a; }
.buyerTimeline .timelineItem strong { font-size: 14px; }
.buyerTimeline .timelineItem p { font-size: 12px; margin-top: 3px; }
.buyerTrust { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.buyerTrust .trustRow { margin-top: 0; }

/* subtle route slide — never fully invisible, so captures stay reliable */
.screen { animation: nbxSlide .26s ease; }
@keyframes nbxSlide { from { opacity: .4; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } }

/* footer */
.siteFooter { border-top: 1px solid var(--line); padding: 40px 5vw 50px; color: var(--muted); }
.footerGrid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; }
.siteFooter h4 { color: var(--text); font-size: 14px; margin: 0 0 14px; }
.siteFooter a { display: block; color: var(--muted); font-size: 14px; margin-bottom: 10px; cursor: pointer; }
.siteFooter a:hover { color: var(--brand); }
.footerBrand p { max-width: 320px; line-height: 1.6; font-size: 14px; }
.footerContact { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.footerContact span { display: block; }
.footerPay { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.footerPay span { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--text); background: var(--surface-1); }
.footerBottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.trustSeal { display: inline-flex; align-items: center; gap: 14px; border: 1px solid var(--brand-border); background: var(--brand-tint); border-radius: 16px; padding: 14px 18px; }
.trustSeal svg { width: 34px; height: 34px; flex: none; }
.trustSeal .ts-title { color: var(--text); font-weight: 800; font-size: 14px; display: block; letter-spacing: -.01em; margin-bottom: 2px; }
.trustSeal .ts-sub { color: var(--brand); font-weight: 700; font-size: 12px; }
.offices { display: flex; flex-wrap: wrap; gap: 30px; }
.office { display: flex; gap: 11px; align-items: flex-start; }
.office .pin { width: 18px; height: 18px; flex: none; color: var(--brand); margin-top: 2px; }
.office strong { color: var(--text); display: block; font-size: 13px; margin-bottom: 3px; }
.office span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.footerLang { display: flex; gap: 8px; margin-top: 16px; }
.footerLang span { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; }
.footerLang span.active { background: var(--brand); color: #07100a; border-color: var(--brand); }
.cartCount { background: var(--brand); color: #07100a; border-radius: 999px; font-size: 12px; font-weight: 800; padding: 2px 8px; margin-left: 6px; display: inline-block; animation: nbxBadgePop .42s cubic-bezier(.2,.72,.28,1) both; }
@keyframes nbxBadgePop { 0% { transform: scale(1); } 38% { transform: scale(1.42); } 100% { transform: scale(1); } }

/* language switcher — compact dropdown */
.langDD { position: relative; }
.langDDBtn { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 999px; padding: 8px 11px; color: var(--text); font-weight: 800; font-size: 13px; line-height: 1; cursor: pointer; transition: background .18s ease, border-color .18s ease; }
.langDDBtn:hover { background: rgba(255,255,255,.1); border-color: var(--brand-border); }
.langDDBtn svg { color: var(--muted); flex: none; }
.langDDCaret { transition: transform .2s ease; }
.langDDMenu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 168px; margin: 0; padding: 6px; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.45); z-index: 60; }
.langDDItem { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 11px; border-radius: 10px; background: transparent; color: var(--text); font-weight: 700; font-size: 13px; cursor: pointer; transition: background .15s ease; }
.langDDItem:hover { background: rgba(255,255,255,.06); }
.langDDItem.on { background: var(--brand-tint); color: var(--brand); }
.langDDCode { font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: .04em; }
.langDDItem.on .langDDCode { color: var(--brand); }

/* cart quantity */
.cartItemQty { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.cartItemMain .cardArt { height: 84px; width: 84px; border-radius: 16px; }
.cartItemMain .artChip { width: 56px; height: 56px; border-radius: 14px; }
.cartItemMain .artChip .artLogo, .cartItemMain .artChip .brandChipLogo { width: 30px; height: 30px; }
.cartItemMain .artBadge { display: none; }
.cartItemInfo strong { font-size: 16px; letter-spacing: -.02em; }
.cartItemInfo p { color: var(--muted); font-size: 13px; margin: 4px 0; line-height: 1.5; max-width: 380px; }
.cartItemInfo span { color: var(--muted); font-size: 12px; }
.cartItemRight { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 130px; }
.cartItemRight .offerPrice { white-space: nowrap; font-size: 18px; font-weight: 900; line-height: 1.1; }
.qtyStepper { display: inline-flex; align-items: center; background: rgba(7,10,18,.5); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.qtyStepper button { width: 34px; height: 34px; background: transparent; color: var(--text); font-size: 18px; font-weight: 800; display: grid; place-items: center; }
.qtyStepper button:disabled { opacity: .35; cursor: default; }
.qtyStepper span { min-width: 34px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.cartEach { color: var(--muted); font-size: 12px; white-space: nowrap; }
.cartRemove { background: transparent; color: var(--danger); font-size: 12px; font-weight: 700; padding: 2px 0; white-space: nowrap; }

/* confetti + celebration */
.confettiCanvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }
.celebratePanel { text-align: center; align-items: center; position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(183,255,60,.12), rgba(0,212,255,.05)); border-color: var(--brand-border); }
.celebrateBurst { font-size: 56px; line-height: 1; animation: nbxPop .5s cubic-bezier(.2,.72,.28,1.4) both; }
@keyframes nbxPop { 0% { transform: scale(0) rotate(-20deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.celebrateTitle { font-size: 34px; letter-spacing: -.04em; background: linear-gradient(120deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.celebrateSub { color: var(--muted); line-height: 1.6; font-size: 14px; }
.celebratePanel .deliveryBox { text-align: left; width: 100%; }
[dir="rtl"] .celebratePanel .deliveryBox { text-align: right; }

/* smart cross-sell offers */
.smartOffers { padding: 8px 5vw 50px; display: flex; flex-direction: column; gap: 22px; }
.bundleCard { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 20px 22px; }
.bundleRow { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.bundleItem { display: flex; align-items: center; gap: 12px; }
.bundleItem .cardArt { width: 60px; height: 60px; border-radius: 14px; }
.bundleItem .artChip { width: 40px; height: 40px; border-radius: 11px; }
.bundleItem .artChip .artLogo, .bundleItem .artChip .brandChipLogo { width: 22px; height: 22px; }
.bundleItem .artBadge { display: none; }
.bundleItem > span { font-weight: 700; font-size: 15px; letter-spacing: -.02em; }
.bundlePlus { font-size: 26px; font-weight: 900; color: var(--muted); }
.bundleBuy { margin-left: auto; display: flex; align-items: center; gap: 14px; }
[dir="rtl"] .bundleBuy { margin-left: 0; margin-right: auto; }
.bundleLabel { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.bundleTotal { font-size: 22px; font-weight: 900; color: var(--brand); }
.recRow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.recCard { display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; transition: border-color .2s ease; }
.recCard:hover { border-color: var(--brand-border); }
.recArt .cardArt { width: 56px; height: 56px; border-radius: 13px; }
.recArt .artChip { width: 38px; height: 38px; border-radius: 10px; }
.recArt .artChip .artLogo, .recArt .artChip .brandChipLogo { width: 22px; height: 22px; }
.recArt .artBadge { display: none; }
.recInfo { flex: 1; min-width: 0; }
.recInfo strong { display: block; font-size: 14px; letter-spacing: -.02em; }
.recCat { color: var(--brand-2); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.recBuy { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.recPrice { color: var(--brand); font-weight: 900; font-size: 14px; white-space: nowrap; }
.recPill { cursor: pointer; }
[dir="rtl"] .cartCount, [dir="rtl"] .navBadge { margin-left: 0; }
[dir="rtl"] .cartCount, [dir="rtl"] .navBadge { margin-right: 6px; }
@media (max-width: 920px) { .footerGrid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 920px) {
  nav { display: none; }
  .hero, .cardsGrid, .marketLayout, .categoryGrid, .checkoutGrid, .cartLayout, .dashboardLayout, .orderStatusLayout, .supportLayout, .dashboardGrid, .policyGrid, .p2pLayout, .vendorsGrid, .authLayout { grid-template-columns: 1fr; }
  .authBrand { border-right: 0; border-bottom: 1px solid var(--line); }
  .searchBox { flex-direction: column; gap: 8px; }
  .searchBox input { padding: 14px; }
  .tableHead, .offerRow, .sellerOfferHead, .sellerOfferRow, .adminHead, .adminRow, .summaryProduct, .cartItem, .cartItemQty { grid-template-columns: 1fr; }
  .cartItemRight { align-items: flex-start; }
  .recRow { grid-template-columns: 1fr; }
  .bundleBuy { margin-left: 0; width: 100%; justify-content: space-between; }
  .sellerOfferHead, .adminHead { display: none; }
  .paymentOptions { grid-template-columns: 1fr 1fr; }
  .p2pHero { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ===== Top vendors (P2P merchant cards) ===== */
.vendorsSection { padding: 10px 5vw 60px; }
/* Banded full-bleed background to break the dark-on-dark monotony */
.vendorsBand { position: relative; margin-top: 30px; padding-top: 52px; padding-bottom: 66px; background: var(--surface-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vendorsBand::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 120% at 18% 0%, rgba(183,255,60,.07), transparent 60%), radial-gradient(60% 120% at 85% 10%, rgba(0,212,255,.06), transparent 60%); }
.vendorsBand > * { position: relative; }
html[data-theme="light"] .vendorsBand { background: #f3f6fb; }
html[data-theme="light"] .vendorsBand::before { background: radial-gradient(60% 120% at 18% 0%, rgba(95,170,20,.08), transparent 60%), radial-gradient(60% 120% at 85% 10%, rgba(0,150,190,.07), transparent 60%); }
.vendorsGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 22px; }
@media (max-width: 1120px) { .vendorsGrid { grid-template-columns: repeat(2, 1fr); } }
.vendorCard { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 18px; transition: transform .2s ease, border-color .2s ease; }
.vendorCard:hover { transform: translateY(-4px); border-color: var(--brand-border); }
.vendorTop { display: flex; align-items: center; gap: 12px; }
.vendorAvatar { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; font-weight: 900; font-size: 18px; color: #07100a; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.vendorId { flex: 1; min-width: 0; }
.vendorId strong { display: flex; align-items: center; gap: 7px; font-size: 16px; letter-spacing: -.02em; }
.vendorSub { color: var(--muted); font-size: 12px; }
.onlineDot { width: 8px; height: 8px; border-radius: 999px; background: var(--brand); box-shadow: 0 0 0 3px rgba(183,255,60,.2); display: inline-block; }
.onlineDot.off { background: var(--muted); box-shadow: none; }
.vendorRank { background: var(--brand); color: #07100a; font-weight: 900; font-size: 12px; padding: 3px 9px; border-radius: 999px; }
.vendorNote { color: var(--brand-2); font-size: 12px; font-weight: 700; margin: 12px 0 8px; }
.vendorRow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); line-height: 1.35; }
.vendorRow span { white-space: nowrap; }
.vendorRow strong { color: var(--text); font-weight: 800; white-space: nowrap; flex: none; }
.vendorRow strong.rel { color: var(--brand); }
.vendorMethods { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.vendorMethods span { border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 700; color: var(--text); background: var(--surface-1); }

/* ===== Buyer reviews ===== */
.reviewsSection { padding: 10px 5vw 64px; }
.reviewsLayout { display: grid; grid-template-columns: .85fr 1.6fr; gap: 22px; margin-top: 22px; align-items: start; }
.reviewSummary { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-3xl, 26px); padding: 26px 24px; text-align: center; position: sticky; top: 96px; }
.reviewAvg { font-size: 58px; font-weight: 900; letter-spacing: -.05em; line-height: 1; color: var(--text); }
.reviewStars { color: var(--brand); font-size: 20px; letter-spacing: 3px; margin: 10px 0 6px; }
.reviewBasis { color: var(--muted); font-size: 12.5px; margin: 0 0 18px; }
.reviewDist { display: flex; flex-direction: column; gap: 8px; text-align: start; }
.reviewDistRow { display: grid; grid-template-columns: 30px 1fr 36px; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); font-weight: 700; }
.rdStar { color: var(--text); }
.rdBar { height: 7px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.rdFill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.rdPct { text-align: end; font-variant-numeric: tabular-nums; }
.reviewList { display: flex; flex-direction: column; gap: 14px; }
.reviewCard { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px; transition: border-color .2s ease; }
.reviewCard:hover { border-color: var(--brand-border); }
.reviewHead { display: flex; align-items: center; gap: 12px; }
.reviewAvatar { width: 38px; height: 38px; border-radius: 999px; flex: none; display: grid; place-items: center; font-weight: 900; font-size: 15px; color: #07100a; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.reviewWho { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.reviewWho strong { font-size: 14px; letter-spacing: -.01em; }
.reviewVerified { display: inline-flex; align-items: center; gap: 4px; color: var(--brand); font-size: 11.5px; font-weight: 700; }
.reviewVerified svg { color: var(--brand); flex: none; }
.reviewWhen { color: var(--muted); font-size: 12px; white-space: nowrap; flex: none; }
.reviewRating { color: var(--brand); font-size: 14px; letter-spacing: 2px; margin: 12px 0 8px; }
.reviewBody { color: var(--text); font-size: 14px; line-height: 1.6; margin: 0; text-wrap: pretty; }
@media (max-width: 920px) { .reviewsLayout { grid-template-columns: 1fr; } .reviewSummary { position: static; } }

html[data-theme="light"] .rdBar { background: rgba(13,21,38,.08); }

/* ===== P2P order page ===== */
.p2pHero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.statusPill.p2p-warn { background: rgba(255,209,102,.14); color: #ffd166; border: 1px solid rgba(255,209,102,.3); }
.statusPill.p2p-info { background: var(--brand-tint); color: var(--brand); border: 1px solid var(--brand-border); }
.statusPill.p2p-ok { background: var(--brand-tint); color: var(--brand); border: 1px solid var(--brand-border); }
.statusPill.p2p-bad { background: var(--danger-tint); color: var(--danger); border: 1px solid var(--danger-border); }
.p2pSteps { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 5vw; margin-bottom: 24px; }
.p2pStep { display: flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-weight: 700; font-size: 14px; }
.p2pStep.on { color: var(--text); }
.p2pStep.on .p2pStepNum { background: var(--brand); color: #07100a; border-color: var(--brand); }
.p2pStep.cur { border-color: var(--brand-border); background: var(--brand-tint); }
.p2pStepNum { width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--line); display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.p2pLayout { display: grid; grid-template-columns: 1.4fr .85fr; gap: 22px; padding: 0 5vw 60px; align-items: start; }
.payPanel { display: flex; flex-direction: column; gap: 14px; }
.payTimer { display: flex; align-items: center; justify-content: space-between; background: rgba(7,10,18,.5); border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; }
.payTimer span { color: var(--muted); font-weight: 600; }
.payTimer strong { font-size: 38px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--brand); }
.payTimer strong.danger { color: var(--danger); }
.payAmount { display: flex; align-items: baseline; justify-content: space-between; }
.payAmount span { color: var(--muted); }
.payAmount strong { font-size: 30px; font-weight: 900; color: var(--text); letter-spacing: -.02em; }
.payField label { color: var(--muted); font-size: 13px; font-weight: 700; display: block; margin-bottom: 6px; }
.payValue { font-weight: 700; }
.payAddr { display: flex; gap: 10px; align-items: stretch; }
.payAddr code { flex: 1; min-width: 0; background: rgba(7,10,18,.5); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-family: var(--font-sans); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.payAddr button { background: rgba(255,255,255,.08); color: var(--text); border-radius: 12px; padding: 0 18px; font-weight: 700; }
.payNote { color: var(--muted); font-size: 13px; line-height: 1.6; }
.releaseWait { display: flex; gap: 16px; align-items: center; }
.releaseWait strong { font-size: 18px; letter-spacing: -.02em; }
.releaseWait p { color: var(--muted); font-size: 13px; line-height: 1.6; margin-top: 4px; }
.spinnerRing { width: 44px; height: 44px; flex: none; border-radius: 999px; border: 4px solid rgba(183,255,60,.18); border-top-color: var(--brand); animation: nbxSpin 1s linear infinite; }
@keyframes nbxSpin { to { transform: rotate(360deg); } }
.reminderBox { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: rgba(7,10,18,.5); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.reminderBox strong { display: block; font-size: 14px; }
.reminderBox span { color: var(--muted); font-size: 12px; }
.reminderBox button:disabled { opacity: .5; cursor: default; }
.notifyToggle { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--muted); font-size: 13px; }
.toggleBox { width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--line); display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #07100a; flex: none; }
.toggleBox.on { background: var(--brand); border-color: var(--brand); }
.doneHead { display: flex; gap: 14px; align-items: center; }
.doneHead strong { font-size: 19px; letter-spacing: -.02em; }
.doneHead p { color: var(--muted); font-size: 13px; line-height: 1.6; margin-top: 3px; }
.doneCheck { width: 44px; height: 44px; flex: none; border-radius: 999px; display: grid; place-items: center; font-size: 22px; font-weight: 900; background: var(--brand); color: #07100a; }
.doneCheck.bad { background: var(--danger); color: #fff; }
.deliveryBox, .tipPanel { background: rgba(7,10,18,.4); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.deliveryBox label { color: var(--muted); font-size: 12px; font-weight: 700; display: block; margin: 8px 0 4px; }
.deliveryVal { font-weight: 700; }
.deliveryVal.mono { font-family: var(--font-sans); font-size: 13px; color: var(--brand-2); }
.p2pSide { display: flex; flex-direction: column; gap: 18px; }
.vendorPanel .vendorHead { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.vendorPanel .vendorHead strong { display: flex; align-items: center; gap: 7px; font-size: 17px; }
.vendorLevel { color: var(--muted); font-size: 12px; }
.vendorStats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.vendorStats > div { background: rgba(7,10,18,.4); border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; }
.vendorStats span { color: var(--muted); font-size: 12px; display: block; margin-bottom: 3px; }
.vendorStats strong { font-size: 16px; font-weight: 800; }
.tipPanel h3 { margin: 0 0 10px; font-size: 15px; }
.tipPanel div { color: var(--muted); font-size: 13px; line-height: 1.9; }
.p2pToast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: rgba(7,10,18,.92); border: 1px solid var(--brand-border); color: var(--text); padding: 13px 20px; border-radius: 14px; font-weight: 700; font-size: 14px; z-index: 50; box-shadow: 0 20px 60px rgba(0,0,0,.5); backdrop-filter: blur(12px); animation: nbxToast .3s ease; }
@keyframes nbxToast { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes nbxToastOut { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 10px); } }
.nbxToastCart { display: inline-flex; align-items: center; gap: 9px; }
.nbxToastCart svg { width: 18px; height: 18px; flex: none; color: var(--brand); background: rgba(183,255,60,.14); border-radius: 999px; padding: 3px; box-sizing: content-box; }

/* discount badge on card art */
.artDiscount { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2; background: var(--danger); color: #fff; font-weight: 900; font-size: 12px; letter-spacing: -.02em; padding: 4px 9px; border-radius: 999px; box-shadow: 0 6px 18px rgba(255,77,125,.34); }

/* buy pill add-to-cart pop */
.buyPop { animation: nbxBuyPop .42s cubic-bezier(.2,.72,.28,1); }
@keyframes nbxBuyPop { 0% { transform: scale(1); } 35% { transform: scale(.9); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* product card hover — add an inner brand glow on top of the existing lift */
.productCard { position: relative; }
.productCard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s ease; box-shadow: inset 0 0 60px rgba(183,255,60,.07); }
.productCard:hover::after { opacity: 1; }

/* ===== Seller dashboard ===== */
.navSell { position: relative; }
.navBadge { background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }
.sellerHero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sellerIdentity { display: flex; gap: 12px; align-items: center; }
.onlineToggle { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); color: var(--muted); border-radius: 999px; padding: 11px 16px; font-weight: 700; }
.onlineToggle .dot { width: 9px; height: 9px; border-radius: 999px; background: var(--muted); }
.onlineToggle.on { color: var(--brand); background: var(--brand-tint); border: 1px solid var(--brand-border); }
.onlineToggle.on .dot { background: var(--brand); box-shadow: 0 0 0 3px rgba(183,255,60,.2); }
.actionCount { background: var(--danger); color: #fff; font-size: 13px; font-weight: 800; border-radius: 999px; padding: 1px 9px; margin-left: 8px; vertical-align: middle; }
.liveTag { display: inline-flex; align-items: center; gap: 7px; color: var(--brand); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.liveDot { width: 8px; height: 8px; border-radius: 999px; background: var(--brand); animation: nbxPulse 1.6s ease-in-out infinite; }
.notifFeed { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.notifEmpty { color: var(--muted); padding: 24px; text-align: center; }
.notifRow { display: flex; align-items: center; gap: 14px; background: rgba(7,10,18,.4); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; transition: border-color .2s ease; }
.notifRow.urgent { border-color: var(--danger-border); background: var(--danger-tint); }
.notifRow.done { opacity: .6; }
.notifIcon { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; font-size: 17px; font-weight: 900; }
.notifIcon.pay { background: var(--brand-tint); color: var(--brand); }
.notifIcon.warn { background: var(--danger); color: #fff; }
.notifIcon.ok { background: rgba(255,255,255,.08); color: var(--brand); }
.notifBody { flex: 1; min-width: 0; }
.notifBody strong { display: block; font-size: 15px; letter-spacing: -.02em; }
.notifMeta { color: var(--muted); font-size: 12px; }
.notifPing { display: block; color: var(--danger); font-size: 12px; font-weight: 700; margin-top: 3px; }
.notifPing.okText { color: var(--brand); }
.notifSide { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.notifTime { color: var(--text-faint, var(--muted)); font-size: 11px; }
.notifRelease { padding: 9px 18px; font-size: 14px; }
.notifTag { font-size: 12px; font-weight: 800; color: var(--brand); border: 1px solid var(--brand-border); background: var(--brand-tint); border-radius: 999px; padding: 4px 11px; }
.sellerSide { display: flex; flex-direction: column; gap: 18px; }
.offerInv { display: flex; flex-direction: column; gap: 8px; }
.offerInvRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.offerInvRow:last-child { border-bottom: 0; }
.offerInvRow strong { display: block; font-size: 14px; letter-spacing: -.02em; }
.offerInvRow span { color: var(--muted); font-size: 12px; }
.offerInvPrice { color: var(--brand) !important; font-weight: 900 !important; font-size: 15px !important; }

/* user chip */
.userChip { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 999px; padding: 5px 6px 5px 5px; cursor: pointer; }
.userAvatar { width: 30px; height: 30px; border-radius: 999px; flex: none; display: grid; place-items: center; font-weight: 900; font-size: 14px; color: #07100a; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.userName { font-weight: 700; font-size: 13px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userLogout { background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 999px; white-space: nowrap; flex: none; }
.userLogout:hover { color: var(--danger); }

/* auth screen */
.authLayout { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: calc(100vh - 200px); align-items: stretch; }
.authBrand { padding: 64px 5vw; background: linear-gradient(160deg, rgba(183,255,60,.10), rgba(0,212,255,.05) 60%, transparent); display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); }
.authBrand.seller { background: linear-gradient(160deg, rgba(0,212,255,.12), rgba(183,255,60,.05) 60%, transparent); }
[dir="rtl"] .authBrand { border-right: 0; border-left: 1px solid var(--line); }
.authBrand h1 { font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -.04em; margin: 10px 0 22px; max-width: 460px; }
.authBenefits { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 12px; }
.authBenefits li { position: relative; padding-left: 28px; color: var(--text); font-weight: 600; }
[dir="rtl"] .authBenefits li { padding-left: 0; padding-right: 28px; }
.authBenefits li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; font-size: 12px; font-weight: 900; }
[dir="rtl"] .authBenefits li::before { left: auto; right: 0; }
.authRoleNote { color: var(--muted); font-size: 14px; }
.authRoleLink { background: transparent; color: var(--brand); font-weight: 800; padding: 0; }
.authCard { padding: 64px 5vw; display: flex; flex-direction: column; justify-content: center; max-width: 560px; }
.authRoleTabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 14px; padding: 5px; margin-bottom: 18px; }
.authRoleTabs button { padding: 12px; border-radius: 10px; font-weight: 800; color: var(--muted); }
.authRoleTabs button.on { background: var(--brand); color: #07100a; }
.authModeTabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.authModeTabs button { background: transparent; color: var(--muted); font-weight: 800; font-size: 15px; padding: 0 0 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.authModeTabs button.on { color: var(--text); border-bottom-color: var(--brand); }
.authForm { display: flex; flex-direction: column; gap: 14px; }
.authForm label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 700; color: var(--muted); }
.authForm input { background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; color: var(--text); font-size: 15px; outline: none; }
.authForm input:focus { border-color: var(--brand-border); }
.authError { background: var(--danger-tint); border: 1px solid var(--danger-border); color: var(--danger); border-radius: 12px; padding: 11px 14px; font-size: 13px; font-weight: 700; }
.authOk { background: var(--brand-tint); border: 1px solid var(--brand-border); color: var(--brand); border-radius: 12px; padding: 11px 14px; font-size: 13px; font-weight: 700; }
.authDemo { background: rgba(7,10,18,.5); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 12px; color: var(--muted); line-height: 1.8; }
.authDemo code { color: var(--brand-2); font-family: var(--font-sans); }
.authFill { background: rgba(255,255,255,.08); color: var(--text); font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; margin-left: 8px; }
[dir="rtl"] .authFill { margin-left: 0; margin-right: 8px; }
.authSwitch { color: var(--muted); font-size: 14px; text-align: center; }
.authSwitch button { background: transparent; color: var(--brand); font-weight: 800; padding: 0; }
.gateActions { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }

/* seller tabs + dashboard extras */
.sellerTabs { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 5vw; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.sellerTabs button { background: transparent; color: var(--muted); font-weight: 800; font-size: 15px; padding: 12px 4px; margin-right: 18px; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; }
[dir="rtl"] .sellerTabs button { margin-right: 0; margin-left: 18px; }
.sellerTabs button.on { color: var(--text); border-bottom-color: var(--brand); }
.sellerTabs .actionCount { margin-left: 7px; }
.fullLayout { grid-template-columns: 1fr !important; }
.payoutBalance { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.payoutBalance span { color: var(--muted); font-size: 13px; }
.payoutBalance strong { font-size: 26px; font-weight: 900; color: var(--brand); white-space: nowrap; }
.offerInvRight { display: flex; align-items: center; gap: 12px; }
.miniBtn { background: rgba(255,255,255,.08); color: var(--text); font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.payoutTable .adminHead, .payoutTable .adminRow { grid-template-columns: 1.1fr 1.4fr .8fr .8fr; }
.amtIn { color: var(--brand); font-weight: 800; }
.amtOut { color: var(--danger); font-weight: 800; }
.settingRow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 6px 0 14px; }
.settingRow strong { display: block; font-size: 14px; }
.settingRow span { color: var(--muted); font-size: 12px; }

/* buyer account panel */
.buyerHero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.buyerBadge { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; }
.buyerBadge .userAvatar { width: 40px; height: 40px; font-size: 17px; }
.buyerBadge strong { display: block; font-size: 14px; }
.buyerBadge span { color: var(--muted); font-size: 12px; }
.metricCard.clickable { cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
.metricCard.clickable:hover { border-color: var(--brand-border); transform: translateY(-2px); }
.linkBtn, .reorderLink { background: transparent; color: var(--brand); font-weight: 800; font-size: 13px; padding: 0; }
.orderList { display: flex; flex-direction: column; gap: 10px; }
.orderRow { display: flex; align-items: center; gap: 14px; background: rgba(7,10,18,.4); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; transition: border-color .2s ease; }
.orderRow:hover { border-color: var(--brand-border); }
.orderArt { flex: none; }
.orderArt .cardArt { width: 54px; height: 54px; border-radius: 13px; }
.orderArt .artChip { width: 36px; height: 36px; border-radius: 10px; }
.orderArt .artChip .artLogo, .orderArt .artChip .brandChipLogo { width: 20px; height: 20px; }
.orderArt .artBadge { display: none; }
.orderInfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.orderInfo strong { font-size: 14px; letter-spacing: -.02em; }
.orderMeta { color: var(--muted); font-size: 12px; }
.orderStatus { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; width: fit-content; }
.orderStatus.ok { color: var(--brand); }
.orderStatus.warn { color: #ffd166; }
.orderStatus.info { color: var(--brand-2); }
.orderSide { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.orderPriceB { color: var(--brand); font-weight: 900; font-size: 15px; white-space: nowrap; }
.orderBtn { padding: 8px 14px; min-height: 36px; font-size: 13px; }
.walletMini .walletAmount { font-size: 40px; font-weight: 900; color: var(--brand); letter-spacing: -.03em; margin: 4px 0 14px; }
.txRow { display: flex; align-items: center; gap: 14px; background: rgba(7,10,18,.4); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.txIcon { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 17px; font-weight: 900; }
.txIcon.deposit { background: var(--brand-tint); color: var(--brand); }
.txIcon.spend { background: rgba(255,255,255,.08); color: var(--muted); }
.txInfo { flex: 1; min-width: 0; }
.txInfo strong { display: block; font-size: 14px; letter-spacing: -.02em; }
.txInfo span { color: var(--muted); font-size: 12px; }
/* ===== skeleton loading ===== */
.skelCard { background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.skel { position: relative; overflow: hidden; background: rgba(255,255,255,.06); border-radius: 8px; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent); animation: skelShimmer 1.25s ease-in-out infinite; }
html[data-theme="light"] .skel { background: rgba(13,21,38,.06); }
html[data-theme="light"] .skel::after { background: linear-gradient(90deg, transparent, rgba(13,21,38,.06), transparent); }
.skelArt { height: 150px; border-radius: 22px; }
.skelLine { height: 13px; }
.skelLine.sm { width: 34%; }
.skelLine.lg { width: 78%; height: 18px; }
.skelLine.md { width: 56%; }
.skelLine.xl { width: 70%; height: 40px; border-radius: 12px; }
.skelLine.price { width: 64px; height: 22px; }
.skelFoot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.skelPill { width: 76px; height: 36px; border-radius: 999px; }
.resultsLoading { color: var(--muted); font-weight: 700; }
@keyframes skelShimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }

/* product detail skeleton */
.skelMedia { border-radius: var(--r-hero, 34px); min-height: 340px; }
.skelInfo { display: flex; flex-direction: column; gap: 16px; }
.skelInfo .skelLine.xl { height: 52px; width: 86%; }
.skelChips { display: flex; gap: 10px; margin-top: 6px; }
.skelChip { width: 110px; height: 30px; border-radius: 999px; }
.skelPanel { display: flex; flex-direction: column; gap: 14px; }
.skelBtn { height: 48px; border-radius: 14px; margin-top: 6px; }
.skelBtn.ghost { opacity: .6; }
/* offer + review skeleton rows keep grid alignment */
.skelRow { cursor: default !important; }
.skelRow span, .skelRow strong, .skelRow > div { display: flex; align-items: center; }
.skelRow a { display: flex; align-items: center; justify-content: flex-end; background: transparent !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; pointer-events: none; }
.reviewSkelCard { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.reviewSkelHead { display: flex; align-items: center; gap: 12px; }
.skelAvatar { width: 38px; height: 38px; border-radius: 999px; flex: none; }

.emptyState { text-align: center; padding: 56px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.emptyIcon { width: 64px; height: 64px; border-radius: 999px; display: grid; place-items: center; color: var(--muted); background: var(--surface-1); border: 1px solid var(--line); margin-bottom: 6px; }
.emptyState strong { font-size: 18px; color: var(--text); }
.emptySub { color: var(--muted); font-size: 13.5px; margin: 0 0 8px; max-width: 320px; line-height: 1.55; }
.dashboardPanel select { width: 100%; }

/* ===== Entrance animations (respect reduced-motion) ===== */
@keyframes nbxRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes nbxNavUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .screen > section, .screen > .sellerTabs, .screen > .p2pSteps { animation: nbxRise .5s cubic-bezier(.2,.72,.28,1) both; }
  .cardsGrid > *, .vendorsGrid > *, .recRow > * { animation: nbxRise .5s cubic-bezier(.2,.72,.28,1) both; }
  .cardsGrid > *:nth-child(2), .vendorsGrid > *:nth-child(2) { animation-delay: .06s; }
  .cardsGrid > *:nth-child(3), .vendorsGrid > *:nth-child(3) { animation-delay: .12s; }
  .cardsGrid > *:nth-child(4), .vendorsGrid > *:nth-child(4) { animation-delay: .18s; }
  .cardsGrid > *:nth-child(5) { animation-delay: .24s; }
  .cardsGrid > *:nth-child(6) { animation-delay: .3s; }
  .notifRow { animation: nbxRise .4s cubic-bezier(.2,.72,.28,1) both; }
}

/* ===== Mobile bottom nav ===== */
.mobileNav { display: none; }
.mnItem { background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 700; flex: 1; min-height: 56px; position: relative; transition: color .15s ease, transform .12s ease; }
.mnItem svg { width: 22px; height: 22px; }
.mnItem.on { color: var(--brand); }
.mnItem:active { transform: scale(.92); }
.mnBadge { position: absolute; top: 4px; left: 50%; margin-left: 6px; background: var(--brand); color: #07100a; font-size: 9px; font-weight: 900; border-radius: 999px; padding: 1px 5px; }

@media (max-width: 920px) {
  .mobileNav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(7,10,18,.9); backdrop-filter: blur(20px); border-top: 1px solid var(--line);
    animation: nbxNavUp .4s cubic-bezier(.2,.72,.28,1) both;
  }
  .screen { padding-bottom: 78px; }
  .topbar { padding: 14px 5vw; gap: 10px; }
  .topbar .ghostButton, .topbar .signinBtn, .topbar .userChip { display: none; }
  h1 { font-size: clamp(34px, 9vw, 50px); }
  .commerceHero h1, .listingHero h1 { font-size: clamp(30px, 8vw, 44px); }
  .sellerTabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .sellerTabs button { white-space: nowrap; }
  .p2pSteps { overflow-x: auto; flex-wrap: nowrap; }
  .fullButton, .primaryButton.fullButton, .ghostButton.fullButton { min-height: 50px; }
}
@media (max-width: 560px) {
  .vendorsGrid, .recRow { grid-template-columns: 1fr; }
  .dealClock { gap: 6px; }
  .dealUnit { min-width: 40px; }
}

/* ============ THEME TOGGLE ============ */
.themeToggle { width: 38px; height: 38px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--text); font-size: 16px; display: grid; place-items: center; flex: none; transition: background .2s ease, transform .2s ease; }
.themeToggle:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); }

/* ============ LIGHT THEME ============ */
html[data-theme="light"] {
  --bg: #eef1f7;
  --panel: #ffffff;
  --panel-soft: #f3f6fb;
  --text: #0d1526;
  --muted: #586173;
  --line: rgba(13, 21, 38, 0.12);
  --brand: #b7ff3c;
  --brand-2: #00aecb;
  --brand-strong: #3c8a00;
  --danger: #e23866;
  --brand-border: rgba(60, 138, 0, 0.4);
  --brand-tint: rgba(60, 138, 0, 0.1);
}
html[data-theme="light"] body {
  background: radial-gradient(circle at 18% -2%, rgba(120, 200, 40, .16), transparent 30%), radial-gradient(circle at 84% 6%, rgba(0, 174, 203, .12), transparent 30%), var(--bg);
}
/* Sticky bar */
html[data-theme="light"] .topbar { background: rgba(255, 255, 255, .82); }
html[data-theme="light"] .themeToggle { background: rgba(13, 21, 38, .05); }
html[data-theme="light"] .themeToggle:hover { background: rgba(13, 21, 38, .1); }
html[data-theme="light"] .langDDBtn,
html[data-theme="light"] .userChip { background: rgba(13, 21, 38, .05); }
html[data-theme="light"] .langDDMenu { box-shadow: 0 18px 50px rgba(13,21,38,.14); }

/* Translucent-white surfaces → solid white cards */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] aside,
html[data-theme="light"] .offerTable,
html[data-theme="light"] .sellerOfferTable,
html[data-theme="light"] .productDetails div,
html[data-theme="light"] .formCard,
html[data-theme="light"] .orderSummary,
html[data-theme="light"] .dashboardPanel,
html[data-theme="light"] .metricCard,
html[data-theme="light"] .cartItem,
html[data-theme="light"] .bundleCard,
html[data-theme="light"] .recCard,
html[data-theme="light"] .heroPanel { background: var(--panel); }
html[data-theme="light"] .authForm input,
html[data-theme="light"] .authDemo { background: var(--panel-soft); }

/* Ghost / chip buttons */
html[data-theme="light"] .ghostButton,
html[data-theme="light"] .resultsBar button,
html[data-theme="light"] .paymentOptions button,
html[data-theme="light"] .panelHeader button,
html[data-theme="light"] .miniBtn,
html[data-theme="light"] .authFill,
html[data-theme="light"] .userLogout,
html[data-theme="light"] .searchBox { background: rgba(13, 21, 38, .05); }
html[data-theme="light"] .authRoleTabs,
html[data-theme="light"] .qtyStepper { background: rgba(13, 21, 38, .04); }

/* Dark-tinted surfaces → light tints */
html[data-theme="light"] .brandChip,
html[data-theme="light"] .artChip { background: #0b0f18; }
html[data-theme="light"] .orderRow,
html[data-theme="light"] .notifRow,
html[data-theme="light"] .txRow,
html[data-theme="light"] .dealTimer { background: var(--panel-soft); }
html[data-theme="light"] .dealUnit { background: rgba(13, 21, 38, .05); }
html[data-theme="light"] .dealStockBar,
html[data-theme="light"] .txIcon.spend,
html[data-theme="light"] .notifIcon.ok { background: rgba(13, 21, 38, .08); }
html[data-theme="light"] .celebratePanel { background: linear-gradient(180deg, rgba(60,138,0,.1), rgba(0,174,203,.05)); }

/* Lime-as-TEXT → readable deep green */
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .brandStripLabel,
html[data-theme="light"] .brandStripLabel::before,
html[data-theme="light"] .dealKicker,
html[data-theme="light"] .dealPrice,
html[data-theme="light"] .priceLine span,
html[data-theme="light"] .sectionHeader a,
html[data-theme="light"] .delivery,
html[data-theme="light"] .offerRow strong,
html[data-theme="light"] .breadcrumb,
html[data-theme="light"] .offerPrice,
html[data-theme="light"] .totalPrice,
html[data-theme="light"] .metricCard strong,
html[data-theme="light"] .supportLink,
html[data-theme="light"] .orderPriceB,
html[data-theme="light"] .orderStatus.ok,
html[data-theme="light"] .walletAmount,
html[data-theme="light"] .recPrice,
html[data-theme="light"] .bundleTotal,
html[data-theme="light"] .payoutBalance strong,
html[data-theme="light"] .amtIn,
html[data-theme="light"] .linkBtn,
html[data-theme="light"] .reorderLink,
html[data-theme="light"] .authRoleLink,
html[data-theme="light"] .authSwitch button,
html[data-theme="light"] .liveTag,
html[data-theme="light"] .notifTag,
html[data-theme="light"] .celebrateSub,
html[data-theme="light"] .breadcrumb { color: var(--brand-strong); }
html[data-theme="light"] .recCat { color: var(--brand-2); }

/* Gradient display text → readable on white */
html[data-theme="light"] .heroAccent,
html[data-theme="light"] .celebrateTitle { background: linear-gradient(120deg, var(--brand-strong), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Lime-tinted pills → green-tinted */
html[data-theme="light"] .statusPill,
html[data-theme="light"] .dealSavePill,
html[data-theme="light"] .notifTag,
html[data-theme="light"] .orderStatus,
html[data-theme="light"] .recCard .recPill { color: var(--brand-strong); }
html[data-theme="light"] .statusPill,
html[data-theme="light"] .dealSavePill { background: var(--brand-tint); border-color: var(--brand-border); }
html[data-theme="light"] .notifIcon.pay,
html[data-theme="light"] .txIcon.deposit { background: var(--brand-tint); color: var(--brand-strong); }
html[data-theme="light"] .userAvatar { color: #07100a; }

/* Solid lime fills keep dark ink (good contrast) — ensure text stays dark */
html[data-theme="light"] .primaryButton,
html[data-theme="light"] .searchBox button,
html[data-theme="light"] .sellerOfferRow button,
html[data-theme="light"] .sellerOfferRow a,
html[data-theme="light"] .categoryStrip a.active,
html[data-theme="light"] .buyPill { color: #07100a; }
html[data-theme="light"] .buyPill { background: #0d1526; color: #fff; }

/* Confetti / deal panels keep their gradients; nudge order status amber readable */
html[data-theme="light"] .orderStatus.warn { color: #b8791b; }
html[data-theme="light"] .notifRow.urgent { background: var(--danger-tint); }
/* Dark badge keeps white text in light mode (background stays dark) */
html[data-theme="light"] .artBadge { color: #f8fafc; }
/* Product art tiles → light pastel gradient in light mode (dark logo chip stays dark) */
html[data-theme="light"] .cardArt,
html[data-theme="light"] .productMedia { background: linear-gradient(135deg, rgba(120,200,40,.26), rgba(0,180,220,.18)), #e7edf5; }
html[data-theme="light"] .productMedia { border-color: var(--line); }
html[data-theme="light"] .productMedia::after { border-color: rgba(13,21,38,.08); }
html[data-theme="light"] .cardArt, html[data-theme="light"] .productMedia { border: 1px solid rgba(13,21,38,.08); }

/* White header band behind hero/title sections in light mode (harmony) */
html[data-theme="light"] .commerceHero,
html[data-theme="light"] .listingHero,
html[data-theme="light"] .productHero {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(13,21,38,.02);
}
html[data-theme="light"] .sellerTabs { background: #ffffff; }

/* ============================================================
   ACCOUNT-CITY-INSPIRED ADDITIONS (kept in Nabux lime/cyan)
   ============================================================ */

/* ---- Utility strip (above sticky header) ---- */
.utilBar { background: rgba(255,255,255,.025); border-bottom: 1px solid var(--line); font-size: 12.5px; }
.utilInner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 5vw; color: var(--muted); }
.utilGroup { display: flex; align-items: center; gap: 14px; }
.utilItem { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.utilItem svg { color: var(--brand); flex: none; }
.utilDiv { width: 1px; height: 13px; background: var(--line); flex: none; }
.utilLive { color: var(--brand); font-weight: 800; letter-spacing: -.01em; }
.utilDot { width: 7px; height: 7px; border-radius: 999px; background: var(--brand); box-shadow: 0 0 0 3px rgba(183,255,60,.2); animation: nbxPulse 2.2s ease-in-out infinite; flex: none; }
.utilUsdt { font-variant-numeric: tabular-nums; }

/* ---- Category nav band ---- */
.catNav { background: rgba(255,255,255,.03); border-bottom: 1px solid var(--line); }
.catNavInner { display: flex; align-items: center; gap: 6px; padding: 0 5vw; height: 56px; overflow-x: auto; scrollbar-width: none; }
.catNavInner::-webkit-scrollbar { display: none; }
.catLead { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; padding: 10px 16px; border-radius: 12px; background: var(--brand); color: #07100a; font-weight: 800; font-size: 14px; flex: none; box-shadow: 0 6px 20px rgba(183,255,60,.16); }
.catLead svg { color: #07100a; }
.catLead:hover { filter: brightness(1.05); }
.catDiv { width: 1px; height: 22px; background: var(--line); margin: 0 6px; flex: none; }
.catItem { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 10px 14px; border-radius: 12px; color: var(--muted); font-weight: 700; font-size: 14px; flex: none; transition: color .18s ease, background .18s ease; }
.catItem svg { color: var(--brand-2); flex: none; transition: color .18s ease; }
.catItem:hover { color: var(--text); background: rgba(255,255,255,.05); }
.catItem.on { color: var(--brand); background: var(--brand-tint); }
.catItem.on svg { color: var(--brand); }
.catSpacer { flex: 1; min-width: 12px; }
.catGhost svg { color: var(--muted); }
.catGhost:hover svg { color: var(--text); }

/* ---- Trust strip (4-up) ---- */
.trustStrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 8px 5vw 44px; }
.trustItem { display: flex; align-items: center; gap: 14px; background: var(--surface-1); border: 1px solid var(--line); border-radius: 20px; padding: 16px 18px; transition: border-color .2s ease, transform .2s ease; }
.trustItem:hover { border-color: var(--brand-border); transform: translateY(-2px); }
.trustIc { width: 44px; height: 44px; border-radius: 13px; flex: none; display: grid; place-items: center; }
.trustIc.lime { background: var(--brand-tint); color: var(--brand); }
.trustIc.cyan { background: rgba(0,212,255,.12); color: var(--brand-2); }
.trustTx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.trustTx strong { font-size: 15px; letter-spacing: -.02em; }
.trustTx span { color: var(--muted); font-size: 12.5px; line-height: 1.45; text-wrap: pretty; }

/* ---- Section header w/ icon chip + chevron ---- */
.sectionHeader:has(.secHeadL) { align-items: center; }
.secHeadL { display: flex; align-items: center; gap: 14px; }
.secIc { width: 44px; height: 44px; border-radius: 13px; flex: none; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); border: 1px solid var(--brand-border); }
.secHeadL .eyebrow { margin: 0 0 3px; }
.secHeadL h2 { margin: 0; }
.seeAll { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.seeAllChev { transition: transform .18s ease; }
.seeAll:hover .seeAllChev { transform: translateX(3px); }
[dir="rtl"] .seeAllChev { transform: scaleX(-1); }
[dir="rtl"] .seeAll:hover .seeAllChev { transform: scaleX(-1) translateX(3px); }

@media (max-width: 1000px) { .trustStrip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .utilSupport, .utilUsdt, .utilInner .utilGroup .utilDiv { display: none; }
  .utilInner { justify-content: space-between; }
}
@media (max-width: 560px) {
  .trustStrip { grid-template-columns: 1fr; }
  .secIc { width: 38px; height: 38px; }
}

/* ---- Light-theme overrides for the additions ---- */
html[data-theme="light"] .utilBar { background: rgba(13,21,38,.03); }
html[data-theme="light"] .utilItem svg, html[data-theme="light"] .utilLive { color: var(--brand-strong); }
html[data-theme="light"] .utilDot { background: var(--brand-strong); box-shadow: 0 0 0 3px rgba(60,138,0,.18); }
html[data-theme="light"] .catNav { background: rgba(13,21,38,.03); }
html[data-theme="light"] .catItem:hover { background: rgba(13,21,38,.05); }
html[data-theme="light"] .catItem.on, html[data-theme="light"] .catItem.on svg { color: var(--brand-strong); }
html[data-theme="light"] .catLead, html[data-theme="light"] .catLead svg { color: #07100a; }
html[data-theme="light"] .trustItem { background: var(--panel); }
html[data-theme="light"] .trustIc.lime { color: var(--brand-strong); }
html[data-theme="light"] .secIc { color: var(--brand-strong); }