/* Tipplink mobile header fix. Loaded after styles.css. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 899px), (pointer: coarse) {
  .site-header {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    height: 64px !important;
    z-index: 2147483640 !important;
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .header-inner {
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 1rem !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }

  .logo-link {
    width: 96px !important;
    height: 64px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .logo-img { display: none !important; }

  .logo-link::after {
    content: "tipplink" !important;
    color: #2d7a3a !important;
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
  }

  .cart-toggle {
    order: 2 !important;
    flex: 0 0 40px !important;
    margin: 0 0 0 .35rem !important;
  }

  .auth-section {
    order: 3 !important;
    flex: 0 0 auto !important;
    margin: 0 0 0 .35rem !important;
  }

  .main-nav {
    order: 4 !important;
    position: static !important;
    width: 40px !important;
    flex: 0 0 40px !important;
    margin-left: .35rem !important;
  }

  .nav-toggle {
    display: block !important;
    position: relative !important;
    z-index: 2147483647 !important;
  }

  /* Hide desktop nav-list and show hamburger inside the sticky header on mobile. */
  .main-nav > .nav-list {
    display: none !important;
  }

  /* Independent mobile menu layer. */
  .mobile-nav-panel {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483646 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .mobile-nav-panel[data-open="true"] {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .mobile-nav-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    border: 0 !important;
    background: rgba(23, 53, 31, .42) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 180ms ease !important;
  }

  .mobile-nav-panel[data-open="true"] .mobile-nav-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .mobile-nav-content {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 50vw !important;
    padding: 5.5rem 1.25rem 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: .5rem !important;
    background: #fff !important;
    border-left: 1px solid #d6e9d9 !important;
    box-shadow: -14px 0 36px rgba(23, 53, 31, .2) !important;
    transform: translateX(100%) !important;
    transition: transform 280ms ease !important;
    z-index: 2147483647 !important;
    overflow-y: auto !important;
  }

  .mobile-nav-panel[data-open="true"] .mobile-nav-content {
    transform: translateX(0) !important;
  }

  .mobile-nav-content a {
    display: block !important;
    padding: .8rem 0 !important;
    color: #17351f !important;
    font: 500 1rem/1.4 Inter, system-ui, sans-serif !important;
    text-decoration: none !important;
    border-bottom: 1px solid #d6e9d9 !important;
  }

  /* Compact countdown stays in normal flow and cannot cover the hero. */
  .countdown-bar {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: .85rem .5rem !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    overflow: visible !important;
  }

  .countdown-inner {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    gap: .55rem !important;
  }

  .countdown-label {
    flex-basis: 100% !important;
    font-size: .9rem !important;
  }

  .countdown-timer {
    width: 100% !important;
    justify-content: space-between !important;
    gap: .15rem !important;
  }

  .countdown-unit {
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }

  .countdown-value {
    font-size: clamp(1.1rem, 6vw, 1.55rem) !important;
  }

  .countdown-name { font-size: .58rem !important; }

  .countdown-sep {
    font-size: 1.2rem !important;
    margin-top: -.8rem !important;
  }
}

/* Desktop: show nav-list, hide hamburger. Mobile: reverse (handled in @media below). */
.nav-toggle {
  display: none !important;
}

/* Mobile nav panel: hidden on desktop by default, shown via media query on mobile. */
.mobile-nav-panel {
  display: none !important;
}
.logo-img {
  display: none !important;
}
.logo-link::after {
  content: "tipplink" !important;
  color: #2d7a3a !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.055em !important;
  white-space: nowrap !important;
}

/* Runtime mobile fallback for Safari/WebViews with an unusual viewport width. */
html.is-mobile .site-header {
  position: sticky !important;
  top: 0 !important;
  width: 100% !important;
  height: 64px !important;
  z-index: 2147483640 !important;
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.is-mobile .header-inner {
  width: 100% !important;
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 1rem !important;
  display: flex !important;
  flex-wrap: nowrap !important;
}
html.is-mobile .logo-link {
  width: 96px !important;
  height: 64px !important;
  flex: 1 1 auto !important;
}
html.is-mobile .logo-img { display: none !important; }
html.is-mobile .logo-link::after {
  content: "tipplink" !important;
  color: #2d7a3a !important;
  font: 700 1.2rem Inter, system-ui, sans-serif !important;
}
html.is-mobile .main-nav > .nav-list { display: none !important; }
html.is-mobile .mobile-nav-panel {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483646 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html.is-mobile .mobile-nav-panel[data-open="true"] {
  visibility: visible !important;
  pointer-events: auto !important;
}
html.is-mobile .mobile-nav-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  border: 0 !important;
  background: rgba(23,53,31,.42) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
html.is-mobile .mobile-nav-panel[data-open="true"] .mobile-nav-backdrop {
  opacity: 1 !important;
  pointer-events: auto !important;
}
html.is-mobile .mobile-nav-content {
  position: fixed !important;
  inset: 0 0 0 50% !important;
  width: 50vw !important;
  padding: 5.5rem 1.25rem 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .5rem !important;
  background: #fff !important;
  border-left: 1px solid #d6e9d9 !important;
  transform: translateX(100%) !important;
  z-index: 2147483647 !important;
  overflow-y: auto !important;
}
html.is-mobile .mobile-nav-panel[data-open="true"] .mobile-nav-content {
  transform: translateX(0) !important;
}
html.is-mobile .mobile-nav-content a {
  display: block !important;
  padding: .8rem 0 !important;
  color: #17351f !important;
  font: 500 1rem/1.4 Inter, system-ui, sans-serif !important;
  text-decoration: none !important;
  border-bottom: 1px solid #d6e9d9 !important;
}
html.is-mobile .countdown-bar {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: .85rem .5rem !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}
html.is-mobile .countdown-inner {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}
html.is-mobile .countdown-label { flex-basis: 100% !important; font-size: .9rem !important; }
html.is-mobile .countdown-timer { width: 100% !important; justify-content: space-between !important; }
html.is-mobile .countdown-unit { min-width: 0 !important; flex: 1 1 0 !important; }
html.is-mobile .countdown-value { font-size: 1.35rem !important; }
html.is-mobile .countdown-name { font-size: .58rem !important; }