/* Sticky Header Styles */
.main-navigation.tw-header-sticky,
.my_mobile_navigation_bar.tw-header-sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1001 !important;
  transition: all 0.3s ease;
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure cart and wishlist badges are visible when header is sticky */
/* .main-navigation.tw-header-sticky .cart-block--summary__count,
.main-navigation.tw-header-sticky .wishlist-block--summary__count {
  z-index: 9999 !important;
  position: relative !important;
  margin-top: -24px !important;
  margin-left: -8px !important;
  pointer-events: auto !important;
} */

/* Alternative approach using flexbox positioning */
.main-navigation.tw-header-sticky .cart-block--summary,
.main-navigation.tw-header-sticky .wishlist-block--summary {
  position: relative !important;
  overflow: visible !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* Also ensure no parent containers clip the badge */
.main-navigation.tw-header-sticky .cart--cart-block,
.main-navigation.tw-header-sticky .wishlist-block {
  overflow: visible !important;
}

/* Force badge to be visible with higher specificity */
@media (min-width: 1024px) {
  .main-navigation.tw-header-sticky .cart-block--summary__count,
  .main-navigation.tw-header-sticky .wishlist-block--summary__count {
    z-index: 9999 !important;
    transform: translateZ(0) !important; /* Force GPU rendering */
  }
}

/* Ensure top bar is NOT sticky */
.top-bar,
.top-bar-container,
#top-bar {
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
}

/* Desktop sticky header styles */
@media (min-width: 1024px) {
  .main-navigation.tw-header-sticky .tw-py-6 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .main-navigation.tw-header-sticky img[alt="KOIS-OPTICS"] {
    width: 180px;
    transition: width 0.3s ease;
  }

  .main-navigation.tw-header-sticky .tw-text-xs {
    display: none;
  }

  /* Keep badge text visible even when other tw-text-xs elements are hidden */
  .main-navigation.tw-header-sticky .cart-block--summary__count.tw-text-xs,
  .main-navigation.tw-header-sticky .wishlist-block--summary__count.tw-text-xs {
    display: flex !important;
  }

}

/* Mobile/tablet sticky header styles */
@media (max-width: 1023px) {
  .main-navigation.tw-header-sticky {
    background-color: #fff;
  }

  .dark .main-navigation.tw-header-sticky {
    background-color: #1f2937; /* dark:tw-bg-gray-800 equivalent */
  }
}

/* Smooth transitions for all header elements */
.main-navigation,
.main-navigation .tw-container > div:first-child, /* Top bar replacement for tw-bg-[#333333] */
.main-navigation .tw-py-6,
.main-navigation nav,
.main-navigation img {
  transition: all 0.3s ease-in-out;
}

/* Fix mobile menu overlay position when header is sticky */
.main-navigation.tw-header-sticky #menuOverlay .tw-fixed {
  top: 60px; /* Adjust as needed based on the sticky header height */
}

@media (min-width: 1024px) {
  .main-navigation.tw-header-sticky #menuOverlay .tw-fixed {
    top: 100px; /* Adjust for desktop sticky header */
  }
}