@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --b2b-bg: #ffffff;
  --b2b-band: #f4f6f8;
  --b2b-ink: #0f172a;
  --b2b-slate: #1e293b;
  --b2b-muted: #64748b;
  --b2b-line: #d9e2ec;
  --b2b-line-soft: #edf2f7;
  --b2b-blue: #0A7266; /* [ui-fix] darkened from #0BB5A6 for WCAG AA on .btn/.cart/.filterChip.active (white text) + teal text links */
  --b2b-blue-dark: #08594F; /* [ui-fix] hover, kept darker than base #0A7266 */
  --b2b-gold: #6d5efc;
  --b2b-green: #047857;
  --b2b-red: #b91c1c;
  --b2b-radius: 8px;
  --b2b-shadow: 0 12px 34px rgba(15, 23, 42, .08);
  --b2b-font: Inter, Roboto, "Open Sans", Arial, sans-serif;
}

html, body {
  background: var(--b2b-bg) !important;
  color: var(--b2b-ink) !important;
  font-family: var(--b2b-font) !important;
  letter-spacing: 0 !important;
}

body:before,
body:after,
.hero:before,
.hero:after,
.adminHero:before,
.sellerPowerHero:before {
  display: none !important;
}

h1, h2, h3, h4, p, span, small, button, input, select, textarea, td, th {
  letter-spacing: 0 !important;
  font-family: var(--b2b-font) !important;
}

h1, h2, h3 {
  color: var(--b2b-ink) !important;
  font-weight:650 !important;
}

.section,
.white,
.marketShopPage,
.main,
.sellerMain {
  background: var(--b2b-bg) !important;
}

.container {
  max-width: 1480px !important;
}

.hdr {
  background: rgba(255, 255, 255, .96) !important;
  border-bottom: 1px solid var(--b2b-line) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .05) !important;
  backdrop-filter: none !important;
}

.logo,
.brand,
.side .brand {
  border-radius: var(--b2b-radius) !important;
}

.logo .mark,
.mark {
  background: var(--b2b-ink) !important;
  color: #fff !important;
  border-radius: 6px !important;
}

.nav button,
.buyerHeaderActions button,
.cart {
  border-radius: 6px !important;
  color: var(--b2b-slate) !important;
  font-weight:700 !important;
}

.nav button.active,
.nav button:hover {
  background: var(--b2b-band) !important;
  color: var(--b2b-blue) !important;
}

.btn,
button.btn,
.cart {
  border-radius: 6px !important;
  background: var(--b2b-blue) !important;
  border: 1px solid var(--b2b-blue) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-weight:650 !important;
}

.btn:hover,
button:hover {
  transform: none !important;
}

.btn.light,
button.light {
  background: #fff !important;
  color: var(--b2b-blue) !important;
  border-color: var(--b2b-line) !important;
}

.btn.gold,
.adminHeroBadge,
.badge {
  background: var(--b2b-gold) !important;
  color: var(--b2b-ink) !important;
  border-color: var(--b2b-gold) !important;
}

.card,
.product,
.adminPanel,
.sellerPanel,
.sellerStockPanel,
.sellerOrdersPanel,
.sellerFormCard,
.opsPanel,
.top,
.sellerTopbar,
.marketShopHero,
.marketToolbar,
.shopLoadMoreWrap,
.tableWrap,
.adminTableWrap {
  background: #fff !important;
  border: 1px solid var(--b2b-line) !important;
  border-radius: var(--b2b-radius) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.marketShopHero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  padding: 18px !important;
  margin-bottom: 12px !important;
}

.marketShopHero small {
  color: var(--b2b-blue) !important;
  font-weight:700 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}

.marketShopHero h2 {
  font-size: 26px !important;
  margin: 4px 0 !important;
}

.marketShopHero p {
  margin: 0 !important;
  color: var(--b2b-muted) !important;
}

.marketStatsMini {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(94px, 1fr)) !important;
  gap: 8px !important;
}

.marketStatsMini span,
.stat,
.sellerKpiCard,
.sellerActionStat {
  background: var(--b2b-band) !important;
  border: 1px solid var(--b2b-line) !important;
  border-radius: var(--b2b-radius) !important;
  color: var(--b2b-muted) !important;
  padding: 12px !important;
}

.marketStatsMini b,
.stat h2 {
  color: var(--b2b-ink) !important;
  font-size: 22px !important;
}

.shopTopBar,
.toolbar,
.sellerStockToolbar,
.sellerMarketFilters,
.adminSearchBar {
  position: sticky !important;
  top: 76px !important;
  z-index: 30 !important;
  display: grid !important;
  grid-template-columns: auto minmax(280px, 1fr) minmax(190px, 240px) !important;
  gap: 10px !important;
  align-items: center !important;
  background: var(--b2b-band) !important;
  padding: 10px !important;
}

/* [Part 7A-1 UI/UX] Mobile fix: the toolbar/search-bar grid above uses a fixed 3-column
   template (~470px min) that overflows small screens and clips tabs/controls. On phones,
   collapse it to a wrapping flex so every control stays reachable. Desktop grid is untouched. */
@media (max-width: 640px) {
  .shopTopBar,
  .toolbar,
  .sellerStockToolbar,
  .sellerMarketFilters,
  .adminSearchBar {
    display: flex !important;
    flex-wrap: wrap !important;
    grid-template-columns: none !important;
    position: static !important;
    top: auto !important;
  }
  .shopTopBar > *,
  .toolbar > *,
  .sellerStockToolbar > *,
  .sellerMarketFilters > *,
  .adminSearchBar > * {
    min-width: 0 !important;
  }
}

input,
select,
textarea {
  border: 1px solid var(--b2b-line) !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: var(--b2b-ink) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--b2b-blue) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}

.marketInfoBanner {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1e3a8a !important;
  border-radius: var(--b2b-radius) !important;
  padding: 10px 12px !important;
  margin: 10px 0 !important;
}

.b2bBulkBar {
  display: none;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  background: var(--b2b-slate);
  color: #fff;
  border-radius: var(--b2b-radius);
  padding: 10px;
  margin: 10px 0;
}

.b2bBulkBar.active {
  display: flex;
}

.b2bBulkBar b {
  margin-right: auto;
}

.b2bBulkBar .btn.light {
  background: #fff !important;
  color: var(--b2b-slate) !important;
}

.marketGrid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

