/* Compact, premium mobile navigation drawer. */
@media (max-width: 1023px) {
  #root > div > div > nav {
    top: max(0.75rem, env(safe-area-inset-top)) !important;
    width: calc(100% - 1.5rem) !important;
    min-height: 4.5rem;
    padding: 0.65rem 0.9rem !important;
    border-radius: 1.6rem !important;
  }

  #root > div > div > nav img[alt="Clearly Herbal Logo"] {
    height: 2.35rem !important;
  }

  #root nav button[class~="lg:hidden"] {
    width: 2.85rem !important;
    height: 2.85rem !important;
    background-size: 2.35rem 2.35rem !important;
  }

  #root div.fixed.inset-0.z-40 {
    height: 100dvh;
    padding: calc(max(5.85rem, env(safe-area-inset-top) + 5rem)) 0.75rem
      max(0.75rem, env(safe-area-inset-bottom));
  }

  #root div.fixed.inset-0.z-40 > div.absolute.inset-0:first-child {
    inset: calc(max(5.35rem, env(safe-area-inset-top) + 4.5rem)) 0.75rem
      max(0.75rem, env(safe-area-inset-bottom));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.75rem;
    background: rgba(31, 59, 15, 0.985) !important;
    box-shadow: 0 1.4rem 3.5rem rgba(18, 38, 8, 0.32);
    backdrop-filter: blur(18px);
  }

  #root div.fixed.inset-0.z-40 > div.relative.z-10 {
    height: 100% !important;
    min-height: 0;
    justify-content: flex-start !important;
    overflow-y: auto;
    padding: 1.25rem 1rem 1.1rem;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  #root div.fixed.inset-0.z-40 > div.relative.z-10::-webkit-scrollbar {
    display: none;
  }

  #root div.fixed.inset-0.z-40 div.flex.flex-col.items-center.gap-2 {
    width: min(100%, 22rem);
    gap: 0.15rem !important;
  }

  #root div.fixed.inset-0.z-40 div.flex.flex-col.items-center.gap-2 > a {
    width: 100%;
    padding: 0.72rem 1rem !important;
    border-radius: 1rem !important;
    font-size: 1.18rem !important;
    line-height: 1.2;
    text-align: center;
  }

  #products-mobile-link {
    width: 100%;
    gap: 0.6rem !important;
    padding: 0.65rem 0 0.85rem !important;
  }

  .products-mobile-title {
    font-size: 1.18rem !important;
    line-height: 1.2;
  }

  .products-mobile-submenu {
    gap: 0.45rem !important;
  }

  .products-mobile-submenu a {
    padding: 0.55rem 0.78rem !important;
    font-size: 0.65rem !important;
  }

  #root div.fixed.inset-0.z-40 div.mt-8 {
    margin-top: 1.15rem !important;
  }

  #root div.fixed.inset-0.z-40 div.mt-8.flex.items-center.gap-6 {
    gap: 0.8rem !important;
  }

  #root div.fixed.inset-0.z-40 div.mt-8.flex.items-center.gap-6 button {
    padding: 0.7rem !important;
  }
}

@media (max-width: 380px) {
  #root > div > div > nav {
    width: calc(100% - 1rem) !important;
    padding-inline: 0.7rem !important;
  }

  #root > div > div > nav img[alt="Clearly Herbal Logo"] {
    height: 2.05rem !important;
  }

  #root div.fixed.inset-0.z-40 {
    padding-inline: 0.5rem;
  }

  #root div.fixed.inset-0.z-40 > div.absolute.inset-0:first-child {
    right: 0.5rem;
    left: 0.5rem;
  }
}