/* init ----> */
header#header {
  display: none;
  height: calc(44px + 54px);
}

header#ssComponent {
  background-color: #2d2d2c;
  left: 0;
  position: fixed;
  top: 0;
  transition: transform .3s ease-out;
  width: 100%;
  z-index: 100;

  &.tucked {
    transform: translateY(-44px);
    transition: transform .3s ease-in;

    & nav {
      border-radius: 0px !important;
      transition: 0.8s;
    }
  }

  & div#salesBar {
    height: 44px !important;
    background-color: #2D2D2C;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;

    & a {
      margin: 0;
      text-align: center;
      color: #F3F4F6;
      font-size: 11px;
      letter-spacing: 1px;
      text-transform: uppercase;

      &#rel {
        margin: 0;
        text-align: center;
        color: #F3F4F6;
        font-size: 11px;
        letter-spacing: 1px;
        text-transform: uppercase;

        & button {
          border: none;
          font-weight: 600;
          letter-spacing: 1px;
          text-transform: uppercase;
          background: transparent;
          text-decoration: underline;
          border-radius: 10px;

          &:hover {
            background-color: #fff;
            text-decoration: none;
            color: #2d2d2c;
          }
        }
      }
    }

    & div {
      display: none;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 1px;
      padding: 0px 5px;

      & span#timerDays::after {
        content: 'd :';
      }

      & span#timerHours::after {
        content: 'h :';
      }

      & span#timerMinutes::after {
        content: 'm';
      }
    }


  }

  & nav.container.nav {
    display: flex;
    justify-content: flex-start;
    background-color: white;
    border: none;
    box-shadow: #F2F3F6 0px 1px 0px 0px;
    gap: 2.4rem;
    margin-inline: auto;
    border-radius: 1.337rem 1.337rem 0 0;
    border: none;
    width: 100%;
    padding-left: 1.5rem;
    height: 54px !important;
    min-height: 54px;

    & div.nav__data {
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      & a.nav__logo {
        display: inline-flex;
        align-items: center;
        column-gap: 0.25rem;
      }

      & div#tlacitka {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        margin: 0;

        & div.nav__toggle {
          position: relative;
          width: 32px;
          height: 32px;

          &#nav-toggle.active {
            --shoptet: none;

            & i.nav__toggle-close {
              opacity: 1;
            }

            & i.nav__toggle-menu {
              opacity: 0;
            }
          }

          & .nav__toggle-menu,
          .nav__toggle-close {
            font-size: 1.25rem;
            color: var(--ss-body);
            position: absolute;
            display: grid;
            place-items: center;
            cursor: pointer;
            transition: opacity 0.1s, transform 0.4s;
          }

          & .nav__toggle-close {
            opacity: 0;
          }

          & a i {
            font-size: 18px;
            font-weight: 500;

            &.ri-shopping-cart-2-line.full {
              color: #2a9A88;
            }
          }
        }
      }
    }

    & div#nav-menu {
      display: flex;
      justify-content: space-between;
      width: 100%;

      & ul {
        list-style: none;
        margin: 0;
        padding: 0;

        &.nav__list {
          display: flex;
          column-gap: 3rem;
          height: 100%;

          & li {
            display: flex;

            &.ssMenu__search {
              display: none;
            }

            &.dropdown__item {
              cursor: pointer;
              flex-shrink: 0;

              &:hover>.dropdown__container {
                opacity: 1;
                pointer-events: initial;
                cursor: initial;
              }

              &.nav__lang i.dropdown__arrow {
                display: none;
              }

              & div.dropdown__button {
                cursor: pointer;
                column-gap: 0.25rem;
                pointer-events: none;

                & .dropdown__arrow {
                  font-size: 1.5rem;
                  font-weight: initial;
                  transition: transform 0.4s;
                }
              }

              & div.dropdown__container {
                height: max-content;
                position: fixed;
                left: 0;
                right: 0;
                top: calc(44px + 54px);
                background-color: var(--ss-bg);
                box-shadow: 0 6px 8px hsla(220, 68%, 12%, 0.05);
                pointer-events: none;
                opacity: 0;
                transition: top 0.4s, opacity 0.3s;

                & .dropdown__content,
                .dropdown__group,
                .dropdown__list {
                  display: grid;
                }

                & div.dropdown__content {
                  row-gap: 0;
                  grid-template-columns: repeat(5, max-content);
                  column-gap: 0;
                  max-width: unset;
                  margin-inline: auto;
                  justify-content: space-around;
                  align-items: baseline;

                  &.nastaveni {
                    display: flex;
                    justify-content: end;
                    margin-right: 10%;
                    gap: 10%;
                  }
                }



                & .dropdown__group {
                  margin-top: 1.25rem;
                  padding: 3rem 0;
                  align-content: baseline;
                  row-gap: 1.25rem;

                  &:first-child {
                    margin: 0;
                  }

                  &:last-child {
                    margin: 0;
                  }

                  & .dropdown__title {
                    font-size: 12px;
                    font-weight: 700;
                    color: #666;
                  }

                  & a.dropdown__link {
                    font-size: 12px;
                    font-weight: 500;
                    color: #666;
                    transition: color 0.3s;

                    :hover {
                      color: var(--ss-body);
                      cursor: pointer;
                    }
                  }
                }

                & .dropdown__list {
                  row-gap: 0.75rem;
                }
              }

            }
          }
        }

        & li.nav__lang a {
          font-size: 12px;
          font-weight: 500;
        }
      }

      & div#ssSearchbar {
        width: 450px;
        display: flex;
        align-items: center;

        & div.search {
          width: 100%;

          & h2,
          h3 {
            display: none;
          }

          & form {
            position: unset;
            display: flex;
            width: 100%;
            justify-content: center;
            text-align: center;

            & fieldset {
              width: 100%;
            }

            & input {
              height: 40px;
              border: none;
              border-radius: 1rem;
              color: #7A7a7A;
              font-weight: 500;
              font-size: 13px;
              letter-spacing: 0.5px;
              width: 100%;
              transition: .2s ease-in;
              padding-left: 4rem;
              background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(158,158,158,1)"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>');
              background-repeat: no-repeat;
              background-size: 20px;
              background-position: 10px 10px;
              background-color: #f5f5f5;

              &::placeholder {
                color: #7A7a7A;
              }

              &:focus-visible {
                outline: 0;
                box-shadow: unset;
                outline-offset: 0;
                transition: .2s ease-in;
              }

              &:focus-visible::placeholder {
                color: transparent;
              }
            }

            & button {
              display: none;
            }

            & div.search-whisperer.active {
              max-width: 450px;
              border: none;

              & div.search-whisperer-documents {
                display: none;
              }

              & ul.search-whisperer-products {
                padding: 1.337rem;

                li {
                  border: none;

                  &:nth-child(n+5) {
                    display: none;
                  }

                  & a {
                    border-radius: 1rem;
                    padding: 0.7rem;

                    &:hover {
                      background-color: #f5f5f5;
                    }
                  }

                  & span.search-whisperer-image {
                    max-width: 80px;
                    background-color: #f7f7f7;
                    border-radius: 0.773rem;
                    transition: .2s ease-in;

                    & img {
                      border-radius: 0.773rem;
                      mix-blend-mode: multiply;
                      transition: .2s ease-in;
                    }
                  }

                  & a:hover span.search-whisperer-image {
                    background-color: #fff;
                    transition: .2s ease-in;
                  }

                  & span.p-info span {
                    color: #393939;

                    &.p-availability span {
                      color: #9e9e9e;
                    }
                  }

                  & span.price-final {
                    font-size: 1.337rem;
                    color: #393939;
                  }
                }
              }
            }
          }
        }
      }

      .nav__link {
        color: #666;
        font-weight: 500;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background-color 0.3s;
        padding: 0;
      }
    }
  }
}

