/* global media */
@media (max-width: 1300px) {
  .navigation-wrapper,
  footer {
    max-width: 1000px;
    width: var(--smaller-screen-width);
  }
}

@media (max-width: 1100px) {
  #search {
    display: none;
  }

  .nav-links {
    gap: 30px;
  }

  .cart-popup {
    top: 70px;
    transform: translateX(-35%); /* Centering adjustment */
  }
}

@media (max-width: 720px) {
  /* displays */
  .navigation,
  #menu-checkbox,
  .search-icons-section,
  .logo {
    display: none;
  }

  #menu-checkbox:checked ~ .navigation {
    display: block;
  }

  .nav-links,
  .logo-mobile,
  .hamburger-icon,
  .icon-mobile,
  .icon-mobile-section .cart-popup {
    display: block;
  }

  /* header and navigation */
  #menu-checkbox:checked ~ .navigation {
    transform: translateX(0);
  }

  .menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
  }

  .hamburger-icon {
    position: relative;
    z-index: 100;
    font-size: 30px;
  }

  .navigation {
    background: linear-gradient(
      45deg,
      rgba(0, 1, 31, 1) 0%,
      rgba(0, 1, 31, 0.7) 100%
    );
    position: absolute;
    display: flex;
    align-items: flex-start;
    top: 0;
    left: 0;
    height: 100vh;
    padding: 80px 50px 10px 30px;
    z-index: 99;
    transition: transform 0.2s ease-in-out;
    transform: translateX(-100%);
  }

  .navigation-wrapper {
    margin: 0;
    width: var(--scalable-width);
  }

  .nav-links li {
    margin-bottom: 40px;
    font-size: 20px;
  }

  .logo-mobile {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    z-index: 10;
  }

  .logo-mobile img {
    width: 20vw;
  }

  .icon-mobile-section {
    display: flex;
    gap: 5px;
    position: relative;
    z-index: 10;
  }

  .cart-popup {
    top: 70px;
    transform: translateX(-25%); /* Centering adjustment */
  }

  .cart-count-badge {
    top: -3px;
  }

  /* footer */
  footer {
    flex-direction: column;
    gap: 20px;
    text-align: center;
    width: var(--mobile-screen-width);
  }
}