.header-top-container {
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    background: var(--fourth-accent-color);
    height: 50px;

    .header-top-container-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 14px;
      letter-spacing: 1px;
    }
  }

  .header-middle-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    margin: auto;
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 999;
    background: var(--main-background);

    .header-middle-container-logo {
      img {
        width: 210px;
        height: 60px;
      }
    }

    .header-middle-container-search {
      width: 100%;
      max-width: 400px;

      path {
        fill: #fff;
      }

      input {
        border: none !important;
        border-radius: var(--box-border-radius);
      }

      .is-form-style input.is-search-submit,
      .is-search-icon {
        background: var(--second-accent-color);
        border: none;
        border-top-right-radius: var(--box-border-radius);
        border-bottom-right-radius: var(--box-border-radius);
        cursor: pointer;

        &:hover {
          background: var(--third-accent-color);
        }
      }
    }

    .header-middle-container-icons {
      display: flex;
      gap: 1.5rem;

      .header-middle-container-icon-account {
        .header-middle-container-icon-account-link {
          display: inline-flex;
          gap: 0.2rem;

          .header-middle-container-icon-account-hello {
            p {
              margin: 0;
              font-size: 13px;

              &:nth-child(2) {
                font-weight: 600;
              }
            }
          }
        }
      }
    }
  }

  .header-bottom-container {
    text-align: center;
    width: 100%;
    max-width: 1400px;
    margin: auto;
    padding: 0 2rem;
    border-bottom: 2px solid var(--accent-color);
    position: sticky;
    top: 80px;
    z-index: 999;
    background: var(--main-background);
    margin-bottom: 3rem;

    .menu-mainmenu-container {
      width: 100%;

      .menu {
        display: flex;
        list-style: none;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        position: relative;
        margin-bottom: 12px;

        .menu-item-113540::before {
          background-image: url("/wp-content/uploads/2022/06/coffee-beans-coffee-svgrepo-com.svg");
        }
        .menu-item-113541::before {
          background-image: url("/wp-content/uploads/2024/07/tea-cup.svg");
        }
        .menu-item-113546::before {
          background-image: url("/wp-content/uploads/2024/07/gift.svg");
        }
        .menu-item-113547::before {
          background-image: url("/wp-content/uploads/2024/07/coffee-machine.svg");
        }
        .menu-item-113548::before {
          background-image: url("/wp-content/uploads/2024/07/portafilter.svg");
        }
        .menu-item-113550::before {
          background-image: url("/wp-content/uploads/2024/07/cutlery.svg");
        }
        .menu-item-113551::before {
          background-image: url("/wp-content/uploads/2024/07/compny-building.svg");
        }
        .menu-item-117456::before {
          background-image: url("/wp-content/uploads/2022/07/guarantee-1.svg");
        }

        .submenu-container {
          display: none;
          height: 100%;
          min-height: 550px;
          border: 2px solid var(--accent-color);
          border-radius: var(--box-border-radius);
          position: absolute;
          background: #fff;
          z-index: 100;
          text-align: left;
          width: 1200px;
          left: 50%;
          transform: translateX(-50%);
          margin-top: 12px;

          &.open {
            display: flex;
          }

          .submenu-col-1 {
            width: 40%;
            display: flex;
            flex-direction: column;

            .submenu-header-container {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 1rem;

              span {
                font-weight: 900;
                font-size: 20px;
              }
            }

            .submenu-wrapper {
              #menu-kawa,
              #menu-herbata,
              #menu-zestawy,
              #menu-ekspresy,
              #menu-akcesoria,
              #menu-do-kuchni {
                list-style: none;
                padding: 0;

                li {
                  width: 100%;

                  a {
                    padding: 0.8rem 1rem;
                    width: 100%;
                    display: inline-block;
                    font-weight: 400;
                    font-size: 17px;
                  }

                  &#menu-item-127267 {
                    background: var(--accent-color);

                    &:hover {
                        background: var(--third-accent-color);
                    }

                    a {
                      color: var(--font-second-color);

                      &:hover {
                        background: var(--third-accent-color);
                    }
                    }
                  }
                }
              }
            }
          }

          .submenu-col-2 {
            width: 60%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 1rem;
            gap: 1rem;

            .submenu-col-heading {
              font-size: 17px;
              font-weight: 400;
            }

            .latest-product-wrapper {
              .latest-product-content {
                display: flex;
                align-items: center;
                .latest-product-content-col-2 {
                  img {
                    width: 300px;
                    aspect-ratio: 1/1;
                  }
                }

                .latest-product-content-col-1 {
                  .latest-product-brand {
                    a {
                      padding: 0;
                      font-size: 28px;
                      font-weight: 600;

                      &:hover {
                        background: transparent;
                        color: var(--font-color);
                      }
                    }
                  }
                  .latest-product-title {
                    a {
                      padding: 0;

                      h3 {
                        font-size: 17px;
                        font-weight: 600;
                      }

                      &:hover {
                        background: transparent;
                        color: var(--font-color);
                      }
                    }
                  }

                  .latest-product-price {
                    padding: 2rem 0;

                    .amount {
                      font-size: 28px;
                      font-weight: 600;
                    }
                  }

                  .latest-product-link {
                    a {
                      background: var(--accent-color);
                      padding: 1rem 1rem 1rem 0;
                      background: transparent;
                      text-decoration: underline;

                      &:hover {
                        color: var(--font-color);
                      }
                    }
                  }
                }
                .latest-product-content-col-2 {
                  .latest-product-image {
                    a {
                      padding: 0;
                      font-size: 28px;
                      font-weight: 600;

                      &:hover {
                        background: transparent;
                        color: var(--font-color);
                      }
                    }
                  }
                }
              }
            }
          }
        }

        li {
          &::before {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            margin-left: 5px;
            background-size: contain;
            background-repeat: no-repeat;

            &:hover::before {
              -webkit-filter: invert(100%);
              filter: invert(100%);
            }
          }

          a {
            padding: 0.8rem 2rem;

            &:hover {
              background: var(--accent-color);
              color: var(--font-second-color);

              &::before {
                -webkit-filter: invert(100%);
                filter: invert(100%);
              }
            }
          }
        }
      }
    }
  }