.show-menu {
  opacity: 1 !important;
  top: calc(44px + 54px) !important;
  pointer-events: initial !important;
}

.show-icon {
  --shoptet: none;

  & .nav__toggle-menu {
    opacity: 0;
    transform: rotate(90deg);
  }

  & .nav__toggle-close {
    opacity: 1;
    transform: rotate(90deg);
  }
}

.show-dropdown .dropdown__arrow {
  transform: rotate(180deg);
}

/* <----- init */

body.type-page.in-hledat header#ssComponent {
  --shoptet: none;

  & nav.container.nav {
    --shoptet: none;

    & div.nav__data {
      width: 100%;
    }
  }
}

html.searchbar_error header#ssComponent {
  --shoptet: none;

  & nav.container.nav {
    --shoptet: none;

    & div#nav-menu {
      --shoptet: none;

      & div#ssSearchbar {
        display: none;
      }
    }
  }


}

body.customer-page header#ssComponent {
  --shoptet: none;

  & nav.container.nav {
    border-radius: 0;
    padding-left: 3.77rem;
    padding-right: 3.77rem;
    padding-top: 1.337rem;
    padding-bottom: 1.337rem;
    height: auto !important;
    gap: 3.77rem;

    & div.nav__data {
      --shoptet: none;

      & a.nav__logo {
        --shoptet: none;

        & img {
          height: 50px;
        }
      }
    }

    & div#nav-menu {
      --shoptet: none;

      & ul {
        --shoptet: none;

        &.nav__list {
          column-gap: 0rem;
        }

        & li a {
          font-weight: 500;
          font-size: 12px;
          padding: 0 1.337rem;
        }
      }
    }

    & .dropdown__container {
      top: calc(1.337rem + 50px);
    }
  }
}

