/**
 * Flash Resolve: Clean Studio Dark Theme
 * Refined, non-vibecoded professional aesthetic.
 * Pure obsidian/slate canvas, crisp hairline borders, high typography contrast,
 * zero noisy background images/videos/cosmic textures.
 * 
 * Reversible: Linked via theme-dark-clean.css and scoped to html:not([data-theme="bright"]) and html[data-theme="dark"].
 */

/* ==========================================================================
   1. REMOVE NOISY BACKGROUND IMAGES, VIDEOS, AND PSEUDO-ELEMENTS
   ========================================================================== */

/* Hide home video & poster backdrop */
html:not([data-theme="bright"]) .mock-motion-backdrop,
html[data-theme="dark"] .mock-motion-backdrop {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Atmospheric deep obsidian studio canvas (lower opacity version of Light mode) */
html:not([data-theme="bright"]) body,
html[data-theme="dark"] body,
html:not([data-theme="bright"]) .flow-page,
html[data-theme="dark"] .flow-page,
html:not([data-theme="bright"]) .market-page,
html[data-theme="dark"] .market-page,
html:not([data-theme="bright"]) .public-studio-page,
html[data-theme="dark"] .public-studio-page,
html:not([data-theme="bright"]) .mockup-home,
html[data-theme="dark"] .mockup-home {
  background-color: #0b0f17 !important;
  background-image: 
    radial-gradient(ellipse 1300px 650px at 50% -120px, rgba(56, 189, 248, 0.12), transparent 75%),
    radial-gradient(circle 850px at 82% 85%, rgba(99, 102, 241, 0.10), transparent 70%),
    radial-gradient(circle 750px at 12% 38%, rgba(56, 189, 248, 0.08), transparent 65%),
    radial-gradient(circle, rgba(56, 189, 248, 0.08) 1.2px, transparent 1.2px),
    linear-gradient(rgba(56, 189, 248, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.02) 1px, transparent 1px),
    radial-gradient(circle 1400px at 50% 45%, transparent 35%, rgba(7, 10, 15, 0.85) 85%, #05070a 100%),
    linear-gradient(180deg, #0d1219 0%, #070a0e 100%) !important;
  background-size: 
    100% 100%,
    100% 100%,
    100% 100%,
    32px 32px,
    32px 32px,
    32px 32px,
    100% 100%,
    100% 100% !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, no-repeat, no-repeat !important;
  color: #f1f5f9 !important;
}

/* Translucent frosted glass sidebar blending with canvas */
html:not([data-theme="bright"]) .market-sidebar,
html[data-theme="dark"] .market-sidebar {
  background: rgba(11, 14, 20, 0.92) !important;
  backdrop-filter: blur(24px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.1) !important;
  border-right: 1px solid rgba(56, 189, 248, 0.08) !important;
}

.studio-index,
.new-store-overview,
.store-content-wrapper,
.category-browser-page,
.category-browser-main,
.flow-main {
  background: transparent !important;
}

/* Ample bottom breathing room */
.store-content-wrapper,
.category-browser-main {
  padding-bottom: 90px !important;
}

/* Remove Store updates sidebar entirely */
.store-updates-sidebar,
[data-store-updates] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Deep celestial cosmic starfield and subtle nebula at lower opacity for Dark Mode */
html:not([data-theme="bright"]) body::before,
html[data-theme="dark"] body::before,
html:not([data-theme="bright"]) .flow-page::before,
html[data-theme="dark"] .flow-page::before,
html:not([data-theme="bright"]) .market-page::before,
html[data-theme="dark"] .market-page::before {
  content: "" !important;
  position: fixed !important;
  inset: -60px !important;
  z-index: -2 !important;
  pointer-events: none !important;
  opacity: 0.28 !important;
  background-image: 
    radial-gradient(circle 950px at 25% 20%, rgba(56, 189, 248, 0.22), transparent 65%),
    radial-gradient(circle 800px at 75% 65%, rgba(129, 140, 248, 0.18), transparent 60%),
    radial-gradient(ellipse 1100px 500px at 50% 0%, rgba(56, 189, 248, 0.16), transparent 70%),
    radial-gradient(2px 2px at 15% 15%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(2.5px 2.5px at 35% 45%, rgba(255, 255, 255, 0.60), transparent),
    radial-gradient(1.5px 1.5px at 55% 25%, rgba(255, 255, 255, 0.50), transparent),
    radial-gradient(3px 3px at 70% 30%, rgba(56, 189, 248, 0.70), transparent),
    radial-gradient(2px 2px at 85% 60%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(2.5px 2.5px at 20% 75%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1.5px 1.5px at 45% 85%, rgba(56, 189, 248, 0.55), transparent),
    radial-gradient(2.5px 2.5px at 90% 15%, rgba(255, 255, 255, 0.70), transparent),
    linear-gradient(180deg, rgba(8, 12, 18, 0.78) 0%, rgba(5, 7, 11, 0.92) 100%),
    url("../assets/home2-cosmic-hero.jpg") !important;
  background-size: 
    100% 100%,
    100% 100%,
    100% 100%,
    350px 350px,
    450px 450px,
    280px 280px,
    500px 500px,
    400px 400px,
    380px 380px,
    420px 420px,
    300px 300px,
    100% 100%,
    cover !important;
  background-position: 
    center,
    center,
    center top,
    0 0,
    40px 60px,
    100px 30px,
    -50px 80px,
    80px -20px,
    -30px 100px,
    60px 40px,
    0 0,
    center,
    center top !important;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat !important;
}

html:not([data-theme="bright"]) body::after,
html[data-theme="dark"] body::after,
html:not([data-theme="bright"]) .flow-page::after,
html[data-theme="dark"] .flow-page::after,
html:not([data-theme="bright"]) .market-page::after,
html[data-theme="dark"] .market-page::after {
  content: none !important;
  display: none !important;
}

/* ==========================================================================
   2. REFINED NAVIGATION BAR
   ========================================================================== */

html:not([data-theme="bright"]) .flow-nav,
html[data-theme="dark"] .flow-nav,
.market-page .flow-nav,
.flow-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(10, 12, 16, 0.85) !important;
  backdrop-filter: blur(16px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.15) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
}

.flow-nav-notif-wrap {
  position: relative !important;
  z-index: 1001 !important;
}

.flow-notifications-flyout {
  z-index: 1002 !important;
}

html:not([data-theme="bright"]) .flow-brand strong,
html[data-theme="dark"] .flow-brand strong {
  color: #ffffff !important;
  font-weight: 700 !important;
}

html:not([data-theme="bright"]) .brand-scribble,
html[data-theme="dark"] .brand-scribble,
.flow-brand .brand-scribble {
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  font-family: 'Caveat', 'Dawning of a New Day', 'Zeyada', cursive, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 0.9 !important;
  color: #38bdf8 !important;
  transform: rotate(-5deg) translateY(-2px) !important;
  margin-left: 6px !important;
  white-space: nowrap !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.5) !important;
  user-select: none !important;
  pointer-events: none !important;
  opacity: 0.95 !important;
  text-transform: lowercase !important;
  vertical-align: middle !important;
}

html:not([data-theme="bright"]) .flow-nav nav a,
html[data-theme="dark"] .flow-nav nav a {
  color: #94a3b8 !important;
  font-weight: 500 !important;
  transition: color 0.15s ease, background-color 0.15s ease !important;
}

html:not([data-theme="bright"]) .flow-nav nav a:hover,
html[data-theme="dark"] .flow-nav nav a:hover {
  color: #ffffff !important;
}

html:not([data-theme="bright"]) .flow-nav nav a[aria-current="page"],
html[data-theme="dark"] .flow-nav nav a[aria-current="page"] {
  color: #ffffff !important;
}

html:not([data-theme="bright"]) .flow-social-link,
html[data-theme="dark"] .flow-social-link {
  color: #64748b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 6px !important;
}

html:not([data-theme="bright"]) .flow-social-link:hover,
html[data-theme="dark"] .flow-social-link:hover {
  color: #f1f5f9 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

html:not([data-theme="bright"]) .theme-toggle-btn,
html[data-theme="dark"] .theme-toggle-btn {
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 6px !important;
}

html:not([data-theme="bright"]) .theme-toggle-btn:hover,
html[data-theme="dark"] .theme-toggle-btn:hover {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

html:not([data-theme="bright"]) .flow-preview-toggle,
html[data-theme="dark"] .flow-preview-toggle {
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Primary CTA Button (Get Flash): Apple-style solid white with perfect optical alignment */
html:not([data-theme="bright"]) .flow-actions > a[href*="app-store"],
html[data-theme="dark"] .flow-actions > a[href*="app-store"] {
  background: #ffffff !important;
  color: #000000 !important;
  font-family: var(--sf-pro), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 15px 1px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

html:not([data-theme="bright"]) .flow-actions > a[href*="app-store"]:hover,
html[data-theme="dark"] .flow-actions > a[href*="app-store"]:hover {
  background: #f1f5f9 !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 12px rgba(255, 255, 255, 0.25), 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

html:not([data-theme="bright"]) .flow-actions > a[href*="app-store"]:active,
html[data-theme="dark"] .flow-actions > a[href*="app-store"]:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Top-Right Account and Sign-in Component (Matches Live Site) */
html:not([data-theme="bright"]) .flow-actions > a[href*="account"],
html[data-theme="dark"] .flow-actions > a[href*="account"],
.flow-actions [data-flow-nav-account],
.flow-actions [data-nav-auth-link],
.flow-actions .flow-nav-account-btn,
.flow-actions .flow-nav-signin-btn,
.public-studio-page:not(.mockup-home) .flow-actions a[href*="account"],
.public-studio-page:not(.mockup-home) .flow-actions [data-flow-nav-account] {
  box-sizing: border-box !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #f4f4ef !important;
  font-family: var(--sf-pro), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

html:not([data-theme="bright"]) .flow-actions > a[href*="account"]:hover,
html[data-theme="dark"] .flow-actions > a[href*="account"]:hover,
.flow-actions [data-flow-nav-account]:hover,
.flow-actions [data-nav-auth-link]:hover,
.flow-actions .flow-nav-account-btn:hover,
.flow-actions .flow-nav-signin-btn:hover,
.public-studio-page:not(.mockup-home) .flow-actions a[href*="account"]:hover,
.public-studio-page:not(.mockup-home) .flow-actions [data-flow-nav-account]:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  color: #ffffff !important;
}

/* Bright theme override for top-right account button */
html[data-theme="bright"] .flow-actions > a[href*="account"],
html[data-theme="bright"] .flow-actions [data-flow-nav-account],
html[data-theme="bright"] .flow-actions [data-nav-auth-link],
html[data-theme="bright"] .flow-actions .flow-nav-account-btn,
html[data-theme="bright"] .flow-actions .flow-nav-signin-btn {
  background: rgba(56, 189, 248, 0.08) !important;
  border: 1px solid rgba(56, 189, 248, 0.2) !important;
  color: rgb(240, 246, 252) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

/* Standalone Header Credit Counter and Plus Buy Button */
.flow-nav-credit-counter,
.flow-actions [data-flow-nav-credits] {
  box-sizing: border-box !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 5px 0 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #f4f4ef !important;
  font-family: var(--sf-pro), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: background-color 0.18s ease, border-color 0.18s ease !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  user-select: none !important;
}

.flow-nav-credit-counter:hover,
.flow-actions [data-flow-nav-credits]:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

.flow-nav-credit-val {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  color: #38bdf8 !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  user-select: none !important;
}

.flow-nav-credit-val b,
.flow-nav-credit-val [data-nav-credit-balance] {
  color: #38bdf8 !important;
  font-weight: 750 !important;
}

.flow-actions .flow-nav-credit-counter button.flow-nav-credit-add-btn,
.flow-actions button.flow-nav-credit-add-btn,
button.flow-nav-credit-add-btn,
.flow-nav-credit-add-btn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 4px !important;
  background: rgba(56, 189, 248, 0.18) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  color: #38bdf8 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
  outline: none !important;
  text-decoration: none !important;
}

.flow-actions .flow-nav-credit-counter button.flow-nav-credit-add-btn:hover,
.flow-actions button.flow-nav-credit-add-btn:hover,
button.flow-nav-credit-add-btn:hover,
.flow-nav-credit-add-btn:hover {
  background: rgba(56, 189, 248, 0.38) !important;
  border-color: rgba(56, 189, 248, 0.7) !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
}

.flow-actions .flow-nav-credit-counter button.flow-nav-credit-add-btn:active,
.flow-actions button.flow-nav-credit-add-btn:active,
button.flow-nav-credit-add-btn:active,
.flow-nav-credit-add-btn:active {
  transform: scale(0.94) !important;
}

/* Bright theme support */
html[data-theme="bright"] .flow-nav-credit-counter,
html[data-theme="bright"] .flow-actions [data-flow-nav-credits] {
  background: rgba(56, 189, 248, 0.08) !important;
  border: 1px solid rgba(56, 189, 248, 0.2) !important;
  color: #0f172a !important;
}

html[data-theme="bright"] .flow-nav-credit-val,
html[data-theme="bright"] .flow-nav-credit-val b {
  color: #0284c7 !important;
}

html[data-theme="bright"] .flow-actions button.flow-nav-credit-add-btn,
html[data-theme="bright"] button.flow-nav-credit-add-btn,
html[data-theme="bright"] .flow-nav-credit-add-btn {
  background: rgba(2, 132, 199, 0.12) !important;
  border-color: rgba(2, 132, 199, 0.3) !important;
  color: #0284c7 !important;
}

html[data-theme="bright"] .flow-actions button.flow-nav-credit-add-btn:hover,
html[data-theme="bright"] button.flow-nav-credit-add-btn:hover,
html[data-theme="bright"] .flow-nav-credit-add-btn:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
}

/* Cyan credit badge inside account button */
.flow-nav-credit-badge {
  margin-left: 6px !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: rgba(56, 189, 248, 0.18) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  color: #38bdf8 !important;
  font-weight: 750 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Header Account Container and Dropdown Menu */
.flow-nav-account-container {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Credits + account merged into one pill: [ 822,683 cr (+) | (B) name v ] */
.flow-nav-account-container.is-merged {
  box-sizing: border-box !important;
  height: 34px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

.flow-actions .flow-nav-account-container.is-merged .flow-nav-credit-counter[data-flow-nav-credits] {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 10px 0 12px !important;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.flow-actions .flow-nav-account-container.is-merged .flow-nav-account-btn[data-flow-nav-account] {
  height: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 8px 8px 0 !important;
  background: transparent !important;
}

.flow-actions .flow-nav-account-container.is-merged .flow-nav-account-btn[data-flow-nav-account]:hover,
.flow-actions .flow-nav-account-container.is-merged .flow-nav-credit-counter[data-flow-nav-credits]:hover {
  background: rgba(255, 255, 255, 0.07) !important;
}

html[data-theme="bright"] .flow-nav-account-container.is-merged {
  border-color: rgba(56, 189, 248, 0.2) !important;
  background: rgba(56, 189, 248, 0.08) !important;
}

.flow-nav-avatar-circle {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: rgba(56, 189, 248, 0.25) !important;
  color: #38bdf8 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 6px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.flow-nav-caret {
  margin-left: 5px !important;
  opacity: 0.65 !important;
  transition: transform 0.15s ease !important;
}

.flow-nav-account-btn[aria-expanded="true"] .flow-nav-caret {
  transform: rotate(180deg) !important;
}

.flow-nav-account-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  width: 256px !important;
  background: rgba(12, 16, 22, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  z-index: 99999 !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  text-align: left !important;
}

.flow-nav-account-dropdown[hidden] {
  display: none !important;
}

.flow-nav-dropdown-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.flow-nav-dropdown-user {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.flow-nav-dropdown-name {
  color: #f8fafc !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.flow-nav-dropdown-email {
  color: #94a3b8 !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.flow-nav-dropdown-balance-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 10px !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.flow-nav-dropdown-cr {
  color: #38bdf8 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.flow-nav-dropdown-topup-btn {
  border: none !important;
  background: rgba(56, 189, 248, 0.18) !important;
  color: #38bdf8 !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.flow-nav-dropdown-topup-btn:hover {
  background: rgba(56, 189, 248, 0.35) !important;
  color: #ffffff !important;
}

.flow-nav-dropdown-divider {
  height: 1px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  margin: 2px 0 !important;
}

.flow-nav-dropdown-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.flow-nav-dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 7px 10px !important;
  border-radius: 6px !important;
  color: #cbd5e1 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.flow-nav-dropdown-item svg {
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
}

.flow-nav-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.flow-nav-dropdown-item:hover svg {
  color: #38bdf8 !important;
}

.flow-nav-dropdown-footer {
  margin-top: 2px !important;
}

.flow-nav-dropdown-signout-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 7px 10px !important;
  border: none !important;
  background: transparent !important;
  color: #f87171 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.flow-nav-dropdown-signout-btn svg {
  color: #f87171 !important;
  flex-shrink: 0 !important;
}

.flow-nav-dropdown-signout-btn:hover {
  background: rgba(239, 68, 68, 0.14) !important;
  color: #fca5a5 !important;
}

/* Quick Sign-in Modal */
.flash-quick-auth-dialog {
  width: min(420px, 100%) !important;
  padding: 24px !important;
  text-align: center !important;
}

.flash-quick-auth-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin-top: 8px !important;
}

.flash-quick-auth-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.flash-auth-btn-oauth {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  height: 42px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f8fafc !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.flash-auth-btn-oauth:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  transform: translateY(-1px) !important;
}

.flash-auth-btn-oauth.is-discord {
  background: rgba(88, 101, 242, 0.18) !important;
  border-color: rgba(88, 101, 242, 0.4) !important;
  color: #c7d2fe !important;
}

.flash-auth-btn-oauth.is-discord:hover {
  background: rgba(88, 101, 242, 0.3) !important;
  border-color: rgba(88, 101, 242, 0.6) !important;
  color: #ffffff !important;
}

.flash-quick-auth-footer-links {
  margin-top: 6px !important;
}

.flash-quick-auth-link {
  color: #94a3b8 !important;
  font-size: 12px !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.flash-quick-auth-link:hover {
  color: #38bdf8 !important;
}

/* Fallback protection: ensure any standard button in flow-actions never renders as white rectangle */
.flow-actions button:not(.flow-nav-credit-add-btn):not(.theme-toggle-btn):not(.flow-cart-btn),
.flow-nav-account-pill {
  box-sizing: border-box !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #f4f4ef !important;
}

.flow-nav-account-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  width: 230px !important;
  background: rgba(14, 18, 26, 0.96) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 1px rgba(255, 255, 255, 0.2) !important;
  padding: 8px !important;
  z-index: 1002 !important;
  display: flex !important;
  flex-direction: column !important;
  animation: navDropdownFade 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.flow-nav-account-dropdown[hidden] {
  display: none !important;
}

@keyframes navDropdownFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.dropdown-account-header {
  padding: 8px 10px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.dropdown-account-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

.dropdown-account-email {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.dropdown-account-credits {
  margin-top: 6px !important;
  font-size: 11px !important;
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.08) !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(56, 189, 248, 0.18) !important;
}

.dropdown-account-divider {
  height: 1px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  margin: 4px 0 !important;
}

.dropdown-account-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-radius: 7px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 12.5px !important;
  font-weight: 450 !important;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.12s ease !important;
}

.dropdown-account-link:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

.dropdown-account-link svg {
  color: rgba(255, 255, 255, 0.45) !important;
}

.dropdown-account-link:hover svg {
  color: #ffffff !important;
}

.dropdown-account-link.is-signout-link {
  color: #f87171 !important;
}

.dropdown-account-link.is-signout-link svg {
  color: #f87171 !important;
}

.dropdown-account-link.is-signout-link:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
}

/* ==========================================================================
   3. HERO SECTION & HIGH-CONTRAST BUTTONS
   ========================================================================== */

html:not([data-theme="bright"]) .mock-kicker,
html[data-theme="dark"] .mock-kicker {
  color: #f3c74f !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-shadow: none !important;
}

html:not([data-theme="bright"]) #mockHeroTitle,
html[data-theme="dark"] #mockHeroTitle,
html:not([data-theme="bright"]) .mock-hero-heading h1,
html[data-theme="dark"] .mock-hero-heading h1 {
  color: #ffffff !important;
  letter-spacing: -0.03em !important;
}

html:not([data-theme="bright"]) .mock-type-serif,
html[data-theme="dark"] .mock-type-serif {
  color: #ffffff !important;
}

html:not([data-theme="bright"]) .mock-type-tools,
html[data-theme="dark"] .mock-type-tools {
  color: #ffffff !important;
}

html:not([data-theme="bright"]) .mock-type-technical,
html[data-theme="dark"] .mock-type-technical {
  color: #94a3b8 !important;
}

html:not([data-theme="bright"]) .mock-type-emphasis,
html[data-theme="dark"] .mock-type-emphasis {
  color: #ffffff !important;
}

html:not([data-theme="bright"]) .mock-hero-lede,
html[data-theme="dark"] .mock-hero-lede {
  color: #cbd5e1 !important;
}

html:not([data-theme="bright"]) .mock-hero-lede strong,
html[data-theme="dark"] .mock-hero-lede strong {
  color: #ffffff !important;
}

html:not([data-theme="bright"]) .mock-hero-lede span,
html[data-theme="dark"] .mock-hero-lede span {
  color: #94a3b8 !important;
}

/* Primary Button (Explore the library) - Fixed visibility & bold styling */
html:not([data-theme="bright"]) .mock-button-primary,
html[data-theme="dark"] .mock-button-primary {
  background: #f3c74f !important;
  color: #090a0d !important;
  font-weight: 700 !important;
  border: 1px solid #f3c74f !important;
  border-radius: 7px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 20px rgba(243, 199, 79, 0.22) !important;
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
}

html:not([data-theme="bright"]) .mock-button-primary:hover,
html[data-theme="dark"] .mock-button-primary:hover {
  background: #ffd666 !important;
  color: #090a0d !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 24px rgba(243, 199, 79, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Secondary Button (Get Flash) */
html:not([data-theme="bright"]) .mock-button-secondary,
html[data-theme="dark"] .mock-button-secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f1f5f9 !important;
  font-weight: 600 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 7px !important;
  backdrop-filter: blur(8px) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important;
}

html:not([data-theme="bright"]) .mock-button-secondary:hover,
html[data-theme="dark"] .mock-button-secondary:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   4. APP WINDOW & INTERACTIVE SHOWCASE
   ========================================================================== */

html:not([data-theme="bright"]) .mock-app-window,
html[data-theme="dark"] .mock-app-window,
html:not([data-theme="bright"]) .mock-hero-window,
html[data-theme="dark"] .mock-hero-window,
html:not([data-theme="bright"]) .mock-source-preview,
html[data-theme="dark"] .mock-source-preview {
  background: #0f1217 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.07) inset !important;
}

html:not([data-theme="bright"]) .mock-preview-label,
html[data-theme="dark"] .mock-preview-label {
  background: #0a0d12 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: #718096 !important;
}

/* Category Grid & Cards */
html:not([data-theme="bright"]) .mock-category-grid,
html[data-theme="dark"] .mock-category-grid {
  background: transparent !important;
  border: none !important;
}

html:not([data-theme="bright"]) .mock-category-grid > a,
html[data-theme="dark"] .mock-category-grid > a {
  background: #11141a !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 8px !important;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease !important;
}

html:not([data-theme="bright"]) .mock-category-grid > a:hover,
html[data-theme="dark"] .mock-category-grid > a:hover {
  background: #151921 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  transform: translateY(-2px) !important;
}

html:not([data-theme="bright"]) .mock-category-grid > a strong,
html[data-theme="dark"] .mock-category-grid > a strong {
  color: #f8fafc !important;
}

html:not([data-theme="bright"]) .mock-category-grid > a span,
html[data-theme="dark"] .mock-category-grid > a span {
  color: #94a3b8 !important;
}

/* ==========================================================================
   5. SHOP & MARKET PAGES (shop.html, shop-category.html)
   ========================================================================== */

/* Market Sidebar */
html:not([data-theme="bright"]) .market-sidebar,
html[data-theme="dark"] .market-sidebar {
  background: #0d0f14 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
}

html:not([data-theme="bright"]) .market-sidebar-item,
html[data-theme="dark"] .market-sidebar-item,
html:not([data-theme="bright"]) .market-sidebar a,
html[data-theme="dark"] .market-sidebar a {
  color: #94a3b8 !important;
}

html:not([data-theme="bright"]) .market-sidebar-item:hover,
html[data-theme="dark"] .market-sidebar-item:hover,
html:not([data-theme="bright"]) .market-sidebar a:hover,
html[data-theme="dark"] .market-sidebar a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

html:not([data-theme="bright"]) .market-sidebar-item.is-active,
html[data-theme="dark"] .market-sidebar-item.is-active,
html:not([data-theme="bright"]) .market-sidebar a.is-active,
html[data-theme="dark"] .market-sidebar a.is-active {
  color: #ffffff !important;
  background: rgba(243, 199, 79, 0.12) !important;
  border-color: #f3c74f !important;
}

/* Featured / Hero Banner Card in Shop */
html:not([data-theme="bright"]) .market-hero-card,
html[data-theme="dark"] .market-hero-card,
html:not([data-theme="bright"]) .featured-banner,
html[data-theme="dark"] .featured-banner,
html:not([data-theme="bright"]) [data-featured-hero],
html[data-theme="dark"] [data-featured-hero] {
  background: #11141b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

/* Product & Fuse Cards */
html:not([data-theme="bright"]) .market-card,
html[data-theme="dark"] .market-card,
html:not([data-theme="bright"]) .shop-card,
html[data-theme="dark"] .shop-card,
html:not([data-theme="bright"]) .fuse-card,
html[data-theme="dark"] .fuse-card,
html:not([data-theme="bright"]) .product-card,
html[data-theme="dark"] .product-card {
  background: #11141a !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 9px !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

html:not([data-theme="bright"]) .market-card:hover,
html[data-theme="dark"] .market-card:hover,
html:not([data-theme="bright"]) .shop-card:hover,
html[data-theme="dark"] .shop-card:hover,
html:not([data-theme="bright"]) .fuse-card:hover,
html[data-theme="dark"] .fuse-card:hover,
html:not([data-theme="bright"]) .product-card:hover,
html[data-theme="dark"] .product-card:hover {
  border-color: rgba(243, 199, 79, 0.35) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
  transform: translateY(-2px) !important;
}

html:not([data-theme="bright"]) .market-card h3,
html[data-theme="dark"] .market-card h3,
html:not([data-theme="bright"]) .shop-card h3,
html[data-theme="dark"] .shop-card h3 {
  color: #f8fafc !important;
}

html:not([data-theme="bright"]) .market-card p,
html[data-theme="dark"] .market-card p,
html:not([data-theme="bright"]) .shop-card p,
html[data-theme="dark"] .shop-card p {
  color: #94a3b8 !important;
}

/* Filter pills & search input */
html:not([data-theme="bright"]) .market-search-bar,
html[data-theme="dark"] .market-search-bar,
html:not([data-theme="bright"]) .search-input-wrap,
html[data-theme="dark"] .search-input-wrap {
  background: #11141a !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 8px !important;
}

html:not([data-theme="bright"]) .filter-pill,
html[data-theme="dark"] .filter-pill,
html:not([data-theme="bright"]) .sort-btn,
html[data-theme="dark"] .sort-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
  border-radius: 6px !important;
}

html:not([data-theme="bright"]) .filter-pill:hover,
html[data-theme="dark"] .filter-pill:hover,
html:not([data-theme="bright"]) .sort-btn:hover,
html[data-theme="dark"] .sort-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

html:not([data-theme="bright"]) .filter-pill.is-active,
html[data-theme="dark"] .filter-pill.is-active,
html:not([data-theme="bright"]) .sort-btn.is-active,
html[data-theme="dark"] .sort-btn.is-active {
  background: #f3c74f !important;
  color: #090a0d !important;
  border-color: #f3c74f !important;
  font-weight: 650 !important;
}

/* ==========================================================================
   6. DOWNLOADS & ACCOUNT (app-store.html, account.html)
   ========================================================================== */

html:not([data-theme="bright"]) .download-minimal-card,
html[data-theme="dark"] .download-minimal-card,
html:not([data-theme="bright"]) .account-card,
html[data-theme="dark"] .account-card,
html:not([data-theme="bright"]) .auth-box,
html[data-theme="dark"] .auth-box {
  background: #11141a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
}

html:not([data-theme="bright"]) input[type="text"],
html[data-theme="dark"] input[type="text"],
html:not([data-theme="bright"]) input[type="email"],
html[data-theme="dark"] input[type="email"],
html:not([data-theme="bright"]) input[type="password"],
html[data-theme="dark"] input[type="password"] {
  background: #0d0f14 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
}

html:not([data-theme="bright"]) input:focus,
html[data-theme="dark"] input:focus {
  border-color: #f3c74f !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(243, 199, 79, 0.2) !important;
}

/* Clean Footer */
html:not([data-theme="bright"]) footer,
html[data-theme="dark"] footer,
html:not([data-theme="bright"]) .flow-footer,
html[data-theme="dark"] .flow-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: #08090c !important;
  color: #64748b !important;
}

html:not([data-theme="bright"]) footer a,
html[data-theme="dark"] footer a {
  color: #94a3b8 !important;
}

html:not([data-theme="bright"]) footer a:hover,
html[data-theme="dark"] footer a:hover {
  color: #ffffff !important;
}

/* ==========================================================================
   ITEM PAGE ACTION BAR POLISH
   ========================================================================== */

/* 1. Hide the Owned button on the right (owned status is already indicated on the left) */
.item-fuse-owned-stack .item-owned-tag,
.item-version-actions-col .item-owned-tag,
.item-action-btns-row .item-owned-tag {
  display: none !important;
}

/* 2. Attractive "Install" button styling */
body.public-studio-page.item-template-page .item-managed-install-actions .item-managed-install-primary,
.item-managed-install-actions .item-managed-install-primary,
body.public-studio-page.item-template-page .item-managed-install-actions .item-direct-zip-download-btn,
.item-managed-install-actions .item-direct-zip-download-btn,
.item-direct-zip-download-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  padding: 0 20px !important;
  border: 1px solid rgba(125, 211, 252, 0.45) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%) !important;
  color: #03131e !important;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.35), 0 0 20px rgba(56, 189, 248, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.16s ease !important;
}

body.public-studio-page.item-template-page .item-managed-install-actions .item-managed-install-primary svg,
.item-managed-install-actions .item-managed-install-primary svg,
body.public-studio-page.item-template-page .item-managed-install-actions .item-direct-zip-download-btn svg,
.item-managed-install-actions .item-direct-zip-download-btn svg,
.item-direct-zip-download-btn svg {
  display: inline-block !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  width: 15px !important;
  height: 15px !important;
}

body.public-studio-page.item-template-page .item-managed-install-actions .item-managed-install-primary:hover,
.item-managed-install-primary:hover,
body.public-studio-page.item-template-page .item-managed-install-actions .item-direct-zip-download-btn:hover,
.item-managed-install-actions .item-direct-zip-download-btn:hover,
.item-direct-zip-download-btn:hover {
  background: linear-gradient(180deg, #7dd3fc 0%, #0369a1 100%) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.5), 0 0 26px rgba(56, 189, 248, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-1px) !important;
  color: #020c14 !important;
}

body.public-studio-page.item-template-page .item-managed-install-actions .item-managed-install-primary:active,
.item-managed-install-primary:active,
body.public-studio-page.item-template-page .item-managed-install-actions .item-direct-zip-download-btn:active,
.item-managed-install-actions .item-direct-zip-download-btn:active,
.item-direct-zip-download-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 6px rgba(2, 132, 199, 0.4) !important;
}

/* 3. Subtle, low opacity, non-bold Direct .fuse download without logo */
body.public-studio-page.item-template-page .item-fuse-direct-download-link,
.item-fuse-direct-download-link {
  font-size: 11.5px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  opacity: 0.72 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255, 255, 255, 0.18) !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1px !important;
  letter-spacing: 0.01em !important;
  margin-top: 4px !important;
  justify-content: flex-end !important;
  transition: opacity 0.16s ease, color 0.16s ease, text-decoration-color 0.16s ease !important;
}

body.public-studio-page.item-template-page .item-fuse-direct-download-link svg,
.item-fuse-direct-download-link svg {
  display: none !important;
}

body.public-studio-page.item-template-page .item-fuse-direct-download-link:hover,
.item-fuse-direct-download-link:hover {
  opacity: 1 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration-color: rgba(255, 255, 255, 0.5) !important;
}

/* 4. Subtle BEFORE YOU BUY trigger & clean tooltip */
.item-before-you-buy-text {
  font-size: 10px !important;
  font-weight: 550 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.38) !important;
  text-decoration: underline dotted rgba(255, 255, 255, 0.22) !important;
  text-underline-offset: 3px !important;
  text-shadow: none !important;
  transition: color 0.16s ease, text-decoration-color 0.16s ease !important;
}

.item-before-you-buy-trigger:hover .item-before-you-buy-text,
.item-before-you-buy-trigger:focus .item-before-you-buy-text {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration-color: rgba(255, 255, 255, 0.5) !important;
  text-shadow: none !important;
}

.item-before-you-buy-tooltip {
  background: #0d1016 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  color: #cbd5e1 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6) !important;
  font-size: 11.5px !important;
  font-weight: 450 !important;
  line-height: 1.4 !important;
  text-shadow: none !important;
}

.item-before-you-buy-tooltip::after {
  border-top-color: #0d1016 !important;
}

/* ==========================================================================
   5. APPLE SAN FRANCISCO TYPOGRAPHY & TEXT ENGINE
   ========================================================================== */
:root {
  --sf-pro: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, -system-ui, sans-serif;
  --font-family-base: var(--sf-pro);
  --shop-font: var(--sf-pro);
  --shop-display: var(--sf-pro);
}

html, body, .flow-page, .market-page, .public-studio-page,
button, input, select, textarea,
.market-sidebar, .flow-nav,
.category-card-title, .compact-spotlight-title,
.shelf-title-wrap h2, .shelf-desc, .shelf-kicker,
.view-switch-btn, .item-detail-panel, [data-shop-overview] {
  font-family: var(--sf-pro) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ==========================================================================
   6. CONCEPT A: THE APPLE STUDIO STORE & ELEVATED NATIVE SIDEBAR
   ========================================================================== */
/* Header & Brand Polish: Clean, Uncluttered */
.flow-social-links,
.flow-actions .flow-social-links,
html .flow-actions .flow-social-links {
  display: none !important;
}

.flow-nav {
  background: rgba(10, 13, 19, 0.82) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.flow-brand strong {
  font-family: var(--sf-pro) !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
  font-size: 16px !important;
  color: #ffffff !important;
}

/* Sidebar: Native macOS / Raycast Frosted Glass Surface */
.market-sidebar {
  width: 220px !important;
  background: rgba(11, 14, 20, 0.82) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.055) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  padding: 20px 10px 48px !important;
  box-sizing: border-box !important;
}

.market-sidebar nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.sidebar-nav-group {
  margin-bottom: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.sidebar-group-label {
  font-family: var(--sf-pro) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.32) !important;
  padding: 0 10px 6px !important;
  display: block !important;
  user-select: none !important;
}

.market-sidebar a {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  height: 34px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  font-family: var(--sf-pro) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  text-decoration: none !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: none !important;
}

.market-sidebar a svg,
.market-sidebar a img {
  opacity: 0.75 !important;
  flex-shrink: 0 !important;
  transition: opacity 0.15s ease !important;
}

.market-sidebar a:hover {
  background: rgba(255, 255, 255, 0.045) !important;
  color: #ffffff !important;
}

.market-sidebar a:hover svg,
.market-sidebar a:hover img {
  opacity: 1 !important;
}

.market-sidebar a.active,
.market-sidebar a.is-active {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09) !important;
}

.market-sidebar a.active svg,
.market-sidebar a.is-active svg {
  opacity: 1 !important;
  color: #38bdf8 !important;
}

.cat-label {
  flex: 1 1 auto !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sidebar-count-pill {
  margin-left: auto !important;
  font-family: var(--sf-pro) !important;
  font-size: 10.5px !important;
  font-weight: 550 !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.45) !important;
  letter-spacing: 0.01em !important;
  line-height: 1.3 !important;
}

.sidebar-count-pill.is-deal {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
  font-weight: 650 !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
}

/* Balanced Centered Store Layout */
.studio-index,
.new-store-overview,
[data-shop-overview] {
  width: calc(100% - 220px) !important;
  max-width: none !important;
  margin-left: 220px !important;
  margin-right: 0 !important;
  padding: 24px clamp(24px, 3.5vw, 48px) 90px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow: visible !important;
}

.store-content-wrapper {
  padding: 0 !important;
  width: 100% !important;
  max-width: 1560px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.market-content.category-browser {
  width: calc(100% - 220px) !important;
  max-width: none !important;
  margin-left: 220px !important;
  margin-right: 0 !important;
  padding: 36px clamp(24px, 3.5vw, 48px) 90px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow: visible !important;
}

.category-browser-head,
.category-browser-toolbar,
.category-card-grid {
  width: 100% !important;
  max-width: 1560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 900px) {
  .studio-index,
  .new-store-overview,
  [data-shop-overview],
  .market-content.category-browser {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 24px 16px 80px 16px !important;
  }
  .store-content-wrapper {
    padding: 0 !important;
  }
}

/* Feature Showcase Stage (Compact Floating Hero Spotlight Banner) */
.apple-feature-stage,
.hero-gallery-stage,
.compact-spotlight-banner {
  display: block !important;
  position: relative !important;
  padding: 22px 32px 26px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(14, 18, 26, 0.72) 0%, rgba(8, 10, 15, 0.88) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
  width: 100% !important;
  max-width: 1560px !important;
  box-sizing: border-box !important;
}

.apple-feature-stage::before,
.hero-gallery-stage::before {
  content: "" !important;
  position: absolute !important;
  top: -40%;
  right: -20%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.09) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.hero-gallery-slides {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  min-height: 170px !important;
}

.hero-gallery-slide {
  display: grid !important;
  grid-template-columns: 1fr minmax(260px, 300px) !important;
  gap: clamp(24px, 3vw, 48px) !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform: scale(0.99) !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  box-sizing: border-box !important;
}

.hero-gallery-slide.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: scale(1) !important;
  position: relative !important;
}

.feature-stage-badges {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.feature-tag-new {
  display: none !important;
}

.spotlight-pick-tag,
.feature-tag-pick,
.feature-media-tag {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: italic !important;
  text-transform: lowercase !important;
  background: rgba(245, 158, 11, 0.12) !important;
  color: #fef08a !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  padding: 2.5px 9px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

.feature-platform-tag {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-weight: 400 !important;
  margin-left: 4px !important;
}

.feature-stage-title,
.compact-spotlight-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif !important;
  font-size: 27px !important;
  font-weight: 650 !important;
  color: #ffffff !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 8px !important;
  line-height: 1.18 !important;
}

.feature-stage-desc,
.compact-spotlight-desc {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: rgba(220, 230, 238, 0.75) !important;
  max-width: 780px !important;
  margin: 0 0 16px !important;
  font-weight: 380 !important;
}

.feature-stage-specs-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
}

.feature-spec-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 450 !important;
  padding: 3.5px 9px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  letter-spacing: -0.01em !important;
}

.feature-spec-item svg {
  color: #38bdf8 !important;
  flex-shrink: 0 !important;
  width: 12px !important;
  height: 12px !important;
}

.hero-gallery-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(14, 18, 26, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  opacity: 0 !important;
}

.hero-gallery-stage:hover .hero-gallery-arrow,
.hero-gallery-arrow:focus {
  opacity: 1 !important;
}

.hero-gallery-prev {
  left: 12px !important;
}

.hero-gallery-next {
  right: 12px !important;
}

.hero-gallery-arrow:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
  transform: translateY(-50%) scale(1.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

.feature-stage-actions,
.compact-spotlight-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.feature-btn-primary,
.compact-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: #ffffff !important;
  color: #000000 !important;
  font-family: var(--sf-pro), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  padding: 7px 18px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.12) !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.feature-btn-primary:hover,
.compact-btn-primary:hover {
  background: #f1f5f9 !important;
  transform: translateY(-1px) scale(1.01) !important;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2) !important;
  color: #000000 !important;
}

.feature-stage-media,
.compact-spotlight-thumb {
  position: relative !important;
  width: 100% !important;
  max-width: 300px !important;
  margin-left: auto !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  aspect-ratio: unset !important;
  padding: 0 !important;
}

.feature-media-frame {
  position: relative !important;
  width: 100% !important;
  max-width: 300px !important;
  height: 165px !important;
  border-radius: 11px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  background: #080a10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.feature-media-bg {
  position: absolute !important;
  inset: -20px !important;
  width: calc(100% + 40px) !important;
  height: calc(100% + 40px) !important;
  object-fit: cover !important;
  filter: blur(24px) brightness(0.35) saturate(1.4) !important;
  transform: scale(1.1) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.feature-media-main {
  position: relative !important;
  max-width: 88% !important;
  max-height: 88% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  z-index: 2 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.feature-media-frame:hover .feature-media-main {
  transform: scale(1.03) !important;
}

.feature-media-tag {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 4 !important;
  font-size: 8.5px !important;
  font-weight: 650 !important;
  letter-spacing: 0.06em !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  color: #fbbf24 !important;
  padding: 2.5px 7px !important;
  border-radius: 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Hero Carousel Dots */
.hero-gallery-dots {
  position: absolute !important;
  bottom: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  z-index: 10 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.hero-gallery-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.28) !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hero-gallery-dot:hover {
  background: rgba(255, 255, 255, 0.6) !important;
  transform: scale(1.15) !important;
}

.hero-gallery-dot.is-active {
  width: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4) !important;
}

/* ==========================================================================
   7. CLEAN, APPLE-LIKE PRODUCT CARDS (MINIMAL & ELEVATED)
   ========================================================================== */
.new-store-overview .store-shelf-grid,
.new-store-overview .timeline-grid,
.new-store-overview .timeline-items-grid,
.store-shelf-grid,
.timeline-grid,
.timeline-items-grid,
#searchResultsGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
}

@media (min-width: 1100px) {
  .new-store-overview .store-shelf-grid,
  .new-store-overview .timeline-grid,
  .new-store-overview .timeline-items-grid,
  .store-shelf-grid,
  .timeline-grid,
  .timeline-items-grid,
  #searchResultsGrid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
  }
}

.category-browser-card,
.store-grid-card,
.studio-card {
  display: flex !important;
  flex-direction: column !important;
  background: linear-gradient(180deg, rgba(20, 22, 27, 0.80) 0%, rgba(13, 14, 18, 0.92) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 16px -2px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  min-height: 0 !important;
  height: auto !important;
  position: relative !important;
}

.category-browser-card:hover,
.store-grid-card:hover,
.studio-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: linear-gradient(180deg, rgba(26, 29, 36, 0.90) 0%, rgba(17, 19, 24, 0.96) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 32px -8px rgba(0, 0, 0, 0.8) !important;
}

/* Thumbnail art: Matched to light mode dimensions (115px height, flush with body) */
html:not([data-theme="bright"]) .category-card-art,
html[data-theme="dark"] .category-card-art,
html:not([data-theme="bright"]) .store-shelf-grid .category-card-art,
html[data-theme="dark"] .store-shelf-grid .category-card-art,
html:not([data-theme="bright"]) .timeline-grid .category-card-art,
html[data-theme="dark"] .timeline-grid .category-card-art,
html:not([data-theme="bright"]) .new-store-overview .category-card-art,
html[data-theme="dark"] .new-store-overview .category-card-art,
html:not([data-theme="bright"]) .category-card-grid .category-card-art,
html[data-theme="dark"] .category-card-grid .category-card-art,
html:not([data-theme="bright"]) .category-browser-card .category-card-art,
html[data-theme="dark"] .category-browser-card .category-card-art,
html:not([data-theme="bright"]) .store-grid-card .category-card-art,
html[data-theme="dark"] .store-grid-card .category-card-art,
html:not([data-theme="bright"]) .studio-card .category-card-art,
html[data-theme="dark"] .studio-card .category-card-art,
html:not([data-theme="bright"]) .item-bundle-grid .category-card-art,
html[data-theme="dark"] .item-bundle-grid .category-card-art,
.category-card-art,
.store-shelf-grid .category-card-art,
.timeline-grid .category-card-art,
.new-store-overview .category-card-art,
.category-card-grid .category-card-art,
.category-browser-card .category-card-art,
.store-grid-card .category-card-art,
.studio-card .category-card-art,
.item-bundle-grid .category-card-art {
  width: 100% !important;
  height: 115px !important;
  min-height: 115px !important;
  max-height: 115px !important;
  aspect-ratio: unset !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  overflow: hidden !important;
  position: relative !important;
  background-color: #08090c !important;
  border-radius: 11px 11px 0 0 !important;
  flex-shrink: 0 !important;
}

.category-card-thumb-img,
.card-art-thumb-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
  display: block !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.category-browser-card:hover .category-card-thumb-img,
.store-grid-card:hover .category-card-thumb-img,
.category-browser-card:hover .card-art-thumb-img,
.store-grid-card:hover .card-art-thumb-img {
  transform: scale(1.035) !important;
}

.category-card-art.is-art-fallback {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Badges on card art */
.card-art-badge.is-editors-pick {
  position: absolute !important;
  top: 9px !important;
  left: 9px !important;
  z-index: 3 !important;
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: italic !important;
  text-transform: lowercase !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  background: rgba(12, 14, 20, 0.82) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  color: #fef08a !important;
  padding: 2.5px 8px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45) !important;
}

.card-art-badge.is-editors-pick svg {
  width: 9px !important;
  height: 9px !important;
  color: #fbbf24 !important;
}

.card-art-badge.is-owned {
  display: none !important;
}

/* Card body: compact and matching light mode */
html:not([data-theme="bright"]) .store-shelf-grid .category-card-body,
html[data-theme="dark"] .store-shelf-grid .category-card-body,
html:not([data-theme="bright"]) .timeline-grid .category-card-body,
html[data-theme="dark"] .timeline-grid .category-card-body,
html:not([data-theme="bright"]) .new-store-overview .category-card-body,
html[data-theme="dark"] .new-store-overview .category-card-body,
.category-card-body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 10px 12px 10px !important;
  gap: 3px !important;
  flex: 1 1 auto !important;
  background: transparent !important;
}

/* Hide redundant "AUTHOR: FLASH RESOLVE" on every card */
.shop-item-author,
.category-card-meta .shop-item-author,
.new-store-overview .shop-item-author {
  display: none !important;
}

/* Title Row: Name on Left, Type Pill on Right */
.category-card-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
  min-width: 0 !important;
}

html:not([data-theme="bright"]) .timeline-grid .category-card-title,
html[data-theme="dark"] .timeline-grid .category-card-title,
html:not([data-theme="bright"]) .store-shelf-grid .category-card-title,
html[data-theme="dark"] .store-shelf-grid .category-card-title,
.category-card-title,
.category-card-body strong {
  font-family: var(--sf-pro), -apple-system, BlinkMacSystemFont, "Inter", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  margin: 2px 0 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Item Type Pill on Right Side of Name */
.category-card-type-tag,
.category-card-type {
  font-family: var(--sf-pro), -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.45) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.card-title-badges {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  margin-left: 5px !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  filter: none !important;
}

.category-browser-card:hover .card-title-badges,
.store-grid-card:hover .card-title-badges {
  opacity: 1 !important;
  filter: none !important;
}

.title-compat-icon {
  width: 13px !important;
  height: 13px !important;
  object-fit: contain !important;
  display: inline-block !important;
  vertical-align: -1px !important;
  opacity: 0.95 !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
}

.category-browser-card:hover .title-compat-icon,
.recommended-card:hover .title-compat-icon,
.store-grid-card:hover .title-compat-icon {
  opacity: 1 !important;
  transform: scale(1.08) !important;
}

/* Card Description: Clean 2-line summary matching light mode */
html:not([data-theme="bright"]) .timeline-grid .category-card-desc,
html[data-theme="dark"] .timeline-grid .category-card-desc,
html:not([data-theme="bright"]) .store-shelf-grid .category-card-desc,
html[data-theme="dark"] .store-shelf-grid .category-card-desc,
.category-card-desc,
.category-card-body p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 11px !important;
  line-height: 1.38 !important;
  color: #7a8b9e !important;
  font-weight: 400 !important;
  margin: 0 0 10px 0 !important;
  min-height: 0 !important;
}

/* Card Footer: Clean Price & Cart */
html:not([data-theme="bright"]) .timeline-grid .category-card-footer,
html[data-theme="dark"] .timeline-grid .category-card-footer,
html:not([data-theme="bright"]) .store-shelf-grid .category-card-footer,
html[data-theme="dark"] .store-shelf-grid .category-card-footer,
.category-card-footer {
  margin-top: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.category-price-row b,
.category-card-footer-left b,
.category-card-footer b,
.category-browser-card .category-price-row b,
.store-grid-card .category-price-row b {
  font-family: Geist, Aptos, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 2.5px 7.5px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.25 !important;
  color: #e2c080 !important;
  background: rgba(226, 192, 128, 0.1) !important;
  border: 1px solid rgba(226, 192, 128, 0.28) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* 1. FREE TIER (0 Credits: Emerald) */
.tier-free .category-price-row b,
.tier-free .category-card-footer-left b,
.tier-free .category-card-footer b,
.tier-free .recommended-card-price,
.tier-free .hover-preview-price,
.category-browser-card.tier-free b,
.store-grid-card.tier-free b {
  color: #34d399 !important;
  background: rgba(52, 211, 153, 0.14) !important;
  border: 1px solid rgba(52, 211, 153, 0.38) !important;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.5) !important;
  font-weight: 800 !important;
}

/* 2. CHEAP TIER (0-40 Credits: Sky Cyan) */
.tier-cheap .category-price-row b,
.tier-cheap .category-card-footer-left b,
.tier-cheap .category-card-footer b,
.tier-cheap .recommended-card-price,
.tier-cheap .hover-preview-price,
.category-browser-card.tier-cheap b,
.store-grid-card.tier-cheap b {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.12) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important;
  font-weight: 750 !important;
}

/* 3. MEDIUM TIER (40-70 Credits: Electric Amethyst) */
.tier-medium .category-price-row b,
.tier-medium .category-card-footer-left b,
.tier-medium .category-card-footer b,
.tier-medium .recommended-card-price,
.tier-medium .hover-preview-price,
.category-browser-card.tier-medium b,
.store-grid-card.tier-medium b {
  color: #c084fc !important;
  background: rgba(192, 132, 252, 0.15) !important;
  border: 1px solid rgba(192, 132, 252, 0.45) !important;
  text-shadow: 0 0 12px rgba(192, 132, 252, 0.6) !important;
  font-weight: 800 !important;
}

/* 4. HIGH TIER (70+ Credits: Solar Gold) */
.tier-high .category-price-row b,
.tier-high .category-card-footer-left b,
.tier-high .category-card-footer b,
.tier-high .recommended-card-price,
.tier-high .hover-preview-price,
.category-browser-card.tier-high b,
.store-grid-card.tier-high b {
  color: #fbbf24 !important;
  background: rgba(251, 191, 36, 0.14) !important;
  border: 1px solid rgba(251, 191, 36, 0.35) !important;
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.65) !important;
  font-weight: 800 !important;
}

.category-browser-card.tier-free,
.store-grid-card.tier-free,
.recommended-card.tier-free {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.category-browser-card.tier-free:hover,
.store-grid-card.tier-free:hover,
.recommended-card.tier-free:hover {
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 12px 32px rgba(4, 10, 18, 0.55), 0 0 18px rgba(255, 255, 255, 0.08) !important;
}

/* Owned items distinct greenish outline look */
.category-browser-card.is-owned-item,
.category-browser-card:has(.is-owned-pill),
.store-grid-card.is-owned-item,
.store-grid-card:has(.is-owned-pill),
.recommended-card.is-owned-item,
.recommended-card:has(.is-owned-pill),
.for-you-card.is-owned,
.for-you-card:has(.is-owned-pill),
.is-owned-item {
  border-color: rgba(52, 211, 153, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.35), 0 0 16px rgba(16, 185, 129, 0.16), 0 14px 36px rgba(0, 0, 0, 0.38) !important;
}

.category-browser-card.is-owned-item:hover,
.category-browser-card:has(.is-owned-pill):hover,
.store-grid-card.is-owned-item:hover,
.store-grid-card:has(.is-owned-pill):hover,
.recommended-card.is-owned-item:hover,
.recommended-card:has(.is-owned-pill):hover,
.for-you-card.is-owned:hover,
.for-you-card:has(.is-owned-pill):hover,
.is-owned-item:hover {
  border-color: rgba(52, 211, 153, 0.85) !important;
  box-shadow: 0 0 0 1.5px rgba(52, 211, 153, 0.6), 0 0 24px rgba(16, 185, 129, 0.28), 0 18px 48px rgba(0, 0, 0, 0.48) !important;
}

.item-version-row.is-owned {
  border-color: rgba(52, 211, 153, 0.5) !important;
  background: rgba(16, 185, 129, 0.05) !important;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.28), 0 0 14px rgba(16, 185, 129, 0.12) !important;
}

html[data-theme="bright"] .category-browser-card.is-owned-item,
html[data-theme="bright"] .category-browser-card:has(.is-owned-pill),
html[data-theme="bright"] .store-grid-card.is-owned-item,
html[data-theme="bright"] .store-grid-card:has(.is-owned-pill),
html[data-theme="bright"] .recommended-card.is-owned-item,
html[data-theme="bright"] .recommended-card:has(.is-owned-pill),
html[data-theme="bright"] .for-you-card.is-owned,
html[data-theme="bright"] .for-you-card:has(.is-owned-pill),
html[data-theme="bright"] .is-owned-item {
  border-color: rgba(5, 150, 105, 0.6) !important;
  box-shadow: 0 0 0 1px rgba(5, 150, 105, 0.3), 0 0 14px rgba(16, 185, 129, 0.16) !important;
}

html[data-theme="bright"] .category-browser-card.is-owned-item:hover,
html[data-theme="bright"] .category-browser-card:has(.is-owned-pill):hover,
html[data-theme="bright"] .store-grid-card.is-owned-item:hover,
html[data-theme="bright"] .store-grid-card:has(.is-owned-pill):hover,
html[data-theme="bright"] .recommended-card.is-owned-item:hover,
html[data-theme="bright"] .recommended-card:has(.is-owned-pill):hover,
html[data-theme="bright"] .for-you-card.is-owned:hover,
html[data-theme="bright"] .for-you-card:has(.is-owned-pill):hover,
html[data-theme="bright"] .is-owned-item:hover {
  border-color: rgba(5, 150, 105, 0.9) !important;
  box-shadow: 0 0 0 1.5px rgba(5, 150, 105, 0.5), 0 0 20px rgba(16, 185, 129, 0.25) !important;
}

.is-owned-pill,
.category-price-row .is-owned-pill,
.is-owned-tag,
.category-price-row .is-owned-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 8px 3px 6px !important;
  border-radius: 6px !important;
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(52, 211, 153, 0.3) !important;
  color: #34d399 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  box-shadow: inset 0 1px 0 rgba(52, 211, 153, 0.15) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  text-transform: none !important;
  text-shadow: none !important;
}

