/* ================================
   Telegram in-app browser spacing fix
   FILE: index.php
================================= */
:root{
  --tg-extra-top: 0px;
}

html.tg-browser,
body.tg-browser{
  --tg-extra-top: 14px;
}

@supports (padding-top: env(safe-area-inset-top)) {
  html.tg-browser,
  body.tg-browser{
    --tg-extra-top: calc(env(safe-area-inset-top) + 14px);
  }
}

/* Add breathing room above the sticky navbar only in Telegram */
body.tg-browser .navbar.sticky-top{
  top: var(--tg-extra-top);
}

/* Keep page content visually clear under Telegram browser chrome */
body.tg-browser{
  padding-top: 8px;
}

/* On smaller screens, give a bit more room */
@media (max-width: 576px){
  html.tg-browser,
  body.tg-browser{
    --tg-extra-top: 18px;
  }

  @supports (padding-top: env(safe-area-inset-top)) {
    html.tg-browser,
    body.tg-browser{
      --tg-extra-top: calc(env(safe-area-inset-top) + 18px);
    }
  }

  body.tg-browser{
    padding-top: 10px;
  }
}
body.tg-browser .storefront-navbar{
  top: var(--tg-extra-top);
}
/* =========================================
   Mobile navbar compact-on-scroll behavior
   FILE: index.php
========================================= */
.storefront-navbar{
  transition: padding .22s ease, box-shadow .22s ease, top .22s ease;
}

.storefront-navbar .mobile-logo-row{
  max-height: 90px;
  opacity: 1;
  overflow: hidden;
  transition: max-height .22s ease, opacity .18s ease, margin .22s ease, padding .22s ease;
}

.storefront-navbar .mobile-nav-actions-wrap{
  transition: transform .22s ease;
}

body.nav-scrolled .storefront-navbar{
  box-shadow: 0 8px 18px rgba(0,0,0,.10) !important;
}

body.nav-scrolled .storefront-navbar .mobile-logo-row{
  max-height: 0;
  opacity: 0;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.nav-scrolled .storefront-navbar .mobile-nav-actions-wrap{
  transform: translateY(-2px);
}

/* tighter mobile navbar spacing after scroll */
@media (max-width: 575.98px){
  body.nav-scrolled .storefront-navbar{
    padding-top: .35rem !important;
    padding-bottom: .35rem !important;
  }

  body.nav-scrolled .storefront-navbar .social-icon{
    transform: scale(.96);
  }

  body.nav-scrolled .storefront-navbar .visit-pill,
  body.nav-scrolled .storefront-navbar .btn,
  body.nav-scrolled .storefront-navbar .cart-btn{
    transform: scale(.98);
    transform-origin: center;
  }
}

/* Telegram browser still gets its top offset, but now also supports compact navbar */
body.tg-browser.nav-scrolled .storefront-navbar{
  top: var(--tg-extra-top);
}
/* =========================================
   Navbar username + checkout alignment
   FILE: index.php
========================================= */
.nav-user-btn,
.nav-checkout-btn{
  height: 38px;
  min-height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.nav-user-btn{
  max-width: 140px;
  min-width: 140px;
  padding-left: 12px;
  padding-right: 12px;
  overflow: hidden;
}

.nav-user-btn .username-text{
  display: inline-block;
  max-width: 82px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.nav-attention-wiggle,
.menu-attention-wiggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: 5px;
  border-radius: 50%;
  background: #d73340;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  animation: navAttentionWiggle .8s ease-in-out infinite;
}
.profile-attention-menu-item{
  display: flex !important;
  align-items: center !important;
}

.profile-attention-label{
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

.profile-attention-label .menu-attention-wiggle{
  margin-left: 6px !important;
}

.nav-attention-wiggle{
  margin-left: 6px;
  margin-right: 2px;
  background: #d73340;
  color: #fff;
}

@keyframes navAttentionWiggle{
  0%, 100% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(-12deg) scale(1.08); }
  40% { transform: rotate(12deg) scale(1.08); }
  60% { transform: rotate(-8deg) scale(1.05); }
  80% { transform: rotate(8deg) scale(1.05); }
}

.storefront-navbar{
  position: sticky;
  z-index: 1020;
}

.storefront-navbar .dropdown{
  position: relative;
  z-index: 1025;
}

.storefront-navbar .dropdown-menu{
  z-index: 1030;
}

/* keep cart drawer and Bootstrap modals above navbar */
.offcanvas{
  z-index: 1050;
}

.offcanvas-backdrop{
  z-index: 1040;
}

.modal{
  z-index: 1060;
}

.modal-backdrop{
  z-index: 1055;
}

.nav-checkout-btn{
  min-width: 140px;
  max-width: 140px;
  padding-left: 12px;
  padding-right: 12px;
  white-space: nowrap;
}

.nav-checkout-btn .cartCount{
  margin-left: 6px;
  flex: 0 0 auto;
}

@media (max-width: 575.98px){
  .nav-user-btn,
  .nav-checkout-btn{
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    white-space: nowrap;
    line-height: 1;
    overflow: hidden;
  }

  .nav-user-btn{
    min-width: 108px;
    max-width: 108px;
    padding-left: 7px;
    padding-right: 7px;
    gap: 3px;
  }

  .nav-user-btn .username-text{
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-checkout-btn{
    min-width: 104px;
    max-width: 104px;
    padding-left: 7px;
    padding-right: 7px;
    gap: 3px;
    font-size: 12px;
  }

  .nav-checkout-btn .cartCount{
    margin-left: 2px;
    flex: 0 0 auto;
  }

  .nav-attention-wiggle{
    width: 15px;
    height: 15px;
    min-width: 15px;
    margin-left: 2px;
    margin-right: 0;
    font-size: 10px;
    flex: 0 0 auto;
  }

  .dropdown-menu .dropdown-item.d-flex{
    align-items: center !important;
  }

  .dropdown-menu .dropdown-item.d-flex > span:first-child{
    display: inline-flex;
    align-items: center;
  }

.menu-attention-wiggle{
  width: 17px;
  height: 17px;
  min-width: 17px;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 auto;
}
}

@media (max-width: 390px){
  .nav-user-btn{
    min-width: 100px;
    max-width: 100px;
  }

  .nav-user-btn .username-text{
    max-width: 44px;
  }

  .nav-checkout-btn{
    min-width: 96px;
    max-width: 96px;
    font-size: 11px;
  }
}