/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

.header {
  --padding: 15px;
  position: sticky;
  top:0;
  z-index: 9990;
  margin-bottom: var(--padding);
}

@media (max-width: 768px) {
  .header {
    --padding: 8px;
  }
}

.header:has(.scrollhidden) {
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
}

/*--------------------------------------------------------------
# Header desktop
--------------------------------------------------------------*/

@media (max-width: 1150px) {
    .header__desktop {
        display: none;
    }
}

/*--------------------------------------------------------------
# Header info
--------------------------------------------------------------*/

.header__info {
  background-color: var(--gray-bg);
  font-weight: 600;
}

.header__info-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding-block: 7px;
}

.header__info .menu__list {
  display: flex;
  gap: 24px;
}

.header__info .menu__list [data-js-dropdown-open] {
  --offset: 14px;
}

.header__info-contacts {
  display: flex;
  column-gap: 24px;
  justify-content: end;
  align-items: center;
}

.header__info-phones {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--black-color);
}

.header__info-tg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.header__info-tg::before {
  content: '';
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #75b454;
}

.header__button {
  --btn-pad-inline: 20px;
  --btn-pad-block: 5px;
  --btn-height: fit-content;
  font-weight: 500;
  border-width: 1px;
  text-transform: none;
  color: var(--accent-color);
  position: relative;
}

@media (hover:hover) {
  .header__button:hover {
    border-width: 1px;
  }
}

.header__button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -20px;
  width: 1px;
  height: 100%;
  background-color: rgba(20, 29, 56, 0.15);
  transform: translateY(-50%);
}

/*--------------------------------------------------------------
# Header main
--------------------------------------------------------------*/

.header__main {
  position: relative;
  transition-duration: var(--transition-duration);
  background-color: var(--background);
  border-bottom: 1px solid rgba(20, 29, 56, 0.15);
}

.header__main.scrollhidden {
  margin-top: var(--marginTopOffset);
}

.header__main-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--padding);
  gap: 20px;
  color: var(--black-color);
}

.header__main-bottom {
  padding-block: var(--padding);
}

.header__main-wrap {
  display: flex;
  align-items: center;
  gap: 40px;
}

.header__main-wrap:last-child {
  justify-content: end;
  flex-shrink: 1;
}

.header__main-menu {
  display: flex;
  align-items: center;
  gap: 32px;
}

.header__main-menu .menu__item.icon--gift::after {
  display: none;
}

.header__main-btns-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--gray-color);
}

@media (hover: hover) {
  .header__main-btn:hover{
    color: var(--black-color);
  }
}

.header__main-catalog-dropdown {
  position: absolute;
  top: auto;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition-duration: var(--transition-duration);
  transform: translateY(-10px);
}

.header__main-catalog-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.header__main-logo img {
  width: 200px;
}

/*--------------------------------------------------------------
# Header mobile
--------------------------------------------------------------*/

.header__mob {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--container-padding);
  z-index: 9990;
  background-color: var(--accent-xl-color);
  color: var(--black-color);
  padding: 20px 16px;
}

@media (min-width: 1151px) {
  .header__mob {
    display: none;
  }
}

.header__mob-logo {
  flex-shrink: 1;
}

.header__mob-phone {
  font-weight: 700;
  font-size: 16px;
  padding: 8px 16px;
  border-radius: 40px;
  border: 1px solid var(--accent-color);
}

.header__mob:has(.is-open) .header__mob-phone {display: none;}

/*--------------------------------------------------------------
# Site navigation
--------------------------------------------------------------*/

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 32px;
}

.menu__item {
  cursor: pointer;
}

@media (hover:hover) {
  .menu__item:hover {
    color: var(--gray-l-color);
    cursor: pointer;
  }
}

.menu__item--accent {
  color: var(--black-color);
  font-size: 18px;
  font-weight: 500;
}

.menu__heading {
  color: var(--black-color);
  font-size: 18px;
  font-weight: 500;
}

.site-nav__list .sub-menu .menu-item,
.burger-menu .sub-menu .menu-item {
  font-size: 14px;
  line-height: 30px;
  font-weight: 700;
  color: var(--black-color);
  padding: 5px 0;
  text-transform: uppercase;
}

.menu-item a {
  display: block;
  width: 100%;
}
  
