.cover-bg {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background: linear-gradient(180deg, rgba(4, 118, 231, 0.9), rgba(4, 118, 231, 0.7) 24.61%, rgba(4, 118, 231, 0.5) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.5s, visibility 0.5s;
}

header:has(.header-default-navbar > .navbar-item:hover) ~ .cover-bg,
header:has(.open-mobile-navbar.active) ~ .cover-bg,
main:has(.component-products-sidebar-list.active) ~ .cover-bg,
main:has(.application-single-content-menu.active) ~ .cover-bg,
main:has(.news-single-content-sidebar.active) ~ .cover-bg {
  opacity: 1;
  visibility: visible;
}