.is-owned-pill .is-owned-check,
.is-owned-tag .is-owned-check {
  color: #34d399 !important;
  flex-shrink: 0 !important;
  display: block !important;
}

html[data-theme="bright"] .is-owned-pill,
html[data-theme="bright"] .category-price-row .is-owned-pill,
html[data-theme="bright"] .is-owned-tag,
html[data-theme="bright"] .category-price-row .is-owned-tag {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: rgba(0, 0, 0, 0.82) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

html[data-theme="bright"] .is-owned-pill .is-owned-check,
html[data-theme="bright"] .is-owned-tag .is-owned-check {
  color: #059669 !important;
}

.owned-faint-price,
.category-price-row .owned-faint-price,
.category-card-body .owned-faint-price,
.category-card-footer .owned-faint-price {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.42) !important;
  margin-left: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-transform: lowercase !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  opacity: 1 !important;
}

.owned-faint-price b,
.owned-faint-price span,
.category-price-row .owned-faint-price b,
.category-price-row .owned-faint-price span,
.category-card-body .owned-faint-price b,
.category-card-body .owned-faint-price span,
.tier-free .category-price-row .owned-faint-price b,
.tier-cheap .category-price-row .owned-faint-price b,
.tier-medium .category-price-row .owned-faint-price b,
.tier-high .category-price-row .owned-faint-price b,
.tier-free .category-card-body .owned-faint-price b,
.tier-cheap .category-card-body .owned-faint-price b,
.tier-medium .category-card-body .owned-faint-price b,
.tier-high .category-card-body .owned-faint-price b {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-transform: lowercase !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

html[data-theme="bright"] .owned-faint-price,
html[data-theme="bright"] .category-price-row .owned-faint-price,
html[data-theme="bright"] .category-card-body .owned-faint-price,
html[data-theme="bright"] .owned-faint-price b,
html[data-theme="bright"] .owned-faint-price span {
  color: rgba(0, 0, 0, 0.45) !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Neutralize legacy tier arcade highlights on cards (excluding owned items) */
.store-grid-card.tier-cheap:not(.is-owned-item):not(:has(.is-owned-pill)),
.store-grid-card.tier-medium:not(.is-owned-item):not(:has(.is-owned-pill)),
.store-grid-card.tier-high:not(.is-owned-item):not(:has(.is-owned-pill)),
.category-browser-card.tier-cheap:not(.is-owned-item):not(:has(.is-owned-pill)),
.category-browser-card.tier-medium:not(.is-owned-item):not(:has(.is-owned-pill)),
.category-browser-card.tier-high:not(.is-owned-item):not(:has(.is-owned-pill)) {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: linear-gradient(180deg, rgba(22, 27, 36, 0.75) 0%, rgba(13, 16, 22, 0.88) 100%) !important;
}

.store-grid-card.tier-cheap::after,
.store-grid-card.tier-medium::after,
.store-grid-card.tier-high::after,
.category-browser-card.tier-cheap::after,
.category-browser-card.tier-medium::after,
.category-browser-card.tier-high::after {
  display: none !important;
  content: none !important;
}

.store-grid-card.tier-cheap:not(.is-owned-item):not(:has(.is-owned-pill)):hover,
.store-grid-card.tier-medium:not(.is-owned-item):not(:has(.is-owned-pill)):hover,
.store-grid-card.tier-high:not(.is-owned-item):not(:has(.is-owned-pill)):hover,
.category-browser-card.tier-cheap:not(.is-owned-item):not(:has(.is-owned-pill)):hover,
.category-browser-card.tier-medium:not(.is-owned-item):not(:has(.is-owned-pill)):hover,
.category-browser-card.tier-high:not(.is-owned-item):not(:has(.is-owned-pill)):hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: linear-gradient(180deg, rgba(28, 34, 46, 0.85) 0%, rgba(17, 21, 28, 0.95) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 18px 36px -8px rgba(0, 0, 0, 0.75), 0 0 20px rgba(56, 189, 248, 0.07) !important;
}

/* Owned item greenish outline and glow priority */
.store-grid-card.is-owned-item,
.store-grid-card:has(.is-owned-pill),
.category-browser-card.is-owned-item,
.category-browser-card:has(.is-owned-pill),
.is-owned-item {
  border-color: rgba(52, 211, 153, 0.65) !important;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.4), 0 0 16px rgba(16, 185, 129, 0.18), 0 14px 36px rgba(0, 0, 0, 0.38) !important;
}

.store-grid-card.is-owned-item:hover,
.store-grid-card:has(.is-owned-pill):hover,
.category-browser-card.is-owned-item:hover,
.category-browser-card:has(.is-owned-pill):hover,
.is-owned-item:hover {
  border-color: rgba(52, 211, 153, 0.9) !important;
  box-shadow: 0 0 0 1.5px rgba(52, 211, 153, 0.65), 0 0 24px rgba(16, 185, 129, 0.32), 0 18px 48px rgba(0, 0, 0, 0.48) !important;
}


/* Subtle Apple-style Cart Button */
.card-cart-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.card-cart-btn:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
  transform: scale(1.08) !important;
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.25) !important;
}

