/* CWXshop background + optional monochrome color scheme */
html, body { min-height:100%; background-color:#0d0d0d !important; }

/* The supplied image remains the site background for every color choice. */
body:not(.cwx-payment-page),
body:not(.cwx-payment-page) > div.flex.min-h-screen.flex-col {
  background-color:#0d0d0d !important;
  background-image:linear-gradient(rgba(5,5,5,.12),rgba(5,5,5,.24)),url('/images/cwx-background.jpg?v=20260721c') !important;
  background-position:center top !important;
  background-size:cover !important;
  background-attachment:fixed !important;
  background-repeat:no-repeat !important;
}

body:not(.cwx-payment-page) > div,
body:not(.cwx-payment-page) > div > div,
body:not(.cwx-payment-page) main {
  background-color:transparent !important;
  background-image:none !important;
}

/* Monochrome is the default scheme, but only applies while data-color=mono. */
html[data-color='mono'] body:not(.cwx-payment-page) {
  --background:0 0% 6% !important;
  --foreground:0 0% 96% !important;
  --card:0 0% 10% !important;
  --card-foreground:0 0% 96% !important;
  --popover:0 0% 8% !important;
  --popover-foreground:0 0% 96% !important;
  --primary:0 0% 92% !important;
  --primary-foreground:0 0% 7% !important;
  --secondary:0 0% 18% !important;
  --secondary-foreground:0 0% 94% !important;
  --muted:0 0% 16% !important;
  --muted-foreground:0 0% 72% !important;
  --accent:0 0% 22% !important;
  --accent-foreground:0 0% 98% !important;
  --border:0 0% 28% !important;
  --input:0 0% 25% !important;
  --ring:0 0% 76% !important;
  --scheme-gradient-from:0 0% 88% !important;
  --scheme-gradient-via:0 0% 96% !important;
  --scheme-gradient-to:0 0% 72% !important;
  --scheme-glow:0 0% 75% !important;
  color:#f2f2f2 !important;
}

html[data-color='mono'] body:not(.cwx-payment-page) header,
html[data-color='mono'] body:not(.cwx-payment-page) nav,
html[data-color='mono'] body:not(.cwx-payment-page) footer,
html[data-color='mono'] body:not(.cwx-payment-page) main > section {
  backdrop-filter:grayscale(1) saturate(0) blur(2px);
}

html[data-color='mono'] body:not(.cwx-payment-page) .bg-background,
html[data-color='mono'] body:not(.cwx-payment-page) .bg-card,
html[data-color='mono'] body:not(.cwx-payment-page) .bg-popover,
html[data-color='mono'] body:not(.cwx-payment-page) .bg-white {
  background-color:rgba(18,18,18,.88) !important;
}

html[data-color='mono'] body:not(.cwx-payment-page) h1,
html[data-color='mono'] body:not(.cwx-payment-page) h2,
html[data-color='mono'] body:not(.cwx-payment-page) h3,
html[data-color='mono'] body:not(.cwx-payment-page) h4,
html[data-color='mono'] body:not(.cwx-payment-page) .text-transparent,
html[data-color='mono'] body:not(.cwx-payment-page) .bg-clip-text,
html[data-color='mono'] body:not(.cwx-payment-page) .scheme-gradient-text {
  color:#f7f7f7 !important;
  -webkit-text-fill-color:#f7f7f7 !important;
  background-image:none !important;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}

html[data-color='mono'] body:not(.cwx-payment-page) p,
html[data-color='mono'] body:not(.cwx-payment-page) .text-muted-foreground {
  color:#d2d2d2 !important;
}

html[data-color='mono'] body:not(.cwx-payment-page) .bg-primary,
html[data-color='mono'] body:not(.cwx-payment-page) .bg-blue-500,
html[data-color='mono'] body:not(.cwx-payment-page) .bg-blue-600,
html[data-color='mono'] body:not(.cwx-payment-page) .bg-indigo-500,
html[data-color='mono'] body:not(.cwx-payment-page) .bg-indigo-600 {
  background-color:#e6e6e6 !important;
  color:#111 !important;
}

html[data-color='mono'] body:not(.cwx-payment-page) button,
html[data-color='mono'] body:not(.cwx-payment-page) a,
html[data-color='mono'] body:not(.cwx-payment-page) input,
html[data-color='mono'] body:not(.cwx-payment-page) textarea,
html[data-color='mono'] body:not(.cwx-payment-page) select,
html[data-color='mono'] body:not(.cwx-payment-page) [role='dialog'] {
  border-color:rgba(255,255,255,.22) !important;
}

/* Uploaded/product imagery keeps its source colors. Monochrome applies to UI,
   not to the content merchants upload. */
html[data-color='mono'] body:not(.cwx-payment-page) img {
  filter:none !important;
}

/* Product-detail rich text may carry colored utility classes from its editor.
   Neutralize those surfaces in monochrome mode without touching the content. */
html[data-color='mono'] body:not(.cwx-payment-page) main [class*='bg-blue-'],
html[data-color='mono'] body:not(.cwx-payment-page) main [class*='bg-indigo-'],
html[data-color='mono'] body:not(.cwx-payment-page) main [class*='bg-sky-'],
html[data-color='mono'] body:not(.cwx-payment-page) main [class*='bg-cyan-'] {
  background-color:rgba(20,20,20,.92) !important;
  background-image:none !important;
}

html[data-color='mono'] body:not(.cwx-payment-page) main [class*='border-blue-'],
html[data-color='mono'] body:not(.cwx-payment-page) main [class*='border-indigo-'],
html[data-color='mono'] body:not(.cwx-payment-page) main [class*='border-sky-'],
html[data-color='mono'] body:not(.cwx-payment-page) main [class*='border-cyan-'] {
  border-color:rgba(255,255,255,.28) !important;
}

html[data-color='mono'] body:not(.cwx-payment-page) main [class*='text-blue-'],
html[data-color='mono'] body:not(.cwx-payment-page) main [class*='text-indigo-'],
html[data-color='mono'] body:not(.cwx-payment-page) main [class*='text-sky-'],
html[data-color='mono'] body:not(.cwx-payment-page) main [class*='text-cyan-'] {
  color:#f0f0f0 !important;
}

/* Tailwind Typography uses internal prose variables (including a blue-slate
   preformatted background), so utility-class overrides alone do not reach it. */
html[data-color='mono'] body:not(.cwx-payment-page) main .prose {
  --tw-prose-body:#d8d8d8 !important;
  --tw-prose-headings:#fafafa !important;
  --tw-prose-lead:#dedede !important;
  --tw-prose-links:#fff !important;
  --tw-prose-bold:#fff !important;
  --tw-prose-counters:#c8c8c8 !important;
  --tw-prose-bullets:#a8a8a8 !important;
  --tw-prose-hr:#555 !important;
  --tw-prose-quotes:#ededed !important;
  --tw-prose-quote-borders:#666 !important;
  --tw-prose-captions:#bbb !important;
  --tw-prose-code:#f5f5f5 !important;
  --tw-prose-pre-code:#ededed !important;
  --tw-prose-pre-bg:#151515 !important;
  --tw-prose-th-borders:#666 !important;
  --tw-prose-td-borders:#444 !important;
  color:#d8d8d8 !important;
}

html[data-color='mono'] body:not(.cwx-payment-page) main .prose pre,
html[data-color='mono'] body:not(.cwx-payment-page) main .prose code,
html[data-color='mono'] body:not(.cwx-payment-page) main .prose blockquote,
html[data-color='mono'] body:not(.cwx-payment-page) main .prose table {
  background-color:#151515 !important;
  background-image:none !important;
  border-color:#555 !important;
  color:#ededed !important;
}

/* Payment choices: one built-in v6 icon, readable labels on narrow screens. */
button:has(img[src*='/images/payment/']) > span:first-child {
  width:1.25rem !important;
  height:1.25rem !important;
  flex:0 0 1.25rem !important;
}

@media (max-width:640px) {
  button:has(img[src*='/images/payment/']) {
    min-width:0 !important;
    min-height:3.25rem !important;
    height:auto !important;
    justify-content:flex-start !important;
    gap:.4rem !important;
    padding:.5rem .55rem !important;
  }
  button:has(img[src*='/images/payment/']) > span.truncate {
    display:block !important;
    min-width:0 !important;
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    line-height:1.2 !important;
    text-align:left !important;
    font-size:.72rem !important;
  }
}