body.ordering-process header#ssComponent {
  --shoptet: none;

  &#header {
    height: calc(54px);
  }

  #ssComponent.header {
    --shoptet: none;

    & .container.nav {
      border: none;
      box-shadow: none;

      & .nav__data {
        width: 100%;
        display: flex;
      }
    }

    &.tucked {
      transform: none;
    }

    & li.ssMenu__search {
      display: none !important;
    }

    & .nav__link i.ri-close-line {
      opacity: 0.6;
      color: #2D2D2C;
      transition: 0.5s;

      &:hover {
        opacity: 1;
      }
    }
  }
}

/* <---- Checkout */

/* For small devices */

@media screen and (max-width: 999px) {

  header#header {
    height: calc(54px + 44px);
  }

  header#ssComponent {
    --shoptet: none;

    & nav.container.nav {
      border-bottom: solid 1px var(--ss-white-smoke);
      background: white;

      & div.nav__data {
            width: 100%;
        }

      & div#nav-menu {
        background-color: var(--ss-bg);
        position: absolute;
        left: 0;
        height: calc(100vh - 3.5rem);
        overflow: scroll;
        opacity: 0;
        transition: top 0.4s, opacity 0.3s;
        top: calc(44px + 54px);
        
        &::-webkit-scrollbar {
          width: 0.5rem;
        }

        &::-webkit-scrollbar-thumb {
          background-color: hsl(220, 12%, 70%);
        }

        & div#ssSearchbar{
          display:none;
        }

        & ul{
          --shoptet:none;

          &.nav__list{
            flex-direction:column;

            &.cg--1r{
            display:none;
          }

            & li{
            --shoptet:none;

                &.dropdown__item{
                  flex-direction: column;

                  &:hover>.dropdown__container {
                                opacity: initial;
                                pointer-events: initial;
                                cursor: initial;
                                overflow: hidden;
                                height: 0;
                            }
    
                  & div.dropdown__button{
                    --shoptet:none;
                    padding: 8px 20px;
                    width:100%;
                    margin: 8px 0;
                    pointer-events: all;
    
                    & a.nav__link{
                      font-size:16px;
                      color: #2d2d2c;
                      font-weight: 600;
                      line-height: 22px;
                      pointer-events: none;
                    }
                  }
    
                  & div.dropdown__container{
                    opacity:1;
                    display: flex;
                    position: unset;
                    box-shadow: none;
                    overflow: hidden;
                    height: 0;
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
    
                    & div.dropdown__content{
                      display: flex;
                      flex-direction: column;
                      justify-content: start;
                      width: 100%;
                      
                      
    
                      & .dropdown__group{
                        padding:1.5rem 3rem;
    
                        & a.dropdown__title{
                          pointer-events: none;
                        }

                        & ul.dropdown__list{
                          display:none;
                        }
                      }
                    }
                  }
                  
                }
    
                &.nav__lang{
                  display:none;
                }
    
                &.desktop__only {
              display: none!important;
            }
          }
          }
        }
      }
    }
  }

  
}


/* For large devices */

@media screen and (min-width: 999px) {
  .nav__toggle {
    display: none !important;
  }
}