/* ============================================================================
   NABUX — SKIN LAYER  (identity: colour · type · product art · composition)
   ----------------------------------------------------------------------------
   Loads AFTER nabux-fx.css. This file owns what the site *is*; nabux-fx.css owns
   what it *does*. Keeping them apart means the palette can be re-skinned, or
   reverted, without touching a single motion rule.

   The palette swap works by redefining the design tokens on :root. Custom
   properties resolve at use time, so ~150KB of existing CSS that already reads
   var(--brand) / var(--text) / var(--line) picks up the new identity with no
   edits. Only the handful of places that hard-coded a hex need patching, and
   they are listed explicitly in §2 so nothing is swapped by accident.

   HARD RULE, inherited from nabux-fx.css: never declare `color` on a bare
   `button` selector here. nabux-glue.css carries `button{color:var(--text)
   !important}` as the root fix for style.css's over-broad brand-CTA rule.
   ========================================================================== */

/* ---------------------------------------------------- 1. WARM LUXURY TOKENS */
:root{
	/* Base — warm near-black instead of cool navy. Every surface is a warm
	   neutral, so gold reads as metal rather than as a highlighter. */
	--bg:          #0c0a09;
	--panel:       #14110e;
	--panel-soft:  #1c1815;

	--text:        #faf9f8;   /* warm white */
	--muted:       #a8a29e;   /* warm grey — 7.8:1 on base */
	--line:        rgba(250,249,248,.10);

	/* One accent. Gold carries CTAs, prices and eyebrows — nothing else. */
	--brand:       #f5b73c;
	/* The "second colour" is deliberately almost not a colour: warm stone.
	   It labels and links without competing with the gold. */
	--brand-2:     #d6d3d1;
	/* Discounts: warm terracotta. 5.63:1 with the dark ink it carries, where
	   the old hot pink managed only 3.18:1 with white. */
	--danger:      #d9704f;
	--ok:          #8fae7c;   /* muted sage for positive/success */

	--on-brand:    #1a1206;   /* deep warm ink placed ON gold — 10.34:1 */

	/* Translucent surface scale, re-tinted warm so glass does not go blue. */
	--surface-1:   rgba(250,249,248,.055);
	--surface-2:   rgba(250,249,248,.07);
	--surface-3:   rgba(250,249,248,.085);
	--surface-4:   rgba(250,249,248,.095);
	--surface-5:   rgba(250,249,248,.12);

	--brand-tint:    rgba(245,183,60,.12);
	--brand-border:  rgba(245,183,60,.34);
	--danger-tint:   rgba(217,112,79,.14);
	--danger-border: rgba(217,112,79,.34);

	/* Ambient page light: a single warm source, top-left, plus a faint cool
	   counter-light so the dark areas do not go muddy. Two competing neon
	   radials are what made the old page read as "gamer". */
	--page-glow: radial-gradient(60% 40% at 12% -6%, rgba(245,183,60,.10), transparent 70%),
	             radial-gradient(45% 35% at 92% 4%, rgba(214,211,209,.045), transparent 70%);

	/* Gold is metal, so its gradient shifts value, not hue. */
	--grad-brand: linear-gradient(135deg, #ffd97a 0%, #f5b73c 46%, #d99a25 100%);
	--grad-glass: linear-gradient(180deg, rgba(250,249,248,.10), rgba(250,249,248,.04));

	/* Product art base — a neutral surface, not a coloured wash. The colour on
	   an art tile now comes from the product's own brand (see §4). */
	--grad-art: #14110e;

	/* Type families. Sora is the display voice; Inter stays for text, where its
	   larger x-height and tighter rhythm are genuinely better at 14-16px. */
	--font-display: Sora, Inter, ui-sans-serif, system-ui, sans-serif;
	--font-sans:    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Persian and Arabic faces carry less apparent size at the same px than
	   Inter, so every fluid step below is multiplied by this. */
	--tsm: 1;

	--shadow-float: 0 30px 90px rgba(0,0,0,.55);
}
html[dir="rtl"]{--tsm:1.06}
html[lang^="fa"]{--font-display:"Vazirmatn","Estedad",Sora,sans-serif}
html[lang^="ar"]{--font-display:"Tajawal",Sora,sans-serif}

/* ------------------------------------------- 2. HARD-CODED HEXES, CORRECTED */
/* These are the only places in style.css / spa.css / nabux-fx.css that wrote a
   literal colour instead of a token. Each is listed with its source so the swap
   is auditable rather than magic. */

/* spa.css:78 — `.searchBox button, .primaryButton { color:#07100a }` */
.searchBox button,.searchBox button:hover,.primaryButton{color:var(--on-brand)!important}
/* spa.css:1017-1018 — light-theme buyPill ink */
html[data-theme="light"] .buyPill{background:#1a1206;color:#faf9f8}
/* nabux-glue.css:11 — art monogram */
.productCard .cardArt .artMono,.nx-single-wrap .productMedia .artMono{color:var(--text);opacity:.55}

/* nabux-fx.css §1 — the interaction glows were authored in lime/cyan. */
:root{
	--nx-glow-brand:0 0 0 1px rgba(245,183,60,.42), 0 6px 18px rgba(245,183,60,.22), 0 14px 40px rgba(245,183,60,.12);
	--nx-glow-cyan: 0 0 0 1px rgba(214,211,209,.34), 0 6px 18px rgba(214,211,209,.14), 0 14px 40px rgba(214,211,209,.07);
	--nx-skel-base:rgba(250,249,248,.055);
	--nx-skel-edge:rgba(250,249,248,.085);
	--nx-skel-sweep:linear-gradient(100deg,transparent 18%,rgba(250,249,248,.10) 42%,rgba(245,183,60,.09) 52%,rgba(250,249,248,.06) 62%,transparent 84%);
}
/* nabux-fx.css §5 — card hover ring was lime. */
@media (prefers-reduced-motion:no-preference){
	.productCard:hover,.vendorCard:hover,.wc-block-grid__product:hover{
		box-shadow:var(--nx-lift-3),0 0 0 1px rgba(245,183,60,.24);
	}
	/* The buyPill is warm-white, so its bloom is white with a gold undertone. */
	.buyPill:hover,.productCard:hover .buyPill{
		box-shadow:0 0 0 1px rgba(250,249,248,.5),0 6px 18px rgba(250,249,248,.16),0 14px 40px rgba(245,183,60,.12);
	}
}
/* nabux-fx.css §2 — focus ring follows the accent. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline-color:var(--brand)}
.primaryButton:focus-visible,.buyPill:focus-visible,.searchBox button:focus-visible,
.single_add_to_cart_button:focus-visible,.wc-block-components-button.contained:focus-visible{
	box-shadow:0 0 0 5px rgba(245,183,60,.42);
}
/* The live dot breathed in lime. */
@media (prefers-reduced-motion:no-preference){
	@keyframes nxBreathe{
		0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(245,183,60,.55)}
		50%    {opacity:.75;box-shadow:0 0 0 6px rgba(245,183,60,0)}
	}
}

/* ----------------------------------------------------- 3. TYPE: VOICE & SCALE */

/* Display voice: headings, prices, the wordmark, numerals. Everything else
   stays Inter, which is the right tool for 13-16px UI text. */
h1,h2,h3,.nx-h1,.nx-h2,.hero h1,.commerceHero h1,.listingHero h1,
.page-title,.productCard h3,.dealName,.price,.brand,.sectionHeader h2,
.nx-panel__title,.vendorId strong,.dealUnit strong{
	font-family:var(--font-display);
	font-feature-settings:"ss01" 1,"cv11" 1;
}

/* A real scale, fluid between phone and desktop, with the RTL correction baked
   into every step rather than bolted on afterwards. */
.hero h1,.nx-h1{
	font-size:calc(clamp(38px,5.4vw,70px) * var(--tsm));
	line-height:1.02;
	letter-spacing:-.035em;
	font-weight:800;
}
.commerceHero h1,.listingHero h1,.page-title,.nx-single-wrap .productInfo h1{
	font-size:calc(clamp(30px,3.6vw,50px) * var(--tsm));
	line-height:1.08;
	letter-spacing:-.03em;
	font-weight:700;
}
.sectionHeader h2,.nx-h2{
	font-size:calc(clamp(24px,2.4vw,34px) * var(--tsm));
	line-height:1.14;
	letter-spacing:-.025em;
	font-weight:700;
}
.productCard h3{
	font-size:calc(19px * var(--tsm));
	line-height:1.25;
	letter-spacing:-.02em;
	font-weight:700;
}

/* Weight contrast is where the old page was flat — everything sat at 750-900.
   Body text drops to 420 and gains line-height; that difference is what makes
   a heading read as a heading. */
body,p,.productDescription,.vendorNote,.heroText,.emptySub{
	font-family:var(--font-sans);
	font-weight:420;
	line-height:1.62;
	letter-spacing:-.005em;
}
.heroText,.hero p{
	font-size:calc(clamp(15px,1.15vw,17px) * var(--tsm));
	color:var(--muted);
	max-width:52ch;
}
.productDescription{font-size:calc(13.5px * var(--tsm));color:var(--muted)}

/* Eyebrows and labels: small, wide, quiet. Gold is reserved for value, so the
   category label is stone — it is a classification, not a selling point. */
.nx-eyebrow,.categoryLabel,.utilItem,.sectionHeader .nx-eyebrow{
	font-family:var(--font-sans);
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
}
.categoryLabel{font-size:calc(10.5px * var(--tsm));color:var(--muted);opacity:.85}
.nx-eyebrow{font-size:calc(11px * var(--tsm));color:var(--brand)}
.utilItem{font-size:calc(11px * var(--tsm));letter-spacing:.06em;text-transform:none;font-weight:600}

/* Prices are the one number that should feel engraved. */
.price,.dealPrice,.nx-price{
	font-family:var(--font-display);
	font-weight:700;
	letter-spacing:-.03em;
	font-variant-numeric:tabular-nums;
	color:var(--brand);
}
.price{font-size:calc(21px * var(--tsm))}
del,.cardFooter del{color:var(--muted);opacity:.80;font-weight:500;text-decoration-thickness:1px}
/* Measured: --muted (#a8a29e) is 7.46:1 on the card panel, but at opacity .62 it
   composited to #706b67 = 3.57:1, which fails AA for 16px/500 normal text on
   every card on every page. .80 restores it to 5.16:1 and still reads as the
   struck-out "before" price. Same correction for the deal panel's old price. */
del.dealOld,.dealOld{opacity:.80}

/* Persian and Arabic do not take Latin's tight tracking. */
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,
html[dir="rtl"] .price,html[dir="rtl"] .productCard h3{letter-spacing:normal}
html[dir="rtl"] body,html[dir="rtl"] p,html[dir="rtl"] .productDescription{line-height:1.85}

/* ------------------------------------------- 4. PRODUCT ART: SURFACE + HALO */
/* The old tile washed every logo in the same lime→cyan gradient, so ten
   different brands turned into ten identical muddy green rectangles and the
   logo itself was `object-fit:cover`, i.e. cropped. Now: a clean neutral
   surface, the logo fully visible, and a soft halo in that product's OWN brand
   colour — set per card from a data-brand attribute in PHP. Each card gets an
   identity instead of a wash. */
.productCard .cardArt,
.nx-single-wrap .productMedia{
	background:
		radial-gradient(52% 58% at 50% 44%, var(--art-glow, rgba(245,183,60,.12)), transparent 70%),
		var(--panel);
	box-shadow:inset 0 0 0 1px rgba(250,249,248,.055);
}
.productCard .cardArt .artChip img.artLogo{
	/* contain, not cover — a logo that is cropped is no longer a logo. */
	width:auto;height:auto;
	max-width:62%;max-height:56%;
	object-fit:contain;
	filter:drop-shadow(0 6px 18px rgba(0,0,0,.45));
}
.cardsGrid .artChip .artLogo,.cardsGrid .artChip .brandChipLogo{
	width:auto;height:auto;max-width:58%;max-height:54%;
}
.nx-single-wrap .productMedia .artChip img.artLogo{max-width:58%;max-height:230px}

/* Per-brand halo. Deliberately faint. Because the tile artwork is composited
   with mix-blend-mode:luminosity (see §8), the halo's alpha directly controls
   how saturated the tile reads — at .30 the ChatGPT card went fully green and
   the CapCut card fully cyan, which is brand-accurate and completely wrong next
   to gold. At ~.12 the hue is still legible as identity but the tile stays a
   warm neutral. Monochrome brands get a warm wash so their cards are not holes. */
[data-brand="chatgpt"]      {--art-glow:rgba(16,163,127,.13)}
[data-brand="claude"]       {--art-glow:rgba(217,119,87,.10)}
[data-brand="gemini"]       {--art-glow:rgba(66,133,244,.13)}
[data-brand="telegram"],
[data-brand="telegram-premium"]{--art-glow:rgba(42,171,238,.12)}
[data-brand="canva"]        {--art-glow:rgba(0,196,204,.11)}
[data-brand="capcut"]       {--art-glow:rgba(37,244,238,.09)}
/* Gold is a high-chroma hue, so the same alpha that reads as a whisper in green
   reads as a wash in amber. Measured: warm tiles held sat 0.42-0.46 at .10-.15
   while the cool ones fell to 0.23 at .13. The warm set therefore runs lower. */
[data-brand="runway"]       {--art-glow:rgba(245,183,60,.06)}
[data-brand="cursor"]       {--art-glow:rgba(245,183,60,.06)}
[data-brand="grok"]         {--art-glow:rgba(245,183,60,.06)}
[data-brand="elevenlabs"]   {--art-glow:rgba(245,183,60,.06)}

/* Badges sit on the art, so they need their own weight rather than borrowing
   the card's. Terracotta discount, gold "featured". */
.artDiscount,.dealSave{
	background:var(--danger);
	color:var(--on-brand);
	font-weight:800;
	font-size:11px;
	letter-spacing:.01em;
	padding:5px 9px;
	box-shadow:0 4px 14px rgba(0,0,0,.35);
}
/* `direction:ltr` (set in nabux-fx.css §14 to stop bidi moving the minus sign to
   the far end of "-28%") also re-maps inset-inline-start to the physical LEFT,
   so the badge stopped mirroring and sat top-left on fa/ar pages. The text still
   needs the LTR run; only the box needs putting back. */
[dir="rtl"] .cardArt .artDiscount,
[dir="rtl"] .productMedia .artDiscount{left:auto;right:10px}
[dir="rtl"] .cardArt .artBadge,
[dir="rtl"] .productMedia .artBadge{right:auto;left:10px}
.artBadge{background:var(--brand);color:var(--on-brand);font-weight:800;font-size:11px}

/* ------------------------------------------------------------- 5. ICON TONE */
/* Stroke icons at 2.0 looked wiry against warm neutrals. 1.75 with a round cap
   reads as drawn rather than hairline, and the default tone is muted so gold
   stays reserved for value. */
.nxi{stroke-width:1.75;color:inherit}
.delivery .nxi{color:var(--brand)}
.sellerRow .nxi,.vendorRow .nxi,.utilItem .nxi{color:var(--muted);opacity:.9}
.nxi-brand{color:var(--brand)}
.nxi-cyan{color:var(--brand-2)}
/* The trust strip used four different tints for four icons. One tone, one
   surface — the row reads as a set. */
.trustStrip .nxi,.trustItem .nxi{color:var(--brand)}
.trustStrip>*>span:first-child,.trustItem>span:first-child{
	background:var(--brand-tint);border:1px solid var(--brand-border);
}

/* -------------------------------------------------- 6. COMPOSITION & RHYTHM */
/* Cards: a calmer radius and real internal rhythm. 28px on a 400px card is a
   lot of roundness; 20px reads as considered rather than bubbly. */
.productCard{border-radius:20px;padding:16px 16px 18px;background:var(--panel)}
.productCard .cardArt{border-radius:14px;height:168px;margin-bottom:14px}
.cardsGrid .cardArt{height:150px}
.productCard h3{margin:8px 0 6px;min-height:0}
.productCard .productDescription{min-height:0;margin:0 0 14px}
.delivery{margin:0 0 14px;font-size:12.5px;font-weight:600}
.cardFooter{padding-top:14px;gap:12px}
.vendorCard,.nxPanel,.dealPanel{border-radius:20px}

/* Vertical rhythm: the page was a stack of ad-hoc margins. One scale. */
.screen>section,.screen>.sectionHeader{margin-block:0 clamp(40px,5vw,72px)}
.sectionHeader{margin-bottom:clamp(18px,2vw,26px)}

/* The hero's left column was half empty because the copy stopped at the search
   box while the deal card ran on. Pull the column together and let the trust
   row close the fold. */
.hero{gap:clamp(28px,4vw,56px);align-items:center}
.heroCopy>.nx-eyebrow{margin-bottom:10px}
.hero h1{margin:0 0 16px}
.hero .searchBox{margin-top:22px}

/* Buttons: gold fill, warm ink, and enough height to feel deliberate. */
.primaryButton,.searchBox button,.single_add_to_cart_button,
.wc-block-components-button.contained,.button,input[type="submit"]{
	background:var(--grad-brand);
	min-height:46px;
	border-radius:12px;
	font-family:var(--font-sans);
	font-weight:700;
	letter-spacing:-.01em;
}
.ghostButton,.nx-langdd__btn{
	border-radius:12px;min-height:46px;
	background:var(--surface-2);
	font-weight:650;
}
.buyPill{border-radius:999px;font-weight:700;padding:10px 16px}

/* The sale progress bar was hot pink on a lime page. Now it is the discount
   terracotta, which is the same colour as the badge that caused it. */
.dealBar>span,.progressBar>span{background:linear-gradient(90deg,var(--danger),#e8a06b)}

/* Inputs: warm fill, gold focus. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]),select,textarea{
	background:var(--surface-2);border-color:var(--line);border-radius:12px;
}

/* ============================================================================
   7. NEON PURGE — the rules that wrote lime/cyan as a literal, not a token
   ----------------------------------------------------------------------------
   Redefining :root re-skins everything that reads var(--brand). These ~25 rules
   do not: they hard-coded rgba(183,255,60) / rgba(0,212,255) inline, so they
   survived the swap and kept casting the page green. Each override below names
   its source line so the list stays auditable.
   ========================================================================== */

/* spa.css:16 — the body's two neon radials. This was the whole green cast:
   it sits above style.css's token-driven --page-glow and wins on source order. */
body{
	background:var(--page-glow),var(--bg);
	background-attachment:fixed;
}

/* spa.css:115-123 — deal-of-the-day panel wash + corner bloom */
.dealPanel{background:linear-gradient(170deg,rgba(245,183,60,.09),rgba(250,249,248,.035) 58%,rgba(250,249,248,.02))}
.dealPanel::before{background:radial-gradient(circle,rgba(245,183,60,.20),transparent 70%)}

/* spa.css:175 — product hero bloom. The per-brand halo in §4 now carries the
   colour, so this reduces to a neutral lift rather than a second light source. */
.productMedia::before{background:radial-gradient(circle,rgba(250,249,248,.07),transparent 70%)}

/* spa.css:390-393 — the gold CTA still threw a lime shadow */
.primaryButton,.searchBox button{box-shadow:0 6px 20px rgba(245,183,60,.20)}
.primaryButton:hover{box-shadow:0 10px 28px rgba(245,183,60,.30)}

/* spa.css:553, 677, 1054 — status dots */
.onlineDot,.utilDot,.onlineToggle.on .dot{box-shadow:0 0 0 3px rgba(245,183,60,.20)}

/* spa.css:623 — loading ring */
.spinnerRing{border-color:rgba(245,183,60,.18);border-top-color:var(--brand)}

/* spa.css:281, 403, 93, 655 — tinted state surfaces */
.statusPill{background:var(--brand-tint)}
.sellerOfferRow.active{background:rgba(245,183,60,.07)}
.suggestAll:hover{background:rgba(245,183,60,.16)}
.nbxToastCart svg{background:rgba(245,183,60,.14)}

/* spa.css:666 — the card's inner bloom on hover */
.productCard::after{box-shadow:inset 0 0 60px rgba(245,183,60,.06)}

/* spa.css:540 — vendors band */
.vendorsBand::before{background:radial-gradient(60% 120% at 18% 0%,rgba(245,183,60,.06),transparent 62%)}

/* spa.css:481, 716-717 and nabux-glue.css:650, 676, 699, 727, 802, 811 —
   the auth/seller/apply panels all used the same lime→cyan diagonal. */
.celebratePanel,.authBrand,.authBrand.seller,
.nx-sellcta,.nx-apply-banner,.nx-sellstrip-v,[dir="rtl"] .nx-sellcta{
	background:linear-gradient(160deg,rgba(245,183,60,.10),rgba(214,211,209,.04) 58%,transparent);
}

/* spa.css:1080 — the trust row alternated a lime tint and a cyan tint, so four
   icons read as four unrelated things. One tone makes it a set. */
.trustIc,.trustIc.lime,.trustIc.cyan{background:var(--brand-tint);color:var(--brand)}

/* spa.css:1061 — category lead chip */
.catLead{background:var(--brand);color:var(--on-brand)}

/* nabux-glue.css:394 — info notice border */
.wc-block-components-notice-banner.is-info{border-color:rgba(214,211,209,.40)!important}

/* spa.css:148 — the "selling fast" meter ended in a hard-coded #ff8aa6 pink,
   the last piece of the old palette still on the home page. */
.dealStockBar i{background:linear-gradient(90deg,var(--danger),#eda078)}

/* The sticky header still composited to #080a0f — a cool navy left over from
   the old base that the purge above missed, sitting directly above a warm page. */
.topbar,.topbar.is-scrolled{background:rgba(12,10,9,.78)}
.utilBar{background:rgba(12,10,9,.92)}

/* ============================================================================
   8. PRODUCT ART, CORRECTED
   ----------------------------------------------------------------------------
   The uploaded product images are not bare logos — they are pre-rendered dark
   rounded tiles with the mark already set inside them. Shrinking them to 56% of
   a 370px-wide field left a small chip marooned in a large empty rectangle.
   They are the artwork, so they get to be the size of artwork; the surface
   behind them just has to stop competing.
   ========================================================================== */
.artChip{background:transparent;border:0}
.productCard .cardArt{height:172px}
.cardsGrid .cardArt{height:164px}
.productCard .cardArt .artChip img.artLogo,
.cardsGrid .artChip .artLogo,.cardsGrid .artChip .brandChipLogo{
	width:auto;height:auto;
	max-width:none;
	max-height:74%;
	object-fit:contain;
	border-radius:16px;
	filter:drop-shadow(0 10px 26px rgba(0,0,0,.55));
}
.nx-single-wrap .productMedia .artChip img.artLogo{max-height:280px;max-width:80%;border-radius:22px}

/* ---- Re-tinting the baked-in green --------------------------------------
   Measured from a live render: every product tile's interior is #22432e /
   #1f4130 — hue ~145deg, saturation ~0.50 — and it is IDENTICAL across CapCut,
   ChatGPT and Claude. That green is not coming from CSS; it is painted into the
   uploaded .webp assets from the old lime theme, which is why the cards stayed
   green after the page around them went warm (page bg measured #0b0a08, card
   surface #15110e).

   The correct fix is regenerating those ten tiles on a neutral or transparent
   ground. Until that happens, `mix-blend-mode: luminosity` takes the artwork's
   LIGHTNESS and the backdrop's HUE — so each tile now borrows the warm panel
   and its own brand halo instead of carrying someone else's green, and the
   white marks stay white. Reversible in one line once the assets are replaced.
   ------------------------------------------------------------------------- */
.productCard .cardArt,.nx-single-wrap .productMedia,.brandChip{isolation:isolate}
.productCard .cardArt .artChip img.artLogo,
.cardsGrid .artChip .artLogo,.cardsGrid .artChip .brandChipLogo,
.brandChip .artLogo,.brandChipLogo,
.nx-single-wrap .productMedia .artChip img.artLogo{
	mix-blend-mode:luminosity;
}
/* Engines without the blend mode get a filter that desaturates the green and
   pushes what is left warm, so they land in the same place by another route. */
@supports not (mix-blend-mode:luminosity){
	.productCard .cardArt .artChip img.artLogo,
	.cardsGrid .artChip .artLogo,.brandChip .artLogo,.brandChipLogo{
		filter:grayscale(1) sepia(.30) saturate(.85) brightness(.95)
		       drop-shadow(0 10px 26px rgba(0,0,0,.55));
	}
}

/* The "live now" brand rail had the same problem at 25px inside a 46px chip:
   six dark squares that read as empty. Bigger mark, warm surface, own halo. */
.brandChip{
	width:56px;height:56px;border-radius:15px;
	background:radial-gradient(70% 70% at 50% 45%,var(--art-glow,rgba(245,183,60,.16)),transparent 72%),var(--panel);
	border:1px solid var(--line);
}
.brandChipLogo,.brandChip .artLogo{width:34px;height:34px;object-fit:contain}
.dealProduct .brandChip{width:60px;height:60px;border-radius:17px}
.dealProduct .brandChip .artLogo,.dealProduct .brandChipLogo{width:38px;height:38px}

/* ============================================================================
   9. BUY AFFORDANCE
   The pill was solid warm-white, which out-shouted the gold price sitting right
   beside it — two maximum-contrast elements in one 12px row. As an outline it
   still reads as the action, and fills gold only on intent.
   ========================================================================== */
.buyPill{
	background:transparent;
	color:var(--text);
	border:1px solid var(--line);
	font-weight:650;
}
@media (prefers-reduced-motion:no-preference){
	.buyPill{transition:background-color var(--nx-d-md) var(--nx-e-standard),color var(--nx-d-md) var(--nx-e-standard),border-color var(--nx-d-md) var(--nx-e-standard),transform var(--nx-d-xl) var(--nx-e-spring),box-shadow var(--nx-d-md) var(--nx-e-standard)}
}
.productCard:hover .buyPill,.buyPill:hover{
	background:var(--brand);
	color:var(--on-brand);
	border-color:transparent;
	box-shadow:0 6px 18px rgba(245,183,60,.26);
}
.buyPill .nxi{color:currentColor}

/* ============================================================================
   10. HIG REMEDIATION
   ----------------------------------------------------------------------------
   Measured against Apple's Human Interface Guidelines, using only the thresholds
   that transfer to the web. The skill shipping those guidelines is explicit that
   a web app "gets the principles and the foundations (accessibility, color,
   typography, layout, writing) but not Apple's platform conventions", so tab
   bars, sheets, safe areas and menu-bar rules are deliberately not applied.
   ========================================================================== */

/* ---- 10.1 The 7:1 target for custom colour pairs --------------------------
   `dark-mode.md > Dark Mode colors`: "At a minimum, make sure the contrast ratio
   between colors is no lower than 4.5:1. For custom foreground and background
   colors, strive for a contrast ratio of 7:1, especially in small text."
   Every colour here is custom, so 7:1 is the bar, not 4.5:1.

   Measured: --muted #a8a29e is 7.46:1 on --panel at FULL opacity, so it already
   clears the bar. What broke it was dimming it: opacity .80 -> 5.15:1,
   .85 -> 5.67:1, .65 -> 3.69:1. The fix is therefore not a lighter grey fighting
   an alpha; it is removing the alpha and letting size and weight carry the
   hierarchy, which is what the type scale exists for. */
:root{
	--muted:   #b0aaa6;  /* 8.19:1 on panel, 8.60:1 on page - headroom over 7 */
	--muted-2: #a8a29e;  /* 7.46:1 on panel - dim tier, still above target */
}

/* nabux-glue.css:153 `.woocommerce del,.screen del{opacity:.65}` is specificity
   (0,1,1) and was out-ranking the earlier (0,0,1) fix, so the product page's
   struck price sat at 3.69:1 - an outright failure, not merely a miss. */
.screen del,.woocommerce del,.cardFooter del,del.dealOld,.dealOld{
	color:var(--muted-2);
	opacity:1;
	font-weight:500;
	text-decoration-thickness:1px;
}

/* ---- 10.2 Minimum text size ----------------------------------------------
   `accessibility.md > Vision` and `typography.md > Ensuring legibility` set a
   minimum of 11pt, and typography.md extends that floor explicitly to custom
   fonts. Three styles sat under it: .categoryLabel at 10.5px, the mobile-nav
   labels at 10px, and the deal-clock unit labels at 10px. */
.productCard .categoryLabel,.categoryLabel{
	font-size:calc(11.5px * var(--tsm));
	color:var(--muted-2);
	opacity:1;
}
.mnItem span,nav.mobileNav .mnItem{font-size:11px}
#nbxDealClock .dealUnit small,.dealUnit small{font-size:11px}

/* ---- 10.3 Small bold text on the discount badge --------------------------
   11px/800 is small text by any reading. #d9704f gave the dark ink 5.63:1;
   lifting the terracotta to #e08a5f reaches 7.03:1 while staying in the same
   hue family as the "selling fast" meter it is paired with. */
:root{--danger:#e08a5f}
.artDiscount,.dealSave{background:var(--danger)}
.dealStockBar i{background:linear-gradient(90deg,#d9704f,var(--danger))}

/* ---- 10.4 Hit regions -----------------------------------------------------
   `buttons.md > Best practices`: "a button needs a hit region of at least
   44x44 pt ... to ensure that people can select it easily". `accessibility.md >
   Mobility` gives 44x44 as the default and 28x28 as the floor.
   Worst measured case: the Persian nav link at 25.6 x 25.9 - under even the
   absolute minimum on both axes. Footer links measured 351 x 22.7.

   The guideline says hit REGION, not visible size. Expanding the region with a
   positioned pseudo-element satisfies it without moving a pixel of layout,
   which is why the footer does not grow ~190px taller. */
.topbar nav a,.siteFooter .footerGrid a,.seeAll,.breadcrumb{position:relative}
.topbar nav a::after,.siteFooter .footerGrid a::after,
.seeAll::after,.breadcrumb::after{
	content:"";
	position:absolute;
	top:50%;
	inset-inline:-8px;
	height:44px;
	transform:translateY(-50%);
}
/* Adjacent nav items must not swallow each other's region. */
.topbar nav{gap:max(18px,1vw)}

/* ---- 10.5 Prominent button count -----------------------------------------
   `buttons.md > Style`: "Keep the number of prominent buttons to one or two per
   view." Home carried three gold fills above the fold - Account, Search and
   Grab the deal. Search sits inside a field that already declares its purpose,
   so it goes tonal: still unmistakably the submit control, no longer competing
   with the two real calls to action. */
.searchBox button{
	background:var(--surface-3);
	color:var(--brand)!important;
	border:1px solid var(--brand-border);
	box-shadow:none;
}
.searchBox button:hover{
	background:var(--brand-tint);
	border-color:var(--brand);
	box-shadow:none;
	filter:none;
}
.searchBox button::after{display:none}

/* ---- 10.6 Legacy neon still living in plugin CSS -------------------------
   Three pre-skin colours survived inside the marketplace plugin and the comment
   form, all on the product page: a lime-tinted "best price" row (measured
   backdrop #353d20), a cyan rating, and the old hot pink on required markers. */
.comment-form .required,label#comment-form-rating-label .required{color:var(--danger)}
.nabux-offer.is-best{background:var(--brand-tint);border-color:var(--brand-border)}
.nabux-offer__rating{color:var(--muted-2)}

/* ---- 10.7 Surviving 200% text --------------------------------------------
   `accessibility.md > Vision`: "Ideally, give people the option to enlarge text
   by at least 200 percent."
   At 2x, the vendor rows - a non-wrapping flex row - forced the product hero
   column to 433.4px inside a 390px viewport. Combined with the overflow-x:clip
   that stops the page scrolling sideways, roughly 40px of the "Add to cart"
   button was cut off and unreachable. Letting the row wrap and giving every
   hero column permission to shrink fixes it at the source. */
.nabux-offer{flex-wrap:wrap;row-gap:6px}
.nabux-offer__vendor{min-width:0}
.productHero,.productHero>*,.checkoutPanel,.checkoutPanel>*,
.productInfo,.productInfo>*{min-width:0}
.productHero>.productMedia img{max-width:100%;height:auto}