/* ============================================================================= NGD BUYER — DIRECTION A "CLEAN COMMERCE" (presentation-only reskin) Loaded LAST in public/index.html (after role-premium.css). PURE styling: it restyles existing class names only. It NEVER renames/removes any element id, data-action/data-field/data-value/data-route, form field name, or the JS state classes (.active/.on/.hidden/.isWhiteColorMode/.isFancyColorMode/.expanded) — so the main + advanced filters, search, cart, checkout and calculator behave IDENTICALLY. Only colours/backgrounds/borders/radii/shadows change. NOTE ON SPECIFICITY: the legacy buyer CSS styles the desk with high-specificity `!important` compound selectors (e.g. `.ngdDeskShell .ngdDiamondTabs`, 0-2-0). To win the cascade WITHOUT touching logic, these overrides mirror those ancestors (`.ngdDeskShell`, `.buyerDeskMain`, `#shopGrid`, `#diamondFilterOverlay`) so they match/beat that specificity and win by source order. Palette: white surfaces, near-black ink, single teal accent (Direction A, #0A7266). [audit-fix #99] comment corrected — the shipped accent is teal, not cobalt. ============================================================================= */ :root{ --a-accent:#0A7266; --a-accent-strong:#08594F; --a-accent-soft:#E6F7F5; --a-on-accent:#ffffff; --a-ink:#0B1220; --a-ink-2:#3A4657; --a-muted:#626B79; --a-bg:#FFFFFF; --a-surface:#FFFFFF; --a-surface-2:#F5F7FB; --a-fac:#EEF2F9; --a-line:#E7EAF1; --a-line-2:#D7DCE6; --a-good:#067A55; --a-good-soft:#E4F5EE; --a-warn:#855c10; --a-warn-soft:#FBF1DC;/* [ui-fix] --a-warn #9A6B15->#855c10 (~4.17->5.29:1) — cross-portal AA parity with admin/ops/seller */ --a-radius:12px; --a-radius-sm:9px; --a-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06); --a-shadow-lg:0 14px 34px rgba(16,24,40,.10); } /* ---- global surfaces ------------------------------------------------------- */ body{background:var(--a-bg)!important;color:var(--a-ink)!important;} .buyerDeskMain,.buyerFlowPage,.buyerNivodaMain,.ngdBuyerDeskMain{background:var(--a-bg)!important;} /* Buttons (bare + scoped so they win inside the desk too) */ .btn,.buyerDeskMain .btn,.ngdDeskShell .btn{border-radius:var(--a-radius-sm)!important;font-weight:650!important;} .btn:not(.light):not(.ghost):not(.secondary), .buyerDeskMain .btn:not(.light):not(.ghost):not(.secondary){background:var(--a-accent)!important;border:1px solid var(--a-accent)!important;color:var(--a-on-accent)!important;} .btn:not(.light):not(.ghost):not(.secondary):hover{background:var(--a-accent-strong)!important;border-color:var(--a-accent-strong)!important;} .btn.light,.btn.secondary{background:var(--a-surface)!important;border:1px solid var(--a-line-2)!important;color:var(--a-ink)!important;} .btn.light:hover,.btn.secondary:hover{border-color:var(--a-accent)!important;color:var(--a-accent)!important;} .btn.ghost{background:transparent!important;border-color:transparent!important;color:var(--a-ink-2)!important;} :focus-visible{outline:2px solid var(--a-accent)!important;outline-offset:2px;} /* ---- top bar --------------------------------------------------------------- */ .ngdDeskShell .ngdDeskTop,.ngdDeskShell .buyerNivodaTop,.ngdDeskTop{background:var(--a-surface)!important;color:var(--a-ink)!important;border-bottom:1px solid var(--a-line)!important;} .ngdDeskShell .ngdDeskTop *{color:inherit;} .ngdDeskShell .buyerLogoMark,.buyerSideBrand{background:var(--a-accent)!important;color:#fff!important;border-radius:8px!important;padding:4px 9px!important;font-weight:650!important;} .ngdDeskShell .buyerDeskMenuBtn{background:var(--a-surface)!important;border:1px solid var(--a-line-2)!important;color:var(--a-ink-2)!important;border-radius:var(--a-radius-sm)!important;} .ngdDeskShell .buyerDeskMenuBtn:hover{border-color:var(--a-accent)!important;color:var(--a-accent)!important;} .ngdDeskShell .buyerDeskSearch{background:var(--a-surface-2)!important;border:1px solid var(--a-line-2)!important;border-radius:11px!important;} .ngdDeskShell .buyerDeskSearch input,.ngdDeskShell #q{background:transparent!important;border:0!important;color:var(--a-ink)!important;} .ngdDeskShell .buyerSearchIcon{color:var(--a-muted)!important;} .ngdDeskShell .buyerSearchGo{background:var(--a-accent)!important;color:#fff!important;border:0!important;border-radius:8px!important;height:30px!important;padding:0 13px!important;font-weight:650!important;} .ngdDeskShell .buyerSearchGo:hover{background:var(--a-accent-strong)!important;} .ngdDeskShell .buyerShortlistTop,.ngdDeskShell .buyerDeskCart,.ngdDeskShell .buyerDeskHelp,.ngdDeskShell .buyerDeskAccount{background:transparent!important;border:1px solid transparent!important;color:var(--a-ink-2)!important;border-radius:var(--a-radius-sm)!important;font-weight:600!important;} .ngdDeskShell .buyerShortlistTop:hover,.ngdDeskShell .buyerDeskCart:hover,.ngdDeskShell .buyerDeskHelp:hover,.ngdDeskShell .buyerDeskAccount:hover{background:var(--a-surface-2)!important;color:var(--a-ink)!important;} .ngdDeskShell .buyerDeskCart b,.buyerShortlistTop b{background:var(--a-accent)!important;color:#fff!important;border-radius:999px!important;padding:1px 6px!important;font-size:11px!important;} .ngdDeskShell .buyerAvatar{background:var(--a-accent)!important;color:#fff!important;} /* ---- diamond-type nav (legacy: dark 2-col grid; fix contrast + fit 3 tabs) -- */ .ngdDeskShell .ngdDiamondTabs,.ngdDeskShell .buyerDeskBlackNav{background:var(--a-surface)!important;border-bottom:1px solid var(--a-line)!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;height:auto!important;min-height:0!important;padding:8px 16px!important;} .ngdDeskShell .ngdDiamondTabs button,.ngdDeskShell .buyerDeskBlackNav button{background:var(--a-surface-2)!important;color:var(--a-ink)!important;border:1px solid var(--a-line)!important;border-radius:10px!important;height:auto!important;min-height:0!important;padding:9px 14px!important;box-shadow:none!important;} .ngdDeskShell .ngdDiamondTabs button small,.ngdDeskShell .buyerDeskBlackNav button small{color:var(--a-ink-2)!important;} .ngdDeskShell .ngdDiamondTabs button:hover,.ngdDeskShell .buyerDeskBlackNav button:hover{border-color:var(--a-accent)!important;background:var(--a-surface)!important;} .ngdDeskShell .ngdDiamondTabs button.active,.ngdDeskShell .buyerDeskBlackNav button.active{background:var(--a-accent-soft)!important;color:var(--a-accent)!important;border-color:var(--a-accent)!important;box-shadow:none!important;} .ngdDeskShell .ngdDiamondTabs button.active small,.ngdDeskShell .buyerDeskBlackNav button.active small{color:var(--a-accent)!important;} /* ---- side menu ------------------------------------------------------------- */ .ngdDeskShell .buyerNivodaSideMenu,.buyerNivodaSideMenu{background:var(--a-surface)!important;color:var(--a-ink)!important;} .ngdDeskShell .buyerNivodaSideMenu h4{color:var(--a-muted)!important;} .ngdDeskShell .buyerNivodaSideMenu a{color:var(--a-ink-2)!important;border-radius:8px!important;} .ngdDeskShell .buyerNivodaSideMenu a:hover,.ngdDeskShell .buyerNivodaSideMenu a.active{background:var(--a-accent-soft)!important;color:var(--a-accent)!important;} .ngdDeskShell .buyerNivodaSideMenu .new{background:var(--a-accent)!important;color:#fff!important;border-radius:999px!important;} .ngdDeskShell .buyerSideUser{border-top:1px solid var(--a-line)!important;} /* ---- hero (legacy: white text on transparent = invisible) ------------------ */ .buyerDeskMain .ngdDeskHero,.ngdBuyerDeskMain .ngdDeskHero,.ngdDeskHero{background:linear-gradient(180deg,var(--a-surface-2),var(--a-surface))!important;color:var(--a-ink)!important;border:1px solid var(--a-line)!important;border-radius:var(--a-radius)!important;padding:20px 22px!important;} .buyerDeskMain .ngdDeskHero *,.ngdBuyerDeskMain .ngdDeskHero *{color:inherit;} .buyerDeskMain .ngdDeskHero>div>span,.buyerDeskMain .roleKicker,.roleKicker{color:var(--a-accent)!important;font-weight:700!important;letter-spacing:.08em;text-transform:uppercase;} .buyerDeskMain .ngdDeskHero h1,.buyerDeskMain .ngdDeskTitle h2{color:var(--a-ink)!important;} .buyerDeskMain .ngdDeskHero p{color:var(--a-muted)!important;} .buyerDeskMain #resultCount,.buyerDeskMain .ngdDeskHeroMeta b,#resultCount{color:var(--a-ink)!important;font-weight:650!important;} .buyerDeskMain .ngdDeskHeroMeta small{color:var(--a-muted)!important;} /* ---- shop toolbar ---------------------------------------------------------- */ .buyerDeskMain .buyerDeskToolbar,.buyerDeskMain .ngdDeskToolbar,.buyerDeskToolbar{background:var(--a-surface)!important;border:1px solid var(--a-line)!important;border-radius:var(--a-radius)!important;box-shadow:var(--a-shadow)!important;} /* [premium-refresh] 'All filters' is now a SOLID teal primary so an ON quick-toggle (accent-soft, L90) is unmistakably a different, engaged state — previously both were accent-soft and indistinguishable. */ .buyerDeskMain .buyerFilterBtn,.buyerFilterBtn{background:var(--a-accent)!important;border:1px solid var(--a-accent)!important;color:var(--a-on-accent)!important;border-radius:var(--a-radius-sm)!important;font-weight:650!important;} .buyerDeskMain .buyerFilterBtn:hover{background:var(--a-accent-strong)!important;border-color:var(--a-accent-strong)!important;color:#fff!important;} .buyerDeskMain .buyerCertInput,.buyerDeskMain .buyerDeskSort,.buyerDeskMain #priceQuick,.buyerDeskMain #sort,.buyerDeskMain #certificateLookup{background:var(--a-surface)!important;border:1px solid var(--a-line-2)!important;color:var(--a-ink)!important;border-radius:var(--a-radius-sm)!important;} .buyerDeskMain .buyerQuickToggle{background:var(--a-surface)!important;border:1px solid var(--a-line-2)!important;color:var(--a-ink-2)!important;border-radius:var(--a-radius-sm)!important;} .buyerDeskMain .buyerQuickToggle:hover{border-color:var(--a-accent)!important;color:var(--a-accent)!important;} .buyerDeskMain .buyerQuickToggle.active{background:var(--a-accent-soft)!important;border-color:var(--a-accent)!important;color:var(--a-accent)!important;} .buyerDeskMain .buyerViewSwitch{background:var(--a-surface)!important;border:1px solid var(--a-line-2)!important;color:var(--a-ink-2)!important;border-radius:var(--a-radius-sm)!important;} .buyerDeskMain .buyerViewSwitch.active,.buyerDeskMain .buyerViewSwitch:hover{border-color:var(--a-accent)!important;color:var(--a-accent)!important;} /* Saved Searches: role-premium sizes the WRAPPER to 34px but leaves the inner button unsized (~19px), so its bordered pill looked squished next to the 34px "List View". Match List View. */ .buyerDeskMain .buyerDeskSaved{height:34px!important;} .buyerDeskMain .buyerDeskSaved>button{height:34px!important;padding:0 14px!important;display:inline-flex!important;align-items:center!important;gap:6px;background:var(--a-surface)!important;color:var(--a-ink)!important;border:1px solid var(--a-line-2)!important;border-radius:9px!important;font-weight:700!important;line-height:1!important;white-space:nowrap!important;} .buyerDeskMain .buyerDeskSaved>button:hover{border-color:var(--a-accent)!important;color:var(--a-accent)!important;background:var(--a-accent-soft)!important;} .buyerDeskMain .buyerDeskDropdown{background:var(--a-surface)!important;color:var(--a-ink)!important;border:1px solid var(--a-line-2)!important;border-radius:var(--a-radius)!important;box-shadow:var(--a-shadow-lg)!important;} .buyerDeskMain .buyerBulkBar,.buyerBulkBar{background:var(--a-ink)!important;color:#fff!important;border-radius:var(--a-radius)!important;} .buyerDeskMain .buyerBulkBar button{background:rgba(255,255,255,.14)!important;color:#fff!important;border:0!important;border-radius:8px!important;} .buyerDeskMain .buyerBulkBar button:hover{background:var(--a-accent)!important;} /* ---- diamond cards (grid) — scope under #shopGrid (id beats class rules) ---- */ #shopGrid .buyerNivodaStoneCard,#shopGrid .buyerStoneCard,#shopGrid .buyerDeskGridCard{background:var(--a-surface)!important;border:1px solid var(--a-line)!important;border-radius:var(--a-radius)!important;box-shadow:var(--a-shadow)!important;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important;overflow:hidden;} #shopGrid .buyerNivodaStoneCard:hover,#shopGrid .buyerStoneCard:hover{transform:translateY(-3px)!important;box-shadow:var(--a-shadow-lg)!important;border-color:var(--a-line-2)!important;} #shopGrid .buyerStoneMedia{background:#fff!important;border:0!important;border-bottom:1px solid var(--a-line)!important;} #shopGrid .buyerStoneActions button{background:rgba(255,255,255,.94)!important;border:1px solid var(--a-line)!important;color:var(--a-ink-2)!important;border-radius:8px!important;font-weight:600!important;} #shopGrid .buyerStoneActions button:hover{border-color:var(--a-accent)!important;color:var(--a-accent)!important;} #shopGrid .buyerMedia360{background:rgba(11,18,32,.72)!important;color:#fff!important;border-radius:6px!important;} #shopGrid .buyerStoneBody{background:var(--a-surface)!important;} #shopGrid .buyerStoneNumbers span{background:var(--a-surface-2)!important;border:1px solid var(--a-line)!important;color:var(--a-ink-2)!important;border-radius:6px!important;} /* [ui] A DEFECT must not wear the positive colour. This rule used to paint EVERY tag green, so a stone tagged 'BGM' (7,260 of them) or 'Not eye clean' (4,196) read as a quality badge. Clean findings keep the good tone (.ok); defects read amber (.warn). The wording itself also states which is which, so colour is never the only signal. Untagged spans keep the old colour so nothing else regresses. */ #shopGrid .buyerStoneBadges span{color:var(--a-good)!important;} #shopGrid .buyerStoneBadges span.ok,#shopGrid .ngdCardTags span.ok{color:var(--a-good)!important;} #shopGrid .buyerStoneBadges span.warn,#shopGrid .ngdCardTags span.warn{color:#8A5A00!important;} #shopGrid .buyerStonePrice{color:var(--a-ink)!important;} #shopGrid .buyerStonePrice b,#shopGrid .buyerStonePrice strong{color:var(--a-accent)!important;} #shopGrid .buyerStoneBuy{background:var(--a-accent)!important;border:1px solid var(--a-accent)!important;color:#fff!important;border-radius:var(--a-radius-sm)!important;font-weight:650!important;} #shopGrid .buyerStoneBuy:hover{background:var(--a-accent-strong)!important;} #shopGrid .buyerStoneBuy[disabled],#shopGrid .buyerDisabledBuy[disabled]{background:var(--a-surface-2)!important;border-color:var(--a-line-2)!important;color:var(--a-muted)!important;cursor:not-allowed;} /* list view + expanded */ /* [pass3-fix] `overflow:hidden` here makes the table a scroll container, so anything that nudges its content sideways (browser zoom rounding, a fallback font with a wider left side bearing, a scrollbar) is silently cut instead of shown. The rounded corners are the only reason the clip exists, and `clip` gives exactly that without the scroll-container behaviour. A little padding is added below so no text ever sits flush against this boundary in the first place. */ #shopGrid .buyerDeskTable,#shopGrid .buyerNivodaTable{background:var(--a-surface)!important;border:1px solid var(--a-line)!important;border-radius:var(--a-radius)!important;overflow:clip;} #shopGrid .buyerDeskTableHead{background:var(--a-surface-2)!important;color:var(--a-muted)!important;border-bottom:1px solid var(--a-line)!important;} #shopGrid .buyerDeskTableItem{border-top:1px solid var(--a-line)!important;} #shopGrid .buyerDeskTableItem:hover{background:var(--a-surface-2)!important;} #shopGrid .buyerRowToggle{background:var(--a-surface)!important;border:1px solid var(--a-line-2)!important;color:var(--a-ink-2)!important;border-radius:8px!important;} #shopGrid .buyerDeskExpanded,#shopGrid .buyerExpandedMedia,#shopGrid .buyerDiamondDetails,#shopGrid .buyerDelivery{background:var(--a-surface-2)!important;border-color:var(--a-line)!important;} #shopGrid .buyerDeskEmpty,#shopGrid .ngdDeskEmpty{background:var(--a-surface)!important;border:1px dashed var(--a-line-2)!important;border-radius:var(--a-radius)!important;color:var(--a-muted)!important;} #shopGrid .ngdEmptyIcon{background:var(--a-accent)!important;color:#fff!important;} /* ---- FILTER DRAWER — scope under #diamondFilterOverlay (id) to win + remap purple */ #diamondFilterOverlay,.diamondFilterOverlay{background:rgba(11,18,32,.5)!important;} #diamondFilterOverlay .diamondFilterPanel,.diamondFilterPanel{background:var(--a-surface)!important;border-radius:16px!important;box-shadow:var(--a-shadow-lg)!important;} #diamondFilterOverlay .diamondFilterHeader{border-bottom:1px solid var(--a-line)!important;} #diamondFilterOverlay .diamondFilterHeader h3{color:var(--a-ink)!important;} #diamondFilterOverlay .diamondFilterHeader p{color:var(--a-muted)!important;} #diamondFilterOverlay .filterTabGroup{border:1px solid var(--a-line-2)!important;border-radius:10px!important;} #diamondFilterOverlay .filterTabGroup button{background:var(--a-surface)!important;color:var(--a-ink-2)!important;} #diamondFilterOverlay .filterTabGroup button.active{background:var(--a-accent-soft)!important;color:var(--a-accent)!important;} #diamondFilterOverlay .filterCloseBtn{color:var(--a-muted)!important;} #diamondFilterOverlay .filterBlock{border-bottom:1px solid var(--a-line)!important;} #diamondFilterOverlay .filterBlock h3,#diamondFilterOverlay .filterBlock h4{color:var(--a-ink)!important;} #diamondFilterOverlay .filterChip{border:1px solid var(--a-line-2)!important;background:var(--a-surface)!important;color:var(--a-ink-2)!important;border-radius:9px!important;} #diamondFilterOverlay .filterChip:hover{border-color:var(--a-accent)!important;background:var(--a-accent-soft)!important;color:var(--a-accent)!important;} #diamondFilterOverlay .filterChip.active{border-color:var(--a-accent)!important;background:var(--a-accent-soft)!important;color:var(--a-accent)!important;} #diamondFilterOverlay .shapeChip{border:1px solid var(--a-line)!important;background:var(--a-surface)!important;border-radius:10px!important;} #diamondFilterOverlay .shapeChip:hover{border-color:var(--a-accent)!important;} #diamondFilterOverlay .shapeChip.active{border-color:var(--a-accent)!important;background:var(--a-accent-soft)!important;color:var(--a-accent)!important;} #diamondFilterOverlay .shapeChipIcon{color:var(--a-muted)!important;} #diamondFilterOverlay .shapeChip.active .shapeChipIcon{color:var(--a-accent)!important;} #diamondFilterOverlay .switchLine span{background:var(--a-line-2)!important;} #diamondFilterOverlay .switchLine.on span,#diamondFilterOverlay .switchLine.active span{background:var(--a-accent)!important;} #diamondFilterOverlay .rangeInputs input,#diamondFilterOverlay .advancedRangeInputs input,#diamondFilterOverlay .buyerRangePair input,#diamondFilterOverlay .buyerFancySelect,#diamondFilterOverlay .advancedSelect{border:1px solid var(--a-line-2)!important;border-radius:9px!important;background:var(--a-surface)!important;color:var(--a-ink)!important;} #diamondFilterOverlay .rangeInputs input:focus,#diamondFilterOverlay .buyerRangePair input:focus{border-color:var(--a-accent)!important;box-shadow:0 0 0 3px var(--a-accent-soft)!important;} #diamondFilterOverlay .priceTabs button.active,#diamondFilterOverlay .keyModeRow button.active,#diamondFilterOverlay .mainFilterRadioRow button.active{background:var(--a-accent-soft)!important;color:var(--a-accent)!important;border-color:var(--a-accent)!important;} #diamondFilterOverlay .diamondFilterFooter{border-top:1px solid var(--a-line)!important;background:var(--a-surface)!important;} #diamondFilterOverlay .filterInfoDot,#diamondFilterOverlay .advancedInfoDot{background:var(--a-accent-soft)!important;color:var(--a-accent)!important;} /* ---- calculator + floating chat + help + notice ---------------------------- */ .buyerFloatingChat{background:var(--a-accent)!important;color:#fff!important;box-shadow:0 10px 24px rgba(10,114,102,.35)!important;} .buyerHelpBox{background:var(--a-surface)!important;border:1px solid var(--a-line)!important;box-shadow:var(--a-shadow-lg)!important;color:var(--a-ink)!important;} .buyerHelpBox a{background:var(--a-accent)!important;color:#fff!important;}/* [ui-fix] was dark-teal text left on the legacy #111 pill (~3.25:1); make it a teal button w/ white text (~5.6:1 AA). */ .buyerDeskNotice,.ngdDeskNotice{background:var(--a-warn-soft)!important;border:1px solid #EAD9AE!important;color:var(--a-ink-2)!important;border-radius:10px!important;} /* ---- flow pages: cart / checkout / account / orders / shortlist / melee ----- */ .buyerFlowHead h1{color:var(--a-ink)!important;} .buyerFlowHead p{color:var(--a-muted)!important;} .buyerDeskMain .card,.buyerDeskMain .buyerCartPanel,.buyerDeskMain .buyerCartItem,.buyerDeskMain .buyerCheckoutForm,.buyerDeskMain .buyerCheckoutStep,.buyerDeskMain .roleHeroPanel,.buyerDeskMain .roleOptionCard,.buyerDeskMain .buyerOrderCard,.buyerDeskMain .buyerPanel,.buyerDeskMain .meleePanel,.buyerDeskMain .summary{background:var(--a-surface)!important;border:1px solid var(--a-line)!important;border-radius:var(--a-radius)!important;box-shadow:var(--a-shadow)!important;} .buyerDeskMain .buyerCartQty button,.buyerDeskMain .buyerRemoveBtn{border:1px solid var(--a-line-2)!important;background:var(--a-surface)!important;color:var(--a-ink-2)!important;border-radius:8px!important;} .buyerDeskMain .buyerCheckoutForm input,.buyerDeskMain .buyerCheckoutForm select,.buyerDeskMain .buyerCheckoutForm textarea{border:1px solid var(--a-line-2)!important;border-radius:9px!important;background:var(--a-surface)!important;color:var(--a-ink)!important;} .buyerDeskMain .buyerCheckoutForm input:focus,.buyerDeskMain .buyerCheckoutForm select:focus{border-color:var(--a-accent)!important;box-shadow:0 0 0 3px var(--a-accent-soft)!important;} .buyerDeskMain .roleHero,.buyerDeskMain .buyerAccountHero,.buyerDeskMain .ngdShortlistHero,.ngdShortlistHero{background:linear-gradient(180deg,var(--a-surface-2),var(--a-surface))!important;color:var(--a-ink)!important;border:1px solid var(--a-line)!important;border-radius:var(--a-radius)!important;} .buyerDeskMain .roleHero *,.buyerDeskMain .buyerAccountHero *,.buyerDeskMain .ngdShortlistHero *{color:inherit;} .ngdShortlistMain{background:var(--a-bg)!important;} .pill{border-radius:999px!important;} .pill.ok,.pill.approved{background:var(--a-good-soft)!important;color:var(--a-good)!important;} .buyerDeskMain .meleeSearchBar input{border:1px solid var(--a-line-2)!important;border-radius:9px!important;background:var(--a-surface)!important;color:var(--a-ink)!important;} .buyerDeskMain .buyerCard{border-color:var(--a-line)!important;background:var(--a-surface)!important;border-radius:var(--a-radius)!important;} /* ---- persistent desk footer (dark ink anchor, Direction A) ------------------ */ .buyerDeskFooter{background:var(--a-ink)!important;color:#D7DEEC!important;border-top:1px solid rgba(255,255,255,.08)!important;} .buyerDeskFooter h5{color:#8A93A6!important;text-transform:uppercase;letter-spacing:.09em;font-size:12px!important;} .buyerDeskFooter a{color:#D7DEEC!important;opacity:.86;} .buyerDeskFooter a:hover{opacity:1;color:#9FB6FF!important;} .buyerDeskFooter .buyerLogoMark{background:var(--a-accent)!important;color:#fff!important;} /* [ui-fix] The "NGD" wordmark carries its own dark-ink color, which beat the footer's inherited light color → invisible dark-on-dark on this dark footer. Force it (and its meta line) light. */ .buyerDeskFooter .ngdBrandWord,.buyerDeskFooter .buyerSideBrand b{color:#fff!important;} .buyerDeskFooter .ngdBrandMeta{color:#8A93A6!important;} .buyerDeskFooter .buyerDeskFootBrand p{color:#8A93A6!important;} /* [ui-fix] Disabled checkout button ("Cart is empty" / "Approval required") was near-invisible light-grey-on-grey (contrast 1.76). Keep it clearly disabled but readable — muted ink on a soft fill. */ .buyerSummaryPanel button:disabled{background:var(--a-surface-2)!important;color:var(--a-muted)!important;border:1px solid var(--a-line)!important;cursor:not-allowed;} .buyerDeskFootGrid{display:grid!important;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr!important;gap:26px!important;padding:32px 22px 24px!important;max-width:1320px;margin:0 auto;} .buyerDeskFootGrid nav{display:flex;flex-direction:column;} .buyerDeskFootGrid nav a{padding:5px 0!important;} .buyerDeskFootBar{border-top:1px solid rgba(255,255,255,.08)!important;color:#8A93A6!important;display:flex!important;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 22px!important;max-width:1320px;margin:0 auto;} @media(max-width:820px){.buyerDeskFootGrid{grid-template-columns:1fr 1fr!important;}} /* ---- compare page ---------------------------------------------------------- */ .ngdShortlistHeroActions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;} .ngdShortlistCompareBtn{background:var(--a-accent)!important;color:#fff!important;border:1px solid var(--a-accent)!important;border-radius:var(--a-radius-sm)!important;padding:9px 15px!important;font-weight:650!important;cursor:pointer;} .ngdShortlistCompareBtn:hover{background:var(--a-accent-strong)!important;} .buyerCompareNote{color:var(--a-muted)!important;font-size:13px!important;margin:0 0 12px!important;} .buyerCompareWrap{border:1px solid var(--a-line)!important;border-radius:var(--a-radius)!important;background:var(--a-surface)!important;box-shadow:var(--a-shadow)!important;} .buyerCompareTable{border-collapse:separate!important;border-spacing:0!important;width:100%!important;min-width:520px!important;} .buyerCompareTable th,.buyerCompareTable td{text-align:left;vertical-align:top;} .buyerCompareTable thead th{border-bottom:1px solid var(--a-line)!important;padding:14px!important;background:var(--a-surface)!important;} .buyerCompareTable .buyerCompareLabelHead{color:var(--a-muted)!important;font-size:11px!important;letter-spacing:.06em;text-transform:uppercase;font-weight:700!important;vertical-align:bottom;} .buyerCompareTable tbody th{color:var(--a-muted)!important;font-size:12px!important;font-weight:600!important;padding:11px 14px!important;border-top:1px solid var(--a-line)!important;background:var(--a-surface-2)!important;white-space:nowrap;position:sticky;left:0;} .buyerCompareTable tbody td{color:var(--a-ink)!important;font-size:13px!important;font-weight:600!important;padding:11px 14px!important;border-top:1px solid var(--a-line)!important;border-left:1px solid var(--a-line)!important;} .buyerCompareCol{position:relative;display:flex;flex-direction:column;gap:8px;min-width:170px;} .buyerCompareRemove{position:absolute;top:-6px;right:-6px;width:26px;height:26px;border-radius:50%;border:1px solid var(--a-line-2)!important;background:var(--a-surface)!important;color:var(--a-muted)!important;cursor:pointer;font-size:12px;line-height:1;} .buyerCompareRemove:hover{border-color:var(--a-bad,#BB4A3F)!important;color:var(--a-bad,#BB4A3F)!important;} .buyerCompareMedia{aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:radial-gradient(120% 100% at 50% 12%,#fff,var(--a-fac))!important;border:1px solid var(--a-line)!important;cursor:pointer;} .buyerCompareMedia img{width:100%;height:100%;object-fit:cover;display:block;} .buyerCompareCol h4{font-size:14px!important;font-weight:650!important;color:var(--a-ink)!important;cursor:pointer;margin:0;} .buyerComparePrice{font-size:16px!important;font-weight:650!important;color:var(--a-accent)!important;display:flex;flex-direction:column;gap:4px;} .buyerCompareBest{align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--a-good)!important;background:var(--a-good-soft)!important;border-radius:999px;padding:2px 8px;} .buyerCompareColActions{display:flex;flex-direction:column;gap:6px;margin-top:2px;} .buyerCompareColActions button{border-radius:8px!important;height:34px!important;font-weight:600!important;font-size:12.5px!important;border:1px solid var(--a-accent)!important;background:var(--a-accent)!important;color:#fff!important;cursor:pointer;} .buyerCompareColActions button.secondary{background:var(--a-surface)!important;color:var(--a-ink)!important;border-color:var(--a-line-2)!important;} .buyerCompareColActions button[disabled]{background:var(--a-surface-2)!important;border-color:var(--a-line-2)!important;color:var(--a-muted)!important;cursor:not-allowed;} .buyerCompareEmpty{text-align:center;padding:50px 0;} /* ---- product detail page --------------------------------------------------- */ .buyerDetailPage{background:var(--a-bg)!important;padding:18px 20px 44px!important;max-width:1200px;margin:0 auto;} .buyerDetailPage .buyerDetailBack{background:var(--a-surface)!important;border:1px solid var(--a-line-2)!important;color:var(--a-ink-2)!important;border-radius:var(--a-radius-sm)!important;padding:8px 14px!important;font-weight:600!important;margin-bottom:16px!important;} .buyerDetailPage .buyerDetailBack:hover{border-color:var(--a-accent)!important;color:var(--a-accent)!important;} .buyerDetailPage .buyerDetailCard{background:transparent!important;border:0!important;box-shadow:none!important;display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)!important;gap:28px!important;align-items:start!important;} @media(max-width:860px){.buyerDetailPage .buyerDetailCard{grid-template-columns:1fr!important;}} .buyerDetailPage .buyerDetailMainMedia{background:radial-gradient(120% 100% at 50% 10%,#fff,var(--a-fac))!important;border:1px solid var(--a-line)!important;border-radius:var(--a-radius)!important;box-shadow:var(--a-shadow)!important;overflow:hidden;aspect-ratio:1/1;} .buyerDetailPage .buyerDetailThumbs{display:flex!important;gap:10px!important;margin-top:12px!important;} .buyerDetailPage .buyerDetailThumbs button{border:1px solid var(--a-line-2)!important;background:var(--a-surface-2)!important;color:var(--a-ink-2)!important;border-radius:11px!important;overflow:hidden;} .buyerDetailPage .buyerDetailThumbs button.active{border-color:var(--a-accent)!important;color:var(--a-accent)!important;box-shadow:0 0 0 2px var(--a-accent-soft)!important;} .buyerDetailPage .buyerDetailInfoCol h1{color:var(--a-ink)!important;font-size:26px!important;letter-spacing:-.01em!important;} .buyerDetailPage .buyerDetailCertLine{display:flex!important;flex-wrap:wrap;align-items:center;gap:10px!important;margin:12px 0!important;} .buyerDetailPage .buyerDetailVerified{display:inline-flex;align-items:center;gap:6px;font-size:12.5px!important;font-weight:650!important;color:var(--a-good)!important;background:var(--a-good-soft)!important;border-radius:999px!important;padding:6px 12px!important;} .buyerDetailPage .buyerDetailReport{color:var(--a-muted)!important;font-size:12.5px!important;} .buyerDetailPage .buyerDetailGreenTags{display:flex;flex-wrap:wrap;gap:6px!important;margin:8px 0 14px!important;} .buyerDetailPage .buyerDetailTag{background:var(--a-good-soft)!important;color:var(--a-good)!important;border:0!important;border-radius:6px!important;padding:3px 9px!important;font-size:11.5px!important;font-weight:600!important;} .buyerDetailPage .buyerDetailPriceBox{background:var(--a-surface)!important;border:1px solid var(--a-line)!important;border-radius:var(--a-radius)!important;box-shadow:var(--a-shadow)!important;padding:16px 18px!important;margin:0 0 16px!important;} .buyerDetailPage .buyerDetailPriceTot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;} .buyerDetailPage .buyerDetailPriceTot span{color:var(--a-muted)!important;font-size:12.5px!important;} .buyerDetailPage .buyerDetailPriceTot b{font-size:28px!important;font-weight:650!important;letter-spacing:-.02em!important;color:var(--a-ink)!important;} .buyerDetailPage .buyerDetailPriceRow{display:flex;justify-content:space-between;gap:10px;padding:8px 0 0;border-top:1px dashed var(--a-line);margin-top:10px;font-size:13px!important;} .buyerDetailPage .buyerDetailPriceRow span{color:var(--a-muted)!important;} .buyerDetailPage .buyerDetailPriceRow b{font-weight:650!important;color:var(--a-ink)!important;} .buyerDetailPage .buyerDetailFree{color:var(--a-good)!important;} .buyerDetailPage .buyerDetailActionRow{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin:0 0 16px!important;} .buyerDetailPage .buyerDetailBuy{grid-column:1/3!important;background:var(--a-accent)!important;border:1px solid var(--a-accent)!important;color:#fff!important;border-radius:var(--a-radius-sm)!important;height:46px!important;font-weight:700!important;font-size:14.5px!important;} .buyerDetailPage .buyerDetailBuy:hover{background:var(--a-accent-strong)!important;} .buyerDetailPage .buyerDetailBuy[disabled]{background:var(--a-surface-2)!important;border-color:var(--a-line-2)!important;color:var(--a-muted)!important;cursor:not-allowed;} .buyerDetailPage .buyerDetailShortlist{background:var(--a-surface)!important;border:1px solid var(--a-line-2)!important;color:var(--a-ink)!important;border-radius:var(--a-radius-sm)!important;height:42px!important;font-weight:600!important;} .buyerDetailPage .buyerDetailShortlist:hover{border-color:var(--a-accent)!important;color:var(--a-accent)!important;} .buyerDetailPage .buyerDetailIds{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin:0 0 16px!important;} .buyerDetailPage .buyerDetailIds>div{background:var(--a-surface-2)!important;border:1px solid var(--a-line)!important;border-radius:10px!important;padding:10px 12px!important;} .buyerDetailPage .buyerDetailIds span{display:block;color:var(--a-muted)!important;font-size:11px!important;text-transform:uppercase;letter-spacing:.05em;} .buyerDetailPage .buyerDetailIds b{color:var(--a-ink)!important;font-size:13.5px!important;} .buyerDetailPage .buyerDetailSpecGrid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0!important;background:var(--a-surface)!important;border:1px solid var(--a-line)!important;border-radius:var(--a-radius)!important;box-shadow:var(--a-shadow)!important;overflow:hidden;} .buyerDetailPage .buyerDetailSpecGrid>*{padding:10px 14px!important;border-top:1px solid var(--a-line)!important;display:flex;justify-content:space-between;gap:10px;font-size:13px!important;} .buyerDetailPage .buyerDetailSpecGrid>*:nth-child(-n+2){border-top:0!important;} .buyerDetailLoading{display:grid;place-items:center;gap:14px;padding:60px 0;color:var(--a-muted);} .pdpSpinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--a-line-2);border-top-color:var(--a-accent);animation:pdpSpin .8s linear infinite;} @keyframes pdpSpin{to{transform:rotate(360deg)}} /* ---- auth + public marketing (light Direction A pass) ---------------------- */ .ngdAuthTopbar{background:var(--a-surface)!important;border-bottom:1px solid var(--a-line)!important;} .buyerAuthAside{background:radial-gradient(90% 60% at 78% 12%,rgba(10,114,102,.34),transparent 62%),linear-gradient(180deg,rgba(11,18,32,0) 0%,rgba(11,18,32,.28) 19%,rgba(11,18,32,.86) 43%,rgba(15,31,52,.97) 60%),url('/brand/auth-aside.webp') 62% 34%/cover no-repeat!important;color:#fff!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;overflow:hidden;} .buyerAuthAside *{color:inherit;} .ngdHeader,.hdr{background:var(--a-surface)!important;border-bottom:1px solid var(--a-line)!important;} .badge{background:var(--a-accent-soft)!important;color:var(--a-accent)!important;border-radius:999px!important;} /* ===== [Direction A · cross-portal unify] shared font + sticky top bar ===== */ body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;} button,input,select,textarea,.btn,h1,h2,h3,h4,h5{font-family:inherit!important;} /* keep the top bar visible on scroll (sticky), the diamond-type nav sticks just below it */ .ngdDeskShell .ngdDeskTop,.ngdDeskShell .buyerNivodaTop{position:sticky!important;top:0!important;z-index:950!important;} /* Fix sticky: style.css sets html,body{overflow-x:hidden} which forces body overflow-y:auto, making BODY a scroll container that breaks the sticky top bar. `clip` clips horizontally WITHOUT creating a scroll container, so the top bar sticks to the real (html) scroller. Menu scroll-lock (inline body overflow:hidden) still works. */ html,body{overflow-x:clip!important;} /* ===== [Buyer layout -> seller-style permanent LEFT SIDEBAR] ================= The buyer side menu was an off-canvas overlay (hamburger). On desktop (>=901px) it becomes a permanent 240px left rail like the seller; all app content shifts right to clear it; redundant chrome (hamburger, backdrop, close-X, top-bar logo, duplicate horizontal diamond-type tabs) is hidden. Mobile (<=900px) keeps the original slide-in overlay untouched. CSS-only; no ids/data-actions changed. */ /* sidebar brand = the logo (cobalt NGD mark), consistent with seller */ .ngdDeskShell .buyerSideHead{border-bottom:1px solid var(--a-line)!important;} .ngdDeskShell .buyerSideBrand{background:var(--a-accent)!important;color:#fff!important;border-radius:8px!important;padding:6px 12px!important;font-weight:650!important;font-size:17px!important;letter-spacing:.02em;} .ngdDeskShell .buyerNivodaSideMenu section h4{color:var(--a-muted)!important;text-transform:uppercase;letter-spacing:.08em;font-size:10.5px!important;font-weight:700!important;} @media(min-width:901px){ .ngdDeskShell .buyerNivodaSideMenu{position:fixed!important;left:0!important;top:0!important;width:240px!important;height:100vh!important;transform:none!important;overflow-y:auto!important;z-index:940!important;border-right:1px solid var(--a-line)!important;box-shadow:none!important;border-radius:0!important;} /* padding-left scoped to the sidebar's presence, so sidebar-less public/auth/gate pages (home, login, signup, forgot, access gate) don't get a 240px blank left gutter. */ #app:has(.buyerNivodaSideMenu){padding-left:240px!important;box-sizing:border-box!important;} /* Real sticky-top-bar fix: the bar lives in .ngdDeskShell (a ~62px header) while the page content is a SIBLING
, so position:sticky can only hold it within those 62px and it scrolls away. Pin it with position:fixed (offset past the 240px sidebar). Force a single non-wrapping row (was a CSS grid that wrapped to 2-3 rows at 901-1150px, hiding content under the taller bar). Reserve the bar height on the SHELL (not just
) so the approval-pending notice — the shell's only in-flow child — clears the bar too. */ .ngdDeskShell .ngdDeskTop,.ngdDeskShell .buyerNivodaTop{position:fixed!important;top:0!important;left:240px!important;right:0!important;z-index:930!important;display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:nowrap!important;} .ngdDeskShell .ngdDeskTop .buyerDeskSearch{flex:1 1 auto!important;min-width:0!important;} .ngdDeskShell .ngdDeskTop .buyerShortlistTop,.ngdDeskShell .ngdDeskTop .buyerDeskCart,.ngdDeskShell .ngdDeskTop .buyerDeskAccount,.ngdDeskShell .ngdDeskTop .buyerDeskHelp{flex:0 0 auto!important;} .ngdDeskShell{padding-top:72px!important;} /* [sidebar toggle] show the Menu button on desktop so the sidebar can be collapsed; backdrop stays hidden (no overlay on desktop). */ .ngdDeskShell .buyerSideBackdrop{display:none!important;} .ngdDeskShell .buyerDeskLogo{display:none!important;} .ngdDeskShell .buyerDeskMenuBtn{display:inline-flex!important;align-items:center;gap:7px;flex:0 0 auto;} .ngdDeskShell .buyerNivodaSideMenu .buyerSideHead button[data-action="menu-close"]{display:none!important;} /* horizontal Natural/Lab/Melee tabs duplicate the sidebar Browse links -> hide on desktop */ .ngdDeskShell .ngdDiamondTabs{display:none!important;} /* Collapsed state: slide the fixed side menu off, drop the desk's left offset -> full-width desk. */ .ngdDeskShell.ngdSideCollapsed .buyerNivodaSideMenu{left:-260px!important;} #app:has(.ngdDeskShell.ngdSideCollapsed){padding-left:0!important;} .ngdDeskShell.ngdSideCollapsed .ngdDeskTop,.ngdDeskShell.ngdSideCollapsed .buyerNivodaTop{left:0!important;} .ngdDeskShell.ngdSideCollapsed .buyerDeskLogo{display:inline-flex!important;} } /* buyer sidebar nav items styled like the seller: icon chip + label, cobalt active */ .ngdDeskShell .buyerNivodaSideMenu section a{display:flex!important;align-items:center;gap:10px!important;padding:9px 11px!important;border-radius:9px!important;color:var(--a-ink-2)!important;font-weight:600!important;text-decoration:none;} .ngdDeskShell .buyerNivodaSideMenu section a>i{width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center;border-radius:7px;background:var(--a-surface-2)!important;color:var(--a-muted)!important;border:1px solid var(--a-line)!important;font-style:normal;font-size:13px;line-height:1;} .ngdDeskShell .buyerNivodaSideMenu section a>span{flex:1;min-width:0;} .ngdDeskShell .buyerNivodaSideMenu section a:hover{background:var(--a-surface-2)!important;color:var(--a-ink)!important;} .ngdDeskShell .buyerNivodaSideMenu section a.active{background:var(--a-accent-soft)!important;color:var(--a-accent)!important;box-shadow:inset 3px 0 0 var(--a-accent)!important;} .ngdDeskShell .buyerNivodaSideMenu section a.active>i{background:var(--a-accent)!important;color:#fff!important;border-color:var(--a-accent)!important;} .ngdDeskShell .buyerNivodaSideMenu .new{margin-left:auto;background:var(--a-accent)!important;color:#fff!important;font-size:9px!important;font-weight:650!important;border-radius:999px!important;padding:1px 6px!important;} /* [buyer-ui review] the old neutral account-card + logout block was fully superseded by the seller-style block below (317-327). Removed: its stale logout :hover set cobalt text on the cobalt hover background (invisible), and the rest was dead code. */ /* [match seller] sidebar logo = "◆ NGD" (no box, ink) + account card = circle avatar + full-width cobalt Log out */ .ngdDeskShell .buyerSideHead{border-bottom:1px solid var(--a-line)!important;display:flex!important;align-items:center;padding:14px 14px 12px!important;} .ngdDeskShell .buyerSideBrand{background:transparent!important;color:var(--a-ink)!important;padding:0!important;border-radius:0!important;font-weight:650!important;font-size:19px!important;display:inline-flex!important;align-items:center;gap:8px;letter-spacing:.01em;} .ngdDeskShell .buyerSideBrand::before{content:"\25C6";color:var(--a-accent);font-size:15px;font-weight:400;} .ngdDeskShell .buyerSideUser{display:flex!important;flex-wrap:wrap;align-items:center;gap:10px;background:var(--a-surface-2)!important;border:1px solid var(--a-line)!important;border-radius:10px!important;margin:12px!important;padding:11px!important;} .ngdDeskShell .buyerSideUser>div{flex:1;min-width:0;} .ngdDeskShell .buyerSideUser .buyerAvatar{background:var(--a-accent)!important;color:#fff!important;border-radius:50%!important;width:34px!important;height:34px!important;display:grid!important;place-items:center!important;font-weight:650!important;flex:0 0 auto;} .ngdDeskShell .buyerSideUser b{color:var(--a-ink)!important;display:block;} .ngdDeskShell .buyerSideUser small{color:var(--a-ink-2)!important;display:block;font-size:11.5px;} .ngdDeskShell .buyerSideUser button[data-action="logout"]{background:var(--a-accent)!important;border:1px solid var(--a-accent)!important;color:#fff!important;border-radius:8px!important;width:100%!important;flex:1 0 100%;font-weight:650!important;height:36px!important;margin-top:4px!important;} .ngdDeskShell .buyerSideUser button[data-action="logout"]:hover{background:var(--a-accent-strong)!important;} /* ============================================================================ [BUYER UI REVIEW — batch fixes] CSS-only; no id/data-action/class renamed. ============================================================================ */ /* [#3] Purchase-flow primary CTAs (cart Checkout, Pay, empty-state, order-success) were bare