.module-component-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
.module-component-header .container[pc] {
  height: var(--header-height);
  background: var(--white);
  border-radius: 0 0 var(--radius-20) var(--radius-20);
  box-shadow: 0px calc(var(--rpx) * 4) calc(var(--rpx) * 30) 0px rgba(22, 25, 30, 0.07);
  padding: 0 var(--spacing-26);
}
.module-component-header.scrolled .container[pc] .logo,
body.modal-mobileMenu .module-component-header .container[mobile] .logo,
body.modal-form .module-component-header .container[mobile] .logo,
body.blog-template-default .module-component-header .container[pc] .logo {
  box-shadow: none;
  height: var(--header-height);
  width: calc(72 * var(--rpx));
  transform: translateY(0);
}
.module-component-header .container[pc] .logo {
  width: calc(156 * var(--rpx));
  height: calc(183 * var(--rpx));
  padding: calc(32 * var(--rpx)) calc(5 * var(--rpx));
  padding-right: calc(10 * var(--rpx));
  transform: translateY(25%);
  background: var(--white);
  border-radius: 0 0 20px 20px;
  box-shadow: 0px calc(var(--rpx) * 4) calc(var(--rpx) * 30) rgba(22, 25, 30, 0.07);
  transition: var(--transition-medium);
}
.module-component-header .container[pc] nav.menu a {
  font: var(--font-search-medium);
}
.module-component-header .container[pc] nav.menu a.nav-link-active {
  color: var(--blue-100);
}
.module-component-header .container[pc] .right .search-input {
  padding: var(--spacing-14) var(--spacing-20);
  border-radius: var(--radius-15);
  width: calc(var(--rpx) * 384);
  background-color: var(--blue-100-10);
  border: calc(var(--rpx) * 1) solid var(--blue-100-10);
  transition: var(--transition-fast);
}
.module-component-header .container[pc] .right .search-input > div:first-child {
  height: calc(var(--rpx) * 21);
}
.module-component-header .container[pc] .right .search-input:has(input:focus) {
  border-color: var(--blue-100-80);
}
.module-component-header .container[pc] .right .search-input input {
  font: var(--font-search-medium);
  color: var(--blue-100);
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  border-radius: 0;
}
.module-component-header .container[pc] .right .search-input input::placeholder {
  color: var(--blue-100);
  transition: var(--transition-fast);
}
.module-component-header .container[pc] .right .search-input input:focus::placeholder {
  color: transparent;
}

.module-component-header .container[pc] .right .h-profile {
  display: flex;
  width: calc(var(--rpx) * 50);
  height: calc(var(--rpx) * 50);
}

.module-component-header .container[pc] .right .h-profile svg{
  width: calc(var(--rpx) * 50);
  height: calc(var(--rpx) * 50);
}

/* Регистрация/Вход */
.module-component-header .container[pc] .right .auth-btn,
.module-component-header .container[mobile] .right .auth-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.module-component-header .container[pc] .right .auth-btn:hover,
.module-component-header .container[mobile] .right .auth-btn:hover {
  transform: scale(1.05);
}

.module-component-header .container[pc] .right .auth-btn svg,
.module-component-header .container[mobile] .right .auth-btn svg {
  width: calc(var(--rpx) * 50);
  height: calc(var(--rpx) * 50);
}

.module-component-header .right .h-script {
  display: none !important;
}


.module-component-header .right .h-box {
  position: absolute;
  width: calc(var(--rpx) * 384);
  top: calc(100% + 10 * var(--rpx));
}

.module-component-header .right .box {
  padding: var(--spacing-20);
  padding-top: var(--spacing-40);
  background-color: var(--white);
  border-radius: var(--radius-20);
  width: calc(var(--rpx) * 384);
  max-height: calc(560 * var(--rpx));
  overflow-y: auto;
}

.module-component-header .right .box .list .card {
  border-radius: var(--radius-20);
  padding: var(--spacing-20);
  width: 100%;
}

.module-component-header .right .box .list .card:nth-child(odd) {
  background: var(--gradient-bg-overlay-2);
}

.module-component-header .right .box .list .card:nth-child(even) {
  background: var(--gradient-bg-overlay-red);
}

.module-component-header .right .box .list .card .tag {
  padding: calc(8 * var(--rpx)) calc(30 * var(--rpx));
  border-radius: var(--radius-20);
  width: fit-content;
}

.module-component-header .right .box .list .card:nth-child(odd) .tag {
  background-color: var(--blue-100-10);
}

.module-component-header .right .box .list .card:nth-child(even) .tag {
  background-color: var(--red-100-10);
}















/* Mobile */
.module-component-header .container[mobile] {
  height: var(--header-height);
  background: var(--white);
  border-radius: 0 0 var(--radius-15) var(--radius-15);
  padding: 0 var(--spacing-15);
}
body.modal-mobileMenu .module-component-header .container[mobile] {
  border-radius: 0;
}
.module-component-header.scrolled .container[mobile] .logo {
  box-shadow: none;
  height: var(--header-height);
  width: calc(76 * var(--rpx));
  transform: translateY(0);
}

.module-component-header .container[mobile] .logo {
    box-shadow: none !important;
    height: var(--header-height) !important;
    width: calc(76 * var(--rpx)) !important;
    transform: translateY(0) !important;
}

.module-component-header .container[mobile] .logo {
  width: calc(112 * var(--rpx));
  height: calc(135 * var(--rpx));
  padding: calc(25 * var(--rpx)) calc(5 * var(--rpx));
  padding-right: calc(10 * var(--rpx));
  transform: translateY(25%);
  background: var(--white);
  border-radius: 0 0 15px 15px;
  box-shadow: 0px calc(var(--rpx) * 4) calc(var(--rpx) * 30) rgba(22, 25, 30, 0.07);
  transition: var(--transition-medium);
}
.module-component-header .container[mobile] button {
  padding: 0;
  width: calc(50 * var(--rpx));
  height: calc(50 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.module-component-header .container[mobile] button .close,
.module-component-header .container[mobile] button .open {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-middle);
  z-index: 1;
}

body:not(.modal-open) .module-component-header .container[mobile] button .open {
  opacity: 1;
  pointer-events: auto;
}

body.modal-open .module-component-header .container[mobile] button .close {
  opacity: 1;
  pointer-events: auto;
}







@media (max-width: 1023px) {
  .module-component-header .container[pc] {
    display: none;
  }
}

@media (min-width: 1024px) {
  .module-component-header .container[mobile] {
    display: none;
  }
}