.product.marketDiamondCard,
.b2bStockRow {
  display: grid !important;
  grid-template-columns: 170px minmax(0, 1fr) !important;
  grid-template-areas:
    "top body"
    "media body" !important;
  align-items: stretch !important;
  min-height: 168px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.marketCardTop {
  grid-area: top !important;
  display: flex !important;
  height: 28px !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 8px 10px !important;
  background: var(--b2b-band) !important;
  border-bottom: 1px solid var(--b2b-line) !important;
}

.b2bSelect {
  display: inline-flex !important;
  margin: 0 !important;
}

.b2bSelect input {
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  accent-color: var(--b2b-blue) !important;
}

.marketStockId {
  color: var(--b2b-blue) !important;
  font-size: 12px !important;
  font-weight:700 !important;
}

.marketMedia {
  grid-area: media !important;
  width: 170px !important;
  min-height: 126px !important;
  height: 126px !important;
  border-right: 1px solid var(--b2b-line) !important;
  background: #fff !important;
}

.marketMedia img {
  object-fit: contain !important;
}

.marketBody {
  grid-area: body !important;
  padding: 12px !important;
  display: grid !important;
  grid-template-columns: minmax(180px, 1.1fr) minmax(420px, 2fr) minmax(270px, auto) !important;
  gap: 12px !important;
  align-items: center !important;
}

.marketTitleRow {
  display: block !important;
}

.marketTitleRow h3 {
  min-height: 0 !important;
  margin: 0 0 6px !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

.marketSubLine {
  margin: 4px 0 !important;
  color: var(--b2b-muted) !important;
  font-size: 12px !important;
}

.price,
.marketPrice {
  color: var(--b2b-ink) !important;
  font-size: 18px !important;
  font-weight:700 !important;
  white-space: nowrap !important;
}

.marketSpecsGrid {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(74px, 1fr)) !important;
  gap: 4px !important;
  margin: 0 !important;
}

.spec,
.marketSpecsGrid .spec {
  background: var(--b2b-band) !important;
  border: 1px solid var(--b2b-line-soft) !important;
  border-radius: 6px !important;
  padding: 7px !important;
}

.spec span {
  color: var(--b2b-muted) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
}

.spec b {
  color: var(--b2b-ink) !important;
  font-size: 12px !important;
}

.marketBadgeRow {
  margin: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

.marketBadge,
.pill {
  border-radius: 999px !important;
  border: 1px solid var(--b2b-line) !important;
  background: #fff !important;
  color: var(--b2b-slate) !important;
  font-size: 11px !important;
  font-weight:650 !important;
}

.marketBadge.ok,
.pill.ok,
.ok {
  background: #ecfdf5 !important;
  color: var(--b2b-green) !important;
  border-color: #a7f3d0 !important;
}

.marketBadge.warn,
.pill.warn,
.warn {
  background: #fffbeb !important;
  color: #92400e !important;
  border-color: #fde68a !important;
}

.marketActions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  margin: 8px 0 0 !important;
  grid-column: 3 !important;
}

.marketActions .btn {
  padding: 8px 10px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

.diamondFilterPanel,
.sellerAdvancedBox {
  border-radius: var(--b2b-radius) !important;
  border: 1px solid var(--b2b-line) !important;
}

.diamondFilterHeader,
.diamondFilterFooter {
  background: var(--b2b-band) !important;
}

.filterChip,
.shapeChip {
  border-radius: 6px !important;
}

.filterChip.active,
.shapeChip.active,
.filterTabGroup button.active {
  background: var(--b2b-blue) !important;
  color: #fff !important;
  border-color: var(--b2b-blue) !important;
}

.side,
.sidebar,
aside.side,
.sellerSidebar {
  background: var(--b2b-ink) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.side button,
.sellerSidebar button {
  border-radius: 6px !important;
  color: #cbd5e1 !important;
}

.side button.on,
.side button:hover,
.sellerSidebar button.on,
.sellerSidebar button:hover {
  background: #1e293b !important;
  color: #fff !important;
}

table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 13px !important;
}

th {
  background: var(--b2b-band) !important;
  color: var(--b2b-slate) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  position: sticky !important;
  top: 0 !important;
}

td,
th {
  border-bottom: 1px solid var(--b2b-line-soft) !important;
  padding: 10px !important;
}

tbody tr:hover td {
  background: #f8fafc !important;
}

.login {
  background: var(--b2b-band) !important;
}

.login .card {
  max-width: 440px !important;
  border-radius: var(--b2b-radius) !important;
}

footer,
.footer {
  background: var(--b2b-ink) !important;
  color: #cbd5e1 !important;
}

@media (max-width: 1100px) {
  .marketBody {
    grid-template-columns: 1fr !important;
  }
  .marketSpecsGrid {
    grid-template-columns: repeat(4, minmax(72px, 1fr)) !important;
  }
  .marketActions,
  .marketBadgeRow {
    justify-content: flex-start !important;
    grid-column: auto !important;
  }
}

@media (max-width: 760px) {
  .marketShopHero,
  .shopTopBar {
    grid-template-columns: 1fr !important;
    position: relative !important;
    top: auto !important;
  }
  .marketStatsMini {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .product.marketDiamondCard,
  .b2bStockRow {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "top"
      "media"
      "body" !important;
  }
  .marketMedia {
    width: 100% !important;
    height: 210px !important;
    border-right: 0 !important;
  }
  .marketSpecsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .b2bBulkBar {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Nivoda-inspired B2B homepage treatment */
.b2bHomeHero {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  color: var(--b2b-ink) !important;
  padding: 54px 0 38px !important;
}

.b2bHomeHero .container {
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr) !important;
  gap: 38px !important;
  align-items: center !important;
}

.b2bHeroCopy h1 {
  color: var(--b2b-ink) !important;
  font-size: clamp(38px, 5vw, 64px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  margin: 14px 0 18px !important;
  max-width: 780px !important;
}

.b2bHeroCopy p {
  color: var(--b2b-slate) !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  max-width: 720px !important;
}

.b2bHeroStats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 24px !important;
  max-width: 620px !important;
}

.b2bHeroStats span {
  border: 1px solid var(--b2b-line) !important;
  background: #fff !important;
  border-radius: 8px !important;
  padding: 14px !important;
  color: #64748b !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
}

.b2bHeroStats b {
  display: block !important;
  color: var(--b2b-ink) !important;
  font-size: 26px !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
}

.b2bPlatformMock {
  background: #fff !important;
  border: 1px solid var(--b2b-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.12) !important;
  padding: 16px !important;
  min-height: 430px !important;
  overflow: hidden !important;
}

.mockTop,
.mockActions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.mockTop span {
  color: var(--b2b-ink) !important;
  font-weight:650 !important;
}

.mockTop b {
  background: #dcfce7 !important;
  border: 1px solid #86efac !important;
  color: #166534 !important;
  border-radius: 999px !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
}

.mockFilters {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 16px 0 !important;
}

.mockFilters span {
  background: var(--b2b-band) !important;
  border: 1px solid var(--b2b-line) !important;
  border-radius: 6px !important;
  color: var(--b2b-slate) !important;
  font-size: 12px !important;
  font-weight:700 !important;
  padding: 10px !important;
  text-align: center !important;
}

.mockTable {
  border: 1px solid var(--b2b-line) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #fff !important;
}

.mockHead,
.mockRow {
  display: grid !important;
  grid-template-columns: 1fr 0.8fr 0.8fr 0.9fr 1.1fr !important;
  gap: 8px !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 0 14px !important;
}

.mockHead {
  background: var(--b2b-band) !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight:650 !important;
  text-transform: uppercase !important;
}

.mockRow {
  border-top: 1px solid var(--b2b-line-soft) !important;
  color: var(--b2b-slate) !important;
  font-size: 13px !important;
}

.mockRow b {
  color: var(--b2b-ink) !important;
  text-align: right !important;
}

.mockActions {
  margin-top: 16px !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight:700 !important;
}

.b2bMetricStrip {
  background: var(--b2b-ink) !important;
  color: #cbd5e1 !important;
  border-top: 1px solid #1e293b !important;
  border-bottom: 1px solid #1e293b !important;
}

.b2bMetricStrip .container {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1px !important;
}

.b2bMetricStrip span {
  padding: 22px 18px !important;
  border-right: 1px solid #334155 !important;
  line-height: 1.45 !important;
}

.b2bMetricStrip b {
  display: block !important;
  color: #fff !important;
  margin-bottom: 5px !important;
}

.b2bToolGrid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.b2bToolGrid > div {
  background: #fff !important;
  border: 1px solid var(--b2b-line) !important;
  border-radius: 8px !important;
  padding: 18px !important;
  min-height: 126px !important;
}

.b2bToolGrid b,
.b2bToolGrid span {
  display: block !important;
}

.b2bToolGrid b {
  color: var(--b2b-ink) !important;
  margin-bottom: 10px !important;
}

.b2bToolGrid span {
  color: var(--b2b-slate) !important;
  line-height: 1.5 !important;
}

.b2bWorkflowBand {
  background: var(--b2b-band) !important;
}

.b2bWorkflowBand .flowPreview,
.b2bWorkflowBand .orderFlowPreview {
  background: #fff !important;
  border: 1px solid var(--b2b-line) !important;
  border-radius: 10px !important;
}

.b2bCtaBand {
  background: #ffffff !important;
  border-top: 1px solid var(--b2b-line) !important;
  padding: 28px 0 !important;
}

.b2bCtaBand .container {
  align-items: center !important;
  display: flex !important;
  gap: 20px !important;
  justify-content: space-between !important;
}

.b2bCtaBand small {
  color: var(--b2b-blue) !important;
  font-size: 12px !important;
  font-weight:650 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.b2bCtaBand h2 {
  color: var(--b2b-ink) !important;
  margin: 4px 0 0 !important;
}

@media (max-width: 1100px) {
  .b2bHomeHero .container {
    grid-template-columns: 1fr !important;
  }
  .b2bToolGrid,
  .b2bMetricStrip .container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .b2bHeroStats,
  .mockFilters,
  .b2bToolGrid,
  .b2bMetricStrip .container {
    grid-template-columns: 1fr !important;
  }
  .b2bPlatformMock {
    min-height: 0 !important;
  }
  .mockHead,
  .mockRow {
    grid-template-columns: 1fr 0.7fr 0.7fr 0.8fr 1fr !important;
    font-size: 11px !important;
    padding: 0 9px !important;
  }
  .b2bCtaBand .container {
    align-items: stretch !important;
    flex-direction: column !important;
  }
}

/* Public B2B content pages */
.b2bPageHero {
  background: #fff !important;
  border-bottom: 1px solid var(--b2b-line) !important;
  padding-top: 54px !important;
}

.b2bPageHero h1 {
  color: var(--b2b-ink) !important;
  font-size: clamp(34px, 4.6vw, 58px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  margin: 14px 0 !important;
  max-width: 900px !important;
}

.b2bPageHero p {
  color: var(--b2b-slate) !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  max-width: 760px !important;
}

.b2bSplit {
  align-items: center !important;
  display: grid !important;
  gap: 34px !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr) !important;
}

.b2bMiniMock {
  min-height: 320px !important;
}

.b2bSellerPanel,
.b2bContactCard {
  background: var(--b2b-ink) !important;
  border: 1px solid #334155 !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16) !important;
  color: #cbd5e1 !important;
  display: grid !important;
  gap: 10px !important;
  padding: 24px !important;
}

.b2bSellerPanel b,
.b2bContactCard b {
  color: #fff !important;
  font-size: 18px !important;
  margin-bottom: 6px !important;
}

.b2bSellerPanel span,
.b2bContactCard p {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  border-radius: 7px !important;
  margin: 0 !important;
  padding: 12px !important;
}

.b2bFeatureRows {
  display: grid !important;
  gap: 12px !important;
}

.b2bFeatureRows > div {
  align-items: center !important;
  background: #fff !important;
  border: 1px solid var(--b2b-line) !important;
  border-radius: 8px !important;
  display: grid !important;
  gap: 16px !important;
  grid-template-columns: minmax(180px, 0.35fr) 1fr !important;
  min-height: 74px !important;
  padding: 18px !important;
}

.b2bFeatureRows b {
  color: var(--b2b-ink) !important;
}

.b2bFeatureRows span {
  color: var(--b2b-slate) !important;
  line-height: 1.55 !important;
}

.b2bFaqGrid {
  display: grid !important;
  gap: 16px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.b2bFaqGroup {
  border-radius: 8px !important;
}

.b2bFaqGroup h2 {
  color: var(--b2b-ink) !important;
  font-size: 22px !important;
  margin: 0 0 14px !important;
}

.b2bFaqGroup details {
  border-top: 1px solid var(--b2b-line-soft) !important;
  padding: 13px 0 !important;
}

.b2bFaqGroup summary {
  color: var(--b2b-ink) !important;
  cursor: pointer !important;
  font-weight:650 !important;
}

.b2bFaqGroup p {
  color: var(--b2b-slate) !important;
  line-height: 1.55 !important;
  margin: 8px 0 0 !important;
}

.privateInventoryCard {
  text-align: center !important;
}

.privatePreviewGrid > div {
  background: var(--b2b-band) !important;
}

.b2bFooter .footerBadges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.b2bFooter .footerBadges span {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  border-radius: 999px !important;
  color: #e2e8f0 !important;
  padding: 7px 10px !important;
}

@media (max-width: 1100px) {
  .b2bSplit,
  .b2bFaqGrid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .b2bFeatureRows > div {
    grid-template-columns: 1fr !important;
  }
}

/* Nivoda-inspired public B2B homepage */
.b2bNivodaHome {
  padding-bottom: 86px !important;
  padding-top: 78px !important;
}

.b2bNivodaHome .b2bHeroCopy h1 {
  max-width: 760px !important;
}

.ghostBtn {
  background: transparent !important;
  border-color: var(--b2b-line) !important;
  color: var(--b2b-ink) !important;
}

.b2bHomeMetrics {
  border-bottom: 1px solid #243146 !important;
}

.b2bDarkShowcase {
  background: #0c0c0b !important;
  color: #f6f3f1 !important;
  padding: 90px 0 !important;
}

.b2bDarkShowcase .container {
  align-items: center !important;
  display: grid !important;
  gap: 58px !important;
  grid-template-columns: minmax(360px, .92fr) minmax(0, 1fr) !important;
}

.b2bDarkShowcase small,
.b2bStoryBand small {
  color: #b9adfb !important;
  display: block !important;
  font-size: 12px !important;
  font-weight:700 !important;
  text-transform: uppercase !important;
}

.b2bDarkShowcase h2 {
  color: #fff !important;
  font-size: clamp(34px, 4vw, 56px) !important;
  line-height: 1.08 !important;
  margin: 10px 0 16px !important;
}

.b2bDarkShowcase p {
  color: #d7d2cf !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  max-width: 680px !important;
}

.b2bDeviceFrame {
  background: #f6f3f1 !important;
  border: 1px solid #403d3c !important;
  border-radius: 8px !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .34) !important;
  overflow: hidden !important;
}

.b2bDeviceTop {
  align-items: center !important;
  background: #181717 !important;
  color: #f6f3f1 !important;
  display: flex !important;
  gap: 8px !important;
  min-height: 48px !important;
  padding: 0 16px !important;
}

.b2bDeviceTop span {
  background: #77716e !important;
  border-radius: 50% !important;
  display: block !important;
  height: 9px !important;
  width: 9px !important;
}

.b2bDeviceTop b {
  color: #f6f3f1 !important;
  font-size: 13px !important;
  margin-left: auto !important;
}

.b2bDeviceBody {
  display: grid !important;
  gap: 16px !important;
  grid-template-columns: 1fr !important;
  padding: 18px !important;
}

.b2bDeviceMedia {
  background:
    radial-gradient(circle at 60% 34%, rgba(255,255,255,.92) 0 9%, transparent 10%),
    linear-gradient(135deg, #eef2ff, #e0f2fe 44%, #faf3f2) !important;
  border: 1px solid #d9e2ec !important;
  border-radius: 8px !important;
  min-height: 260px !important;
  position: relative !important;
}

.b2bDeviceMedia:before,
.b2bDeviceMedia:after {
  background: rgba(12, 12, 11, .1) !important;
  content: "" !important;
  display: block !important;
  position: absolute !important;
}

.b2bDeviceMedia:before {
  border-radius: 50% !important;
  height: 124px !important;
  left: calc(50% - 62px) !important;
  top: 54px !important;
  width: 124px !important;
}

.b2bDeviceMedia:after {
  bottom: 24px !important;
  height: 1px !important;
  left: 38px !important;
  right: 38px !important;
}

.b2bDeviceList {
  display: grid !important;
  gap: 8px !important;
}

.b2bDeviceList span {
  background: #fff !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 7px !important;
  color: var(--b2b-slate) !important;
  padding: 12px !important;
}

.b2bBenefitRail {
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin-top: 26px !important;
}

.b2bBenefitRail > div {
  background: #181717 !important;
  border: 1px solid #403d3c !important;
  border-radius: 8px !important;
  min-height: 136px !important;
  padding: 18px !important;
}

.b2bBenefitRail b,
.b2bBenefitRail span {
  display: block !important;
}

.b2bBenefitRail b {
  color: #fff !important;
  margin-bottom: 9px !important;
}

.b2bBenefitRail span {
  color: #d7d2cf !important;
  line-height: 1.55 !important;
}

.b2bRangeSection,
.b2bRetailShowcase,
.b2bSupportBand {
  padding-bottom: 88px !important;
  padding-top: 88px !important;
}

.b2bRangeGrid,
.b2bTrustCards,
.b2bAssociationGrid,
.b2bResourceGrid {
  display: grid !important;
  gap: 16px !important;
}

.b2bRangeGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.b2bRangeGrid > div,
.b2bTrustCards > div,
.b2bAssociationGrid > div,
.b2bResourceGrid > article {
  background: #fff !important;
  border: 1px solid var(--b2b-line) !important;
  border-radius: 8px !important;
  min-height: 190px !important;
  padding: 22px !important;
}

.b2bRangeGrid span,
.b2bResourceGrid small {
  background: #eef2ff !important;
  border-radius: 999px !important;
  color: #4338ca !important;
  display: inline-block !important;
  font-size: 11px !important;
  font-weight:700 !important;
  margin-bottom: 14px !important;
  padding: 6px 9px !important;
  text-transform: uppercase !important;
}

.b2bRangeGrid b,
.b2bTrustCards b,
.b2bAssociationGrid b,
.b2bResourceGrid h3 {
  color: var(--b2b-ink) !important;
  display: block !important;
  font-size: 20px !important;
  margin: 0 0 10px !important;
}

.b2bRangeGrid p,
.b2bTrustCards p,
.b2bAssociationGrid span,
.b2bResourceGrid p {
  color: var(--b2b-slate) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.b2bTrustBand {
  background: #f6f3f1 !important;
  border-bottom: 1px solid var(--b2b-line) !important;
  border-top: 1px solid var(--b2b-line) !important;
  padding: 86px 0 !important;
}

.b2bTrustCards {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.b2bLogoStrip {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
  margin-top: 26px !important;
}

.b2bLogoStrip span {
  background: #fff !important;
  border: 1px solid var(--b2b-line) !important;
  border-radius: 999px !important;
  color: var(--b2b-slate) !important;
  font-weight:650 !important;
  padding: 10px 14px !important;
}

.b2bToolSplit {
  display: grid !important;
  gap: 18px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.b2bToolSplit > div {
  background: #fff !important;
  border: 1px solid var(--b2b-line) !important;
  border-radius: 8px !important;
  padding: 26px !important;
}

.b2bToolSplit small {
  color: var(--b2b-blue) !important;
  font-size: 12px !important;
  font-weight:700 !important;
  text-transform: uppercase !important;
}

.b2bToolSplit h3 {
  font-size: 28px !important;
  margin: 10px 0 !important;
}

.b2bToolSplit p,
.b2bToolSplit li {
  color: var(--b2b-slate) !important;
  line-height: 1.6 !important;
}

.b2bToolSplit ul {
  display: grid !important;
  gap: 10px !important;
  list-style: none !important;
  margin: 20px 0 0 !important;
  padding: 0 !important;
}

.b2bToolSplit li {
  background: var(--b2b-band) !important;
  border-radius: 7px !important;
  padding: 11px 12px !important;
}

.b2bStoryBand {
  background: #fff !important;
  border-bottom: 1px solid var(--b2b-line) !important;
}

.b2bStoryBand .container {
  align-items: center !important;
  display: grid !important;
  gap: 44px !important;
  grid-template-columns: minmax(360px, .85fr) minmax(0, 1fr) !important;
}

.b2bStoryBand h2 {
  font-size: clamp(30px, 3.6vw, 50px) !important;
  line-height: 1.12 !important;
  margin: 10px 0 16px !important;
}

.b2bStoryBand p {
  color: var(--b2b-slate) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}

.b2bVideoPanel {
  align-items: center !important;
  background:
    linear-gradient(135deg, rgba(12,12,11,.78), rgba(12,12,11,.2)),
    linear-gradient(135deg, #f8eede, #d6f2e3 48%, #eef2ff) !important;
  border-radius: 8px !important;
  display: flex !important;
  justify-content: center !important;
  min-height: 360px !important;
  position: relative !important;
}

.b2bVideoPanel span {
  bottom: 18px !important;
  color: #fff !important;
  font-weight:700 !important;
  left: 20px !important;
  position: absolute !important;
}

.b2bVideoPanel button {
  background: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--b2b-ink) !important;
  height: 76px !important;
  width: 76px !important;
}

.b2bAssociationGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.b2bResourcesBand {
  background: var(--b2b-band) !important;
}

.b2bResourceGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.b2bResourceGrid > article {
  display: flex !important;
  flex-direction: column !important;
}

.b2bArrowLink {
  align-self: flex-start !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--b2b-blue) !important;
  font-weight:700 !important;
  margin-top: auto !important;
  padding: 16px 0 0 !important;
}

.b2bResourceAction {
  margin-top: 24px !important;
  text-align: center !important;
}

@media (max-width: 1120px) {
  .b2bDarkShowcase .container,
  .b2bStoryBand .container {
    grid-template-columns: 1fr !important;
  }
  .b2bRangeGrid,
  .b2bAssociationGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .b2bResourceGrid,
  .b2bTrustCards {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .b2bDarkShowcase,
  .b2bRangeSection,
  .b2bTrustBand,
  .b2bRetailShowcase,
  .b2bSupportBand {
    padding-bottom: 56px !important;
    padding-top: 56px !important;
  }
  .b2bBenefitRail,
  .b2bRangeGrid,
  .b2bToolSplit,
  .b2bAssociationGrid {
    grid-template-columns: 1fr !important;
  }
  .b2bDeviceMedia,
  .b2bVideoPanel {
    min-height: 250px !important;
  }
}

/* Strict black and white brand lock */
:root {
  --b2b-bg: #ffffff;
  --b2b-band: #f6f3f1;
  --b2b-ink: #0c0c0b;
  --b2b-slate: #2c2a29;
  --b2b-muted: #77716e;
  --b2b-line: #d8d3d0;
  --b2b-line-soft: #eeeae7;
  --b2b-blue: #0c0c0b;
  --b2b-blue-dark: #000000;
  --b2b-gold: #0c0c0b;
  --b2b-green: #2c2a29;
  --b2b-red: #0c0c0b;
  --blue: #0c0c0b;
  --blue2: #2c2a29;
  --sky: #0c0c0b;
  --sky2: #f6f3f1;
  --diamond-blue: #0c0c0b;
  --diamond-gold: #0c0c0b;
  --diamond-gold2: #2c2a29;
  --diamond-navy: #0c0c0b;
}

body,
.section,
.section.white,
.white,
.marketShopPage,
.main,
.sellerMain {
  background: #fff !important;
  color: #0c0c0b !important;
}

.hdr,
.card,
.product,
.adminPanel,
.sellerPanel,
.sellerStockPanel,
.sellerOrdersPanel,
.sellerFormCard,
.opsPanel,
.top,
.sellerTopbar,
.marketShopHero,
.marketToolbar,
.shopLoadMoreWrap,
.tableWrap,
.adminTableWrap,
.b2bRangeGrid > div,
.b2bTrustCards > div,
.b2bAssociationGrid > div,
.b2bResourceGrid > article,
.b2bToolGrid > div,
.b2bToolSplit > div,
.b2bDeviceFrame,
.b2bDeviceList span {
  background: #fff !important;
  border-color: #d8d3d0 !important;
  box-shadow: none !important;
}

.hero.realHero,
.b2bHomeHero,
.marketShopHero,
.diamondFilterHeader,
.marketCardTop {
  background: #fff !important;
}

.b2bMetricStrip,
.b2bDarkShowcase,
.b2bSellerPanel,
.b2bContactCard {
  background: #0c0c0b !important;
}

.b2bWorkflowBand,
.b2bTrustBand,
.b2bResourcesBand,
.privatePreviewGrid > div,
.marketStatsMini span,
.stat,
.sellerKpiCard,
.sellerActionStat,
.b2bToolSplit li,
.realFlowStep,
.marketTrustGrid div,
.marketSpecsGrid .spec {
  background: #f6f3f1 !important;
  border-color: #d8d3d0 !important;
}

.btn,
button.btn,
.cart,
.filterTabGroup button.active,
.filterChip.active,
.shapeFilterButton.active,
.b2bVideoPanel button {
  background: #0c0c0b !important;
  border-color: #0c0c0b !important;
  color: #fff !important;
}

.btn.light,
button.light,
.ghostBtn,
.footerWhatsapp {
  background: #fff !important;
  border-color: #0c0c0b !important;
  color: #0c0c0b !important;
}

.badge,
.btn.gold,
.adminHeroBadge,
.marketBadge,
.marketBadge.ok,
.marketBadge.warn,
.b2bRangeGrid span,
.b2bResourceGrid small,
.marketInfoBanner {
  background: #f6f3f1 !important;
  border-color: #d8d3d0 !important;
  color: #0c0c0b !important;
}

.logo .mark,
.mark,
.footerMark,
.cart span,
.realFlowStep span {
  background: #0c0c0b !important;
  color: #fff !important;
  box-shadow: none !important;
}

.nav button.active,
.nav button:hover {
  background: #f6f3f1 !important;
  color: #0c0c0b !important;
}

a,
.elementor-kit-6 a,
.b2bArrowLink,
.head small,
.marketShopHero small,
.b2bToolSplit small,
.b2bDarkShowcase small,
.b2bStoryBand small,
.marketStatsMini b,
.marketStockId,
.marketPrice,
.price,
.filterBlock h3,
.marketInfoBanner b,
.legalPage a {
  color: #0c0c0b !important;
}

.b2bDarkShowcase h2,
.b2bDarkShowcase b,
.b2bSellerPanel b,
.b2bContactCard b,
.b2bMetricStrip b,
.b2bFooter h4,
.b2bFooter b,
.b2bFooter .footerBrand b {
  color: #fff !important;
}

.b2bDarkShowcase p,
.b2bBenefitRail span,
.b2bMetricStrip span,
.b2bFooter p,
.b2bFooter a,
.b2bFooter button {
  color: #e8e3df !important;
}

.b2bDeviceMedia,
.b2bVideoPanel {
  background:
    linear-gradient(135deg, rgba(12,12,11,.78), rgba(12,12,11,.08)),
    linear-gradient(135deg, #ffffff 0%, #f6f3f1 52%, #d8d3d0 100%) !important;
}

.marketInfoBanner {
  border-style: solid !important;
}

.view360HoverLayer {
  background: rgba(12, 12, 11, .78) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #0c0c0b !important;
  box-shadow: 0 0 0 3px rgba(12, 12, 11, .12) !important;
}

.siteFooter,
.b2bFooter,
.footer {
  background: #0c0c0b !important;
  color: #fff !important;
}

/* Project image assets */
.b2bHeroVisualImage,
.b2bToolImage,
.b2bWideImage,
.b2bResourceGrid > article > img {
  border: 1px solid #d8d3d0 !important;
  border-radius: 8px !important;
  display: block !important;
  filter: grayscale(1) contrast(1.04) !important;
  object-fit: cover !important;
  width: 100% !important;
}

.b2bHeroVisualImage {
  aspect-ratio: 16 / 7 !important;
  margin: 14px 0 !important;
  min-height: 260px !important;
}

.b2bDeviceMedia {
  overflow: hidden !important;
  padding: 0 !important;
}

.b2bDeviceMedia:before,
.b2bDeviceMedia:after {
  display: none !important;
}

.b2bDeviceMedia img {
  display: block !important;
  filter: grayscale(1) contrast(1.05) !important;
  height: 100% !important;
  min-height: 260px !important;
  object-fit: cover !important;
  width: 100% !important;
}

.b2bToolImage {
  aspect-ratio: 16 / 8 !important;
  margin-bottom: 20px !important;
}

.b2bWideImage {
  aspect-ratio: 21 / 7 !important;
  margin: 0 0 18px !important;
  max-height: 360px !important;
}

.b2bVideoPanel {
  overflow: hidden !important;
}

.b2bVideoPanel img {
  filter: grayscale(1) contrast(1.05) !important;
  height: 100% !important;
  inset: 0 !important;
  object-fit: cover !important;
  position: absolute !important;
  width: 100% !important;
  z-index: 0 !important;
}

.b2bVideoPanel:after {
  background: linear-gradient(135deg, rgba(12, 12, 11, .66), rgba(12, 12, 11, .08)) !important;
  content: "" !important;
  inset: 0 !important;
  position: absolute !important;
  z-index: 1 !important;
}

.b2bVideoPanel span,
.b2bVideoPanel button {
  position: relative !important;
  z-index: 2 !important;
}

.b2bResourceGrid > article {
  overflow: hidden !important;
  padding: 0 !important;
}

.b2bResourceGrid > article > img {
  aspect-ratio: 16 / 9 !important;
  border-width: 0 0 1px 0 !important;
  border-radius: 8px 8px 0 0 !important;
}

.b2bResourceGrid > article > small,
.b2bResourceGrid > article > h3,
.b2bResourceGrid > article > p,
.b2bResourceGrid > article > .b2bArrowLink {
  margin-left: 22px !important;
  margin-right: 22px !important;
}

.b2bResourceGrid > article > small {
  margin-top: 20px !important;
}

.b2bResourceGrid > article > .b2bArrowLink {
  margin-bottom: 22px !important;
}

@media (max-width: 760px) {
  .b2bHeroVisualImage,
  .b2bDeviceMedia img,
  .b2bVideoPanel {
    min-height: 220px !important;
  }
  .b2bWideImage {
    aspect-ratio: 4 / 3 !important;
    max-height: none !important;
  }
}

/* ================= BUYER TRADE DESK UI - VIDEO REFERENCE STYLE ================= */
body:has(.buyerDeskShell){background:#fff;color:#141414}.buyerDeskShell{font-family:Inter,Arial,sans-serif;color:#161616}.buyerDeskTop{height:58px;background:#fff;border-bottom:1px solid #e8e8e8;display:grid;grid-template-columns:auto auto minmax(280px,1fr) 42px auto auto 42px auto auto 42px;gap:10px;align-items:center;padding:0 16px;position:sticky;top:0;z-index:900}.buyerDeskMenuBtn,.buyerDeskLogo,.buyerDeskIcon,.buyerDeskCart,.buyerDeskHelp,.buyerDeskUser,.buyerDeskDrop>button{height:38px;border:0;background:#fff;border-radius:4px;cursor:pointer;color:#111;font-weight:600}.buyerDeskMenuBtn{display:flex;gap:8px;align-items:center;font-size:16px}.buyerDeskMenuBtn span{font-size:13px}.buyerDeskLogo{font-size:22px}.buyerDeskLogo span{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:#050505;color:#fff;border-radius:2px;transform:rotate(45deg);font-size:15px}.buyerDeskSearch{height:40px;background:#fafafa;border:1px solid #ededed;border-radius:3px;display:flex;align-items:center;gap:8px;padding:0 13px}.buyerDeskSearch span{color:#bbb}.buyerDeskSearch input{border:0;background:transparent;width:100%;outline:0;color:#111}.buyerDeskIcon{border:1px solid transparent}.buyerDeskIcon:hover,.buyerDeskCart:hover,.buyerDeskHelp:hover,.buyerDeskDrop>button:hover{background:#f7f7f7}.buyerDeskIcon.wide{width:auto;padding:0 8px}.buyerDeskDrop{position:relative}.buyerDeskDrop>button{border-left:1px solid #eee;border-right:1px solid #eee;padding:0 10px}.buyerDeskDropdown{position:absolute;top:44px;right:0;width:270px;background:#fff;border:1px solid #ddd;box-shadow:0 16px 35px rgba(0,0,0,.18);display:none;z-index:1000;padding:8px}.buyerDeskDropdown.active{display:block}.buyerDeskDropdown button{display:block;width:100%;padding:11px 14px;text-align:left;border:0;background:#fff;cursor:pointer;font-weight:600}.buyerDeskDropdown button:hover{background:#f5f5f5}.buyerDeskCart{display:flex;align-items:center;gap:8px;border:1px solid #eee;padding:0 10px}.buyerDeskCart b,.buyerShortlistTop b{background:#111;color:#fff;border-radius:999px;min-width:18px;height:18px;font-size:11px;display:inline-flex;align-items:center;justify-content:center}.buyerDeskHelp{background:#050505;color:#fff;padding:0 14px}.buyerDeskUser{border-radius:50%;background:#313b40;color:#fff;width:36px}.buyerDeskNotice{height:42px;background:#cfe2ff;color:#1c3553;display:flex;align-items:center;justify-content:center;font-size:13px;border-bottom:1px solid #b7d2f7}.buyerDeskNotice.ok{background:#e4f8e9;color:#14612a}.buyerDeskBlackNav{height:64px;background:#050505;display:flex;align-items:center;justify-content:center;gap:0;position:sticky;top:58px;z-index:850}.buyerDeskBlackNav button{height:64px;border:0;background:transparent;color:#fff;font-weight:700;padding:0 34px;cursor:pointer;position:relative}.buyerDeskBlackNav button.active:after{content:'';position:absolute;left:20px;right:20px;bottom:0;height:3px;background:#fff}.buyerDeskBlackNav button:hover{background:#111}.buyerDeskMain{padding:18px 18px 40px;background:#fff}.buyerDeskPageTitle{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:18px;margin-bottom:14px}.buyerDeskPageTitle h1{font-size:26px;line-height:1;margin:0 8px 0 0;display:inline-block}.buyerDeskPageTitle span{font-size:14px;color:#555}.buyerDeskSaved{position:relative}.buyerDeskSaved>button,.buyerDeskViews button{border:0;background:#fff;font-weight:700;color:#333;padding:9px 10px;cursor:pointer}.buyerDeskSaved .buyerDeskDropdown.saved{right:auto;left:0;width:260px}.buyerDeskViews{display:flex;gap:10px}.buyerDeskViews button.active{color:#5d2cff}.buyerDeskToolbar{display:flex;align-items:center;gap:8px;border-bottom:1px solid #eee;padding:0 0 13px;margin-bottom:14px;position:sticky;top:164px;background:#fff;z-index:700}.buyerFilterBtn,.buyerCertInput,.buyerDeskToolbar select,.buyerQuickToggle{height:42px;border:1px solid #e1e1e1;background:#fff;border-radius:3px;padding:0 13px;color:#333;font-weight:600}.buyerFilterBtn{cursor:pointer}.buyerCertInput{width:150px;font-weight:500}.buyerDeskSort{margin-left:auto;min-width:160px}.buyerQuickToggle{cursor:pointer}.buyerQuickToggle.active{background:#111;color:#fff;border-color:#111}.buyerBulkBar{display:none;align-items:center;gap:12px;background:#111;color:#fff;padding:11px 16px;border-radius:6px;margin:0 0 12px}.buyerBulkBar.active{display:flex}.buyerBulkBar button{border:1px solid #555;background:#fff;color:#111;border-radius:4px;padding:8px 12px;cursor:pointer;font-weight:700}.buyerDeskGrid{display:grid;grid-template-columns:repeat(5,minmax(180px,1fr));gap:16px}.buyerStoneCard{border:1px solid #f0f0f0;background:#fff;position:relative;min-width:0}.buyerStoneActions{height:32px;display:flex;justify-content:flex-end;gap:8px;align-items:center;padding:0 8px}.buyerStoneActions button{border:0;background:#fff;color:#999;cursor:pointer;font-size:18px}.buyerStoneActions label{margin-right:auto}.buyerStoneActions input{display:none}.buyerStoneActions label span{display:inline-block;width:18px;height:18px;border:1px solid #ddd;border-radius:3px}.buyerStoneActions label input:checked+span{background:#111;border-color:#111}.buyerStoneMedia{height:250px;background:#cfcfcf;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.buyerStoneMedia img{width:100%;height:100%;object-fit:cover}.buyerStoneMedia span{position:absolute;left:10px;bottom:9px;background:rgba(255,255,255,.78);color:#777;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:650}.buyerStoneBody{padding:10px 12px 13px}.buyerStoneBody h3{margin:0 0 9px;font-size:15px;line-height:1.25;cursor:pointer;color:#050505}.buyerStoneNumbers{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;font-size:12px;color:#555;border-top:1px solid #eee;padding-top:8px}.buyerStoneBadges{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.buyerStoneBadges b{background:#e5faec;color:#119447;border-radius:2px;padding:4px 7px;font-size:11px}.buyerStoneBody p{display:flex;justify-content:space-between;border-top:1px solid #eee;margin:8px 0 12px;padding-top:9px;color:#444}.buyerStoneBody strong{color:#111}.buyerStoneBody small{color:#777}.buyerStoneBody>button{width:100%;height:36px;border:0;background:#050505;color:#fff;border-radius:3px;cursor:pointer;font-weight:700}.buyerStoneBody>button:disabled{background:#f2f2f2;color:#bbb;cursor:not-allowed}.buyerDeskListWrap{width:100%;overflow:auto}.buyerDeskTable{min-width:1380px;border-top:1px solid #eee;font-size:13px}.buyerDeskTableHead,.buyerDeskTableRow{display:grid;grid-template-columns:70px 90px 90px 60px 65px 80px 80px 80px 75px 75px 75px 75px 160px 100px 100px 44px;align-items:center}.buyerDeskTableHead{height:42px;background:#fff;color:#555;font-weight:650;border-bottom:1px solid #eee}.buyerDeskTableRow{min-height:48px;border-bottom:1px solid #eee;color:#343434}.buyerDeskTableRow img{width:42px;height:42px;object-fit:cover;background:#ddd}.buyerDeskTableRow button{width:28px;height:28px;border:1px solid #eee;background:#fff;cursor:pointer}.buyerDeskExpanded{display:grid;grid-template-columns:160px 260px 260px 180px 170px 220px;gap:18px;background:#fff;padding:14px 22px 18px 86px;border-bottom:1px solid #eee;box-shadow:inset 0 1px 0 #fafafa}.buyerDeskExpanded img{width:150px;height:100px;object-fit:cover;background:#ccc}.buyerDeskExpanded b{display:block;margin-bottom:8px}.buyerDeskExpanded p{line-height:1.7;color:#444;margin:0}.buyerDeskExpanded em{display:inline-block;background:#e5faec;color:#119447;border-radius:3px;padding:4px 8px;font-style:normal;font-size:12px;margin:4px 4px 0 0}.buyerDeskExpanded button{display:block;width:100%;height:34px;margin-bottom:9px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-weight:700}.buyerDeskExpanded button:last-child{background:#f8f8f8;color:#aaa}.buyerLoadMoreWrap{text-align:center;padding:26px 0}.buyerLoadMoreWrap p{color:#666}.buyerLoadMoreWrap button{border:1px solid #111;background:#fff;color:#111;border-radius:4px;padding:11px 18px;font-weight:650;cursor:pointer}.buyerDeskEmpty{grid-column:1/-1;text-align:center;padding:70px 20px;border:1px dashed #ddd;background:#fafafa}.buyerSideMenu{position:fixed;left:-320px;top:0;bottom:0;width:300px;background:#fff;box-shadow:18px 0 50px rgba(0,0,0,.2);z-index:2000;padding:22px;transition:.25s}.buyerSideMenu.active{left:0}.buyerSideMenu button{float:right;border:0;background:#fff;font-size:25px}.buyerSideMenu a{display:block;padding:13px 0;border-bottom:1px solid #eee;cursor:pointer;font-weight:700}.buyerHelpBox{position:fixed;right:20px;bottom:84px;width:270px;background:#fff;border-radius:14px;box-shadow:0 18px 45px rgba(0,0,0,.18);padding:18px;display:none;z-index:1500}.buyerHelpBox.active{display:block}.buyerHelpBox button{float:right;border:0;background:#fff;font-size:18px}.buyerHelpBox a{display:inline-block;background:#111;color:#fff;padding:10px 13px;border-radius:5px;text-decoration:none}.buyerFloatingChat{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;border:0;background:#050505;color:#fff;font-size:20px;z-index:1000;box-shadow:0 12px 35px rgba(0,0,0,.2)}.buyerFilterOverlay{justify-content:flex-start;padding:0;background:rgba(0,0,0,.55)}.buyerFilterPanel{height:100vh;width:800px;max-width:min(800px,calc(100vw - 20px));border-radius:0;box-shadow:15px 0 50px rgba(0,0,0,.25)}.buyerFilterPanel .diamondFilterHeader{height:76px}.buyerFilterPanel .filterBlock{padding:18px 22px}.buyerFilterPanel .shapeChipGrid{grid-template-columns:repeat(8,1fr)}.buyerFilterPanel .shapeChip{height:78px;border-radius:6px}.buyerFilterPanel .filterChip{border-radius:3px;min-height:31px;padding:6px 10px;font-size:13px}.filterTwoLine{display:flex;gap:32px}.buyerCalcOverlay{position:fixed;inset:0;background:rgba(0,0,0,.25);display:none;align-items:flex-start;justify-content:center;padding-top:86px;z-index:1600}.buyerCalcOverlay.active{display:flex}.buyerCalcBox{width:540px;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.18);padding:22px;position:relative}.buyerCalcBox>button:first-child{position:absolute;right:13px;top:13px;border:0;background:#fff;font-size:24px}.buyerCalcGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.buyerCalcGrid label{font-weight:650;font-size:12px}.buyerCalcGrid input,.buyerCalcGrid select{height:38px;border:1px solid #ddd;padding:0 10px;width:100%;margin-top:5px}.buyerCalcBox>button:not(:first-child){padding:9px 15px;border:1px solid #111;background:#111;color:#fff;margin-right:8px}.buyerMediaOverlay{position:fixed;inset:0;background:rgba(20,26,37,.72);display:none;align-items:center;justify-content:center;z-index:2500}.buyerMediaOverlay.active{display:flex}.buyerMediaModal{width:min(640px,94vw);background:#fff;border-radius:3px;padding:30px 38px 24px;position:relative;text-align:center}.buyerMediaClose{position:absolute;right:20px;top:16px;border:0;background:#fff;font-size:30px;cursor:pointer}.buyerMediaModal h2{font-size:21px;margin:0 0 28px}.buyerMediaStage{height:410px;background:#bbb;display:flex;align-items:center;justify-content:center;position:relative}.buyerMediaStage img,.buyerMediaStage iframe{width:100%;height:100%;object-fit:contain;border:0}.buyerMediaTools{position:absolute;right:12px;top:12px;display:grid;gap:8px}.buyerMediaTools button{width:42px;height:42px;border:0;background:#fff;border-radius:5px;box-shadow:0 2px 8px rgba(0,0,0,.12)}.buyerMediaTabs{display:flex;justify-content:center;gap:12px;margin:22px 0}.buyerMediaTabs button{width:86px;height:76px;border:1px solid #eee;background:#fff;border-radius:4px;cursor:pointer;font-size:11px}.buyerMediaTabs button.active{border-color:#5838c9;box-shadow:0 0 0 2px #ede8ff}.buyerMediaTabs img{width:48px;height:42px;object-fit:cover;display:block;margin:0 auto 4px}.certThumb{width:48px;height:42px;display:flex;align-items:center;justify-content:center;background:#fafafa;margin:0 auto 4px;color:#bbb}.buyerMediaFooter{display:flex;gap:12px;justify-content:center}.buyerMediaFooter button{height:38px;border:1px solid #111;background:#111;color:#fff;border-radius:4px;padding:0 15px;font-weight:650}.buyerMediaFooter button:last-child{background:#fff;color:#111}.buyerNoMedia{color:#777;background:#f8f8f8;padding:40px;border-radius:6px}@media(max-width:1200px){.buyerDeskGrid{grid-template-columns:repeat(3,1fr)}.buyerDeskTop{grid-template-columns:auto auto 1fr auto auto}.buyerDeskIcon.wide,.buyerDeskDrop,.buyerDeskHelp{display:none}.buyerDeskToolbar{top:164px;overflow:auto}.buyerDeskToolbar>*{flex:0 0 auto}}@media(max-width:760px){.buyerDeskGrid{grid-template-columns:1fr}.buyerDeskTop{height:auto;grid-template-columns:auto auto 1fr auto;padding:9px}.buyerDeskSearch{grid-column:1/-1}.buyerDeskBlackNav{top:100px;justify-content:flex-start;overflow:auto}.buyerDeskBlackNav button{padding:0 18px}.buyerDeskPageTitle{grid-template-columns:1fr}.buyerDeskToolbar{position:static;flex-wrap:wrap}.buyerCertInput,.buyerDeskToolbar select,.buyerFilterBtn,.buyerQuickToggle{width:100%}.buyerFilterPanel{width:100vw;max-width:100vw}.buyerFilterPanel .shapeChipGrid{grid-template-columns:repeat(3,1fr)}.buyerCalcGrid{grid-template-columns:1fr 1fr}.buyerMediaStage{height:280px}}


/* Buyer dashboard diamond media like reference screen */
.buyerDeskGrid {
  grid-template-columns: repeat(5, minmax(230px, 1fr)) !important;
  gap: 18px !important;
}

.buyerStoneCard {
  border: 1px solid #eeeeee !important;
  background: #ffffff !important;
  border-radius: 2px !important;
  overflow: hidden !important;
}

.buyerStoneMedia {
  height: 300px !important;
  background: #cfd2d3 !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.buyerStoneMedia img,
.buyerStoneMedia video,
.buyerStoneMedia iframe,
.buyerStoneMedia .diamond360Frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: #cfd2d3 !important;
}

.buyerStoneMedia span {
  position: absolute !important;
  left: 10px !important;
  bottom: 9px !important;
  z-index: 20 !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.82) !important;
  color: #777 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight:650 !important;
}

@media (max-width: 1400px) {
  .buyerDeskGrid {
    grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
  }
}

@media (max-width: 1100px) {
  .buyerDeskGrid {
    grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .buyerDeskGrid {
    grid-template-columns: 1fr !important;
  }

  .buyerStoneMedia {
    height: 280px !important;
  }
}

/* Buyer dashboard full media area fix */
.buyerStoneMedia {
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  height: 300px !important;
  background: #cfd2d3 !important;
}

.buyerStoneMedia img,
.buyerStoneMedia video,
.buyerStoneMedia iframe,
.buyerStoneMedia .diamond360Frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #cfd2d3 !important;
}

.noDiamondImage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f1f1f1 !important;
  color: #777 !important;
  font-size: 18px !important;
  font-weight:700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.buyerStoneMedia span {
  position: absolute !important;
  left: 10px !important;
  bottom: 9px !important;
  z-index: 20 !important;
}

/* =========================================================
   DPRINCY CLEAN FINAL: Buyer dashboard media / 360 frame
   - One single source of truth for buyer card media.
   - 360 stones show only grey provider frame, not image fallback.
   - Hover plays 360 inside same card; click opens centered modal.
   ========================================================= */
.buyerStoneCard .buyerStoneMedia {
  position: relative !important;
  width: 100% !important;
  height: 300px !important;
  min-height: 300px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: #bfc1c2 !important;
}

.buyerStoneCard .buyerStoneMedia.buyerStoneImageFrame {
  background: #f3f4f6 !important;
}

.buyerStoneCard .buyerStoneMedia.buyerStoneImageFrame img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #f3f4f6 !important;
}

.buyerStoneCard .buyerStoneNoMedia {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f3f4f6 !important;
  color: #777 !important;
  font-size: 14px !important;
  font-weight:650 !important;
  text-transform: uppercase !important;
  letter-spacing: .7px !important;
}

.buyerStoneCard .buyerStoneMedia.videoOnlyFrame {
  background: #bfc1c2 !important;
  cursor: pointer !important;
}

.buyerStoneCard .buyerStoneMedia.videoOnlyFrame .videoFramePlaceholder {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  background: #bfc1c2 !important;
  z-index: 1 !important;
}

.buyerStoneCard .buyerStoneMedia.videoOnlyFrame.playing360 .videoFramePlaceholder {
  opacity: 0 !important;
}

.buyerStoneCard .buyerStoneMedia.videoOnlyFrame .diamond360Crop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #bfc1c2 !important;
  z-index: 5 !important;
}

/* Reference-card crop: toolbar/icons stay outside the visible area, diamond stays smaller and centered. */
.buyerStoneCard .buyerStoneMedia.videoOnlyFrame .diamond360Crop iframe.diamond360Frame {
  position: absolute !important;
  left: 50% !important;
  top: -92px !important;
  width: 760px !important;
  height: 620px !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: translateX(-50%) scale(.76) !important;
  transform-origin: top center !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #bfc1c2 !important;
  pointer-events: auto !important;
  overflow: hidden !important;
}

.buyerStoneCard .buyerStoneMedia.videoOnlyFrame .diamond360Crop::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 28px !important;
  background: #bfc1c2 !important;
  z-index: 8 !important;
  pointer-events: none !important;
}

.buyerStoneCard .buyerStoneMedia.videoOnlyFrame > span {
  position: absolute !important;
  left: 10px !important;
  bottom: 9px !important;
  z-index: 20 !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.86) !important;
  color: #777 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight:700 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
}

.open360CenterBtn {
  display: none !important;
}

.buyer360Modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.buyer360Backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,.55) !important;
}

.buyer360Dialog {
  position: relative !important;
  width: 620px !important;
  height: 460px !important;
  max-width: calc(100vw - 28px) !important;
  max-height: calc(100vh - 28px) !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: #bfc1c2 !important;
  z-index: 2 !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.38) !important;
}

.buyer360CropModal {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  background: #bfc1c2 !important;
}

.buyer360CropModal iframe.buyer360ModalFrame {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 900px !important;
  height: 650px !important;
  max-width: none !important;
  max-height: none !important;
  transform: translate(-50%, -50%) scale(1.02) !important;
  transform-origin: center center !important;
  border: 0 !important;
  background: #bfc1c2 !important;
}

.buyer360Close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 6 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

@media (max-width: 760px) {
  .buyerStoneCard .buyerStoneMedia {
    height: 280px !important;
    min-height: 280px !important;
  }

  .buyerStoneCard .buyerStoneMedia.videoOnlyFrame .diamond360Crop iframe.diamond360Frame {
    top: -96px !important;
    width: 720px !important;
    height: 600px !important;
    transform: translateX(-50%) scale(.72) !important;
  }

  .buyer360Dialog {
    width: 94vw !important;
    height: 70vh !important;
  }
}


/* =========================================================
   DPRINCY V3: no-bottom-cut 360 card override
   This final override intentionally appears at the end so old
   duplicated rules cannot crop the bottom of the diamond.
   ========================================================= */
.buyerStoneCard .buyerStoneMedia {
  height: 325px !important;
  min-height: 325px !important;
}

.buyerStoneCard .buyerStoneMedia.videoOnlyFrame .diamond360Crop {
  inset: 0 !important;
  overflow: hidden !important;
  background: #bfc1c2 !important;
}

.buyerStoneCard .buyerStoneMedia.videoOnlyFrame .diamond360Crop iframe.diamond360Frame {
  left: 50% !important;
  top: -72px !important;
  width: 760px !important;
  height: 620px !important;
  transform: translateX(-50%) scale(.68) !important;
  transform-origin: top center !important;
}

/* Keep only a very small cover so provider toolbar does not hide the stone bottom. */
.buyerStoneCard .buyerStoneMedia.videoOnlyFrame .diamond360Crop::after {
  height: 8px !important;
  background: #bfc1c2 !important;
}

@media (max-width: 760px) {
  .buyerStoneCard .buyerStoneMedia {
    height: 315px !important;
    min-height: 315px !important;
  }

  .buyerStoneCard .buyerStoneMedia.videoOnlyFrame .diamond360Crop iframe.diamond360Frame {
    top: -72px !important;
    width: 720px !important;
    height: 600px !important;
    transform: translateX(-50%) scale(.66) !important;
  }
}

/* =========================================================
   Buyer shape filter - exact uploaded SVG asset icons
   Source file: public/assets/diamond-shape-grid-exact.svg
   Each button icon is generated from the uploaded shape grid.
   ========================================================= */
.buyerFilterPanel .shapeFilterBlock,
.diamondFilterPanel .shapeFilterBlock {
  padding-top: 18px !important;
}

.buyerFilterPanel .shapeChipGrid,
.diamondFilterPanel .shapeChipGrid {
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 8px 11px !important;
}

.buyerFilterPanel .shapeChip,
.diamondFilterPanel .shapeChip {
  min-width: 0 !important;
  height: 74px !important;
  padding: 7px 5px 6px !important;
  border: 1px solid #cfd5de !important;
  border-radius: 6px !important;
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  color: #202124 !important;
  box-shadow: none !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

.buyerFilterPanel .shapeChip:hover,
.diamondFilterPanel .shapeChip:hover {
  border-color: #aeb7c2 !important;
  background: #fbfdff !important;
}

.buyerFilterPanel .shapeChip.active,
.diamondFilterPanel .shapeChip.active {
  border-color: #7fb4ff !important;
  background: #eef6ff !important;
  color: #111827 !important;
  box-shadow: 0 0 0 1px rgba(59,130,246,.10) inset !important;
}

.buyerFilterPanel .shapeChipIcon,
.diamondFilterPanel .shapeChipIcon {
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #222 !important;
  flex: 0 0 34px !important;
}

.buyerFilterPanel .shapeChipIcon img,
.diamondFilterPanel .shapeChipIcon img {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
  display: block !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.buyerFilterPanel .shapeChip small,
.diamondFilterPanel .shapeChip small {
  font-size: 11px !important;
  line-height: 1.1 !important;
  text-align: center !important;
  color: #111827 !important;
  font-weight:600 !important;
  display: block !important;
  max-width: 100% !important;
  min-height: 12px !important;
  word-break: normal !important;
}

.shapeToggleWrap {
  display: flex !important;
  justify-content: center !important;
  padding-top: 15px !important;
}

.shapeToggleBtn {
  border: 0 !important;
  background: transparent !important;
  color: #222 !important;
  font-size: 14px !important;
  font-weight:700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
}

.shapeToggleBtn i {
  font-style: normal !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.shapeChip.shapeHidden {
  display: none !important;
}

@media (max-width: 1100px) {
  .buyerFilterPanel .shapeChipGrid,
  .diamondFilterPanel .shapeChipGrid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .buyerFilterPanel .shapeChipGrid,
  .diamondFilterPanel .shapeChipGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .buyerFilterPanel .shapeChip,
  .diamondFilterPanel .shapeChip {
    height: 78px !important;
  }
}

@media (max-width: 520px) {
  .buyerFilterPanel .shapeChipGrid,
  .diamondFilterPanel .shapeChipGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   DPRINCY FINAL: Buyer Main Filter UI exactly like reference
   Only affects buyer filter modal, not seller/admin/backend.
   ========================================================= */
.buyerFilterOverlay {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  background: rgba(0,0,0,.10) !important;
}

.buyerExactMainFilterPanel {
  width: 792px !important;
  max-width: min(792px, 100vw) !important;
  height: 100vh !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: #fff !important;
  box-shadow: 8px 0 28px rgba(0,0,0,.10) !important;
  color: #2d2f33 !important;
  font-family: Inter, Arial, sans-serif !important;
}

.buyerExactMainFilterPanel .diamondFilterHeader {
  height: 68px !important;
  min-height: 68px !important;
  padding: 0 14px 0 18px !important;
  background: #fff !important;
  border-bottom: 1px solid #eeeeee !important;
}

.buyerExactMainFilterPanel .diamondFilterHeader h3 {
  margin: 0 0 4px !important;
  color: #202225 !important;
  font-size: 16px !important;
  font-weight:650 !important;
  line-height: 1.1 !important;
}

.buyerExactMainFilterPanel .diamondFilterHeader p {
  margin: 0 !important;
  color: #5b5e66 !important;
  font-size: 12px !important;
  font-weight:700 !important;
  text-transform: none !important;
}

.buyerExactMainFilterPanel .filterTabGroup {
  border: 1px solid #dce1e8 !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  background: #fff !important;
}

.buyerExactMainFilterPanel .filterTabGroup button {
  height: 40px !important;
  min-width: 54px !important;
  padding: 0 13px !important;
  border: 0 !important;
  border-left: 1px solid #dce1e8 !important;
  background: #fff !important;
  color: #111 !important;
  font-size: 13px !important;
  font-weight:700 !important;
  border-radius: 0 !important;
}

.buyerExactMainFilterPanel .filterTabGroup button:first-child { border-left: 0 !important; }
.buyerExactMainFilterPanel .filterTabGroup button.active {
  background: #eef4ff !important;
  color: #111 !important;
  border-color: #9bb5e6 !important;
  box-shadow: inset 0 0 0 1px #89a7dd !important;
}

.buyerExactMainFilterPanel .filterCloseBtn {
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #c9ced8 !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

.buyerExactMainFilterPanel .diamondFilterBody {
  background: #fff !important;
  overflow-y: auto !important;
  padding: 0 !important;
}

.buyerExactMainFilterPanel .filterBlock {
  padding: 24px 18px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  background: #fff !important;
}

.buyerExactMainFilterPanel .filterBlock h3 {
  margin: 0 0 13px !important;
  color: #2e3034 !important;
  font-size: 16px !important;
  font-weight:650 !important;
  letter-spacing: .01em !important;
}

.buyerExactMainFilterPanel .filterBlock h4,
.buyerExactMainFilterPanel .innerFilterBlock h4 {
  margin: 0 0 9px !important;
  color: #3e4148 !important;
  font-size: 14px !important;
  font-weight:500 !important;
}

.buyerExactMainFilterPanel .chipWrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 7px !important;
  align-items: center !important;
}

.buyerExactMainFilterPanel .filterChip {
  min-height: 28px !important;
  height: auto !important;
  padding: 4px 9px !important;
  border: 1px solid #d4d9e1 !important;
  border-radius: 3px !important;
  background: #fff !important;
  color: #2a2d33 !important;
  font-size: 14px !important;
  font-weight:500 !important;
  line-height: 18px !important;
  box-shadow: none !important;
}

.buyerExactMainFilterPanel .filterChip:hover,
.buyerExactMainFilterPanel .filterChip.active {
  background: #eef4ff !important;
  border-color: #8fb0ea !important;
  color: #111 !important;
  box-shadow: none !important;
}

.buyerExactMainFilterPanel .filterSwitchRow,
.buyerExactMainFilterPanel .filterTwoLine {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  margin-top: 18px !important;
  flex-wrap: wrap !important;
}

.buyerExactMainFilterPanel .buyerSwitchLine,
.buyerExactMainFilterPanel .switchLine {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  min-height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #4a4d55 !important;
  font-size: 13px !important;
  font-weight:500 !important;
  cursor: pointer !important;
}

.buyerExactMainFilterPanel .buyerSwitchLine span,
.buyerExactMainFilterPanel .switchLine span {
  position: relative !important;
  display: inline-block !important;
  width: 32px !important;
  height: 19px !important;
  flex: 0 0 32px !important;
  border-radius: 999px !important;
  background: #a4a7b1 !important;
}

.buyerExactMainFilterPanel .buyerSwitchLine span:after,
.buyerExactMainFilterPanel .switchLine span:after {
  content: '' !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 13px !important;
  height: 13px !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: .18s ease !important;
}

.buyerExactMainFilterPanel .buyerSwitchLine.on span,
.buyerExactMainFilterPanel .switchLine.on span,
.buyerExactMainFilterPanel .buyerSwitchLine.active span,
.buyerExactMainFilterPanel .switchLine.active span {
  background: #2b2b2b !important;
}

.buyerExactMainFilterPanel .buyerSwitchLine.on span:after,
.buyerExactMainFilterPanel .switchLine.on span:after,
.buyerExactMainFilterPanel .buyerSwitchLine.active span:after,
.buyerExactMainFilterPanel .switchLine.active span:after {
  left: 16px !important;
}

/* Shape section */
.buyerExactMainFilterPanel .shapeFilterBlock { padding-top: 24px !important; }
.buyerExactMainFilterPanel .shapeChipGrid {
  display: grid !important;
  grid-template-columns: repeat(8, 82px) !important;
  gap: 9px 12px !important;
  justify-content: start !important;
  align-items: start !important;
}

.buyerExactMainFilterPanel .shapeChip {
  width: 82px !important;
  height: 74px !important;
  min-width: 82px !important;
  padding: 5px 4px 6px !important;
  border: 1px solid #d4d8de !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #111 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  box-shadow: none !important;
}

.buyerExactMainFilterPanel .shapeChipIcon {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

.buyerExactMainFilterPanel .shapeChipIcon img,
.buyerExactMainFilterPanel .shapeChipIcon svg {
  width: 42px !important;
  height: 42px !important;
  display: block !important;
  object-fit: contain !important;
  transform: scale(1.08) !important;
  transform-origin: center center !important;
}

.buyerExactMainFilterPanel .shapeChip small {
  display: block !important;
  color: #111 !important;
  font-size: 11px !important;
  font-weight:500 !important;
  line-height: 1 !important;
  text-align: center !important;
  max-width: 100% !important;
  margin-top: 0 !important;
}

.buyerExactMainFilterPanel .shapeChip:hover,
.buyerExactMainFilterPanel .shapeChip.active {
  background: #fff !important;
  border-color: #111 !important;
  color: #111 !important;
}

.buyerExactMainFilterPanel .shapeHidden { display: none !important; }
.buyerExactMainFilterPanel .shapeToggleWrap,
.buyerExactMainFilterPanel .filterMoreLess {
  display: flex !important;
  justify-content: center !important;
  padding-top: 14px !important;
}

.buyerExactMainFilterPanel .shapeToggleBtn,
.buyerExactMainFilterPanel .filterMoreLess button {
  border: 0 !important;
  background: transparent !important;
  color: #111 !important;
  font-size: 13px !important;
  font-weight:650 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}

.buyerExactMainFilterPanel .shapeToggleBtn i,
.buyerExactMainFilterPanel .filterMoreLess i { font-style: normal !important; }

/* Carat */
.buyerExactMainFilterPanel .caratExactGrid {
  display: grid !important;
  grid-template-columns: 254px 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}

.buyerExactMainFilterPanel .buyerRangePair {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  padding-right: 24px !important;
  border-right: 1px solid #f0f0f0 !important;
}

.buyerExactMainFilterPanel .buyerRangePair label {
  display: block !important;
}

.buyerExactMainFilterPanel .buyerRangePair em {
  display: block !important;
  margin: 0 0 5px !important;
  font-style: normal !important;
  color: #444850 !important;
  font-size: 13px !important;
  font-weight:500 !important;
}

.buyerExactMainFilterPanel .buyerRangePair span {
  display: flex !important;
  align-items: center !important;
  height: 32px !important;
  border: 1px solid #d7dce4 !important;
  border-radius: 3px !important;
  background: #fff !important;
  overflow: hidden !important;
}

.buyerExactMainFilterPanel .buyerRangePair input {
  width: 100% !important;
  min-width: 0 !important;
  height: 30px !important;
  border: 0 !important;
  outline: 0 !important;
  padding: 0 9px !important;
  background: transparent !important;
  color: #333 !important;
  font-size: 13px !important;
}

.buyerExactMainFilterPanel .buyerRangePair input::placeholder { color: #8c929b !important; }
.buyerExactMainFilterPanel .buyerRangePair b {
  padding: 0 8px 0 4px !important;
  color: #555 !important;
  font-size: 11px !important;
  font-weight:500 !important;
}

.buyerExactMainFilterPanel .caratPresets { gap: 10px 8px !important; }
.buyerExactMainFilterPanel .caratPresets .filterChip { min-width: 47px !important; text-align: center !important; }

/* Colour / clarity */
.buyerExactMainFilterPanel .filterTwoCol {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}

.buyerExactMainFilterPanel .filterTwoCol > .filterBlock:first-child {
  border-right: 1px solid #f0f0f0 !important;
}

.buyerExactMainFilterPanel .colourClarityRow .filterBlock,
.buyerExactMainFilterPanel .fluorescenceExactRow .filterBlock {
  border-bottom: 1px solid #f0f0f0 !important;
}

.buyerExactMainFilterPanel .mainFilterRadioRow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: 120px !important;
  margin-top: -38px !important;
  margin-bottom: 18px !important;
}

.buyerExactMainFilterPanel .mainFilterRadioRow button {
  border: 0 !important;
  background: transparent !important;
  color: #333 !important;
  font-size: 16px !important;
  font-weight:500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  cursor: pointer !important;
}

.buyerExactMainFilterPanel .mainFilterRadioRow span {
  width: 16px !important;
  height: 16px !important;
  border: 1px solid #ccd1d9 !important;
  border-radius: 50% !important;
  background: #fff !important;
  position: relative !important;
}

.buyerExactMainFilterPanel .mainFilterRadioRow button.active span {
  border-color: #6d28d9 !important;
  background: #6d28d9 !important;
}

.buyerExactMainFilterPanel .mainFilterRadioRow button.active span:after {
  content: '' !important;
  position: absolute !important;
  left: 5px !important;
  top: 5px !important;
  width: 4px !important;
  height: 4px !important;
  background: #fff !important;
  border-radius: 50% !important;
}

.buyerExactMainFilterPanel .buyerFancySelect {
  width: 100% !important;
  height: 41px !important;
  margin: 0 0 14px !important;
  padding: 0 12px !important;
  border: 1px solid #d5d9e0 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #777 !important;
  font-size: 14px !important;
  outline: 0 !important;
}

/* Cut, fluorescence, eye clean, shade */
.buyerExactMainFilterPanel .quickCutRow { margin-bottom: 13px !important; }
.buyerExactMainFilterPanel .cutPolishSymGrid,
.buyerExactMainFilterPanel .shadeLusterGrid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
}

.buyerExactMainFilterPanel .innerFilterBlock {
  padding: 0 24px 0 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: #fff !important;
}

.buyerExactMainFilterPanel .cutPolishSymGrid .innerFilterBlock:not(:last-child),
.buyerExactMainFilterPanel .shadeLusterGrid .innerFilterBlock:not(:last-child) {
  border-right: 1px solid #f0f0f0 !important;
  margin-right: 24px !important;
}

.buyerExactMainFilterPanel .fluorescenceExactRow h3 { margin-bottom: 16px !important; }
.buyerExactMainFilterPanel .eyeCleanInline {
  gap: 9px !important;
}
.buyerExactMainFilterPanel .eyeCleanInline .buyerSwitchLine {
  margin-left: 8px !important;
}

.buyerExactMainFilterPanel .shadeTopRow {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 18px !important;
  flex-wrap: wrap !important;
}

.buyerExactMainFilterPanel .filterInfoDot {
  width: 16px !important;
  height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #c7cbd3 !important;
  border-radius: 50% !important;
  color: #9096a1 !important;
  font-size: 11px !important;
  font-weight:700 !important;
}

.buyerExactMainFilterPanel .filterMoreLess {
  padding: 16px 18px 22px !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

/* Price */
.buyerExactMainFilterPanel .priceExactGrid {
  display: grid !important;
  grid-template-columns: 138px 340px !important;
  gap: 24px !important;
  align-items: end !important;
}

.buyerExactMainFilterPanel .priceTabs {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid #d5d9e0 !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  width: max-content !important;
}

.buyerExactMainFilterPanel .priceTabs button {
  height: 32px !important;
  padding: 0 11px !important;
  border: 0 !important;
  border-left: 1px solid #d5d9e0 !important;
  background: #fff !important;
  color: #111 !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

.buyerExactMainFilterPanel .priceTabs button:first-child { border-left: 0 !important; }
.buyerExactMainFilterPanel .priceTabs button.active {
  background: #eef4ff !important;
  box-shadow: inset 0 0 0 1px #89a7dd !important;
}

.buyerExactMainFilterPanel .pricePerCtHidden {
  display: none !important;
}

/* Footer */
.buyerExactMainFilterPanel .diamondFilterFooter {
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 18px !important;
  border-top: 1px solid #eeeeee !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 9px !important;
}

.buyerExactMainFilterPanel .diamondFilterFooter .btn {
  height: 38px !important;
  border-radius: 4px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight:650 !important;
}

.buyerExactMainFilterPanel .diamondFilterFooter .btn.light {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #d5d9e0 !important;
}

.buyerExactMainFilterPanel .diamondFilterFooter .btn:not(.light) {
  background: #050505 !important;
  color: #fff !important;
  border: 1px solid #050505 !important;
}

@media (max-width: 820px) {
  .buyerExactMainFilterPanel {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  .buyerExactMainFilterPanel .shapeChipGrid {
    grid-template-columns: repeat(4, 82px) !important;
  }
  .buyerExactMainFilterPanel .caratExactGrid,
  .buyerExactMainFilterPanel .filterTwoCol,
  .buyerExactMainFilterPanel .cutPolishSymGrid,
  .buyerExactMainFilterPanel .shadeLusterGrid,
  .buyerExactMainFilterPanel .priceExactGrid {
    grid-template-columns: 1fr !important;
  }
  .buyerExactMainFilterPanel .buyerRangePair,
  .buyerExactMainFilterPanel .filterTwoCol > .filterBlock:first-child,
  .buyerExactMainFilterPanel .cutPolishSymGrid .innerFilterBlock:not(:last-child),
  .buyerExactMainFilterPanel .shadeLusterGrid .innerFilterBlock:not(:last-child) {
    border-right: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
  .buyerExactMainFilterPanel .mainFilterRadioRow {
    margin-left: 0 !important;
    margin-top: 0 !important;
  }
}

/* =========================================================
   FINAL QA PATCH: Main + Advanced diamond filters
   Fixes white colour chips, price bottom line alignment,
   footer alignment, and clean section layout without touching
   buyer card, seller, admin, or backend UI.
   ========================================================= */
.buyerExactMainFilterPanel {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  background: #fff !important;
}

.buyerExactMainFilterPanel .diamondFilterBody {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  background: #fff !important;
}

.buyerExactMainFilterPanel .diamondFilterFooter {
  flex: 0 0 64px !important;
  margin: 0 !important;
  border-top: 1px solid #eeeeee !important;
  background: #fff !important;
  box-shadow: none !important;
}

.buyerExactMainFilterPanel .filterBlock {
  margin: 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
  box-shadow: none !important;
}

.buyerExactMainFilterPanel .colourTitleRow {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  margin: 0 0 14px !important;
}

.buyerExactMainFilterPanel .colourTitleRow h3 {
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.buyerExactMainFilterPanel .colourTitleRow .mainFilterRadioRow {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.buyerExactMainFilterPanel .whiteColorArea {
  display: block !important;
  margin: 0 0 14px !important;
}

.buyerExactMainFilterPanel .whiteColorArea h4,
.buyerExactMainFilterPanel .fancyColorArea h4 {
  margin: 0 0 8px !important;
  color: #454545 !important;
  font-size: 14px !important;
  font-weight:500 !important;
}

.buyerExactMainFilterPanel .whiteColorChipRow {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

.buyerExactMainFilterPanel .whiteColorChipRow + input#color {
  display: none !important;
}

.buyerExactMainFilterPanel .fancyColorArea {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

.buyerExactMainFilterPanel .colourExactBlock.isWhiteColorMode .fancyColorArea {
  opacity: .62 !important;
}

.buyerExactMainFilterPanel .colourExactBlock.isFancyColorMode .whiteColorArea {
  opacity: .62 !important;
}

.buyerExactMainFilterPanel .buyerFancySelect {
  margin-bottom: 10px !important;
}

.buyerExactMainFilterPanel .priceExactBlock {
  border-bottom: 0 !important;
  padding-bottom: 22px !important;
}

.buyerExactMainFilterPanel .priceExactGrid {
  display: grid !important;
  grid-template-columns: 138px minmax(260px, 340px) !important;
  gap: 24px !important;
  align-items: end !important;
}

.buyerExactMainFilterPanel .priceRangeMode {
  min-width: 0 !important;
}

.buyerExactMainFilterPanel .priceRangeMode.hidden {
  display: none !important;
}

.buyerExactMainFilterPanel .priceExactBlock .buyerRangePair {
  border-right: 0 !important;
  padding-right: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.buyerExactMainFilterPanel .filterMoreLess {
  margin: 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
  background: #fff !important;
}

.buyerExactMainFilterPanel .shapeFilterBlock .shapeChipGrid {
  justify-content: start !important;
}

.buyerExactMainFilterPanel .shapeChipIcon,
.buyerExactMainFilterPanel .shapeChipIcon img,
.buyerExactMainFilterPanel .shapeChipIcon svg {
  width: 42px !important;
  height: 42px !important;
}

.buyerExactMainFilterPanel #advancedFilterPane .filterBlock,
.buyerExactMainFilterPanel #advancedFilterPane .innerFilterBlock {
  border-bottom: 1px solid #f0f0f0 !important;
}

.buyerExactMainFilterPanel #advancedFilterPane .filterTwoCol,
.buyerExactMainFilterPanel #advancedFilterPane .filterThreeCol,
.buyerExactMainFilterPanel #advancedFilterPane .parameterGrid {
  gap: 18px !important;
}

@media (max-width: 820px) {
  .buyerExactMainFilterPanel .colourTitleRow {
    display: block !important;
  }
  .buyerExactMainFilterPanel .colourTitleRow .mainFilterRadioRow {
    margin-top: 8px !important;
  }
  .buyerExactMainFilterPanel .priceExactGrid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* =========================================================
   FINAL MICRO PATCH: exact INR price row + cut preset row
   ========================================================= */
.buyerExactMainFilterPanel .certificateExactBlock .filterChip:first-child,
.buyerExactMainFilterPanel button[onclick*="certificateLab"][onclick*="Any-cert"] {
  text-transform: none !important;
}

.buyerExactMainFilterPanel .cutExactBlock .quickCutRow {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 13px !important;
}

.buyerExactMainFilterPanel .cutExactBlock .quickCutRow .filterChip {
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 8px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  line-height: 24px !important;
}

.buyerExactMainFilterPanel .priceExactBlock {
  padding: 22px 18px 20px !important;
  border-bottom: 0 !important;
}

.buyerExactMainFilterPanel .priceExactBlock h3 {
  margin: 0 0 16px !important;
}

.buyerExactMainFilterPanel .priceExactGrid {
  display: flex !important;
  align-items: flex-end !important;
  gap: 28px !important;
  min-height: 54px !important;
}

.buyerExactMainFilterPanel .priceExactGrid .priceTabs {
  flex: 0 0 auto !important;
  height: 32px !important;
  margin: 0 !important;
  align-self: flex-end !important;
}

.buyerExactMainFilterPanel .priceExactGrid .priceRangeMode {
  flex: 0 0 auto !important;
  min-width: 340px !important;
  margin: 0 !important;
  align-self: flex-end !important;
}

.buyerExactMainFilterPanel .priceExactGrid .priceRangeMode.hidden {
  display: none !important;
}

.buyerExactMainFilterPanel .priceExactBlock .buyerRangePair {
  display: grid !important;
  grid-template-columns: 165px 165px !important;
  gap: 8px !important;
  align-items: end !important;
  margin: 0 !important;
  padding: 0 !important;
  border-right: 0 !important;
}

.buyerExactMainFilterPanel .priceExactBlock .buyerRangePair label {
  margin: 0 !important;
  display: block !important;
}

.buyerExactMainFilterPanel .priceExactBlock .buyerRangePair em {
  height: 18px !important;
  display: block !important;
  margin: 0 0 4px !important;
  line-height: 18px !important;
}

.buyerExactMainFilterPanel .priceExactBlock .buyerRangePair span {
  height: 32px !important;
}

.buyerDeskDrop.buyerCurrencyFixed button {
  cursor: default !important;
  pointer-events: none !important;
}

@media (max-width: 820px) {
  .buyerExactMainFilterPanel .priceExactGrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: start !important;
  }
  .buyerExactMainFilterPanel .priceExactGrid .priceRangeMode {
    min-width: 0 !important;
    width: 100% !important;
  }
  .buyerExactMainFilterPanel .priceExactBlock .buyerRangePair {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   FINAL ADVANCED FILTER EXACT PATCH
   Matches requested advanced filter screenshots.
   ========================================================= */
.buyerExactMainFilterPanel #advancedFilterPane {
  background: #fff !important;
}

.buyerExactMainFilterPanel #advancedFilterPane .filterBlock,
.buyerExactMainFilterPanel #advancedFilterPane .innerFilterBlock {
  margin: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
}

.buyerExactMainFilterPanel #advancedFilterPane > .filterBlock,
.buyerExactMainFilterPanel #advancedFilterPane > .filterTwoCol {
  border-bottom: 1px solid #f0f0f0 !important;
}

.buyerExactMainFilterPanel #advancedFilterPane .filterChip {
  min-height: 26px !important;
  height: 26px !important;
  padding: 2px 8px !important;
  border: 1px solid #d4d9e1 !important;
  border-radius: 3px !important;
  background: #fff !important;
  color: #2c2f35 !important;
  font-size: 14px !important;
  font-weight:500 !important;
  line-height: 20px !important;
}

.buyerExactMainFilterPanel #advancedFilterPane .filterChip.active,
.buyerExactMainFilterPanel #advancedFilterPane .filterChip:hover {
  background: #eef4ff !important;
  border-color: #8faee7 !important;
  color: #111 !important;
}

.buyerExactMainFilterPanel #advancedFilterPane .chipWrap {
  gap: 8px 7px !important;
  align-items: center !important;
}

.buyerExactMainFilterPanel .advancedParameterBlock {
  padding: 22px 24px 18px !important;
}

.buyerExactMainFilterPanel .advancedParameterBlock h3 {
  margin-bottom: 17px !important;
}

.buyerExactMainFilterPanel .advancedParamTop {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 24px !important;
  padding-bottom: 23px !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.buyerExactMainFilterPanel .advancedParamBottom {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 24px !important;
  padding-top: 20px !important;
}

.buyerExactMainFilterPanel .advancedTwoStack,
.buyerExactMainFilterPanel .advancedRatioStack {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 13px !important;
}

.buyerExactMainFilterPanel .advancedRangeBox label,
.buyerExactMainFilterPanel .advancedPresetRatio label {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 0 8px !important;
  color: #3c3f45 !important;
  font-size: 14px !important;
  font-weight:500 !important;
  line-height: 1.1 !important;
}

.buyerExactMainFilterPanel .advancedRangeInputs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.buyerExactMainFilterPanel .advancedRangeInputs input {
  width: 100% !important;
  height: 24px !important;
  border: 1px solid #d4d9e1 !important;
  border-radius: 3px !important;
  background: #fff !important;
  color: #2f3339 !important;
  padding: 0 8px !important;
  font-size: 13px !important;
  outline: 0 !important;
}

.buyerExactMainFilterPanel .advancedRangeInputs input::placeholder {
  color: #8a8f98 !important;
  font-weight:600 !important;
}

.buyerExactMainFilterPanel .advancedPresetRatio .chipWrap {
  gap: 0 !important;
}

.buyerExactMainFilterPanel .advancedPresetRatio .filterChip {
  min-width: 82px !important;
  border-radius: 0 !important;
}

.buyerExactMainFilterPanel .advancedPresetRatio .filterChip:first-child {
  border-radius: 3px 0 0 3px !important;
}

.buyerExactMainFilterPanel .advancedPresetRatio .filterChip:nth-child(2) {
  border-left: 0 !important;
  border-radius: 0 3px 3px 0 !important;
}

.buyerExactMainFilterPanel .advancedInfoDot {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  border: 1px solid #cfd4dc !important;
  color: #a5abb4 !important;
  font-size: 10px !important;
  font-weight:650 !important;
  line-height: 1 !important;
}

.buyerExactMainFilterPanel .advancedFullBlock {
  padding: 23px 24px 32px !important;
}

.buyerExactMainFilterPanel .advancedFullBlock h3 {
  margin-bottom: 14px !important;
}

.buyerExactMainFilterPanel .advancedTwoColumnBlock {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.buyerExactMainFilterPanel .advancedTwoColumnBlock > .innerFilterBlock {
  padding: 22px 24px 32px !important;
  border-bottom: 0 !important;
}

.buyerExactMainFilterPanel .advancedTwoColumnBlock > .innerFilterBlock:first-child {
  border-right: 1px solid #f0f0f0 !important;
}

.buyerExactMainFilterPanel .locationMarketBlock > .innerFilterBlock {
  padding-top: 24px !important;
  min-height: 126px !important;
}

.buyerExactMainFilterPanel .advancedSelect {
  width: 344px !important;
  max-width: 100% !important;
  height: 40px !important;
  border: 1px solid #111 !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: #333 !important;
  padding: 0 38px 0 10px !important;
  font-size: 14px !important;
  outline: 0 !important;
}

.buyerExactMainFilterPanel .advancedBlankCell {
  min-height: 126px !important;
}

.buyerExactMainFilterPanel .advancedInfoChipWrap {
  gap: 8px 7px !important;
}

.buyerExactMainFilterPanel .advancedInfoChipWrap .advancedInfoDot {
  margin-right: 4px !important;
}

.buyerExactMainFilterPanel .advancedInclusionBlock,
.buyerExactMainFilterPanel .advancedOpenInclusionBlock {
  padding: 22px 24px 31px !important;
}

.buyerExactMainFilterPanel .advancedInclusionOverall {
  margin-bottom: 22px !important;
}

.buyerExactMainFilterPanel .advancedInclusionGrid {
  display: grid !important;
  grid-template-columns: 1.05fr 1.05fr .7fr !important;
  gap: 0 !important;
}

.buyerExactMainFilterPanel .advancedOpenGrid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
}

.buyerExactMainFilterPanel .advancedInclusionGrid .innerFilterBlock,
.buyerExactMainFilterPanel .advancedOpenGrid .innerFilterBlock {
  padding: 0 24px !important;
  border-bottom: 0 !important;
}

.buyerExactMainFilterPanel .advancedInclusionGrid .innerFilterBlock:first-child,
.buyerExactMainFilterPanel .advancedOpenGrid .innerFilterBlock:first-child {
  padding-left: 0 !important;
}

.buyerExactMainFilterPanel .advancedInclusionGrid .innerFilterBlock:not(:last-child),
.buyerExactMainFilterPanel .advancedOpenGrid .innerFilterBlock:not(:last-child) {
  border-right: 1px solid #f0f0f0 !important;
}

.buyerExactMainFilterPanel .advancedInclusionGrid .innerFilterBlock h4,
.buyerExactMainFilterPanel .advancedOpenGrid .innerFilterBlock h4 {
  margin-bottom: 13px !important;
}

.buyerExactMainFilterPanel .advancedKeyBlock {
  padding: 22px 24px 31px !important;
  border-bottom: 0 !important;
}

.buyerExactMainFilterPanel .advancedKeyBlock .keyModeRow {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 0 0 13px !important;
}

.buyerExactMainFilterPanel .advancedKeyBlock .switchLine {
  margin-left: 8px !important;
}

.buyerExactMainFilterPanel .advancedKeyBlock .switchLine span {
  width: 32px !important;
  height: 19px !important;
  flex: 0 0 32px !important;
}

@media (max-width: 820px) {
  .buyerExactMainFilterPanel .advancedParamTop,
  .buyerExactMainFilterPanel .advancedParamBottom,
  .buyerExactMainFilterPanel .advancedTwoColumnBlock,
  .buyerExactMainFilterPanel .advancedInclusionGrid,
  .buyerExactMainFilterPanel .advancedOpenGrid {
    grid-template-columns: 1fr !important;
  }

  .buyerExactMainFilterPanel .advancedTwoColumnBlock > .innerFilterBlock:first-child,
  .buyerExactMainFilterPanel .advancedInclusionGrid .innerFilterBlock:not(:last-child),
  .buyerExactMainFilterPanel .advancedOpenGrid .innerFilterBlock:not(:last-child) {
    border-right: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }

  .buyerExactMainFilterPanel .advancedInclusionGrid .innerFilterBlock,
  .buyerExactMainFilterPanel .advancedOpenGrid .innerFilterBlock {
    padding: 14px 0 !important;
  }

  .buyerExactMainFilterPanel .advancedSelect {
    width: 100% !important;
  }
}

/* =========================================================
   FINAL FIX: buyer desk image first, full 360 frame on hover
   - still image visible first
   - hover plays iframe in same box
   - provider controls hidden below crop
   - diamond kept fully inside grey frame with border around
   ========================================================= */
.buyerStoneCard .buyerStoneMedia {
  position: relative !important;
  overflow: hidden !important;
  height: 338px !important;
  min-height: 338px !important;
  background: #c3c5c8 !important;
}

.buyerStoneCard .buyerStoneMedia .buyerStoneStillImage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #eef1f3 !important;
  transition: opacity .16s ease !important;
  z-index: 1 !important;
}

.buyerStoneCard .buyerStoneMedia.videoOnlyFrame .videoFramePlaceholder {
  position: absolute !important;
  inset: 0 !important;
  display: none !important;
  background: #c3c5c8 !important;
  z-index: 2 !important;
}

.buyerStoneCard .buyerStoneMedia.videoOnlyFrame.playing360 .videoFramePlaceholder {
  display: block !important;
}

.buyerStoneCard .buyerStoneMedia.videoOnlyFrame .diamond360Crop {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  background: #c3c5c8 !important;
  z-index: 3 !important;
}

.buyerStoneCard .buyerStoneMedia.videoOnlyFrame .diamond360Crop iframe.diamond360Frame {
  position: absolute !important;
  left: 50% !important;
  top: -84px !important;
  width: 760px !important;
  height: 700px !important;
  max-width: none !important;
  max-height: none !important;
  transform: translateX(-50%) scale(.62) !important;
  transform-origin: top center !important;
  border: 0 !important;
  background: #c3c5c8 !important;
}

.buyerStoneCard .buyerStoneMedia.videoOnlyFrame .diamond360Crop::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 78px !important;
  background: #c3c5c8 !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

.buyerStoneCard .buyerStoneMedia.videoOnlyFrame > span {
  z-index: 6 !important;
}

@media (max-width: 760px) {
  .buyerStoneCard .buyerStoneMedia {
    height: 330px !important;
    min-height: 330px !important;
  }

  .buyerStoneCard .buyerStoneMedia.videoOnlyFrame .diamond360Crop iframe.diamond360Frame {
    top: -92px !important;
    width: 720px !important;
    height: 680px !important;
    transform: translateX(-50%) scale(.60) !important;
  }

  .buyerStoneCard .buyerStoneMedia.videoOnlyFrame .diamond360Crop::after {
    height: 82px !important;
  }
}

/* =========================================================
   FINAL EXACT 360 FIX: show full Vision360 viewer, no crop
   User reference: full grey viewer + bottom controls visible.
   ========================================================= */
.buyerStoneCard .buyerStoneMedia {
  height: 420px !important;
  min-height: 420px !important;
  background: #c3c5c8 !important;
  overflow: hidden !important;
}

.buyerStoneCard .buyerStoneMedia.videoOnlyFrame .diamond360Crop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #fff !important;
  z-index: 3 !important;
}

.buyerStoneCard .buyerStoneMedia.videoOnlyFrame .diamond360Crop iframe.diamond360Frame {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: none !important;
  transform-origin: center center !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  display: block !important;
}

.buyerStoneCard .buyerStoneMedia.videoOnlyFrame .diamond360Crop::after {
  display: none !important;
  content: none !important;
  height: 0 !important;
}

.buyerStoneCard .buyerStoneMedia.videoOnlyFrame.playing360 > span {
  display: none !important;
}

.buyerStoneCard .buyerStoneMedia.videoOnlyFrame .videoFramePlaceholder,
.buyerStoneCard .buyerStoneMedia.videoOnlyFrame.playing360 .videoFramePlaceholder {
  background: #c3c5c8 !important;
}

@media (max-width: 760px) {
  .buyerStoneCard .buyerStoneMedia {
    height: 410px !important;
    min-height: 410px !important;
  }

  .buyerStoneCard .buyerStoneMedia.videoOnlyFrame .diamond360Crop iframe.diamond360Frame {
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }
}

/* ================= FINAL BUYER DETAIL PAGE + OPEN DIAMOND BUTTON 2026-06-01 ================= */
.buyerStoneOpenActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.buyerStoneOpenActions button{height:36px;border-radius:3px;font-weight:650;cursor:pointer;border:1px solid #111}.buyerStoneOpenActions .open{background:#fff;color:#111}.buyerStoneOpenActions .cart{background:#050505;color:#fff}.buyerStoneOpenActions .cart:disabled{background:#f2f2f2;color:#aaa;border-color:#eee;cursor:not-allowed}.buyerStoneBody>button{display:none!important}
.buyerDetailPage{background:#f7f7f7;min-height:calc(100vh - 164px);padding:26px 18px 54px}.buyerDetailBack{border:0;background:#fff;color:#111;border-radius:4px;padding:11px 14px;font-weight:650;cursor:pointer;margin:0 auto 14px;display:block;max-width:1260px;box-shadow:0 1px 0 rgba(0,0,0,.05)}.buyerDetailCard{width:min(1260px,100%);margin:0 auto;background:#fff;border-radius:8px;box-shadow:0 18px 54px rgba(0,0,0,.06);display:grid;grid-template-columns:360px minmax(0,1fr);gap:32px;padding:36px 36px 32px}.buyerDetailMediaCol{min-width:0}.buyerDetailMainMedia{height:300px;border:1px solid #e4e4e4;background:#d6d6d6;border-radius:7px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.buyerDetailMainMedia img,.buyerDetailMainMedia iframe{width:100%;height:100%;border:0;object-fit:contain;background:#d6d6d6}.buyerDetailVideoFrame{transform:scale(1.03);transform-origin:center}.buyerDetailMediaTools{position:absolute;right:10px;top:10px;display:grid;gap:8px}.buyerDetailMediaTools button{width:38px;height:38px;border:1px solid #dedede;background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.08);cursor:pointer}.buyerDetailThumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}.buyerDetailThumbs button{height:72px;border:1px solid #e1e1e1;background:#f6f6f6;border-radius:3px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:11px;color:#555;overflow:hidden}.buyerDetailThumbs button.active{border-color:#6d5bd0;box-shadow:0 0 0 2px rgba(109,91,208,.12);background:#fff}.buyerDetailThumbs img{width:100%;height:42px;object-fit:cover}.buyerDetailThumbs b{font-size:18px;color:#888}.buyerDetailDisabledThumb{opacity:.55;cursor:not-allowed!important}.buyerDetailNotes{margin-top:18px}.buyerDetailNotes label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:#333}.buyerDetailNotes textarea{width:100%;height:104px;border:1px solid #e1e1e1;border-radius:7px;resize:none;padding:12px;color:#333}.buyerDetailNotes div{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.buyerDetailNotes button{height:40px;border:1px solid #e1e1e1;background:#f4f4f4;color:#aaa;border-radius:7px;font-weight:650}.buyerDetailNotes .ghost{background:#fff;color:#888}.buyerDetailInfoCol h1{margin:0 0 6px;font-size:27px;line-height:1.18;letter-spacing:-.03em;color:#202124}.buyerDetailBadges{display:flex;gap:8px;margin:8px 0 18px}.buyerDetailTag{display:inline-flex;align-items:center;border-radius:3px;padding:6px 10px;font-size:12px;font-weight:650;background:#f1f1f1;color:#333}.buyerDetailTag.lab{background:#fbc32d;color:#111}.buyerDetailTag.dark{background:#050505;color:#fff}.buyerDetailTag.green{background:#dff8e8;color:#16854b}.buyerDetailIds{display:grid;grid-template-columns:120px 160px;gap:16px;border-bottom:1px solid #eee;padding-bottom:18px;margin-bottom:16px}.buyerDetailIds span,.buyerDetailSpec span{display:block;color:#6b7280;font-size:14px;margin-bottom:4px}.buyerDetailIds b,.buyerDetailSpec b{display:block;color:#1f2937;font-size:15px}.buyerDetailSellerLine{display:flex;gap:12px;align-items:center;border-bottom:1px solid #eee;padding-bottom:18px;margin-bottom:18px}.buyerSellerAvatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#f2f5ff;color:#8c98bd;border:1px solid #cbd6ef;font-weight:700}.buyerDetailSellerLine b{display:block;font-size:14px}.buyerDetailSellerLine span{display:block;font-size:14px;color:#374151;margin-top:5px}.buyerDetailGreenTags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}.buyerDetailSpecGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 28px}.buyerDetailSpec{min-width:0}.buyerDetailBottom{display:grid;grid-template-columns:280px 1fr;gap:20px;align-items:center;margin-top:30px}.buyerDetailTerms{display:flex;align-items:center;gap:18px}.buyerDetailTerms b{font-size:13px;line-height:1.35;color:#111}.buyerDetailTerms span{white-space:nowrap;border-top:1px solid #bbb;min-width:105px;padding-top:3px;color:#555;font-size:12px}.buyerDetailActionRow{display:flex;justify-content:flex-end;gap:14px}.buyerDetailActionRow button{height:52px;border-radius:6px;padding:0 22px;font-weight:650;cursor:pointer}.buyerDetailShortlist{background:#fff;color:#111;border:1px solid #ddd}.buyerDetailBuy{border:0;background:#050505;color:#fff}.buyerDetailBuy:disabled{background:#f4f4f4;color:#bdbdbd;cursor:not-allowed}.buyerDetailNoMedia{padding:28px;text-align:center;color:#777}.buyerDetailCertFrame{background:#fff!important}
@media(max-width:1050px){.buyerDetailCard{grid-template-columns:1fr;padding:22px}.buyerDetailMainMedia{height:360px}.buyerDetailSpecGrid{grid-template-columns:repeat(3,1fr)}.buyerDetailBottom{grid-template-columns:1fr}.buyerDetailActionRow{justify-content:flex-start}}@media(max-width:640px){.buyerDetailPage{padding:14px 10px 40px}.buyerDetailMainMedia{height:260px}.buyerDetailCard{padding:14px}.buyerDetailThumbs{grid-template-columns:repeat(2,1fr)}.buyerDetailIds{grid-template-columns:1fr 1fr}.buyerDetailSpecGrid{grid-template-columns:repeat(2,1fr);gap:14px}.buyerDetailActionRow{display:grid}.buyerDetailActionRow button{width:100%}}

/* ============================================================================
   DIAMVO FINAL PRODUCT CARD + 360 VIEWER FIX — 2026-09-23
   Clean hierarchy, readable specs, full uncropped 360 modal.
   Appended last intentionally so this block wins over legacy card/viewer rules.
   ============================================================================ */

/* ----- PRODUCT CARD SHELL --------------------------------------------------- */
#shopGrid .buyerNivodaStoneCard.ngdNivodaCard{
  overflow:hidden!important;
  background:#fff!important;
  border:1px solid #e2e7ec!important;
  border-radius:14px!important;
  box-shadow:0 8px 28px rgba(15,23,42,.06)!important;
}

#shopGrid .buyerNivodaStoneCard.ngdNivodaCard:hover{
  transform:translateY(-2px)!important;
  border-color:#cfd8df!important;
  box-shadow:0 14px 34px rgba(15,23,42,.09)!important;
}

/* Top utility row: select | Save | RFQ */
#shopGrid .buyerNivodaStoneCard .buyerStoneActions{
  min-height:44px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:7px 12px!important;
  margin:0!important;
  background:#fff!important;
  border-bottom:1px solid #edf0f3!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneActions .buyerBulkCheck{
  margin-right:auto!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneActions button{
  min-width:58px!important;
  height:30px!important;
  min-height:30px!important;
  padding:0 12px!important;
  border:1px solid #dfe5ea!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#27364a!important;
  font-size:11px!important;
  font-weight:700!important;
  box-shadow:none!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneActions button:hover{
  border-color:#0b8476!important;
  color:#0b8476!important;
  background:#f5fbfa!important;
}

/* Media: calm 4:3 stage, full stone visible */
#shopGrid .buyerNivodaStoneCard .buyerStoneMedia{
  position:relative!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  aspect-ratio:4 / 3!important;
  overflow:hidden!important;
  background:#f5f6f7!important;
  border-bottom:1px solid #edf0f3!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneMedia img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:10px!important;
  background:#f5f6f7!important;
}

#shopGrid .buyerNivodaStoneCard .ngdCardType{
  top:12px!important;
  left:12px!important;
  z-index:7!important;
  padding:5px 9px!important;
  border:1px solid rgba(15,23,42,.08)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.94)!important;
  color:#516071!important;
  font-size:10.5px!important;
  font-weight:700!important;
  box-shadow:0 2px 8px rgba(15,23,42,.06)!important;
}

#shopGrid .buyerNivodaStoneCard .buyerMedia360{
  left:12px!important;
  right:auto!important;
  bottom:12px!important;
  top:auto!important;
  z-index:8!important;
  min-width:42px!important;
  height:26px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 9px!important;
  border-radius:999px!important;
  background:rgba(15,23,42,.78)!important;
  color:#fff!important;
  font-size:10px!important;
  font-weight:750!important;
  letter-spacing:.02em!important;
}

/* ----- CARD CONTENT -------------------------------------------------------- */
#shopGrid .buyerNivodaStoneCard .buyerStoneBodyClean{
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  padding:16px!important;
  background:#fff!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneTitleBlock{
  display:grid!important;
  gap:9px!important;
  padding-bottom:12px!important;
  border-bottom:1px solid #edf0f3!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneTitleBlock h3{
  margin:0!important;
  color:#111827!important;
  font-size:17px!important;
  line-height:1.28!important;
  font-weight:760!important;
  letter-spacing:-.015em!important;
  cursor:pointer!important;
  overflow-wrap:anywhere!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneSupplier{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0!important;
  min-width:0!important;
  color:#667085!important;
  font-size:11px!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneSupplier b{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#344054!important;
  font-size:11px!important;
  font-weight:650!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneSupplier span{
  flex:0 0 auto!important;
  white-space:nowrap!important;
  color:#667085!important;
}

/* 2x2 labelled specification grid instead of cramped T/D/R/M pills */
#shopGrid .buyerNivodaStoneCard .buyerStoneSpecGrid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneSpec{
  min-width:0!important;
  display:grid!important;
  gap:3px!important;
  padding:9px 10px!important;
  border:1px solid #e6eaee!important;
  border-radius:9px!important;
  background:#f8fafb!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneSpec small{
  color:#7a8696!important;
  font-size:9.5px!important;
  font-weight:650!important;
  text-transform:uppercase!important;
  letter-spacing:.045em!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneSpec b{
  min-width:0!important;
  overflow:hidden!important;
  color:#344054!important;
  font-size:11px!important;
  font-weight:700!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneSpecMeasure{
  grid-column:1 / -1!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneBadges,
#shopGrid .buyerNivodaStoneCard .buyerStoneTrust{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  margin:0!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneBadges:empty{
  display:none!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneBadges span,
#shopGrid .buyerNivodaStoneCard .buyerStoneTrust span{
  min-height:24px!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:0 8px!important;
  border:1px solid #e5e9ed!important;
  border-radius:999px!important;
  background:#f8fafb!important;
  color:#516071!important;
  font-size:9.5px!important;
  font-weight:650!important;
  line-height:1!important;
}

/* Price gets one clear hierarchy: total on left, delivery/Rap on right */
#shopGrid .buyerNivodaStoneCard .buyerStonePricePanel{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:end!important;
  gap:14px!important;
  padding-top:13px!important;
  border-top:1px solid #edf0f3!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneTotalPrice,
#shopGrid .buyerNivodaStoneCard .buyerStonePriceContext{
  display:grid!important;
  gap:4px!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneTotalPrice small,
#shopGrid .buyerNivodaStoneCard .buyerStonePriceContext small,
#shopGrid .buyerNivodaStoneCard .buyerStoneMetaGrid small{
  color:#7a8696!important;
  font-size:9.5px!important;
  font-weight:650!important;
  text-transform:uppercase!important;
  letter-spacing:.045em!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneTotalPrice strong{
  color:#111827!important;
  font-size:22px!important;
  line-height:1.1!important;
  font-weight:780!important;
  letter-spacing:-.02em!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStonePriceContext{
  text-align:right!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStonePriceContext b{
  color:#475467!important;
  font-size:11px!important;
  font-weight:700!important;
  white-space:nowrap!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneMetaGrid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneMetaGrid>span{
  min-width:0!important;
  display:grid!important;
  gap:3px!important;
  padding:8px 10px!important;
  border-radius:9px!important;
  background:#f8fafb!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneMetaGrid>span:last-child{
  text-align:right!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneMetaGrid b{
  min-width:0!important;
  overflow:hidden!important;
  color:#243244!important;
  font-size:11px!important;
  font-weight:750!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneBuy{
  width:100%!important;
  min-height:44px!important;
  height:44px!important;
  margin-top:2px!important;
  border:1px solid #0b8476!important;
  border-radius:9px!important;
  background:#0b8476!important;
  color:#fff!important;
  font-size:12.5px!important;
  font-weight:750!important;
  box-shadow:none!important;
}

#shopGrid .buyerNivodaStoneCard .buyerStoneBuy:hover:not(:disabled){
  background:#087466!important;
  border-color:#087466!important;
}

/* ----- 360 CENTER MODAL: NO CROP ------------------------------------------ */
.buyer360Modal{
  position:fixed!important;
  inset:0!important;
  z-index:999999!important;
  display:grid!important;
  place-items:center!important;
  padding:16px!important;
}

.buyer360Backdrop{
  position:absolute!important;
  inset:0!important;
  background:rgba(10,15,22,.68)!important;
  backdrop-filter:blur(3px)!important;
}

.buyer360Dialog{
  position:relative!important;
  z-index:2!important;
  width:min(900px,calc(100vw - 32px),calc((100vh - 32px) * 1.3333))!important;
  height:auto!important;
  aspect-ratio:4 / 3!important;
  max-width:none!important;
  max-height:calc(100vh - 32px)!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:16px!important;
  background:#f3f4f5!important;
  box-shadow:0 28px 90px rgba(0,0,0,.38)!important;
}

.buyer360CropModal{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  background:#f3f4f5!important;
}

.buyer360CropModal iframe.buyer360ModalFrame{
  position:absolute!important;
  inset:0!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  transform:none!important;
  transform-origin:center!important;
  background:#f3f4f5!important;
  display:block!important;
}

.buyer360Close{
  position:absolute!important;
  top:12px!important;
  right:12px!important;
  z-index:10!important;
  width:42px!important;
  height:42px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:50%!important;
  background:rgba(17,24,39,.88)!important;
  color:#fff!important;
  font-size:24px!important;
  line-height:1!important;
  cursor:pointer!important;
  box-shadow:0 6px 18px rgba(0,0,0,.18)!important;
}

.buyer360Close:hover{
  background:#111827!important;
}

@media(max-width:640px){
  #shopGrid .buyerNivodaStoneCard .buyerStoneBodyClean{padding:14px!important;gap:10px!important;}
  #shopGrid .buyerNivodaStoneCard .buyerStoneSpecGrid{grid-template-columns:1fr 1fr!important;}
  #shopGrid .buyerNivodaStoneCard .buyerStonePricePanel{gap:8px!important;}
  #shopGrid .buyerNivodaStoneCard .buyerStoneTotalPrice strong{font-size:20px!important;}
  .buyer360Modal{padding:10px!important;}
  .buyer360Dialog{
    width:min(calc(100vw - 20px),calc((100vh - 20px) * 1.3333))!important;
    max-height:calc(100vh - 20px)!important;
    border-radius:12px!important;
  }
  .buyer360Close{top:8px!important;right:8px!important;width:38px!important;height:38px!important;font-size:22px!important;}
}

/* [pass2-fix] Representative-image notice: a stone with no supplied photograph shows the shared illustration,
   and must SAY so. Styled as a caption under the image rather than an alert — it is a disclosure, not an error. */
.buyerDetailStockImage{margin:0;display:flex;flex-direction:column;gap:8px;align-items:center}
.buyerDetailStockImage img{max-width:100%;height:auto;opacity:.85}
.buyerDetailStockImage figcaption{font-size:12.5px;line-height:1.45;color:#4b5563;text-align:center;max-width:46ch;border-top:1px solid #e5e7eb;padding-top:8px}