/* Liquid glass lens — public kopya (header / katalog) */

.arch-liquid-lens,
.hero-liquid-lens {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  contain: layout style paint;
  background-color: rgba(255, 255, 255, 0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 1.8px 3px 0 -2px rgba(255, 255, 255, 0.9),
    inset -2px -2px 0 -2px rgba(255, 255, 255, 0.8),
    inset -3px -8px 1px -6px rgba(255, 255, 255, 0.6),
    inset -0.3px -1px 4px 0 rgba(0, 0, 0, 0.12),
    inset -1.5px 2.5px 0 -2px rgba(0, 0, 0, 0.2),
    inset 0 3px 4px -2px rgba(0, 0, 0, 0.2),
    inset 2px -6.5px 1px -4px rgba(0, 0, 0, 0.1),
    0 1px 5px 0 rgba(0, 0, 0, 0.1),
    0 6px 16px 0 rgba(0, 0, 0, 0.08);
  transition:
    opacity 0.22s ease,
    background-color 0.22s ease;
}

.arch-header-pill:hover .arch-liquid-lens,
.arch-header-pill:focus-within .arch-liquid-lens,
.arch-header-pill:active .arch-liquid-lens,
.arch-header-pill.active .arch-liquid-lens,
.arch-header-pill[aria-expanded="true"] .arch-liquid-lens,
.hero-search-bar:hover .hero-liquid-lens,
.hero-search-bar:focus-within .hero-liquid-lens,
.hero-search-bar:active .hero-liquid-lens,
.hero-search-bar__submit:hover .hero-liquid-lens,
.hero-search-bar__submit:focus-visible .hero-liquid-lens,
.hero-search-bar__submit:active .hero-liquid-lens,
.arch-liquid-search-bar:hover .arch-liquid-lens,
.arch-liquid-search-bar:focus-within .arch-liquid-lens {
  opacity: 1;
  backdrop-filter: blur(6px) saturate(1.15);
  -webkit-backdrop-filter: blur(6px) saturate(1.15);
}

.arch-header-pill:hover:not(.active):not(:focus-within):not([aria-expanded="true"]) .arch-liquid-lens,
.arch-header-icon:hover .arch-liquid-lens,
.arch-header-search:hover .arch-liquid-lens,
.arch-header-auth-login:hover .arch-liquid-lens,
.arch-account-menu__toggle:hover .arch-liquid-lens,
.hero-search-bar:hover:not(:focus-within) .hero-liquid-lens,
.arch-liquid-search-bar:hover:not(:focus-within) .arch-liquid-lens {
  background-color: rgba(255, 255, 255, 0.12);
}

.arch-header-search:focus-within .arch-liquid-lens,
.arch-header-pill.active .arch-liquid-lens,
.arch-header-pill:focus-within .arch-liquid-lens,
.arch-header-pill[aria-expanded="true"] .arch-liquid-lens,
.hero-search-bar:focus-within .hero-liquid-lens,
.arch-liquid-search-bar:focus-within .arch-liquid-lens {
  background-color: rgba(255, 255, 255, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  .arch-liquid-lens,
  .hero-liquid-lens {
    transition-duration: 0.01ms;
  }
}