.bottom-nav-section {

  display: none;
  position: sticky;
  bottom: 0px;
  margin: 0px auto;
  justify-content: center;
}

.bottom-nav {
  background: hsla(0, 0%, 100%, 0.5);
  display: flex;
  justify-content: space-between;
  color: var(--text-dark);
  align-items: center;
  border-radius: 16px;
  padding: 0px;
  border: 1px solid hsla(0, 0%, 82%, 0.509);
  backdrop-filter: blur(4px);


  >a,
  a:visited {
    display: block;
    text-decoration: none;
    color: var(--text-dark);
  }

  >a:hover {
    color: var(--accent-burgundy);
  }

}

.bottom-nav-cart-icon {
  grid-column: 1/2;
  grid-row: 1/2;
  height: 24px;
  anchor-name: --bottom-nav-cart-icon;

  >svg {
    fill: var(--text-dark);
  }

  &:hover {
    fill: var(--accent-burgundy);
  }
}

.bottom-nav-cart-count {
  position: absolute;
  position-anchor: --bottom-nav-cart-icon;
  left: calc(anchor(right) - 5px);
  bottom: calc(anchor(top) - 10px);
  background: var(--accent-burgundy);
  width: 24px;
  height: 24px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--bg-cream);
}

.bottom-nav-button,
bottom-nav-login-container {
  display: grid;
  justify-items: center;
  padding: 20px;

  &:hover {
    color: var(--accent-burgundy);
    cursor: pointer;
    fill: var(--accent-burgundy);
  }

  >svg {
    fill: --var(--text-dark);

    &:hover {
      fill: --var(--accent-burgundy);
    }
  }
}

.bottom-nav-login-icon {
  padding: 0px;
  margin: 0px;
  height: 24px;

  >svg {
    fill: --var(--text-dark);

    &:hover {
      fill: --var(--accent-burgundy);
    }
  }

}

@media screen and (max-width: 450px) {
  .bottom-nav-section {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .bottom-nav {
    width: 100%;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }
}

@media screen and (min-width: 451px) and (max-width: 1279px) {
  .bottom-nav-section {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .bottom-nav {
    max-width: 450px;
    backdrop-filter: blur(4px);
    bottom: 10px;
  }
}