/* Custom fixes for Safari and background issues */
html, body, main {
    background-color: #ffffff !important;
}

.td-postbox-area {
    background-color: #ffffff !important;
}

/* Desktop navigation visibility - respects Tailwind's xl breakpoint (1200px) */
@media (min-width: 1200px) {
    .tdmenu__nav.tdmenu-3 {
        display: flex !important;
    }
}

@media (max-width: 1199px) {
    .tdmenu__nav.tdmenu-3 {
        display: none !important;
    }
}

/* Hamburger menu visibility - shows below xl breakpoint (1200px) */
@media (min-width: 1200px) {
    .tdmenu-offcanvas-open-btn.mobile-nav-toggler {
        display: none !important;
    }
}

@media (max-width: 1199px) {
    .tdmenu-offcanvas-open-btn.mobile-nav-toggler {
        display: block !important;
    }
}

/* Sticky header styles based on original template */
.header-sticky {
    visibility: visible !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 999 !important;
    width: 100% !important;
    animation: 0.95s ease 0s normal forwards 1 running headerSlideDown !important;
    background-color: #e6007e !important;
    opacity: 1 !important;
    box-shadow: 0px 1px 3px 0px rgba(18,20,32,0.14) !important;
    backdrop-filter: blur(10px) !important;
}

.header-sticky .tdmenu__main-menu ul>li>a {
    padding-top: 27px !important;
    padding-bottom: 27px !important;
    color: #ffffff !important;
}

.header-sticky .logo-2 {
    display: block !important;
}

.header-sticky .logo-sticky-none {
    display: none !important;
}

.header-sticky .search-button {
    color: #ffffff !important;
}

.header-sticky .td-header-cart .cart-button {
    color: #ffffff !important;
}

.header-sticky .tdmenu-offcanvas-open-btn span,
.header-sticky .td-menu-bar span {
    background-color: #ffffff !important;
}

.header-sticky .td-menu-right-action-3 .td-header-cart-count {
    background-color: #ffffff !important;
    color: #dc004e !important;
}

.header-sticky .tdmenu__navbar-wrap>ul>li>a::before {
    bottom: 20px !important;
}

/* Animation for sticky header */
@keyframes headerSlideDown {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}