.site-nav__list .menu-item-has-children,
.site-nav__list .menu-item-2425,
.site-nav__list .menu-item-2405,
.burger-menu .menu-item-has-children,
.burger-menu .menu-item-2425,
.burger-menu .menu-item-2405 {
  --gap: 6px;
  --offset: 25px;
  display: flex;
  align-items: center;
  gap: var(--gap);
  position: relative;
}

.site-nav__list .menu-item-has-children::after,
.site-nav__list .menu-item-2425::after,
.site-nav__list .menu-item-2405::after,
.burger-menu .menu-item-has-children::after,
.burger-menu .menu-item-2425::after,
.burger-menu .menu-item-2405::after {
  --size:12px;
  display: block;
  content: "";
  width: var(--size);
  height: var(--size);
  flex-shrink: 0;
  background-color: currentColor;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: contain;
  mask-size: contain;

  transition-duration: var(--transition-duration);
  -webkit-mask-image: var(--chevron-down-icon);
  mask-image: var(--chevron-down-icon);
  color: var(--accent-color);
}

.menu-item-has-children.is-open:after,
.menu-item-2425.is-open::after,
.menu-item-2405.is-open::after {
  transform: rotate(180deg);
}

.menu-item-has-children::before,
.menu-item-2425::before,
.menu-item-2405::before {
  content: "";
  height: var(--offset);
  display: block;
  position: absolute;
  bottom: 0;
  width: calc(100% + 20px);
  transform: translate(10px, 100%);
  right: 0;
  display: none;
  /* background-color: rebeccapurple; */
}

.menu-item-has-children.is-open::before,
.menu-item-2425.is-open::before,
.menu-item-2405.is-open::before {
  display: block;
}

.site-nav .sub-menu {
  position: absolute;
  bottom: calc(0px - var(--offset));
  transform: translate(-35%, calc(100% - 10px));
  z-index: 2;

  padding: 10px 25px;
  background-color: var(--white-color);
  border-radius: var(--br);
  box-shadow: var(--box-shadow);
  width: 300px;

  color: var(--black-color);

  opacity: 0;
  visibility: hidden;
  transition-duration: var(--transition-duration);
}

.site-nav .sub-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-35%, 100%);
}

.dropdown__list {
  display: grid;
  gap: 14px;
}

@media (hover:hover) {
  .dropdown__item:hover {
    color: var(--accent-color);
  }
}

/*--------------------------------------------------------------
# Catalog dropdown
--------------------------------------------------------------*/

.catalog-dropdown {
  --padding: 5px;
  display: grid;
  grid-template-columns: auto 1fr 305px;

  background-color: var(--background);
  border-radius: var(--br);
  box-shadow: var(--box-shadow);
  padding: var(--padding);
}

.catalog-dropdown__cats {
  position: relative;
  font-size: 14px;
  line-height: 30px;
  font-weight: 700;
  color: var(--black-color);
  /* padding-right: 35px; */
  text-transform: uppercase;
}

