/* ═══════════════════════════════════════════════════════════════
   Mashuf Light Theme — retail white / charcoal / crimson
   Applied when <html class="light">
   Page #F4F4F5 · card #FFFFFF · ink #18181B · muted #52525B
   line #E4E4E7 · accent #C41E3A
   ═══════════════════════════════════════════════════════════════ */

html.light {
  color-scheme: light;

  --color-black: #f4f4f5;
  --color-charcoal: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #f4f4f5;
  --color-surface-3: #e4e4e7;
  --color-background: #f4f4f5;
  --color-bg-subtle: #f4f4f5;
  --color-white: #18181b;
  --color-muted: #52525b;
  --color-muted-dark: #3f3f46;
  --color-border: #e4e4e7;
  --color-border-strong: #d4d4d8;

  --lt-bg: #f4f4f5;
  --lt-bg-deep: #e4e4e7;
  --lt-paper: #ffffff;
  --lt-card: #ffffff;
  --lt-ink: #18181b;
  --lt-ink-soft: #3f3f46;
  --lt-muted: #52525b;
  --lt-line: #e4e4e7;
  --lt-accent: #c41e3a;
  --lt-gold: #c41e3a;
  --shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.06);
  --shadow-md: 0 8px 24px rgba(24, 24, 27, 0.06);
  --shadow-lg: 0 16px 40px rgba(24, 24, 27, 0.08);
  --shadow-xl: 0 24px 56px rgba(24, 24, 27, 0.1);
}

html.light body {
  background-color: var(--lt-bg);
  color: var(--lt-ink);
}

html.light h1,
html.light h2,
html.light h3,
html.light h4,
html.light h5,
html.light h6 {
  color: var(--lt-ink);
}

html.light ::-webkit-scrollbar-track {
  background: var(--lt-bg-deep);
}

html.light ::selection {
  background: rgba(196, 30, 58, 0.16);
  color: #8b0020;
}