.card-cart-btn.is-in-cart {
  background: rgba(52, 211, 153, 0.2) !important;
  border-color: rgba(52, 211, 153, 0.4) !important;
  color: #34d399 !important;
}

.card-cart-btn .cart-icon-active {
  display: none !important;
}

.card-cart-btn.is-in-cart .cart-icon-idle {
  display: none !important;
}

.card-cart-btn.is-in-cart .cart-icon-active {
  display: block !important;
}

/* Polished Hover Quick-View Popup in Clean Theme */
.store-hover-preview-popup {
  background: rgba(14, 18, 26, 0.96) !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px -8px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.hover-preview-title {
  font-family: var(--sf-pro) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: #ffffff !important;
}

.hover-preview-type {
  font-size: 9.5px !important;
  font-weight: 750 !important;
  letter-spacing: 0.1em !important;
  color: #38bdf8 !important;
}

.hover-preview-author {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-weight: 500 !important;
}

.hover-preview-desc {
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.hover-preview-price,
.tier-cheap .hover-preview-price,
.tier-medium .hover-preview-price,
.tier-high .hover-preview-price {
  font-family: var(--sf-pro) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
  text-shadow: none !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
}

.tier-free .hover-preview-price {
  color: #34d399 !important;
  background: rgba(52, 211, 153, 0.14) !important;
  border-color: rgba(52, 211, 153, 0.3) !important;
}

.hover-preview-compat .compat-pill {
  font-family: var(--sf-pro) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 5px !important;
}

/* Controls Toolbar (Sticky Floating Bar with View Switcher, Layout Toggle, Zoom & Search) */
.store-controls-toolbar {
  position: sticky !important;
  top: 44px !important;
  z-index: 30 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 0 24px !important;
  padding: 10px 18px !important;
  width: 100% !important;
  max-width: 1560px !important;
  box-sizing: border-box !important;
  background: rgba(12, 13, 16, 0.90) !important;
  backdrop-filter: blur(20px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Sticky Controls Toolbar Gradient Feather & Hover Blocker */
.store-controls-toolbar::after {
  content: "" !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  height: 38px !important;
  background: linear-gradient(180deg, rgba(8, 10, 14, 0.96) 0%, rgba(8, 10, 14, 0.6) 45%, rgba(8, 10, 14, 0) 100%) !important;
  pointer-events: auto !important;
  z-index: 2 !important;
  border-bottom-left-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
}

.store-toolbar-status {
  display: none !important;
}

.store-toolbar-spacer {
  display: block !important;
}

.store-view-switcher {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  padding: 3px !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  justify-self: center !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

.view-switch-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 18px !important;
  border-radius: 999px !important;
  border: none !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: var(--sf-pro) !important;
  font-size: 13px !important;
  font-weight: 450 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.view-switch-btn:hover {
  color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.view-switch-btn.is-active {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  font-weight: 550 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Toolbar Right Group */
.store-toolbar-right-group {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* View Layout Mode Toggle (Grid vs List) */
.store-display-modes {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  padding: 3px !important;
}

.display-mode-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  border: none !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.45) !important;
  cursor: pointer !important;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 !important;
}

.display-mode-btn:hover {
  color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.display-mode-btn.is-active {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Density / Zoom Controls */
.store-zoom-controls {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  height: 38px !important;
  box-sizing: border-box !important;
}

.zoom-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  border: none !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.5) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
}

.zoom-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.zoom-btn:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

.zoom-range-slider {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 52px !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  outline: none !important;
  cursor: pointer !important;
  margin: 0 4px !important;
}

.zoom-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #38bdf8 !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.6) !important;
  cursor: pointer !important;
  transition: transform 0.12s ease !important;
}

.zoom-range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2) !important;
}

.zoom-range-slider::-moz-range-thumb {
  width: 12px !important;
  height: 12px !important;
  border: none !important;
  border-radius: 50% !important;
  background: #38bdf8 !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.6) !important;
  cursor: pointer !important;
}

/* Quick Search Bar */
.store-search-bar {
  position: relative !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  padding: 0 10px 0 14px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 250px !important;
  width: 100% !important;
  justify-self: end !important;
  transition: all 0.18s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.store-search-bar:focus-within {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.store-search-bar svg {
  color: rgba(255, 255, 255, 0.4) !important;
  flex-shrink: 0 !important;
}

.store-search-bar input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
  font-family: var(--sf-pro) !important;
  font-size: 12.5px !important;
  font-weight: 450 !important;
  width: 100% !important;
}

.store-search-bar input::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

.store-search-bar input::-webkit-search-cancel-button,
.store-search-bar input::-webkit-search-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
}

/* Hide shortcut hint whenever input has text, clear button is active, or input is focused */
.store-search-bar input:not(:placeholder-shown) ~ .search-shortcut-hint,
.store-search-bar:focus-within .search-shortcut-hint,
.search-shortcut-hint[hidden] {
  display: none !important;
}

.search-shortcut-hint {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 4px !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-family: var(--sf-pro) !important;
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-weight: 500 !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
}

.clear-search-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
}

.clear-search-btn[hidden] {
  display: none !important;
}

.clear-search-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

/* ==========================================================================
   CATALOG VIEW MODES & ZOOM DENSITY
   ========================================================================== */

/* --- List View Layout: Tabular 1-Column Layout with Perfectly Aligned Columns --- */
html .store-content-wrapper[data-catalog-view="list"] .timeline-items-grid,
html .store-content-wrapper[data-catalog-view="list"] .store-shelf-grid,
html .store-content-wrapper[data-catalog-view="list"] .timeline-grid,
html .store-content-wrapper[data-catalog-view="list"] #searchResultsGrid,
html .store-content-wrapper[data-catalog-view="list"] .category-card-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

html .store-content-wrapper[data-catalog-view="list"] .store-grid-card,
html .store-content-wrapper[data-catalog-view="list"] .category-browser-card,
html .store-content-wrapper[data-catalog-view="list"] .timeline-grid .store-grid-card,
html .store-content-wrapper[data-catalog-view="list"] .timeline-grid .category-browser-card,
html .store-content-wrapper[data-catalog-view="list"] .store-shelf-grid .store-grid-card,
html .store-content-wrapper[data-catalog-view="list"] .store-shelf-grid .category-browser-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 12px !important;
  padding: 8px 14px 8px 8px !important;
  border-radius: 10px !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  box-sizing: border-box !important;
  background: rgba(14, 18, 24, 0.76) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

html .store-content-wrapper[data-catalog-view="list"] .store-grid-card:hover,
html .store-content-wrapper[data-catalog-view="list"] .category-browser-card:hover,
html .store-content-wrapper[data-catalog-view="list"] .timeline-grid .store-grid-card:hover,
html .store-content-wrapper[data-catalog-view="list"] .timeline-grid .category-browser-card:hover,
html .store-content-wrapper[data-catalog-view="list"] .store-shelf-grid .store-grid-card:hover,
html .store-content-wrapper[data-catalog-view="list"] .store-shelf-grid .category-browser-card:hover {
  transform: translateX(3px) !important;
  background: rgba(22, 29, 39, 0.92) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 14px rgba(56, 189, 248, 0.1) !important;
}

/* Thumbnail in List View */
html .store-content-wrapper[data-catalog-view="list"] .category-card-art,
html .store-content-wrapper[data-catalog-view="list"] .timeline-grid .category-card-art,
html .store-content-wrapper[data-catalog-view="list"] .store-shelf-grid .category-card-art {
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Hide bulky overlay badge from thumbnail in list mode so art is visible */
html .store-content-wrapper[data-catalog-view="list"] .category-card-art .card-art-badge {
  display: none !important;
}

/* Card Body in List View */
html .store-content-wrapper[data-catalog-view="list"] .category-card-body,
html .store-content-wrapper[data-catalog-view="list"] .timeline-grid .category-card-body,
html .store-content-wrapper[data-catalog-view="list"] .store-shelf-grid .category-card-body {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 1 1 auto !important;
  padding: 0 !important;
  min-width: 0 !important;
  gap: 0 !important;
  background: transparent !important;
}

/* Column 1: Title & Type block (Fixed width 220px) */
html .store-content-wrapper[data-catalog-view="list"] .category-card-title-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  flex: 0 0 220px !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  margin: 0 !important;
  padding-right: 14px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html .store-content-wrapper[data-catalog-view="list"] .category-card-title,
html .store-content-wrapper[data-catalog-view="list"] .timeline-grid .category-card-title,
html .store-content-wrapper[data-catalog-view="list"] .store-shelf-grid .category-card-title {
  font-size: 13px !important;
  font-weight: 650 !important;
  color: #f5f3ed !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.25 !important;
}

/* Column 2: Description (Stretches with flex: 1, starts at exact same horizontal position) */
html .store-content-wrapper[data-catalog-view="list"] .category-card-desc,
html .store-content-wrapper[data-catalog-view="list"] .timeline-grid .category-card-desc,
html .store-content-wrapper[data-catalog-view="list"] .store-shelf-grid .category-card-desc {
  display: block !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11.5px !important;
  color: rgba(245, 243, 237, 0.48) !important;
  text-align: left !important;
  line-height: 1.25 !important;
}

/* Column 3: Right side pricing & cart action */
html .store-content-wrapper[data-catalog-view="list"] .category-card-footer,
html .store-content-wrapper[data-catalog-view="list"] .timeline-grid .category-card-footer,
html .store-content-wrapper[data-catalog-view="list"] .store-shelf-grid .category-card-footer {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  border: none !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
}

html .store-content-wrapper[data-catalog-view="list"] .category-card-footer-left,
html .store-content-wrapper[data-catalog-view="list"] .category-price-row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
  font-size: 11.5px !important;
  white-space: nowrap !important;
}

/* Hide phantom approx price spacer in list view to avoid pushing price pills */
html .store-content-wrapper[data-catalog-view="list"] .category-price-row em,
html .store-content-wrapper[data-catalog-view="list"] .category-browser-card:hover .category-price-row em {
  display: none !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Price Badge b: Fixed uniform width, perfectly centered and aligned */
html .store-content-wrapper[data-catalog-view="list"] .category-price-row b,
html .store-content-wrapper[data-catalog-view="list"] .category-price-row .is-owned-tag,
html .store-content-wrapper[data-catalog-view="list"] .category-price-row .is-owned-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
  height: 26px !important;
  padding: 0 8px !important;
  box-sizing: border-box !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  margin: 0 !important;
}

/* Position savings badge to the left of the price pill */
html .store-content-wrapper[data-catalog-view="list"] .price-save-badge {
  order: -1 !important;
  margin: 0 !important;
}

html .store-content-wrapper[data-catalog-view="list"] .card-cart-btn {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  border-radius: 6px !important;
  margin: 0 !important;
}

/* Responsive adjustments for list view */
@media (max-width: 860px) {
  html .store-content-wrapper[data-catalog-view="list"] .category-card-title-row {
    flex: 0 0 170px !important;
    width: 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;
  }
}

@media (max-width: 620px) {
  html .store-content-wrapper[data-catalog-view="list"] .category-card-desc,
  html .store-content-wrapper[data-catalog-view="list"] .timeline-grid .category-card-desc,
  html .store-content-wrapper[data-catalog-view="list"] .store-shelf-grid .category-card-desc {
    display: none !important;
  }
  html .store-content-wrapper[data-catalog-view="list"] .category-card-title-row {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  html .store-content-wrapper[data-catalog-view="list"] .category-price-row b,
  html .store-content-wrapper[data-catalog-view="list"] .category-price-row .is-owned-tag,
  html .store-content-wrapper[data-catalog-view="list"] .category-price-row .is-owned-pill {
    min-width: 88px !important;
    width: 88px !important;
  }
}

/* --- Zoom Scaling for Grid View (Levels 1 to 6) --- */

/* Zoom 1: Extreme Zoom Out (8 Columns on desktop) */
.store-content-wrapper[data-catalog-zoom="1"]:not([data-catalog-view="list"]) .timeline-items-grid,
.store-content-wrapper[data-catalog-zoom="1"]:not([data-catalog-view="list"]) .store-shelf-grid,
.store-content-wrapper[data-catalog-zoom="1"]:not([data-catalog-view="list"]) .timeline-grid,
.store-content-wrapper[data-catalog-zoom="1"]:not([data-catalog-view="list"]) #searchResultsGrid,
.store-content-wrapper[data-catalog-zoom="1"]:not([data-catalog-view="list"]) .category-card-grid {
  grid-template-columns: repeat(8, 1fr) !important;
  gap: 8px !important;
}
html:not([data-theme="bright"]) .store-content-wrapper[data-catalog-zoom="1"]:not([data-catalog-view="list"]) .category-card-art,
html[data-theme="dark"] .store-content-wrapper[data-catalog-zoom="1"]:not([data-catalog-view="list"]) .category-card-art {
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
}
.store-content-wrapper[data-catalog-zoom="1"]:not([data-catalog-view="list"]) .category-card-body {
  padding: 6px 8px !important;
  gap: 2px !important;
}
.store-content-wrapper[data-catalog-zoom="1"]:not([data-catalog-view="list"]) .category-card-title {
  font-size: 11px !important;
}
.store-content-wrapper[data-catalog-zoom="1"]:not([data-catalog-view="list"]) .category-card-desc,
.store-content-wrapper[data-catalog-zoom="1"]:not([data-catalog-view="list"]) .category-card-type-tag,
.store-content-wrapper[data-catalog-zoom="1"]:not([data-catalog-view="list"]) .card-title-badges {
  display: none !important;
}
.store-content-wrapper[data-catalog-zoom="1"]:not([data-catalog-view="list"]) .category-price-row {
  font-size: 10px !important;
}
.store-content-wrapper[data-catalog-zoom="1"]:not([data-catalog-view="list"]) .card-cart-btn {
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
}

/* Zoom 2: Heavy Zoom Out (6 Columns) */
.store-content-wrapper[data-catalog-zoom="2"]:not([data-catalog-view="list"]) .timeline-items-grid,
.store-content-wrapper[data-catalog-zoom="2"]:not([data-catalog-view="list"]) .store-shelf-grid,
.store-content-wrapper[data-catalog-zoom="2"]:not([data-catalog-view="list"]) .timeline-grid,
.store-content-wrapper[data-catalog-zoom="2"]:not([data-catalog-view="list"]) #searchResultsGrid,
.store-content-wrapper[data-catalog-zoom="2"]:not([data-catalog-view="list"]) .category-card-grid {
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 10px !important;
}
html:not([data-theme="bright"]) .store-content-wrapper[data-catalog-zoom="2"]:not([data-catalog-view="list"]) .category-card-art,
html[data-theme="dark"] .store-content-wrapper[data-catalog-zoom="2"]:not([data-catalog-view="list"]) .category-card-art {
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
}
.store-content-wrapper[data-catalog-zoom="2"]:not([data-catalog-view="list"]) .category-card-body {
  padding: 8px 10px !important;
}
.store-content-wrapper[data-catalog-zoom="2"]:not([data-catalog-view="list"]) .category-card-title {
  font-size: 12.5px !important;
}
.store-content-wrapper[data-catalog-zoom="2"]:not([data-catalog-view="list"]) .category-card-desc {
  -webkit-line-clamp: 1 !important;
  font-size: 11px !important;
}

/* Zoom 3: Moderate Zoom Out (5 Columns) */
.store-content-wrapper[data-catalog-zoom="3"]:not([data-catalog-view="list"]) .timeline-items-grid,
.store-content-wrapper[data-catalog-zoom="3"]:not([data-catalog-view="list"]) .store-shelf-grid,
.store-content-wrapper[data-catalog-zoom="3"]:not([data-catalog-view="list"]) .timeline-grid,
.store-content-wrapper[data-catalog-zoom="3"]:not([data-catalog-view="list"]) #searchResultsGrid,
.store-content-wrapper[data-catalog-zoom="3"]:not([data-catalog-view="list"]) .category-card-grid {
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 14px !important;
}
html:not([data-theme="bright"]) .store-content-wrapper[data-catalog-zoom="3"]:not([data-catalog-view="list"]) .category-card-art,
html[data-theme="dark"] .store-content-wrapper[data-catalog-zoom="3"]:not([data-catalog-view="list"]) .category-card-art {
  height: 95px !important;
  min-height: 95px !important;
  max-height: 95px !important;
}

/* Zoom 4: Standard Default (4 Columns) - Matches light mode */
.store-content-wrapper[data-catalog-zoom="4"]:not([data-catalog-view="list"]) .timeline-items-grid,
.store-content-wrapper[data-catalog-zoom="4"]:not([data-catalog-view="list"]) .store-shelf-grid,
.store-content-wrapper[data-catalog-zoom="4"]:not([data-catalog-view="list"]) .timeline-grid,
.store-content-wrapper[data-catalog-zoom="4"]:not([data-catalog-view="list"]) #searchResultsGrid,
.store-content-wrapper[data-catalog-zoom="4"]:not([data-catalog-view="list"]) .category-card-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
}
html:not([data-theme="bright"]) .store-content-wrapper[data-catalog-zoom="4"]:not([data-catalog-view="list"]) .category-card-art,
html[data-theme="dark"] .store-content-wrapper[data-catalog-zoom="4"]:not([data-catalog-view="list"]) .category-card-art {
  height: 115px !important;
  min-height: 115px !important;
  max-height: 115px !important;
}

/* Zoom 5: Large Showcase (3 Columns) */
.store-content-wrapper[data-catalog-zoom="5"]:not([data-catalog-view="list"]) .timeline-items-grid,
.store-content-wrapper[data-catalog-zoom="5"]:not([data-catalog-view="list"]) .store-shelf-grid,
.store-content-wrapper[data-catalog-zoom="5"]:not([data-catalog-view="list"]) .timeline-grid,
.store-content-wrapper[data-catalog-zoom="5"]:not([data-catalog-view="list"]) #searchResultsGrid,
.store-content-wrapper[data-catalog-zoom="5"]:not([data-catalog-view="list"]) .category-card-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
}
html:not([data-theme="bright"]) .store-content-wrapper[data-catalog-zoom="5"]:not([data-catalog-view="list"]) .category-card-art,
html[data-theme="dark"] .store-content-wrapper[data-catalog-zoom="5"]:not([data-catalog-view="list"]) .category-card-art {
  height: 145px !important;
  min-height: 145px !important;
  max-height: 145px !important;
}

/* Zoom 6: Extra Large Hero (2 Columns) */
.store-content-wrapper[data-catalog-zoom="6"]:not([data-catalog-view="list"]) .timeline-items-grid,
.store-content-wrapper[data-catalog-zoom="6"]:not([data-catalog-view="list"]) .store-shelf-grid,
.store-content-wrapper[data-catalog-zoom="6"]:not([data-catalog-view="list"]) .timeline-grid,
.store-content-wrapper[data-catalog-zoom="6"]:not([data-catalog-view="list"]) #searchResultsGrid,
.store-content-wrapper[data-catalog-zoom="6"]:not([data-catalog-view="list"]) .category-card-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
}
html:not([data-theme="bright"]) .store-content-wrapper[data-catalog-zoom="6"]:not([data-catalog-view="list"]) .category-card-art,
html[data-theme="dark"] .store-content-wrapper[data-catalog-zoom="6"]:not([data-catalog-view="list"]) .category-card-art {
  height: 185px !important;
  min-height: 185px !important;
  max-height: 185px !important;
}