.catalog-dropdown__cats-list {
  padding: 0px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.catalog-dropdown__cats::after{
  content: "";
  position: absolute;
  top: calc(0px - var(--padding));
  right: 0;
  border-right: var(--divider);
  height: calc(100% + 2* var(--padding));
}

.catalog-dropdown__cats-item {
  position: relative;
  padding: 16px 24px;
  border-top-left-radius: var(--br);
  border-bottom-left-radius: var(--br);
  color: var(--black-color);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.catalog-dropdown__cats-item.icon::after {
  display: none;
}

@media (hover:hover) {
  .catalog-dropdown__cats-item:hover {
    color: var(--accent-color);
  }
}

@media (min-width:1150px) {
  .catalog-dropdown__cats-item.is-open {
    background-color: var(--accent-xl-color);
    color: var(--accent-color);
  }
}

.catalog-dropdown__sub-cats {
  padding: 25px;
  line-height: 1.2;
}

.catalog-dropdown__sub-cats-wrap {
  display: none;
}

.catalog-dropdown__sub-cats-wrap.is-open {
  display: block;
}

.catalog-dropdown__sub-cats-header {
  color: var(--black-color);
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 700;
}

@media (hover:hover) {
  .catalog-dropdown__sub-cats-header:hover{
    color: var(--accent-color);
  }
}

.catalog-dropdown__sub-cats-header.icon {
  --gap: 8px;
}

@media (hover:hover) {
  .catalog-dropdown__sub-cats-header:hover.icon::after {
    color: var(--accent-color);
  }
}

.catalog-dropdown__sub-cats-body {
  /* display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; */
  height: 540px;
  max-height: calc(100dvh - var(--catalogDropdownTopOffset) - 120px);
  overflow: auto;
  scroll-snap-type: x mandatory;
}

.catalog-dropdown__sub-cats-wrap[data-menu="menu_item_treez_plants"] .catalog-dropdown__sub-cats-body {
  grid-template-columns: repeat(2, 1fr);
}

.catalog-dropdown__sub-cats-wrap[data-menu="menu_az_palnts"] .catalog-dropdown__sub-cats-body {
  display: block;
}

.catalog-dropdown__sub-cats-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.catalog-dropdown__search {
  padding: 25px 15px;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 16px;
  overflow: hidden;
  align-items: self-start;
}

/*--------------------------------------------------------------
# Catalog dropdown banner
--------------------------------------------------------------*/

.catalog-dropdown-banner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.catalog-dropdown-banner__head {
  padding: 10px;
  border-radius: var(--br);
  background: var(--accent-xl-color);
  line-height: 1.4;
}

.catalog-dropdown-banner__card {
  position: relative;

  display: flex;
  flex-direction: column;
  gap: 10px;

  padding: 10px;
  border-radius: var(--br);

  background: var(--gray-bg);
  text-decoration: none;

  transition: box-shadow .2s ease;
}

.catalog-dropdown-banner__card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: var(--accent-color);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  border-top-right-radius: var(--br);
  display: none;
}

.catalog-dropdown-banner__title {
  position: relative;

  display: flex;
  align-items: center;
  gap: 8px;

  color: var(--gray-color);
  font-size: 16px;
  line-height: 1.4;
}

.catalog-dropdown-banner__title::before {
  content: "";

  width: 16px;
  height: 16px;
  flex-shrink: 0;

  background: currentColor;

  -webkit-mask: url("../images/icons/search.svg")
    center / contain no-repeat;

  mask: url("../images/icons/search.svg")
    center / contain no-repeat;
}

.catalog-dropdown-banner__text {
  padding-left: 24px;
}

@media (hover:hover) {
  .catalog-dropdown-banner__card:hover .catalog-dropdown-banner__text{
    color: var(--accent-color);
  }
}

/*--------------------------------------------------------------
# Catalog submenu
--------------------------------------------------------------*/

.cats-sub-menu__list {
  columns: 2;
  column-gap: 30px;
}

@media (max-width: 1150px) {
  .cats-sub-menu__list {
    columns: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
}

.cats-sub-menu__item {
  break-inside: avoid;
  margin-bottom: 10px;
}

@media ( hover: hover) {
  a.cats-sub-menu__heading:hover{
    color: var(--accent-color);
  }
  
  .cats-sub-menu__item-link:hover {
    color: var(--accent-color);
    text-decoration: underline;
  }
}

.cats-sub-menu__wrap {
  break-inside: avoid;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: 16px auto;
  gap: 10px;
}

/*--------------------------------------------------------------
# Burger button
--------------------------------------------------------------*/

.burger {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  color: var(--black-color);
}

.burger__line {
  position: absolute;
  right: 0;
  width: 100%;
  height: 2px;
  border-radius: 10px;
  background-color: currentColor;
  transform-origin: center;
  transition:
    top var(--transition-duration),
    width var(--transition-duration),
    opacity var(--transition-duration),
    transform var(--transition-duration);
}

.burger__line:first-child {
  top: 11px;
}

.burger__line:nth-child(2) {
  top: 19px;
  width: 60%;
}

.burger__line:last-child {
  top: 27px;
  width: 80%;
}

.is-open .burger .burger__line:first-child {
  top: 19px;
  width: 100%;
  transform: rotate(45deg);
}

.is-open .burger .burger__line:nth-child(2) {
  width: 0;
  opacity: 0;
}

.is-open .burger .burger__line:last-child {
  top: 19px;
  width: 100%;
  transform: rotate(-45deg);
}

/*--------------------------------------------------------------
# Burger menu
--------------------------------------------------------------*/

.burger-menu {
  position: relative;
  overflow: hidden;
}

.burger-menu__header {
  margin-bottom: 16px;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    max-height 0.35s ease,
    margin-bottom 0.35s ease,
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.35s ease;
}

.burger-menu .site-nav__list {
  width: 100%;
  flex-direction: column;
  align-items: self-start;
}

.burger-menu .menu-item-has-children::after, 
.burger-menu .menu-item-2425::after,
.burger-menu .menu-item-2405::after {
  --size: 16px;
  display: block;
  content: "";
  width: var(--size);
  height: var(--size);
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition-duration: var(--transition-duration);
  -webkit-mask-image: var(--arrow-right-icon);
  mask-image: var(--arrow-right-icon);
  color: inherit;
}

.burger-menu .site-nav {
  width: 100%;
}

.burger-menu .menu-item-has-children,
.burger-menu .menu-item-2425
 {
  width: 100%;
}

.burger-menu .menu-item-has-children > a,
.burger-menu .menu-item-2425 > a {
  flex: 1;
}

.burger-menu .menu-item-has-children::before {
  display: none;
}

.burger-menu .site-nav .sub-menu {
  position: fixed;
  top: var(--headerMobHeight);
  right: 0;
  bottom: 0;
  z-index: 3;

  width: var(--burgerMenuModalWidth);
  height: calc(100% - var(--burgerMenuFooter) - 2 * var(--modal-padding) - var(--headerMobHeight));
  padding: var(--modal-padding);
  overflow-y: auto;

  background-color: var(--background);
  border-radius: 0;
  box-shadow: none;

  opacity: 1;
  visibility: visible;
  transform: translateX(100%);
  pointer-events: none;

  transition: transform 0.5s ease;
}

.burger-menu .site-nav .sub-menu.is-open {
  transform: translateX(0);
  pointer-events: auto;
}

.burger-menu .sub-menu .menu-item {
  width: 100%;
  padding: 0;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
}

.burger-menu .sub-menu .menu-item:not(:last-child) {
  margin-bottom: 16px;
}

.burger-menu .menu-item-has-children.is-open::after {
  transform: rotate(90deg);
}

.burger-submenu__header {
  display: none;
}

.burger-menu .burger-submenu__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 0;
}

.burger-menu .burger-submenu__back {
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--black-color);
  cursor: pointer;
}

