/* NAVIGATION ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

  /* NAV BAR --------------------------------------------------------------------------------------------*| */
.nav {
  position: relative;
  width: 100%;
  background: var(--C-LIG);
  z-index: 1000;
}
      .nav__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: var(--MAX-WIDTH);
        margin: 0 auto;
        padding: 1.5rem var(--PAD-PAGE-X);
        gap: 2rem;
      }

  /* NAV LOGO --------------------------------------------------------------------------------------------*| */
      .nav__logo {
        text-decoration: none;
        display: flex;
        align-items: center;
      }
      .nav__logo img {
        height: 60px;
        width: auto;
      }

      @media (max-width: 480px) {
        .nav__logo img {
          height: 44px;
        }
      }

  /* NAV LINKS --------------------------------------------------------------------------------------------*| */
      .nav__links {
        display: flex;
        align-items: center;
        gap: 0;
        justify-content: flex-end;
      }
      .nav__group {
        display: flex;
        align-items: center;
        gap: 2rem;
      }
      .nav__divider {
        width: 2px;
        height: 18px;
        background: var(--C-DRK);
        margin: 0 1.5rem;
      }
      .nav__links a {
        font-family: var(--F-QCK);
        text-decoration: none;
        color: var(--C-DRK);
        font-size: 1.1rem;
        font-weight: 20rem;
        letter-spacing: 0.05em;
        text-transform: capitalize;
        transition: var(--T-BASE);
      }
      .nav__links a:hover {
        color: var(--C-TEA);
      }
      .nav__links a.active {
        color: var(--C-TEA);
        font-weight: 500;
      }

  /* NAV CART ICON --------------------------------------------------------------------------------------------*| */
.nav__cart {
  display: flex;
  align-items: center;
  color: var(--C-DRK);
  opacity: 0.7;
  font-size: 1.2rem;
  text-decoration: none;
  transition: var(--T-BASE), opacity 0.2s;
}
.nav__cart:hover  { color: var(--C-TEA); opacity: 1; }
.nav__cart.active { color: var(--C-TEA); opacity: 1; }

      .nav__cart-count {
        background: var(--C-MAG);
        color: var(--C-WHT);
        font-family: var(--F-QCK);
        font-size: 0.65rem;
        font-weight: 700;
        line-height: 1;
        min-width: 20px;
        height: 20px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        padding-top: 1px;
        white-space: nowrap;
        margin-left: 4px;
      }

  /* HAMBURGER MOD --------------------------------------------------------------------------------------------*| */
      .nav__burger-wrap {
        display: none;
        position: relative;
        align-items: center;
      }
      .nav__burger {
        display: flex;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
      }
      .nav__burger span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--C-DRK);
        transition: var(--T-SLOW);
      }

  /* Cart count badge overlaid on burger ----------------------------*| */
      .nav__cart-count--burger {
        position: absolute;
        top: -6px;
        right: -6px;
        pointer-events: none;
        z-index: 1001;
      }

  /* HAMBURGER X TRANSITION --------------------------------------------------------------------------------------------*| */
      .nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
      .nav__burger.is-open span:nth-child(2) { opacity: 0; }
      .nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* HAMBURGER NAV STYLES --------------------------------------------------------------------------------------------*| */
      @media (max-width: 880px) {
        .nav__burger-wrap {
          display: flex;
          align-items: center;
        }
        .nav__links {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          min-height: 100dvh;
          background: var(--C-LIG);
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 1rem;
          z-index: 999;
        }
        .nav__group {
          flex-direction: column;
          align-items: center;
          gap: 1.5rem;
        }
        .nav__divider {
          width: 40px;
          height: 1px;
          margin: 0.5rem 0;
        }
        .nav__links.is-open {
          display: flex;
        }
        .nav__links a {
          font-size: 1.6rem; /* reduced from 2rem — less cramped on small phones */
        }
        /* Ensure burger sits on top of the overlay */
        .nav__burger-wrap {
          position: relative;
          z-index: 1000;
        }
        .nav__burger {
          position: relative;
          z-index: 1000;
        }
        /* Cart mobile also above overlay */
        .nav__cart--mobile {
          position: relative;
          z-index: 1000;
        }
        /* Cart icon needs to be visible inside the mobile overlay */
        .nav__cart {
          font-size: 1.6rem;
          opacity: 1;
        }
      }

      /* Extra-small phones — tighten further */
      @media (max-width: 400px) {
        .nav__links a {
          font-size: 1.35rem;
        }
        .nav__group {
          gap: 1rem;
        }
      }