/* --- Zoom Scaling for List View (Levels 1 to 6) --- */

/* Zoom 1 to 2: Ultra Compact */
.store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="1"] .store-grid-card,
.store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="1"] .category-browser-card,
.store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="2"] .store-grid-card,
.store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="2"] .category-browser-card {
  min-height: 44px !important;
  padding: 4px 10px 4px 6px !important;
}
html:not([data-theme="bright"]) .store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="1"] .category-card-art,
html[data-theme="dark"] .store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="1"] .category-card-art,
html:not([data-theme="bright"]) .store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="2"] .category-card-art,
html[data-theme="dark"] .store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="2"] .category-card-art {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
}
.store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="1"] .category-card-title,
.store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="2"] .category-card-title {
  font-size: 12.5px !important;
}
.store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="1"] .category-card-desc,
.store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="2"] .category-card-desc {
  font-size: 10.5px !important;
}

/* Zoom 5: Roomier 2-Column List */
.store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="5"] .store-grid-card,
.store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="5"] .category-browser-card {
  min-height: 60px !important;
  padding: 8px 14px 8px 10px !important;
}
html:not([data-theme="bright"]) .store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="5"] .category-card-art,
html[data-theme="dark"] .store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="5"] .category-card-art {
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
}
.store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="5"] .category-card-title {
  font-size: 14.5px !important;
}
.store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="5"] .category-card-desc {
  font-size: 12px !important;
}