.burger-menu .burger-submenu__back::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--arrow-right-icon) center / contain no-repeat;
  mask: var(--arrow-right-icon) center / contain no-repeat;
  transform: rotate(180deg);
}

.burger-menu .burger-submenu__title {
  color: var(--black-color);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
}

/*--------------------------------------------------------------
# Burger menu search
--------------------------------------------------------------*/

.burger-menu .search-form {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--accent-color);
}

.burger-menu .search-form__label {
  flex: 1;
  height: 100%;
}

.burger-menu .search-form__field {
  width: 100%;
  height: 100%;
  padding: 8px 12px 8px 0;
  border: 0;
  outline: none;
  background-color: transparent;
  color: var(--black-color);
  line-height: 56px;
}

.burger-menu .search-form__field::placeholder {
  color: var(--gray-l-color);
}

.burger-menu .search-form__submit {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background-color: transparent;
  color: var(--accent-color);
  cursor: pointer;
}

.burger-menu .search-form__submit svg {
  width: 30px;
  height: 30px;
}

/*--------------------------------------------------------------
# Burger menu catalog
--------------------------------------------------------------*/

.burger-menu .catalog-dropdown {
  box-shadow: none;
  border-radius: 0;
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  padding: var(--modal-padding);
  display: flex;
  flex-direction: column;
  grid-template-columns: 100% 100% auto;
  gap: 24px;
  overflow: hidden;
  background-color: var(--background);
  transform: translateX(100%);
  transition: transform 0.5s ease;
  height: calc(100% - var(--burgerMenuFooter) - 2 * var(--modal-padding));
}

.burger-menu .catalog-dropdown.is-open {
  transform: translateX(0);
}