/* ── Page / band backgrounds ── */
html.light .bg-black,
html.light .bg-zinc-950,
html.light .bg-zinc-900,
html.light .bg-zinc-800,
html.light .bg-charcoal,
html.light .bg-\[\#0B0B0B\],
html.light .bg-\[\#0a0a0a\],
html.light .bg-\[\#09090B\],
html.light .bg-\[\#0c0b09\],
html.light .bg-\[\#121212\],
html.light .bg-\[\#141414\],
html.light .bg-\[\#181818\] {
  background-color: var(--lt-bg);
}

html.light .bg-zinc-950 {
  background-color: var(--lt-paper);
}

html.light .bg-zinc-900,
html.light .bg-charcoal,
html.light .bg-\[\#181818\],
html.light .bg-\[\#121212\] {
  background-color: var(--lt-card);
}

html.light .bg-surface,
html.light .bg-\[\#27272A\] {
  background-color: var(--lt-card);
}

html.light .from-zinc-900,
html.light .from-zinc-950,
html.light .to-zinc-950,
html.light .to-zinc-900,
html.light .via-zinc-900,
html.light .via-zinc-800 {
  --tw-gradient-from: #ffffff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 253 248 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

html.light .to-zinc-950,
html.light .to-zinc-900 {
  --tw-gradient-to: #f4f4f5 var(--tw-gradient-to-position);
}

html.light .from-zinc-900 {
  --tw-gradient-from: #ffffff var(--tw-gradient-from-position);
}

html.light .via-zinc-900,
html.light .via-zinc-800 {
  --tw-gradient-via: #f4f4f5;
}

html.light .bg-gradient-to-b.from-zinc-900,
html.light .bg-gradient-to-br.from-zinc-900,
html.light .bg-gradient-to-b.from-white\/\[0\.055\] {
  background-image: linear-gradient(180deg, #ffffff 0%, #f4f4f5 100%);
}

/* translucent white chips on dark → warm stone tints */
html.light .bg-white\/\[0\.02\],
html.light .bg-white\/\[0\.03\],
html.light .bg-white\/\[0\.04\],
html.light .bg-white\/\[0\.05\],
html.light .bg-white\/\[0\.055\],
html.light .bg-white\/\[0\.06\],
html.light .hover\:bg-white\/\[0\.06\]:hover,
html.light .hover\:bg-white\/5:hover,
html.light .hover\:bg-white\/\[0\.04\]:hover {
  background-color: rgba(24, 24, 27, 0.045);
}

html.light .bg-white\/10,
html.light .bg-white\/\[0\.08\],
html.light .bg-white\/3,
html.light .bg-white\/\[0\.03\] {
  background-color: rgba(24, 24, 27, 0.05);
}

html.light .bg-black\/20,
html.light .bg-black\/25,
html.light .bg-black\/30,
html.light .bg-black\/40 {
  background-color: rgba(24, 24, 27, 0.05);
}

/* Sticky page crumbs / frosted bars (not modal overlays) */
html.light .bg-black\/80 {
  background-color: rgba(255, 255, 255, 0.92);
}

/* Dim overlays stay dim — drawers, dialogs, search */
html.light .bg-black\/88 {
  background-color: rgba(24, 24, 27, 0.58);
}

html.light .bg-gradient-to-r.from-black.to-transparent,
html.light .bg-gradient-to-l.from-black.to-transparent {
  --tw-gradient-from: var(--lt-bg) var(--tw-gradient-from-position);
}

/* ── Text ── */
html.light .text-white {
  color: var(--lt-ink);
}

html.light .text-white\/90,
html.light .text-white\/85,
html.light .text-white\/80,
html.light .text-white\/70,
html.light .text-white\/65 {
  color: var(--lt-ink-soft);
}

html.light .text-zinc-100,
html.light .text-zinc-200,
html.light .text-zinc-300 {
  color: var(--lt-ink-soft);
}

html.light .text-zinc-400,
html.light .text-\[\#A0A0A0\],
html.light .text-muted {
  color: var(--lt-muted);
}

html.light .text-zinc-500,
html.light .text-zinc-600 {
  color: #52525b;
}

html.light .text-zinc-700 {
  color: #52525b;
}

html.light .shop-surface .text-zinc-500,
html.light .shop-surface .text-zinc-600 {
  color: #52525b;
}

html.light .shop-surface .text-gold,
html.light .shop-surface .text-primary {
  color: #b4233c;
}

html.light .text-gold,
html.light .text-gold-300,
html.light .text-gold-light {
  color: #c41e3a;
}

html.light footer {
  background: linear-gradient(180deg, #f4f4f5 0%, #e4e4e7 100%) !important;
  border-color: var(--lt-line) !important;
}

html.light button[class*='from-[#D42B47]'],
html.light button[class*='from-[#C41E3A]'],
html.light a[class*='from-[#D42B47]'] {
  color: #fff !important;
}

html.light .rounded-full.bg-primary,
html.light .bg-primary.text-white {
  color: #fff !important;
}

html.light .text-\[\#FF8FA3\],
html.light .text-\[\#FF7A96\] {
  color: #c41e3a;
}

html.light .group-hover\:text-white:hover,
html.light .hover\:text-white:hover,
html.light .group-hover\:text-\[\#FF8FA3\]:hover {
  color: #8b0020;
}

/* Keep white type on crimson / gold fills */
html.light .bg-primary,
html.light .bg-gold,
html.light .from-\[\#D42B47\],
html.light .from-\[\#E03050\],
html.light .from-\[\#C41E3A\],
html.light .from-red-500,
html.light .from-emerald-500,
html.light [class*="bg-gradient-to-b"][class*="from-[#D42B47]"],
html.light [class*="bg-gradient-to-b"][class*="from-[#C41E3A]"],
html.light [class*="from-[#C41E3A]"],
html.light [class*="from-[#A51830]"],
html.light [class*="from-[#7A0020]"] {
  color: #fff;
}

html.light .from-\[\#D42B47\].text-white,
html.light .from-\[\#E03050\].text-white,
html.light .bg-primary.text-white,
html.light .bg-gold.text-white,
html.light .bg-red-500,
html.light .bg-emerald-500,
html.light .bg-emerald-600,
html.light .bg-primary span,
html.light [class*="from-[#C41E3A]"] .text-white,
html.light [class*="from-[#C41E3A]"] h3,
html.light [class*="from-[#C41E3A]"] p,
html.light [class*="from-[#D42B47]"] .text-white,
html.light [class*="from-[#A51830]"] .text-white,
html.light [class*="from-[#C41E3A]"] .text-white\/65,
html.light .bg-primary .text-white {
  color: #fff !important;
}

html.light .absolute.-left-0\.5.-top-0\.5.text-white,
html.light .rounded-full.bg-primary {
  color: #fff !important;
}

html.light a.bg-white.text-primary,
html.light footer a.bg-white {
  background-color: #fff !important;
  color: #c41e3a !important;
}

/* ── Borders ── */
html.light .border-white\/12,
html.light .border-white\/\[0\.12\],
html.light .border-white\/\[0\.06\],
html.light .border-white\/\[0\.07\],
html.light .border-white\/\[0\.08\],
html.light .border-white\/\[0\.05\],
html.light .border-white\/10,
html.light .border-white\/\[0\.10\],
html.light .border-white\/\[0\.15\],
html.light .border-white\/6,
html.light .border-t-white\/\[0\.06\],
html.light .border-b-white\/\[0\.06\],
html.light .border-b-white\/\[0\.07\] {
  border-color: var(--lt-line);
}

html.light .divide-white\/6 > :not([hidden]) ~ :not([hidden]),
html.light .divide-white\/8 > :not([hidden]) ~ :not([hidden]),
html.light .divide-white\/\[0\.06\] > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--lt-line);
}

html.light .border-\[\#C8A85D\]\/30,
html.light .border-\[\#C8A85D\]\/35,
html.light .border-gold\/25,
html.light .border-gold\/35,
html.light .border-gold\/40 {
  border-color: rgba(154, 123, 60, 0.35);
}

html.light .hover\:border-white\/20:hover,
html.light .hover\:border-white\/\[0\.20\]:hover {
  border-color: rgba(24, 24, 27, 0.2);
}

html.light .ring-1.ring-black\/5,
html.light .ring-black\/5 {
  --tw-ring-color: rgba(24, 24, 27, 0.08);
}

/* ── Cards / glass ── */
html.light .glass-card {
  background: rgba(255, 255, 255, 0.88);
  border-color: var(--lt-line);
}

html.light .home-band {
  background-color: var(--lt-bg);
  border-top-color: var(--lt-line);
}

html.light .home-panel {
  border-color: var(--lt-line);
  background-color: var(--lt-paper);
}

html.light .page-hero {
  background:
    radial-gradient(ellipse at center top, rgba(196, 30, 58, 0.08) 0%, transparent 58%),
    linear-gradient(180deg, #f4f4f5 0%, #e4e4e7 100%);
}

html.light .form-field {
  color: var(--lt-ink);
  background: #fff;
  border-color: var(--lt-line);
}

html.light .section-title {
  color: var(--lt-ink);
}

html.light .mashuf-hero-band {
  background:
    radial-gradient(ellipse at 72% 0%, rgba(196, 30, 58, 0.1) 0%, transparent 48%),
    linear-gradient(180deg, #f4f4f5 0%, #e4e4e7 100%) !important;
}

html.light .mashuf-header {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(24, 24, 27, 0.1) !important;
  box-shadow:
    0 12px 40px rgba(24, 24, 27, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px);
}

html.light .mashuf-header--scrolled {
  background: rgba(255, 255, 255, 0.96) !important;
}

html.light .mashuf-header .via-white\/12,
html.light .mashuf-header .via-white\/20 {
  opacity: 0.4;
}

html.light .mashuf-drawer {
  background: rgba(255, 252, 246, 0.97) !important;
  border-color: rgba(24, 24, 27, 0.1) !important;
  box-shadow: -24px 0 80px rgba(24, 24, 27, 0.14) !important;
}

html.light .mashuf-footer {
  background: linear-gradient(180deg, #f4f4f5 0%, #e4e4e7 100%) !important;
  border-color: var(--lt-line) !important;
}

html.light .divider {
  background: linear-gradient(90deg, transparent, rgba(24, 24, 27, 0.1) 30%, rgba(24, 24, 27, 0.1) 70%, transparent);
}

html.light .mashuf-loader {
  background: var(--lt-bg);
}

html.light .mashuf-loader__title {
  color: var(--lt-ink);
}

html.light .mashuf-loader__mark {
  background: transparent;
  border: none;
  box-shadow: none;
}

html.light .swiper-pagination-bullet {
  background: rgba(24, 24, 27, 0.25) !important;
}

html.light .swiper-button-next,
html.light .swiper-button-prev {
  background: rgba(255, 255, 255, 0.92) !important;
}

html.light .yarl__root {
  background: rgba(244, 239, 230, 0.97) !important;
}

/* Product card overlays stay readable on photos */
html.light .bg-gradient-to-t.from-black {
  --tw-gradient-from: rgb(26 22 18 / 0.88) var(--tw-gradient-from-position);
}

html.light .bg-black\/55 {
  background-color: rgba(24, 24, 27, 0.55);
}

/* Inputs / selects sitting on zinc */
html.light input,
html.light textarea,
html.light select {
  color: var(--lt-ink);
}

html.light option {
  background: #ffffff;
  color: var(--lt-ink);
}

/* Theme toggle */
.mashuf-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 0.75rem;
  color: #a1a1aa;
  transition: background-color 200ms ease, color 200ms ease;
}

.mashuf-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

html.light .mashuf-theme-toggle {
  color: #52525b;
}

html.light .mashuf-theme-toggle:hover {
  background: rgba(24, 24, 27, 0.06);
  color: #18181b;
}

html.light .mashuf-theme-toggle[aria-pressed='true'] {
  color: #c41e3a;
  background: rgba(196, 30, 58, 0.1);
}

html.light .bg-deep-black,
html.light .bg-deep-black\/95,
html.light .bg-zinc-950\/90,
html.light .bg-charcoal\/95 {
  background-color: rgba(255, 255, 255, 0.94);
}

html.light .home-panel {
  background-color: var(--lt-card);
  border-color: var(--lt-line);
}

html.light .home-panel > .bg-black {
  background-color: var(--lt-paper);
}

html.light .mashuf-hero-band .mix-blend-screen {
  mix-blend-mode: multiply;
  opacity: 0.1;
}

html.light .text-black {
  color: #18181b;
}

html.light input::placeholder,
html.light textarea::placeholder {
  color: #71717a;
}

html.light .shadow-\[0_12px_40px_rgba\(0\,0\,0\,0\.35\)\],
html.light .shadow-2xl {
  box-shadow: 0 16px 40px rgba(24, 24, 27, 0.08);
}

html.light .mashuf-on-media .text-white,
html.light .mashuf-on-media h1,
html.light .mashuf-on-media h2,
html.light .mashuf-on-media h3,
html.light .mashuf-on-media p,
html.light .mashuf-on-media span,
html.light .mashuf-on-media .text-zinc-100,
html.light .mashuf-on-media .text-zinc-200,
html.light .mashuf-on-media .text-zinc-300,
html.light .mashuf-on-media .text-zinc-400,
html.light .mashuf-on-media .text-white\/90,
html.light .mashuf-on-media .text-white\/80,
html.light .mashuf-on-media .text-white\/85,
html.light .mashuf-on-media .text-white\/65 {
  color: #fff !important;
}

html.light .fire-doors-banner .mashuf-on-media a,
html.light .fire-doors-banner .mashuf-on-media button {
  color: #fff !important;
}

html.light .enamad-trust-seal,
html.light .enamad-trust-seal * {
  color: inherit;
}

/* Menus, sticky bars, admin chips that used translucent zinc/black */
html.light .bg-zinc-950\/40,
html.light .bg-zinc-950\/50 {
  background-color: rgba(244, 239, 230, 0.72);
}

html.light .mashuf-menu,
html.light .mashuf-glass,
html.light .bg-zinc-950\/95,
html.light .bg-zinc-950\/80,
html.light .bg-zinc-900\/80,
html.light .bg-zinc-900\/90,
html.light .bg-zinc-800\/80,
html.light .bg-\[\#121212\]\/95 {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-color: var(--lt-line) !important;
  box-shadow:
    0 18px 48px rgba(24, 24, 27, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

html.light .mashuf-menu {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 241, 230, 0.96) 100%) !important;
}

html.light .mashuf-header .mashuf-user-trigger,
html.light .mashuf-header .mashuf-user-trigger.bg-primary\/8,
html.light .mashuf-header [class*='bg-primary'].mashuf-user-trigger {
  color: #18181b !important;
  border-color: rgba(196, 30, 58, 0.28) !important;
  background-color: rgba(196, 30, 58, 0.08) !important;
}

html.light .mashuf-header .mashuf-user-label,
html.light .mashuf-header [class*='bg-primary'] .mashuf-user-label,
html.light .mashuf-menu .text-white {
  color: #18181b !important;
}

html.light .mashuf-menu .text-zinc-400,
html.light .mashuf-menu .text-zinc-500,
html.light .mashuf-menu .hover\:text-white:hover {
  color: #3f3f46 !important;
}

html.light .mashuf-menu a.text-primary-400,
html.light .mashuf-menu a.hover\:text-primary-300:hover {
  color: #9f1239 !important;
}

html.light .mashuf-menu button.text-red-400,
html.light .mashuf-menu button.hover\:text-red-300:hover {
  color: #b91c1c !important;
}

html.light .mashuf-menu .border-white\/10,
html.light .mashuf-menu .border-white\/\[0\.07\] {
  border-color: #e4e4e7 !important;
}

html.light .mashuf-menu .hover\:bg-primary\/10:hover {
  background-color: rgba(196, 30, 58, 0.08) !important;
}

html.light .mashuf-menu .hover\:bg-red-500\/10:hover {
  background-color: #fef2f2 !important;
}

html.light .mashuf-glass {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(18px);
}

html.light .mashuf-panel,
html.light [class*='from-[#1a1812]'] {
  background-image: linear-gradient(135deg, #ffffff 0%, #ffffff 52%, #f4f4f5 100%) !important;
}

html.light .mashuf-btn-dark {
  background-image: linear-gradient(180deg, #ffffff 0%, #e4e4e7 100%) !important;
  color: var(--lt-ink) !important;
  border-color: var(--lt-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 8px rgba(24, 24, 27, 0.06) !important;
}

html.light .mashuf-btn-dark:hover {
  background-image: linear-gradient(180deg, #ffffff 0%, #f3ead8 100%) !important;
  color: var(--lt-ink) !important;
}

html.light .mashuf-tab-fade-end {
  background-image: linear-gradient(to left, #ffffff, transparent) !important;
}

html.light .mashuf-tab-fade-start {
  background-image: linear-gradient(to right, #ffffff, transparent) !important;
}

html.light .recharts-cartesian-axis-tick-value {
  fill: #52525b !important;
}

html.light .recharts-cartesian-grid line {
  stroke: rgba(24, 24, 27, 0.08) !important;
}

html.light .bg-gold.text-white {
  color: #fff !important;
}

html.light .from-zinc-900\/90,
html.light .to-zinc-950\/90 {
  --tw-gradient-from: #ffffff var(--tw-gradient-from-position);
  --tw-gradient-to: #f4f4f5 var(--tw-gradient-to-position);
}

html.light .mashuf-chat-in {
  background: rgba(24, 24, 27, 0.06) !important;
  color: var(--lt-ink) !important;
}

html.light .mashuf-glass.bg-black\/80 {
  background: rgba(255, 255, 255, 0.94) !important;
}

/* Zero-profit page bands / calculator gradients */
html.light .bg-\[\#0d0c0a\],
html.light .bg-\[\#0c0b09\],
html.light .from-\[\#1a1610\],
html.light .to-\[\#0c0b09\],
html.light .from-\[\#16120c\],
html.light .via-\[\#12100c\] {
  --tw-gradient-from: #ffffff var(--tw-gradient-from-position);
  --tw-gradient-to: #f4f4f5 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  background-color: var(--lt-paper);
}

html.light .via-\[\#12100c\] {
  --tw-gradient-via: #f4f4f5;
}

html.light .to-\[\#0c0b09\] {
  --tw-gradient-to: #e4e4e7 var(--tw-gradient-to-position);
}

html.light .home-band.bg-\[\#0d0c0a\] {
  background-color: var(--lt-bg) !important;
}

html.light .mashuf-glass.from-\[\#16120c\],
html.light .mashuf-glass.from-\[\#1a1610\] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 241, 230, 0.96) 100%) !important;
  box-shadow:
    0 18px 48px rgba(24, 24, 27, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

html.light .border-\[\#C8A85D\]\/15,
html.light .border-\[\#C8A85D\]\/20,
html.light .border-\[\#C8A85D\]\/25 {
  border-color: rgba(154, 123, 60, 0.28) !important;
}

/* ── About page portrait band ── */
.about-portrait__glow {
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(200, 168, 93, 0.14) 0%, transparent 62%),
    linear-gradient(180deg, #0a0a0a 0%, #000 55%, #000 100%);
}

.about-portrait__halo {
  background: radial-gradient(ellipse at center, rgba(200, 168, 93, 0.28) 0%, transparent 68%);
}

.about-portrait__brand {
  background-image: linear-gradient(135deg, #c8a85d 0%, #e7d3a5 50%, #c8a85d 100%);
}

.about-portrait__caption {
  background: linear-gradient(to left, #000, #09090b, #000);
}

html.light .about-portrait {
  border-color: rgba(24, 24, 27, 0.1);
  background-color: var(--lt-bg);
}

html.light .about-portrait__glow {
  background:
    radial-gradient(ellipse 70% 55% at 50% 36%, rgba(154, 123, 60, 0.12) 0%, transparent 64%),
    linear-gradient(180deg, #ffffff 0%, #f4f4f5 55%, #e4e4e7 100%);
}

html.light .about-portrait__halo {
  background: radial-gradient(ellipse at center, rgba(154, 123, 60, 0.18) 0%, transparent 70%);
  opacity: 0.85;
}

html.light .about-portrait__frame {
  background-color: var(--lt-paper) !important;
  border-color: rgba(154, 123, 60, 0.42) !important;
  box-shadow:
    0 0 0 1px rgba(24, 24, 27, 0.04),
    0 20px 56px rgba(24, 24, 27, 0.1) !important;
}

html.light .about-portrait__frame .ring-white\/10 {
  --tw-ring-color: rgba(24, 24, 27, 0.08);
}

html.light .about-portrait__frame .bg-zinc-950 {
  background-color: #f4f4f5 !important;
}

html.light .about-portrait__caption {
  background: linear-gradient(to left, #ffffff, #ffffff, #f4f4f5);
  border-color: rgba(154, 123, 60, 0.28);
}

html.light .about-portrait__brand {
  background-image: linear-gradient(135deg, #c41e3a 0%, #c41e3a 50%, #c41e3a 100%);
}

/* Product + CMS SEO page crumb / hero bands */
html.light .mashuf-page-crumb {
  background-color: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(24, 24, 27, 0.08) !important;
  backdrop-filter: blur(10px);
}

html.light .mashuf-page-crumb .text-zinc-500 {
  color: #52525b !important;
}

html.light .mashuf-page-crumb-current,
html.light .mashuf-page-crumb .text-white,
html.light .mashuf-page-crumb .text-zinc-300 {
  color: var(--lt-ink) !important;
}

html.light .mashuf-cms-page {
  background-color: var(--lt-bg) !important;
}

html.light .mashuf-cms-page .bg-zinc-950 {
  background-color: var(--lt-paper) !important;
}

html.light .mashuf-cms-page .border-white\/8,
html.light .mashuf-cms-page .border-white\/10 {
  border-color: rgba(24, 24, 27, 0.1) !important;
}

html.light .mashuf-cms-page .text-zinc-400 {
  color: #52525b !important;
}

/* Retail buttons: crimson fill stays white type; outline becomes white + charcoal */
html.light button[class*='border-[#E8506A]'],
html.light a[class*='border-[#E8506A]'] {
  background-color: #ffffff !important;
  color: #18181b !important;
  border-color: #e4e4e7 !important;
  box-shadow: none !important;
}

html.light button[class*='border-[#E8506A]']:hover,
html.light a[class*='border-[#E8506A]']:hover {
  border-color: #c41e3a !important;
  color: #c41e3a !important;
  background-color: #ffffff !important;
}

/* Zero-profit nav chip: readable green on light header */
html.light .mashuf-nav-zero {
  border-color: rgba(5, 150, 105, 0.5) !important;
  background: rgba(16, 185, 129, 0.12) !important;
  color: #047857 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

html.light .mashuf-nav-zero:hover {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #065f46 !important;
}

/* Product cards: white surface, charcoal price, crimson CTA */
html.light article.group {
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #e4e4e7 !important;
  box-shadow: 0 8px 24px rgba(24, 24, 27, 0.06) !important;
}

html.light article.group .text-white {
  color: #18181b !important;
}

html.light article.group .text-zinc-400,
html.light article.group .text-zinc-500 {
  color: #52525b !important;
}

html.light article.group .bg-gold\/15,
html.light article.group .border-gold\/35 {
  background-color: #c41e3a !important;
  border-color: #c41e3a !important;
  color: #ffffff !important;
}

html.light article.group .bg-gold\/15 span,
html.light article.group .bg-gold\/15 svg {
  color: #ffffff !important;
}

/* Mobile sticky buy / cart bar — also the older bg-black/95 bar */
html.light .mashuf-mobile-buybar,
html.light .fixed.bottom-0.bg-black\/95 {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #e4e4e7 !important;
  border-top-color: #e4e4e7 !important;
  box-shadow: 0 -8px 28px rgba(24, 24, 27, 0.08);
}

html.light .fixed.bottom-0.bg-black\/95 .text-white {
  color: #18181b !important;
}

html.light .fixed.bottom-0.bg-black\/95 button,
html.light .fixed.bottom-0.bg-black\/95 button.text-white,
html.light .fixed.bottom-0.bg-black\/95 button svg {
  color: #ffffff !important;
}

html.light .mashuf-mobile-buybar .text-zinc-500 {
  color: #71717a !important;
}

html.light .mashuf-mobile-buybar-price,
html.light .mashuf-mobile-buybar .text-white,
html.light .mashuf-mobile-buybar .text-\[\#C8A85D\],
html.light .mashuf-mobile-buybar .text-\[\#E7D3A5\] {
  color: #18181b !important;
}

html.light .mashuf-mobile-buybar .border-white\/8,
html.light .mashuf-mobile-buybar .border-white\/10,
html.light .mashuf-mobile-buybar .border-\[\#C8A85D\]\/40 {
  border-color: #e4e4e7 !important;
}

html.light .mashuf-mobile-buybar .bg-white\/\[0\.03\] {
  background-color: #f4f4f5 !important;
}

html.light .mashuf-mobile-buybar button.from-\[\#D42B47\],
html.light .mashuf-mobile-buybar a.from-\[\#D42B47\],
html.light .mashuf-mobile-buybar [class*='from-[#D42B47]'],
html.light .mashuf-mobile-buybar [class*='from-[#C41E3A]'],
html.light .mashuf-mobile-buybar button.bg-gradient-to-b,
html.light .mashuf-mobile-buybar a[class*='bg-gold'],
html.light .mashuf-mobile-buybar button[class*='bg-gold'] {
  color: #fff !important;
}

html.light .mashuf-mobile-buybar button.bg-gradient-to-b svg {
  color: #fff !important;
}

/* Calculator hero: light surface, dark type */
html.light .mashuf-calc-hero {
  background: #f4f4f5 !important;
}

html.light .mashuf-calc-hero h1,
html.light .mashuf-calc-hero .text-white {
  color: #18181b !important;
}

html.light .mashuf-calc-hero .text-zinc-400,
html.light .mashuf-calc-hero .text-zinc-500 {
  color: #52525b !important;
}

/* Photo heroes keep light type on the dark scrim */
html.light .mashuf-on-photo h1,
html.light .mashuf-on-photo .text-white,
html.light .mashuf-on-photo a {
  color: #fff !important;
}

html.light .mashuf-on-photo .text-zinc-300 {
  color: rgba(255, 255, 255, 0.9) !important;
}

html.light .mashuf-on-photo .text-zinc-500 {
  color: rgba(255, 255, 255, 0.72) !important;
}

html.light .mashuf-on-photo .text-gold {
  color: #f3d7d4 !important;
}

html.light .mashuf-on-photo a.border {
  border-color: rgba(255, 255, 255, 0.35) !important;
  background-color: rgba(0, 0, 0, 0.35) !important;
}

/* Projects filter bar */
html.light .mashuf-projects-bar {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: #e4e4e7 !important;
}

html.light .mashuf-projects-bar button[aria-selected="false"] {
  border-color: #e4e4e7 !important;
  background: #ffffff !important;
  color: #3f3f46 !important;
}

html.light .mashuf-projects-bar button[aria-selected="false"] span {
  background: #f4f4f5 !important;
  color: #52525b !important;
}

html.light .mashuf-projects-bar button[aria-selected="true"],
html.light .mashuf-projects-bar button[aria-selected="true"] span {
  color: #fff !important;
}

html.light .mashuf-projects-bar button[aria-selected="true"] span {
  background: rgba(255, 255, 255, 0.22) !important;
}

/* Pre-sale campaign card */
html.light .mashuf-presale-card {
  background: #ffffff !important;
  border-color: #e4e4e7 !important;
  box-shadow: 0 8px 24px rgba(24, 24, 27, 0.06) !important;
}

html.light .mashuf-presale-card h2,
html.light .mashuf-presale-card p,
html.light .mashuf-presale-card .text-white,
html.light .mashuf-presale-card .text-zinc-300,
html.light .mashuf-presale-card .text-zinc-400,
html.light .mashuf-presale-card .text-zinc-500 {
  color: #18181b !important;
}

html.light .mashuf-presale-chip,
html.light .mashuf-presale-chip svg,
html.light .mashuf-presale-card .text-\[\#C8A85D\] {
  color: #b4233c !important;
  border-color: rgba(196, 30, 58, 0.35) !important;
}

html.light .mashuf-presale-chip {
  background: rgba(196, 30, 58, 0.08) !important;
}

html.light .mashuf-presale-chip svg {
  fill: #b4233c !important;
}

html.light .mashuf-presale-card .bg-gold-gradient {
  color: #fff !important;
}

/* Cover slider: light panel + dark type (never inherit the generic text-white remap) */
html.light .mashuf-cover-frame {
  background: #f4f4f5 !important;
}

html.light .mashuf-cover-panel {
  background: #ffffff !important;
  border-top-color: #e4e4e7 !important;
}

html.light .mashuf-cover-eyebrow {
  color: #b4233c !important;
}

html.light .mashuf-cover-title {
  color: #18181b !important;
}

html.light .mashuf-cover-desc {
  color: #3f3f46 !important;
}

html.light .mashuf-cover-nav {
  border-color: rgba(24, 24, 27, 0.12) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  color: #18181b !important;
}

html.light .mashuf-cover-dot {
  background: #d4d4d8 !important;
  box-shadow: none !important;
}

html.light .mashuf-cover-dot--active {
  background: #c41e3a !important;
  box-shadow: none !important;
}

/* SEO admin pages workspace */
html.light .mashuf-seo-admin {
  background: #f4f4f5 !important;
  color: #18181b;
}

html.light .mashuf-seo-admin h1,
html.light .mashuf-seo-admin h2,
html.light .mashuf-seo-admin h3,
html.light .mashuf-seo-admin .text-zinc-100,
html.light .mashuf-seo-admin .text-zinc-300 {
  color: #18181b !important;
}

html.light .mashuf-seo-admin .bg-zinc-800,
html.light .mashuf-seo-admin .bg-zinc-900,
html.light .mashuf-seo-admin .bg-zinc-800\/80 {
  background-color: #ffffff !important;
}

html.light .mashuf-seo-admin .bg-zinc-700 {
  background-color: #ffffff !important;
  color: #18181b !important;
  border: 1px solid #e4e4e7;
}

html.light .mashuf-seo-admin .hover\:bg-zinc-600:hover,
html.light .mashuf-seo-admin .hover\:bg-zinc-800:hover {
  background-color: #f4f4f5 !important;
}

html.light .mashuf-seo-admin .border-zinc-700,
html.light .mashuf-seo-admin .border-zinc-800,
html.light .mashuf-seo-admin .divide-zinc-700\/60 > :not([hidden]) ~ :not([hidden]) {
  border-color: #e4e4e7 !important;
}

html.light .mashuf-seo-admin .border-amber-500\/25,
html.light .mashuf-seo-admin .bg-amber-500\/10 {
  background-color: #fff7ed !important;
  border-color: #fdba74 !important;
  color: #9a3412 !important;
}

html.light .mashuf-seo-admin .text-amber-100\/90,
html.light .mashuf-seo-admin .text-amber-300,
html.light .mashuf-seo-admin .text-amber-400,
html.light .mashuf-seo-admin .text-amber-400\/90,
html.light .mashuf-seo-admin .hover\:text-amber-400:hover {
  color: #9a3412 !important;
}

html.light .mashuf-seo-admin .bg-amber-500 {
  background-color: #c41e3a !important;
  color: #ffffff !important;
}

/* Homepage SEO hub stays readable in light theme */
html.light .home-band .text-white {
  color: #18181b !important;
}

html.light section[aria-labelledby='home-seo-hub-title'] a {
  background-color: #ffffff !important;
  border-color: #e4e4e7 !important;
  box-shadow: 0 12px 28px rgba(24, 24, 27, 0.06) !important;
}

html.light section[aria-labelledby='home-seo-hub-title'] a .text-zinc-400,
html.light section[aria-labelledby='home-seo-hub-title'] a .text-zinc-500 {
  color: #3f3f46 !important;
}

/* ── Admin badges (readable on light paper) ── */
html.light .mashuf-badge[data-badge='warning'] {
  background-color: #fff7ed !important;
  color: #9a3412 !important;
  border-color: #fdba74 !important;
}
html.light .mashuf-badge[data-badge='success'] {
  background-color: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #6ee7b7 !important;
}
html.light .mashuf-badge[data-badge='gold'],
html.light .mashuf-badge[data-badge='primary'] {
  background-color: #fff1f2 !important;
  color: #9f1239 !important;
  border-color: #fda4af !important;
}
html.light .mashuf-badge[data-badge='danger'] {
  background-color: #fef2f2 !important;
  color: #b91c1c !important;
  border-color: #fca5a5 !important;
}
html.light .mashuf-badge[data-badge='muted'],
html.light .mashuf-badge[data-badge='outline'],
html.light .mashuf-badge[data-badge='white'] {
  background-color: #f4f4f5 !important;
  color: #3f3f46 !important;
  border-color: #d4d4d8 !important;
}
html.light .mashuf-badge[data-badge='primary'] {
  background-color: #c41e3a !important;
  color: #ffffff !important;
  border-color: #c41e3a !important;
}

/* ── Admin orders hub / kanban light surfaces ── */
html.light .admin-orders-hub {
  background-color: #f4f4f5 !important;
}
html.light .admin-orders-hub .bg-zinc-900,
html.light .admin-orders-hub .bg-zinc-900\/70,
html.light .admin-orders-hub .bg-\[\#181818\],
html.light .admin-order-card {
  background-color: #ffffff !important;
}
html.light .admin-orders-hub .text-zinc-100,
html.light .admin-orders-hub .text-white,
html.light .admin-order-card .text-white {
  color: #18181b !important;
}
html.light .admin-orders-hub .text-zinc-300,
html.light .admin-orders-hub .text-zinc-400,
html.light .admin-orders-hub .text-zinc-500,
html.light .admin-order-card .text-\[\#A0A0A0\] {
  color: #52525b !important;
}
html.light .admin-orders-hub .border-white\/8,
html.light .admin-orders-hub .border-zinc-700,
html.light .admin-order-card {
  border-color: #e4e4e7 !important;
}
html.light .admin-orders-hub .bg-black\/25,
html.light .admin-orders-hub .bg-black\/30,
html.light .admin-order-card .bg-black\/25,
html.light .admin-order-card .bg-black\/30 {
  background-color: #f4f4f5 !important;
}
html.light .admin-orders-hub .text-amber-200,
html.light .admin-orders-hub .text-amber-100,
html.light .admin-order-card .text-amber-300\/90 {
  color: #9a3412 !important;
}
html.light .admin-orders-hub article:hover,
html.light .admin-order-card:hover {
  border-color: #d4d4d8 !important;
  background-color: #fafafa !important;
}
html.light .admin-orders-hub select,
html.light .admin-order-card select {
  background-color: #ffffff !important;
  color: #18181b !important;
  border-color: #d4d4d8 !important;
}

/* Tool leads admin — readable on light paper */
html.light .admin-tool-leads {
  background: #f4f4f5 !important;
  color: #18181b;
}
html.light .admin-tool-leads .bg-zinc-800,
html.light .admin-tool-leads .bg-zinc-900,
html.light .admin-tool-leads .bg-zinc-900\/50,
html.light .admin-tool-leads .bg-zinc-950 {
  background-color: #ffffff !important;
}
html.light .admin-tool-leads .text-zinc-100,
html.light .admin-tool-leads .text-zinc-200,
html.light .admin-tool-leads .text-zinc-300 {
  color: #18181b !important;
}
html.light .admin-tool-leads .text-zinc-400,
html.light .admin-tool-leads .text-zinc-500 {
  color: #52525b !important;
}
html.light .admin-tool-leads .border-zinc-700,
html.light .admin-tool-leads .border-zinc-700\/50 {
  border-color: #e4e4e7 !important;
}
html.light .admin-tool-leads .hover\:bg-zinc-700\/30:hover {
  background-color: #fafafa !important;
}
html.light .admin-tool-leads button.bg-zinc-800,
html.light .admin-tool-leads button.bg-zinc-700 {
  background-color: #ffffff !important;
  color: #18181b !important;
  border: 1px solid #d4d4d8;
}
html.light .admin-tool-leads button.bg-zinc-800:hover,
html.light .admin-tool-leads button.bg-zinc-700:hover {
  background-color: #f4f4f5 !important;
}
html.light .admin-tool-leads .text-amber-400,
html.light .admin-tool-leads .hover\:text-amber-300:hover,
html.light .admin-tool-leads a.text-amber-400 {
  color: #9f1239 !important;
}
html.light .admin-tool-leads .bg-emerald-500\/20,
html.light .admin-tool-leads .text-emerald-300 {
  background-color: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0;
}
html.light .admin-tool-leads button.bg-amber-500,
html.light .admin-tool-leads .bg-amber-500 {
  background-color: #c41e3a !important;
  color: #ffffff !important;
}
html.light .admin-tool-leads button.bg-amber-500:hover {
  background-color: #a51830 !important;
}
html.light .admin-tool-leads .bg-zinc-100 {
  background-color: #18181b !important;
  color: #ffffff !important;
}

/* Order detail empty / warning callouts */
html.light .text-amber-200 {
  color: #9a3412 !important;
}
html.light .border-amber-500\/20 {
  border-color: #fdba74 !important;
}
html.light .bg-amber-500\/5 {
  background-color: #fff7ed !important;
}

/* Role mark stays a solid badge; icon must stay light on the gradient */
html.light .mashuf-role-mark .text-white {
  color: #ffffff !important;
}

/* Segmented tabs: light track, white selected pill, dark label */
html.light .mashuf-segment .bg-zinc-900\/80 {
  background-color: #f4f4f5 !important;
  border-color: #e4e4e7 !important;
  box-shadow: inset 0 1px 2px rgba(24, 24, 27, 0.06) !important;
}

html.light .mashuf-segment .from-zinc-900 {
  opacity: 0;
}

html.light .mashuf-segment [role='tab'] {
  color: #52525b !important;
}

html.light .mashuf-segment [role='tab'][data-state='active'],
html.light .mashuf-segment [role='tab'][data-state='active'] .text-white {
  color: #18181b !important;
}

html.light .mashuf-segment-pill,
html.light .mashuf-segment [role='tab'] > span.absolute {
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 1px 4px rgba(24, 24, 27, 0.16) !important;
}

/* Product phone row and quality note */
html.light a.mashuf-product-call {
  background-color: #fff5f6 !important;
  border-color: rgba(196, 30, 58, 0.28) !important;
}

html.light a.mashuf-product-call .text-white,
html.light a.mashuf-product-call .text-zinc-500,
html.light a.mashuf-product-call .text-zinc-600 {
  color: #18181b !important;
}

html.light a.mashuf-product-call .text-zinc-500 {
  color: #52525b !important;
}

html.light .mashuf-product-note {
  background-color: #fffbeb !important;
  border-color: rgba(154, 123, 60, 0.4) !important;
  color: #3f3f46 !important;
}

html.light .mashuf-product-note .text-gold,
html.light .mashuf-product-note svg {
  color: #9a3412 !important;
}

/* Footer legal bar */
html.light .mashuf-footer .bg-black\/35 {
  background-color: rgba(255, 255, 255, 0.72) !important;
}

html.light .mashuf-footer .border-white\/\[0\.05\] {
  border-color: #e4e4e7 !important;
}

html.light .mashuf-footer .text-zinc-600,
html.light .mashuf-footer .text-zinc-600 a {
  color: #3f3f46 !important;
}

/* Tools coming-soon cards */
html.light .mashuf-tools-page .mashuf-soon-card {
  background-color: #ffffff !important;
  border-color: #d4d4d8 !important;
  opacity: 1 !important;
}

html.light .mashuf-tools-page .mashuf-soon-card .text-zinc-300,
html.light .mashuf-tools-page .mashuf-soon-card .text-zinc-500 {
  color: #18181b !important;
}

html.light .mashuf-tools-page .mashuf-soon-card .text-zinc-500 {
  color: #52525b !important;
}

html.light .mashuf-tools-page .mashuf-soon-card .text-amber-300 {
  color: #9a3412 !important;
  background-color: #fff7ed !important;
  border-color: #fdba74 !important;
}

/* Zero-profit sample invoice */
html.light .mashuf-invoice {
  background-color: #fafafa !important;
  border-color: #e4e4e7 !important;
}

html.light .mashuf-invoice .text-white,
html.light .mashuf-invoice .text-zinc-200,
html.light .mashuf-invoice .text-\[\#E7D3A5\] {
  color: #18181b !important;
}

html.light .mashuf-invoice .text-\[\#C8A85D\] {
  color: #9a3412 !important;
}

html.light .mashuf-invoice .text-zinc-500 {
  color: #52525b !important;
}

html.light .mashuf-invoice .border-white\/8,
html.light .mashuf-invoice .bg-white\/\[0\.02\] {
  border-color: #e4e4e7 !important;
  background-color: #ffffff !important;
}

html.light .mashuf-invoice .bg-\[\#C8A85D\]\/10 {
  background-color: #fff7ed !important;
  border-color: rgba(154, 123, 60, 0.35) !important;
}

/* Zero-profit page: pale gold type on a light surface */
html.light .mashuf-zero-page .text-\[\#C8A85D\],
html.light .mashuf-zero-page .text-\[\#E7D3A5\],
html.light .mashuf-zero-page .text-\[\#C8A85D\]\/80,
html.light .mashuf-zero-page .hover\:text-\[\#E7D3A5\]:hover {
  color: #9a3412 !important;
}

html.light .mashuf-zero-page .bg-\[\#C8A85D\]\/10,
html.light .mashuf-zero-page .bg-\[\#C8A85D\]\/15 {
  background-color: #fff7ed !important;
}

html.light .mashuf-zero-page .border-\[\#C8A85D\]\/25,
html.light .mashuf-zero-page .border-\[\#C8A85D\]\/30,
html.light .mashuf-zero-page .border-\[\#C8A85D\]\/35,
html.light .mashuf-zero-page .border-\[\#C8A85D\]\/50 {
  border-color: rgba(154, 52, 18, 0.4) !important;
}