/* Shared dark glass material. No continuously animated blur or extra JS. */
@layer theme {
  [data-theme="dark"].store-shell {
    --glass-fill: rgba(24, 28, 35, .58);
    --glass-edge: rgba(220, 233, 255, .12);
    --glass-sheen: linear-gradient(135deg, rgba(235, 245, 255, .10), rgba(255, 255, 255, .025) 42%, rgba(189, 201, 236, .055));
    --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 -1px 0 rgba(255, 255, 255, .025), 0 12px 36px rgba(0, 0, 0, .22);
    --glass-blur: 20px;
    background-image: radial-gradient(ellipse 75% 620px at 0 0, rgba(110, 178, 201, .19), transparent 75%), radial-gradient(ellipse 65% 760px at 100% 15%, rgba(141, 124, 193, .16), transparent 78%), radial-gradient(ellipse 60% 550px at 45% 95%, rgba(100, 140, 160, .07), transparent 80%) !important;
  }

  /* Product cards, account blocks, informational panels and dialogs. */
  [data-theme="dark"] :is(.catalog-card, .ai-card, .user-dropdown-card, .glass-panel) {
    background: var(--glass-sheen), var(--glass-fill) !important;
    border-color: var(--glass-edge) !important;
    box-shadow: var(--glass-shadow) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(145%) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(145%) !important;
  }

  [data-theme="dark"] :is(.user-dropdown-card, .glass-dialog) {
    --glass-fill: rgba(24, 27, 34, .84);
    --glass-blur: 28px;
  }

  [data-theme="dark"] .store-header {
    background: linear-gradient(110deg, rgba(255,255,255,.045), rgba(255,255,255,.015)), rgba(15,18,24,.55) !important;
    box-shadow: inset 0 -1px 0 rgba(225,235,255,.065), 0 8px 32px rgba(0,0,0,.12) !important;
    -webkit-backdrop-filter: blur(28px) saturate(155%) !important;
    backdrop-filter: blur(28px) saturate(155%) !important;
  }

  [data-theme="dark"] .store-header nav.desktop-store-nav,
  [data-theme="dark"] .tg-bottom-nav,
  [data-theme="dark"] .glass-control {
    background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.025) 60%), rgba(35,39,46,.53) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.17), inset 0 -1px 0 rgba(255,255,255,.035), 0 5px 20px rgba(0,0,0,.18) !important;
    border-color: rgba(225,235,255,.13) !important;
    -webkit-backdrop-filter: blur(22px) saturate(155%) !important;
    backdrop-filter: blur(22px) saturate(155%) !important;
  }

  [data-theme="dark"] .desktop-store-nav > button.text-neutral-900,
  [data-theme="dark"] .tg-bottom-nav > button.is-active,
  [data-theme="dark"] :is(.catalog-action, .glass-primary, .glass-checkout:not(:disabled):not(.cursor-not-allowed)) {
    background: linear-gradient(160deg, #fff 5%, #eff2f7 55%, #d8dee8) !important;
    color: #17191e !important;
    box-shadow: inset 0 1px 1px #fff, inset 0 -1px 2px rgba(84,100,127,.22), 0 3px 12px rgba(0,0,0,.18) !important;
  }

  [data-theme="dark"] :is(.glass-primary, .glass-checkout:not(:disabled):not(.cursor-not-allowed)) :is(span, svg) { color: #17191e !important; }

  [data-theme="dark"] .glass-mobile-menu {
    background: linear-gradient(145deg, rgba(230,242,255,.07), transparent 65%), rgba(14,18,24,.88) !important;
    -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
    backdrop-filter: blur(22px) saturate(145%) !important;
  }

  [data-theme="dark"] .glass-option {
    background-image: linear-gradient(140deg, rgba(255,255,255,.065), rgba(255,255,255,.01) 55%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }

  [data-theme="dark"] .glass-option:not(.border-neutral-900):not(.border-white) {
    border-color: rgba(220,233,255,.12) !important;
  }

  [data-theme="dark"] .glass-input {
    background: rgba(4,8,14,.30) !important;
    border-color: rgba(220,233,255,.16) !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,.13), 0 1px 0 rgba(255,255,255,.04) !important;
    color: #f5f5f5 !important;
  }

  [data-theme="dark"] :is(.catalog-card-footer, .ai-card-footer) {
    border-color: rgba(220,233,255,.09) !important;
  }

  [data-theme="dark"] .brand-banner {
    border-color: rgba(220,233,255,.06) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 0 rgba(255,255,255,.025);
  }

  [data-theme="dark"] .product-brand {
    background-color: #050609;
    background-image: linear-gradient(145deg, rgba(160,187,215,.045), transparent 60%), radial-gradient(at 50% 40%, transparent 10%, rgba(0,0,0,.65) 95%), radial-gradient(circle, rgba(255,255,255,.20) .55px, transparent .8px);
    background-size: 100% 100%, 100% 100%, 3px 3px;
  }

  [data-theme="dark"] .glass-bottom-bar {
    background: linear-gradient(100deg, rgba(255,255,255,.055), transparent), rgba(17,20,27,.80) !important;
    border-color: rgba(220,233,255,.12) !important;
    -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
    backdrop-filter: blur(24px) saturate(145%) !important;
  }

  [data-theme="dark"] :is(button, a, input):focus-visible {
    outline: 2px solid #b9d3ee !important;
    outline-offset: 3px;
  }

  @media (hover:hover) and (prefers-reduced-motion:no-preference) {
    [data-theme="dark"] :is(.catalog-card, .ai-card) {
      transition: background-color .2s, box-shadow .2s, border-color .2s !important;
    }
    [data-theme="dark"] :is(.catalog-card, .ai-card):hover {
      background-color: rgba(44,49,61,.65) !important;
      border-color: rgba(220,233,255,.20) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.19), 0 15px 40px rgba(0,0,0,.26) !important;
    }
  }

  [data-theme="dark"] .user-dropdown-card .dropdown-item:hover {
    background: rgba(218,229,250,.085) !important;
  }

  @media (max-width:767px) {
    [data-theme="dark"].store-shell { --glass-blur: 10px; }
    [data-theme="dark"] :is(.user-dropdown-card, .glass-dialog) { --glass-blur: 18px; }
    [data-theme="dark"] .store-header {
      -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
      backdrop-filter: blur(16px) saturate(140%) !important;
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    [data-theme="dark"] :is(.catalog-card, .ai-card, .user-dropdown-card, .glass-panel, .glass-control, .tg-bottom-nav, .store-header, .glass-bottom-bar) {
      background-color: #1b1e25 !important;
    }
  }

}