/* Zoom 6: Single-Column Full Width List */
.store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="6"] .timeline-items-grid,
.store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="6"] .store-shelf-grid,
.store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="6"] .timeline-grid,
.store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="6"] #searchResultsGrid {
  grid-template-columns: 1fr !important;
}
.store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="6"] .store-grid-card,
.store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="6"] .category-browser-card {
  min-height: 72px !important;
  padding: 8px 18px 8px 12px !important;
}
html:not([data-theme="bright"]) .store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="6"] .category-card-art,
html[data-theme="dark"] .store-content-wrapper[data-catalog-zoom="6"] .category-card-art {
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
}
.store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="6"] .category-card-title {
  font-size: 15px !important;
}
.store-content-wrapper[data-catalog-view="list"][data-catalog-zoom="6"] .category-card-desc {
  font-size: 12.5px !important;
}

@media (max-width: 840px) {
  .store-controls-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .store-toolbar-spacer {
    display: none !important;
  }
  .store-view-switcher {
    justify-self: stretch !important;
    width: 100% !important;
    justify-content: center !important;
  }
  .store-toolbar-right-group {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .store-search-bar {
    max-width: 100% !important;
    justify-self: stretch !important;
    flex: 1 1 100% !important;
  }
}

/* Category Shelves Headers (Featured View) */
.store-shelf-section {
  margin-bottom: 42px !important;
}

.shelf-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  margin-bottom: 18px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.shelf-kicker {
  font-size: 10px !important;
  font-weight: 750 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #38bdf8 !important;
  margin: 0 0 4px !important;
}

.shelf-title-wrap h2 {
  font-size: 21px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  margin: 0 0 4px !important;
}

.shelf-desc {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-weight: 400 !important;
}

.shelf-view-all-link {
  font-family: var(--sf-pro) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: all 0.16s ease !important;
  white-space: nowrap !important;
}

.shelf-view-all-link:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  transform: translateX(2px) !important;
}