.burger-menu .catalog-dropdown__cats {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.dropdown__all-link {
  --size: 12px;
  color: var(--gray-color);
  font-size: 16px;
  font-weight: 500;
  margin-top: 24px;
  margin-bottom: 0px !important;
  text-transform: uppercase;
}

.burger-menu .catalog-dropdown__cats::after {
  display: none;
}

.burger-menu .catalog-dropdown__search {
  display: none;
}

.burger-menu .catalog-dropdown__cats-item {
  padding: 0;
  width: 100%;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}

.burger-menu .catalog-dropdown__cats-item.icon::after {
  display: block;
  margin-left: auto;
}

.burger-menu .catalog-dropdown__sub-cats {
  position: absolute;
  width: var(--burgerMenuModalWidth);
  padding: 0;
  padding-inline: var(--modal-padding);
  background-color: var(--background);
  transition: transform 0.5s ease;
  transform: translateX(calc(var(--burgerMenuModalWidth) + var(--modal-scroll-margin)));
  height: calc(100% - var(--burgerMenuFooter) - 2 * var(--modal-padding));
}

.burger-menu .catalog-dropdown__sub-cats:has(.is-open) {
  transform: translateX(0px);
}

.burger-menu .catalog-dropdown__sub-cats-wrap {
  display: block;
  height: 0;
  width: 0;
  visibility: hidden;
  opacity: 0;
}

.burger-menu .catalog-dropdown__sub-cats-wrap.is-open {
  height: auto;
  width: auto;
  visibility: visible;
  opacity: 1;
}

.burger-menu .catalog-dropdown__sub-cats-header {
  margin-bottom: 24px;
  display: flex;
  text-decoration: none;
}

.burger-menu .catalog-dropdown__sub-cats-header.icon {
  --gap: 16px;
  flex-direction: row-reverse;
  justify-content: flex-end;
  /* text-decoration: underline; */
}

.burger-menu .catalog-dropdown__sub-cats-header.icon::after {
  --size: 24px;
  transform: rotate(-180deg);
}

.burger-menu .catalog-dropdown__sub-cats-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 4px;
  height: auto;
  text-transform: uppercase;

}

.burger-menu .catalog-dropdown__sub-cats-inner {
  display: contents;
}

.burger-menu .catalog-dropdown-banner__card {
  position: relative;
  display: grid;
  grid-template-columns: 110px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 0;
  padding: 16px;
  border-radius: var(--br);
  background: var(--gray-bg);
  text-decoration: none;
}

.burger-menu .catalog-dropdown-banner__icon {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: stretch;
  min-height: 45px;
  border-radius: 40px;
  background-color: var(--accent-color);
  position: relative;
}

.burger-menu .catalog-dropdown-banner__icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 27px;
  height: 27px;
  background-color: var(--white-color);
  transform: translate(-50%, -50%);

  -webkit-mask: url("../images/icons/search.svg") center / contain no-repeat;
  mask: url("../images/icons/search.svg") center / contain no-repeat;
}

.burger-menu .catalog-dropdown-banner__title {
  grid-column: 2;
  grid-row: 1;
  display: block;
  align-self: end;
  color: var(--gray-color);
}

.burger-menu .catalog-dropdown-banner__text {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  padding-left: 0;
  color: var(--text-color);
  font-weight: 700;
}

/*--------------------------------------------------------------
# Mobile modal
--------------------------------------------------------------*/

.modal-mob {
  --modal-width: calc(100vw - var(--modal-offset) * 2);
  width: var(--modal-width);
  /* max-width: 420px; */
  
  top: var(--modal-offset);
  bottom: var(--modal-offset);
  left: calc(0px - var(--modal-width));

  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--modal-offset) * 2);
  overflow: hidden;
  
  padding-block: var(--modal-padding);
  background-color: var(--background); 
  /* border-radius: 16px; */
  position: fixed;
  z-index: 9999;
  transition: left 0.5s;
}

.modal-mob--active {
  left: var(--modal-offset);
}

@media (min-width: 1279px) {
  .modal-mob {
    display: none;
  }
  .modal-mob--active {
    display: none;
  }
}

.modal-mob__header,
.modal-mob__footer {
  flex-shrink: 0;
  padding-inline: var(--modal-padding);
}

.modal-mob__header {
  margin-bottom: 16px;
}

.modal-mob__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-inline: var(--modal-padding);
  margin-right: var(--modal-scroll-margin); /* gap for overflow scroll */
}

.modal-mob__close {
  color: var(--gray-l-color);
}

.burger-menu__modal.modal-mob {
  top: var(--headerMobHeight);
  height: calc(100dvh - var(--modal-offset) * 2 - var(--headerMobHeight));
}

/*--------------------------------------------------------------
# Header search
--------------------------------------------------------------*/

.header__main-search {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
}

.search__icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black-color);
  cursor: pointer;
  transition-duration: var(--transition-duration);
}

.search__icon svg {
  width: 28px;
  height: 28px;
}

.search__icon--close {
  display: none;
  position: relative;
}

.search__icon--close::before,
.search__icon--close::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 2px;
  border-radius: 10px;
  background-color: currentColor;
}

.search__icon--close::before {
  transform: rotate(45deg);
}

.search__icon--close::after {
  transform: rotate(-45deg);
}

.header__main-search.is-open .search__icon--search {
  display: none;
}

.header__main-search.is-open .search__icon--close {
  display: flex;
}

