/* Final storefront theme audit, 2026-10-22. These selectors also support the
   frozen production markup, keeping business/runtime modules unchanged. */

/* Shop main/footer are stacking contexts below the fixed site header. Raise
   their context only while a cart or modal is present, in either theme. */
.sf-shop > main:has(.fixed.z-\[101\], .fixed[role='dialog']) {
  z-index: 400;
}
.sf-storefront > footer:has(.fixed[role='dialog']) {
  z-index: 1001;
}
.sf-shop .fixed.z-\[101\] {
  height: 100dvh;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sf-shop .fixed.z-\[101\] > .border-b > button {
  min-width: 44px;
  min-height: 44px;
}

/* Article backdrops are presentation layers, separate from the actual cover
   and article images. Override the legacy inline cream gradient alone. */
html.sf-theme-dark .sf-storefront .bg-\[\#f5f1e9\] > [aria-hidden='true'][style] {
  background-image:
    radial-gradient(circle at 84% 24%, rgb(var(--sf-accent) / 0.07), transparent 31%),
    linear-gradient(180deg, rgb(var(--sf-canvas)), rgb(var(--sf-surface))) !important;
}
html.sf-theme-dark .sf-storefront .bg-\[\#f5f1e9\] > [aria-hidden='true'] > div > .absolute.inset-0 {
  background: linear-gradient(180deg, rgb(var(--sf-canvas) / 0.5), rgb(var(--sf-surface) / 0.96));
}
html.sf-theme-dark .sf-storefront .article-content blockquote {
  color: rgb(var(--sf-secondary));
  border-color: rgb(var(--sf-accent));
}
html.sf-theme-dark .sf-storefront .article-content a {
  color: rgb(var(--sf-accent));
}
html.sf-theme-dark .sf-storefront .article-content hr {
  border-color: rgb(var(--sf-border));
}

/* Preserve opacity and transparent endpoints instead of turning decorative
   gradients or photo scrims into solid surfaces. */
html.sf-theme-dark .sf-storefront :where(.from-white\/50, .from-white\/95) {
  --sf-gradient-from-opacity: 0.5;
  --tw-gradient-from: rgb(var(--sf-surface) / var(--sf-gradient-from-opacity)) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--sf-surface) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html.sf-theme-dark .sf-storefront .from-white\/95 { --sf-gradient-from-opacity: 0.95; }
html.sf-theme-dark .sf-storefront .via-white\/70 {
  --tw-gradient-to: rgb(var(--sf-surface) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--sf-surface) / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html.sf-theme-dark .sf-storefront .to-white\/70 {
  --tw-gradient-to: rgb(var(--sf-surface) / 0.7) var(--tw-gradient-to-position);
}
html.sf-theme-dark .sf-storefront .to-white\/0 {
  --tw-gradient-to: rgb(var(--sf-surface) / 0) var(--tw-gradient-to-position);
}
html.sf-theme-dark .sf-storefront .bg-white\/55 {
  background-color: rgb(var(--sf-raised) / 0.95);
}

/* Legacy crypto setup panels and token labels used colors outside the first
   neutral adapter. Keep currency text legible without altering any offer. */
html.sf-theme-dark .sf-storefront .bg-\[\#eef7f7\] {
  background-color: rgb(var(--sf-muted-surface));
}
html.sf-theme-dark .sf-storefront .text-cyan-950 {
  color: #a5e6ee;
}

/* An outlined product action needs a visible edge on charcoal. Primary and
   selected filled controls retain the existing ivory/ink role pair. */
html.sf-theme-dark .sf-storefront :where(button, a):where(.bg-white):where(.border-gray-900) {
  border-color: rgb(var(--sf-subtle));
}
html.sf-theme-dark .sf-storefront :where(button, a):where(.bg-white):where(.border-gray-900):hover {
  border-color: rgb(var(--sf-accent));
}