:root {
  --safe-space: calc(11px * var(--FONT-ADJUST-BODY) * 0.6);
}

.header__wrapper[data-header-style='logo_above'] .mega-menu__item {
  margin-bottom: calc(-1 * var(--PB));

  &::after {
    height: var(--PB);
  }
}
.mega-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.mega-menu__item {
  padding: 0 16px;
  margin-bottom: calc(-1 * calc(var(--PB) + var(--safe-space)));

  &::after {
    content: '';
    display: block;
    width: calc(100% + 32px);
    margin-left: -16px;
    height: calc(var(--PB) + var(--safe-space));
  }

  &:hover {
    .mega-menu__panel {
      display: block;
    }

    &.mega-menu__item--hover-underline .mega-menu__item-link {
      text-decoration: underline;
    }
  }

  &.mega-menu__item--hover-underline {
    .sublink,
    .sublink-child {
      &:hover,
      &:focus {
        text-decoration: underline;
      }
    }
  }
}

.mega-menu__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100vw;
  background-color: #fff;
  padding: var(--panel-top-padding) var(--outer) var(--panel-bottom-padding);

  &.mega-menu__panel--boxed {
    padding: 0;

    .mega-menu__submenu {
      padding: var(--panel-top-padding) var(--outer) var(--panel-bottom-padding);
    }
  }
}

.mega-menu__panel--inner {
  display: flex;
  justify-content: var(--panel-alignment);
  gap: var(--panel-gap);
  width: 100%;
  max-width: var(--panel-width);
  margin: 0 auto;
}

.mega-menu__item-link {
  font-size: var(--level-1-size);
  letter-spacing: 2px;

  &:not(:has([style])) {
    color: var(--primary-color);
    transition: 0.1s ease-in-out;
    &:hover,
    &:focus {
      color: var(--primary-hover-color);
    }
  }
}

.sublink {
  &:not(:has([style])) {
    color: var(--secondary-color);
    transition: 0.1s ease-in-out;
    &:hover {
      color: var(--secondary-hover-color);
    }
  }
}

.sublink-child {
  &:not(:has([style])) {
    color: var(--tertiary-color);
    transition: 0.1s ease-in-out;
    &:hover {
      color: var(--tertiary-hover-color);
    }
  }
}

.mega-menu__item-link,
.sublink,
.sublink-child {
  &.bold {
    font-weight: 700;
  }
}

.mega-menu__submenu {
  display: grid;
  grid-template-columns: repeat(var(--menu-columns), minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  max-width: var(--menu-width);
  min-height: 180px;
}

.submenu-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.submenu-row {
  display: flex;
  gap: var(--panel-gap);
}

.mega-menu__additional {
  padding-left: var(--panel-gap);
  border-left: 1px solid var(--text-primary);
}

.sublink {
  display: block;
  text-transform: uppercase;
  margin-bottom: var(--space-between-2-and-3-lvl);

  &.navlink {
    font-size: var(--level-2-size);
  }
}

.sublink-child {
  &.navlink {
    font-size: var(--level-3-size);
  }
}

.sublink-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-between-3-lvls);
}

.mega-menu__images {
  display: flex;
  align-items: flex-start;
  gap: var(--image-gap);
  width: calc(100% - var(--menu-width) - var(--panel-gap));
  min-width: var(--images-min-width, 0);
}

.mega-menu__image-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  width: 100%;
  max-width: calc(100% / var(--images-size));

  &.on-image {
    position: relative;

    .mega-menu__image-text {
      position: absolute;
      width: 90%;
      height: 90%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      z-index: 3;
    }
  }

  &.bellow {
    .mega-menu__image-text {
      text-align: var(--title-align);
    }
  }

  &.images--full {
    height: 100%;
  }

  &.has-overlay {
    position: relative;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.2);
      z-index: 2;
    }
  }
}

.mega-menu__image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    content: '';
    display: block;
    padding-top: var(--image-ratio);
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

.mega-menu__image-text {
  font-family: var(--FONT-STACK-NAV);
  font-style: var(--FONT-STYLE-NAV);
  font-weight: var(--FONT-WEIGHT-NAV);
  font-size: var(--title-size);
  color: var(--title-color);
  line-height: 1.2;
}

.link-color-1 {
  color: var(--color-1);
}

.link-color-2 {
  color: var(--color-1);
  animation-name: colorPulse2;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.link-color-3 {
  color: var(--color-1);
  animation-name: colorPulse3;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes colorPulse2 {
  0% {
    color: var(--color-1);
  }
  50% {
    color: var(--color-2);
  }
  100% {
    color: var(--color-1);
  }
}

@keyframes colorPulse3 {
  0% {
    color: var(--color-1);
  }
  33% {
    color: var(--color-2);
  }
  66% {
    color: var(--color-3);
  }
  100% {
    color: var(--color-1);
  }
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

body:has(.main-content > .shopify-section.section-overlay-header:first-of-type) [data-header-transparent]:not(.js__header__stuck):not(:hover) {
  .mega-menu__item-link,
  .header__desktop__button--account .navtext,
  .header__desktop__button--account a,
  .header__desktop__button svg path,
  .header__desktop__button svg g,
  .header__mobile__button svg path,
  .header__mobile__button svg g,
  .header__cart__status {
    color: var(--transparent-color);
    stroke: var(--transparent-color);
  }

  .search-popdown__submit svg path,
  .search-form input[type='search'],
  .search-popdown input[type='search']::placeholder {
    color: var(--transparent-color);
    stroke: var(--transparent-color);
  }

  .header__logo__link svg {
    opacity: 0;
  }

  .theme__header.has-border:before {
    border-bottom-color: transparent;
  }
}

[data-header-transparent]:hover {
  .theme__header:after {
    opacity: 1;
    visibility: visible;
  }

  .logo__img.logo__img--transparent {
    opacity: 0 !important;
  }

  .header__logo__link svg {
    opacity: 1;
  }
}

.theme__header .search-popdown__main {
  background-color: transparent;
}