/* Timeline / Date Dividers (Latest Releases View) */
/* Timeline / Date Stream Container */
.timeline-date-stream {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Timeline / Date Dividers (Latest Releases View) - Tight, cohesive spacing */
.timeline-date-group {
  margin-bottom: 24px !important;
}

.timeline-date-group:last-child {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   TIMELINE DATE DIVIDER: BOLD INDUSTRIAL DATE BADGES (STICKER STYLE)
   ========================================================================== */
.timeline-date-divider {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 32px 0 14px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  background: transparent !important;
}

.timeline-date-group:first-child .timeline-date-divider {
  margin-top: 10px !important;
}

.timeline-date-label {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

.timeline-tag,
.timeline-sub {
  display: none !important;
}

.timeline-date-heading {
  font-family: var(--sans, "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #000000 !important;
  background: #ffffff !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.timeline-count-pill {
  font-family: var(--sf-pro), -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.4) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  white-space: nowrap !important;
}

/* Bright Theme Adjustments for Date Divider */
html[data-theme="bright"] .timeline-date-heading {
  color: #0f172a !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="bright"] .timeline-count-pill {
  color: rgba(15, 23, 42, 0.6) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Elevated Empty Search State */
.store-empty-search {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 48px 24px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px dashed rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  margin: 20px 0 !important;
}

.empty-search-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.4) !important;
  margin-bottom: 16px !important;
}

.store-empty-search h3 {
  font-family: var(--sf-pro) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.01em !important;
}

.store-empty-search p {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin: 0 0 16px !important;
  max-width: 360px !important;
  line-height: 1.4 !important;
}

.empty-search-suggestions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
}

.empty-suggestion-tag {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: var(--sf-pro) !important;
  font-size: 12px !important;
  font-weight: 450 !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.empty-suggestion-tag:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.empty-search-reset-btn {
  background: #ffffff !important;
  color: #000000 !important;
  font-family: var(--sf-pro) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 7px 18px !important;
  border-radius: 999px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.empty-search-reset-btn:hover {
  background: #f1f5f9 !important;
  transform: scale(1.02) !important;
}

/* Floating Dynamic Island Toast Notification */
.flash-cart-toast {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  z-index: 10000 !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  background: rgba(18, 22, 32, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  font-family: var(--sf-pro) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transform: translateY(12px) scale(0.96) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
}

.flash-cart-toast.is-visible {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Modern Sequoia Glass Sidebar */
.market-sidebar nav a {
  position: relative !important;
}

.market-sidebar nav a.active::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 7px !important;
  bottom: 7px !important;
  width: 3px !important;
  border-radius: 2px !important;
  background: #38bdf8 !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.6) !important;
}

.sidebar-count-pill {
  margin-left: auto !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.4) !important;
  padding: 1px 7px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.market-sidebar nav a.active .sidebar-count-pill {
  color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Back Link in Category Pages */
.category-back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: var(--sf-pro) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.16s ease !important;
  margin: 0 auto 14px !important;
}

.category-back-link::before {
  content: "←" !important;
  font-size: 12px !important;
  transition: transform 0.16s ease !important;
}

.category-back-link:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

.category-back-link:hover::before {
  transform: translateX(-2px) !important;
}

/* ==========================================================================
   10. CURATED THEMATIC COLLECTIONS
   ========================================================================== */
.store-collections-section {
  margin-bottom: 48px !important;
  width: 100% !important;
}

.store-collection-count-badge {
  font-family: var(--sf-pro) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
}

.store-collections-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  width: 100% !important;
  margin-top: 14px !important;
}

@media (max-width: 900px) {
  .store-collections-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

@media (min-width: 901px) {
  .collection-banner-card:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }
}

.collection-banner-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: #0b0d13 !important;
  min-height: 290px !important;
  box-shadow: 0 12px 36px -8px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.collection-banner-card:hover {
  transform: translateY(-4px) scale(1.008) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.88), 0 0 28px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.collection-banner-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.collection-banner-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: scale(1.01) !important;
  filter: brightness(0.72) contrast(1.06) !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.collection-banner-card:hover .collection-banner-img {
  transform: scale(1.05) !important;
  filter: brightness(0.85) contrast(1.08) !important;
}

.collection-banner-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(8, 10, 15, 0.5) 0%, rgba(8, 10, 15, 0.25) 35%, rgba(6, 8, 12, 0.92) 80%, #06080c 100%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.collection-banner-glow {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 85% 15%, var(--col-accent, #38bdf8) 0%, transparent 55%) !important;
  opacity: 0.25 !important;
  mix-blend-mode: screen !important;
  z-index: 3 !important;
  pointer-events: none !important;
  transition: opacity 0.35s ease !important;
}

.collection-banner-card:hover .collection-banner-glow {
  opacity: 0.45 !important;
}

.collection-banner-content {
  position: relative !important;
  z-index: 4 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  min-height: 290px !important;
  padding: 22px 24px !important;
  box-sizing: border-box !important;
}

.collection-banner-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.collection-banner-badge {
  font-family: var(--sf-pro) !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background: rgba(12, 14, 20, 0.72) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.collection-banner-browse {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--sf-pro) !important;
  font-size: 11.5px !important;
  font-weight: 550 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  background: rgba(12, 14, 20, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.collection-banner-card:hover .collection-banner-browse {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.collection-banner-browse svg {
  transition: transform 0.2s ease !important;
}

.collection-banner-card:hover .collection-banner-browse svg {
  transform: translateX(3px) !important;
}

.collection-banner-bottom {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.collection-banner-title {
  font-family: var(--sf-pro), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 22px !important;
  font-weight: 750 !important;
  letter-spacing: -0.025em !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

.collection-banner-desc {
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  margin: 0 0 8px !important;
  font-weight: 400 !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6) !important;
}

.collection-banner-samples {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.collection-samples-label {
  font-family: var(--sf-pro) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin-right: 2px !important;
}

.collection-samples-pills {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.collection-sample-pill {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--sf-pro) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 2.5px 8px !important;
  border-radius: 6px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.collection-sample-pill.is-more {
  color: var(--col-accent, #38bdf8) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================================================
   GALLERY PREVIEW VIDEOS: ALWAYS SHOW FULL FRAME WITHOUT CROPPING
   ========================================================================== */
.item-gallery-stage {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.item-gallery-image {
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(94%, 960px) !important;
  height: min(90%, 820px) !important;
  max-width: 960px !important;
  max-height: 820px !important;
}

.item-gallery-image.has-video,
.item-gallery-image:has(video),
.item-gallery-image:has(iframe) {
  background: transparent !important;
  background-image: none !important;
}

.item-gallery-video,
.item-gallery-image video,
.item-gallery-stage video {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  border-radius: 8px !important;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.7) !important;
}

.item-gallery-image iframe,
.item-gallery-stage iframe {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 8px !important;
  border: none !important;
}

.item-gallery-image img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 8px !important;
}

/* ==========================================================================
   HORIZONTAL DETAILED LIST FOR "ALSO CHECK OUT" (2-Column Grid, Fixed Card Size)
   ========================================================================== */
.item-related-section {
  margin: 56px auto 72px auto !important;
  max-width: 1200px !important;
  width: 100% !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

.item-related-header {
  text-align: center;
  margin-bottom: 24px;
}

.item-related-section h2 {
  margin: 0 0 6px 0 !important;
  color: #f5f3ed !important;
  font-family: var(--shop-display) !important;
  font-size: 24px !important;
  font-weight: 650 !important;
  letter-spacing: -0.03em !important;
  text-align: center !important;
}

.item-related-subtitle {
  margin: 0;
  color: rgba(245, 243, 237, 0.55);
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
}

.item-related-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

@media (max-width: 860px) {
  .item-related-grid {
    grid-template-columns: 1fr !important;
  }
}

.related-horizontal-card {
  display: grid !important;
  grid-template-columns: 180px 1fr !important;
  height: 154px !important;
  min-height: 154px !important;
  max-height: 154px !important;
  border-radius: 14px !important;
  background: rgba(15, 19, 23, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.related-horizontal-card:hover {
  transform: translateY(-2px) !important;
  background: rgba(20, 26, 32, 0.9) !important;
  border-color: rgba(124, 207, 255, 0.35) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(124, 207, 255, 0.08) !important;
}

.related-horizontal-art {
  position: relative !important;
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  height: 154px !important;
  min-height: 154px !important;
  max-height: 154px !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.related-horizontal-art-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.3s ease !important;
}

.related-horizontal-card:hover .related-horizontal-art-img {
  transform: scale(1.04) !important;
}

.related-badge-type {
  position: absolute !important;
  bottom: 8px !important;
  left: 8px !important;
  padding: 2px 6px !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  background: rgba(6, 10, 14, 0.85) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 2 !important;
}

.related-badge-editors-pick {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 750 !important;
  border: 1px solid rgba(251, 191, 36, 0.85) !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35) !important;
  z-index: 2 !important;
}

.related-horizontal-body {
  padding: 12px 16px 10px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-width: 0 !important;
  height: 154px !important;
  max-height: 154px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

@media (max-width: 860px) {
  .related-horizontal-card {
    grid-template-columns: 140px 1fr !important;
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
  }
  .related-horizontal-art {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
  }
  .related-horizontal-body {
    height: 140px !important;
    max-height: 140px !important;
    padding: 10px 12px 8px 12px !important;
  }
}

.related-horizontal-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.related-title-area {
  min-width: 0 !important;
}

.related-card-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.related-card-title {
  font-size: 16px !important;
  font-weight: 650 !important;
  color: #f5f3ed !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}

.related-card-author {
  display: block !important;
  font-size: 11.5px !important;
  color: rgba(245, 243, 237, 0.45) !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
}

.related-card-pricing {
  text-align: right !important;
  flex-shrink: 0 !important;
}

.related-price-credits {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #7ccfff !important;
  display: block !important;
}

.related-price-credits.is-free {
  color: #34d399 !important;
}

.related-price-approx {
  font-size: 11px !important;
  color: rgba(245, 243, 237, 0.42) !important;
  font-weight: 500 !important;
  display: block !important;
  margin-top: 1px !important;
}

.related-horizontal-desc {
  margin: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.48 !important;
  color: rgba(245, 243, 237, 0.68) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.related-horizontal-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: auto !important;
  padding-top: 4px !important;
}

.related-horizontal-tags {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
  max-height: 24px !important;
  overflow: hidden !important;
}

.related-tag-pill {
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(245, 243, 237, 0.58) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  white-space: nowrap !important;
}

.related-horizontal-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.related-card-cart-btn {
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f5f3ed !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.related-card-cart-btn:hover {
  background: rgba(124, 207, 255, 0.15) !important;
  border-color: rgba(124, 207, 255, 0.35) !important;
  color: #7ccfff !important;
}

.related-card-cart-btn.is-in-cart {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(52, 211, 153, 0.4) !important;
  color: #34d399 !important;
}

.related-view-link {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: rgba(245, 243, 237, 0.72) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: color 0.15s ease, transform 0.15s ease !important;
}

.related-horizontal-card:hover .related-view-link {
  color: #7ccfff !important;
  transform: translateX(2px) !important;
}

.related-scroll-sentinel {
  width: 100% !important;
  height: 20px !important;
  margin-top: 12px !important;
}

.related-scroll-status {
  text-align: center !important;
  padding: 16px 0 !important;
  color: rgba(245, 243, 237, 0.45) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

.related-end-marker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: rgba(245, 243, 237, 0.55) !important;
}

@media (max-width: 720px) {
  .item-related-section {
    padding: 0 16px !important;
  }
  .related-horizontal-card {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .related-horizontal-art {
    width: 100% !important;
    height: 170px !important;
    min-height: 170px !important;
  }
  .related-horizontal-desc {
    -webkit-line-clamp: 3 !important;
  }
}

/* Bright Theme overrides for related horizontal cards */
html[data-theme="bright"] .item-related-section h2 {
  color: #0f172a !important;
}
html[data-theme="bright"] .item-related-subtitle {
  color: rgba(15, 23, 42, 0.62) !important;
}
html[data-theme="bright"] .related-horizontal-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.09) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="bright"] .related-horizontal-card:hover {
  background: #fafafa !important;
  border-color: rgba(2, 132, 199, 0.4) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08), 0 0 16px rgba(2, 132, 199, 0.08) !important;
}
html[data-theme="bright"] .related-card-title {
  color: #0f172a !important;
}
html[data-theme="bright"] .related-card-author {
  color: rgba(15, 23, 42, 0.52) !important;
}
html[data-theme="bright"] .related-horizontal-desc {
  color: rgba(15, 23, 42, 0.72) !important;
}
html[data-theme="bright"] .related-tag-pill {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: rgba(15, 23, 42, 0.65) !important;
}
html[data-theme="bright"] .related-price-credits {
  color: #0284c7 !important;
}
html[data-theme="bright"] .related-price-approx {
  color: rgba(15, 23, 42, 0.48) !important;
}
html[data-theme="bright"] .related-view-link {
  color: rgba(15, 23, 42, 0.72) !important;
}
html[data-theme="bright"] .related-horizontal-card:hover .related-view-link {
  color: #0284c7 !important;
}
html[data-theme="bright"] .related-card-cart-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #0f172a !important;
}
html[data-theme="bright"] .related-card-cart-btn:hover {
  background: rgba(2, 132, 199, 0.1) !important;
  border-color: rgba(2, 132, 199, 0.3) !important;
  color: #0284c7 !important;
}
html[data-theme="bright"] .related-end-marker {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: rgba(15, 23, 42, 0.6) !important;
}

/* ==========================================================================
   UNIVERSAL DARK SELECT AND DROPDOWN MENUS
   ========================================================================== */
select,
.category-sort-label select,
[data-category-sort],
[data-currency-select] {
  color-scheme: dark !important;
  background-color: #12161e !important;
  color: #f5f3ed !important;
}

select option,
.category-sort-label select option,
[data-category-sort] option,
[data-currency-select] option {
  background-color: #12161e !important;
  color: #f5f3ed !important;
  padding: 8px 12px !important;
}

html[data-theme="bright"] select,
html[data-theme="bright"] .category-sort-label select,
html[data-theme="bright"] [data-category-sort],
html[data-theme="bright"] [data-currency-select] {
  color-scheme: light !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="bright"] select option,
html[data-theme="bright"] .category-sort-label select option,
html[data-theme="bright"] [data-category-sort] option,
html[data-theme="bright"] [data-currency-select] option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* ==========================================================================
   DISTINCT HEADER NAVIGATION (Learn & Made With Flash): EDITORIAL TYPOGRAPHY
   Zero padding, no pill/capsule borders, pure typography on left of currency picker
   ========================================================================== */
.flow-header-distinct-nav {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Base reset for distinct header links */
.flow-actions .flow-header-distinct-nav a,
.flow-distinct-link,
.flow-distinct-pill,
.public-studio-page:not(.mockup-home) .flow-actions .flow-header-distinct-nav a,
html body .flow-actions .flow-header-distinct-nav a {
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  min-height: auto !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  outline: none !important;
}

/* Learn link: Clean font, bright study yellow, crisp study icon */
.flow-actions .flow-header-distinct-nav a.is-learn,
.flow-distinct-link.is-learn,
.public-studio-page:not(.mockup-home) .flow-actions a.is-learn,
.public-studio-page:not(.mockup-home) .flow-actions .flow-header-distinct-nav a.is-learn,
html body .flow-actions .flow-header-distinct-nav a.is-learn {
  font-family: var(--sans, "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  color: #ffd60a !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: color 0.16s ease, filter 0.16s ease !important;
}

.flow-actions .flow-header-distinct-nav a.is-learn svg,
.flow-distinct-link.is-learn svg,
html body .flow-actions .flow-header-distinct-nav a.is-learn svg {
  display: inline-block !important;
  stroke: #ffd60a !important;
  color: #ffd60a !important;
  flex-shrink: 0 !important;
  width: 14px !important;
  height: 14px !important;
  margin-top: -1px !important;
}

.flow-actions .flow-header-distinct-nav a.is-learn:hover,
.flow-distinct-link.is-learn:hover {
  color: #fff275 !important;
  filter: drop-shadow(0 0 8px rgba(255, 214, 10, 0.55)) !important;
  text-decoration: none !important;
}

.flow-actions .flow-header-distinct-nav a.is-learn:hover svg,
.flow-distinct-link.is-learn:hover svg {
  stroke: #fff275 !important;
}

.flow-actions .flow-header-distinct-nav a.is-learn.is-active,
.flow-actions .flow-header-distinct-nav a.is-learn[aria-current="page"],
.flow-distinct-link.is-learn.is-active,
.flow-distinct-link.is-learn[aria-current="page"] {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  text-decoration-thickness: 1.5px !important;
  text-decoration-color: #ffd60a !important;
}

/* Made With Flash link: Neobrutalism tactile badge (pastel lilac, hard black border & drop shadow) */
.flow-actions .flow-header-distinct-nav a.is-made-with-flash,
.flow-distinct-link.is-made-with-flash,
.public-studio-page:not(.mockup-home) .flow-actions a.is-made-with-flash,
.public-studio-page:not(.mockup-home) .flow-actions .flow-header-distinct-nav a.is-made-with-flash,
html body .flow-actions .flow-header-distinct-nav a.is-made-with-flash {
  font-family: var(--sans, "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  color: #000000 !important;
  background: #d8b4fe !important;
  border: 1.5px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  border-radius: 6px !important;
  padding: 4px 9px !important;
  gap: 5px !important;
  margin: 0 !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease !important;
}

.flow-actions .flow-header-distinct-nav a.is-made-with-flash svg,
.flow-distinct-link.is-made-with-flash svg,
html body .flow-actions .flow-header-distinct-nav a.is-made-with-flash svg {
  display: inline-block !important;
  fill: #000000 !important;
  color: #000000 !important;
  flex-shrink: 0 !important;
  width: 11px !important;
  height: 11px !important;
}

.flow-actions .flow-header-distinct-nav a.is-made-with-flash:hover,
.flow-distinct-link.is-made-with-flash:hover {
  background: #e9d5ff !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0px #000000 !important;
  text-decoration: none !important;
}

.flow-actions .flow-header-distinct-nav a.is-made-with-flash:active,
.flow-distinct-link.is-made-with-flash:active {
  transform: translate(1px, 1px) !important;
  box-shadow: 1px 1px 0px #000000 !important;
}

.flow-actions .flow-header-distinct-nav a.is-made-with-flash.is-active,
.flow-actions .flow-header-distinct-nav a.is-made-with-flash[aria-current="page"],
.flow-distinct-link.is-made-with-flash.is-active,
.flow-distinct-link.is-made-with-flash[aria-current="page"] {
  background: #c084fc !important;
  box-shadow: 2px 2px 0px #000000 !important;
}

.flow-distinct-divider {
  width: 1px !important;
  height: 16px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  margin: 0 4px !important;
  flex-shrink: 0 !important;
}

/* Bright Theme Adjustments */
html[data-theme="bright"] .flow-actions .flow-header-distinct-nav a.is-learn,
html[data-theme="bright"] .flow-distinct-link.is-learn,
html[data-theme="bright"] html body .flow-actions .flow-header-distinct-nav a.is-learn {
  color: #d97706 !important;
}

html[data-theme="bright"] .flow-actions .flow-header-distinct-nav a.is-learn svg,
html[data-theme="bright"] .flow-distinct-link.is-learn svg,
html[data-theme="bright"] html body .flow-actions .flow-header-distinct-nav a.is-learn svg {
  stroke: currentColor !important;
}

html[data-theme="bright"] .flow-actions .flow-header-distinct-nav a.is-learn:hover,
html[data-theme="bright"] .flow-distinct-link.is-learn:hover {
  color: #b45309 !important;
  filter: drop-shadow(0 0 6px rgba(217, 119, 6, 0.4)) !important;
}

html[data-theme="bright"] .flow-actions .flow-header-distinct-nav a.is-learn.is-active,
html[data-theme="bright"] .flow-actions .flow-header-distinct-nav a.is-learn[aria-current="page"] {
  color: #0f172a !important;
  text-decoration-color: #d97706 !important;
}

html[data-theme="bright"] .flow-distinct-divider {
  background: rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="bright"] .flow-currency-picker select {
  background: transparent !important;
  background-image: none !important;
  color: #f1f5f9 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

@media (max-width: 900px) {
  .flow-header-distinct-nav,
  .flow-distinct-divider {
    display: none !important;
  }
}


/* ==========================================================================
   Phones: app-style bottom tab bar (built by mobile-nav.js) + compact header
   ========================================================================== */
.mobile-tabbar {
  display: none;
}

@media (max-width: 900px) {
  .mobile-tabbar {
    position: fixed;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 12px;
    z-index: 9000;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 7px 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    background: rgba(14, 18, 24, 0.86);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    backdrop-filter: blur(20px) saturate(1.2);
  }

  .mobile-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 0 4px;
    border-radius: 14px;
    color: rgba(244, 244, 239, 0.55);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-tab.is-active {
    color: #38bdf8;
  }

  .mobile-tab:active {
    background: rgba(255, 255, 255, 0.06);
  }

  body.has-mobile-tabbar {
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }

  /* The floating cart pill sits above the tab bar */
  body.has-mobile-tabbar .flash-cart-floating-widget {
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }

  /* Compact header: full logo, cart, and the account pill with credits + avatar only */
  .flow-menu-toggle {
    display: none !important;
  }

  .flow-nav .flow-brand {
    flex: none !important;
    min-width: max-content !important;
  }

  .flow-nav .brand-scribble,
  .flow-actions .theme-toggle-btn,
  html .flow-nav .flow-actions > a[href*="app-store"][href] {
    display: none !important;
  }

  .flow-actions {
    gap: 8px !important;
    margin-left: auto !important;
  }

  .flow-nav-account-container.is-merged [data-nav-account-name],
  .flow-nav-account-container.is-merged .flow-nav-caret {
    display: none !important;
  }

  .flow-actions .flow-nav-account-container.is-merged .flow-nav-account-btn[data-flow-nav-account] {
    padding: 0 8px !important;
  }

  .flow-nav-account-container.is-merged .flow-nav-avatar-circle {
    width: 24px !important;
    height: 24px !important;
    margin-right: 0 !important;
    font-size: 12px !important;
  }
}