.header__main-search .search-form {
  position: absolute;
  top: calc(100% + var(--padding) + 1px);
  right: -20px;
  z-index: 2;
  width: 495px;
  padding: 30px;
  visibility: hidden;
  opacity: 0;
  background-color: var(--background);
  box-shadow: var(--box-shadow);
  transform: translateY(-10px);
  pointer-events: none;
  transition:
    opacity var(--transition-duration),
    visibility var(--transition-duration),
    transform var(--transition-duration);
}

.header__main-search.is-open .search-form {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.search-form {
  display: flex;
}

.search-form__label {
  flex-grow: 1;
}

.search-form__field {
  width: 100%;
  height: 46px;
  padding: 0 30px;
  border: 0;
  border-radius: 10px 0 0 10px;
  outline: none;
  background-color: var(--gray-bg);
  color: var(--black-color);
  font-size: 20px;
}

.search-form__field::placeholder {
  color: var(--gray-l-color);
}

.search-form__submit {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0 10px 10px 0;
  background-color: var(--accent-color);
  color: var(--white-color);
  cursor: pointer;
  transition-duration: var(--transition-duration);
}

.search-form__submit svg {
  width: 28px;
  height: 28px;
}

@media (hover: hover) {
  .search__icon:hover {
    color: var(--accent-color);
  }

  .search-form__submit:hover {
    opacity: 0.8;
  }
}

body.is-search-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9980;
  background-color: rgb(255 255 255 / 90%);
}

/*--------------------------------------------------------------
# Blog dropdown
--------------------------------------------------------------*/

.header__main-blog-dropdown {
  position: absolute;
  top: auto;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition-duration: var(--transition-duration);
}

.header__main-blog-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.blog-dropdown {
  padding: 30px;
  background-color: var(--background);
  border-radius: var(--br);
  box-shadow: var(--box-shadow);
}

.blog-dropdown__header {
  display: none;
}

.blog-dropdown__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.blog-dropdown__category-link {
  display: block;
  padding: 10px 16px;
  border-radius: var(--br);
  background-color: var(--gray-bg);
  color: var(--black-color);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition-duration: var(--transition-duration);
}

.blog-dropdown__posts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 30px;
}

.blog-dropdown__post {
  min-width: 0;
}

.blog-dropdown__post-link {
  position: relative;
  min-height: 86px;
  padding: 14px 34px 14px 14px;
  display: block;
  border-radius: var(--br);
  background-color: var(--gray-bg);
  color: var(--black-color);
  font-size: 16px;
  line-height: 1.45;
  text-decoration: none;
  transition-duration: var(--transition-duration);
}

.blog-dropdown__post-link.icon::after {
  --size: 16px;
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--accent-color);
}

.blog-dropdown__all {
  display: none;
}

@media (hover: hover) {
  .blog-dropdown__category-link:hover {
    background-color: var(--accent-xl-color);
    color: var(--accent-color);
  }

  .blog-dropdown__post-link:hover {
    color: var(--accent-color);
    box-shadow: var(--box-shadow);
  }
}

/*--------------------------------------------------------------
# Blog dropdown in burger menu
--------------------------------------------------------------*/

.burger-menu .menu-item-2405 {
  width: 100%;
}

.burger-menu .menu-item-2405 > a {
  flex: 1;
}

.burger-menu .menu-item-2405::before {
  display: none;
}

.burger-menu .blog-dropdown {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: calc(100% - var(--burgerMenuFooter) - 2 * var(--modal-padding));
  padding: var(--modal-padding);
  overflow-y: auto;
  background-color: var(--background);
  transform: translateX(100%);
  transition: transform 0.5s ease;
  border-radius: none;
  box-shadow: none;
}

.burger-menu .blog-dropdown.is-open {
  transform: translateX(0);
}

.burger-menu .blog-dropdown__header {
  display: flex;
  margin-bottom: 24px;
}

.burger-menu .blog-dropdown__categories {
  gap: 16px;
  margin-bottom: 0;
  flex-direction: column;
}

.burger-menu .blog-dropdown__category-link {
  padding: 8px 8px;
  font-size: 16px;
  font-weight: 500;
}

.burger-menu .blog-dropdown__posts {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.burger-menu .blog-dropdown__post-link {
  min-height: 0;
  padding: 14px 34px 14px 14px;
  font-size: 15px;
}

.burger-menu .blog-dropdown__all {
  margin-top: 24px;
  display: inline-flex;
}