/*
 * 9981 Header Overrides
 */

.header.header-6 .header-bottom .menu>li:hover>a,
.header.header-6 .header-bottom .menu>li:focus>a,
.header.header-6 .header-bottom .menu>li.active>a {
    color: #0f4c81;
}

.header-6 .header-top .header-right .header-dropdown {
    display: block !important;
}

.header-right .fa-facebook-messenger:before {
    float: right;
}

.header-dropdown .header-menu {
    min-width: max-content;
}

.header-bottom .menu>li>.sf-with-ul {
    padding-right: 4.8rem;
    padding-left: 2.8rem;
}

.header-bottom .menu.sf-arrows>li>.sf-with-ul::after {
    right: 2.5rem;
}

.header-bottom .menu>li>a::before {
    background-color: #d83a32;
}

@media (min-width: 992px) {
    .header.header-6 .header-bottom .container {
        display: flex;
        justify-content: center;
    }

    .header.header-6 .header-bottom .header-left {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .header.header-6 .header-bottom .main-nav {
        flex: 0 1 auto;
    }

    .header.header-6 .header-bottom .menu {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 1.5rem;
    }

    .header.header-6 .header-bottom .menu>li+li {
        margin-left: 0;
    }
}

.dropdown-item.active, .dropdown-item:active, .dropdown-item:focus, .dropdown-item:hover{
    background-color: #0f4c81;
    color: #fff;
}
.nav.nav-pills .nav-item.show .nav-link, .nav.nav-pills .nav-item .nav-link.active {
    color: #0f4c81;
    border-bottom:2px solid #0f4c81;
}


/* ========================================
   Lazy Loading Image Styles
   ======================================== */

/* Placeholder styling for images being lazy loaded */
img.lazy {
    background-color: #f5f5f5;
    background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    min-height: 200px;
    object-fit: cover;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Fade in effect when image loads */
img.lazy[data-was-processed="true"] {
    animation: fadeIn 0.4s ease-in;
    background: transparent;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Product image specific lazy loading */
.product-image.lazy {
    width: 100%;
    height: auto;
    display: block;
}

/* Gallery image lazy loading */
.gallery-image.lazy {
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.gallery-image.lazy:hover {
    transform: scale(1.02);
}

/* Prevent layout shift during image load */
.product-media {
    position: relative;
    overflow: hidden;
}

.product-media img.lazy:not([data-was-processed="true"]) {
    /* aspect-ratio: 1 / 1; Maintain square aspect ratio for products */
}

/* Loading spinner overlay (optional) */
.lazy-loading {
    position: relative;
}

.lazy-loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #d83a32;
    border-radius: 50%;
    transform-origin: center;
    animation: lazy-spinner 1s linear infinite;
}

@keyframes lazy-spinner {
    to {
        transform: rotate(360deg);
    }
}

/* Fix aspect ratio for older browsers */
.product-media {
    position: relative;
    overflow: hidden;
}

.product-media img.lazy:not(.lazy-loaded) {
    width: 100%;
    padding-top: 100%; /* 1:1 aspect ratio */
}

@supports (aspect-ratio: 1 / 1) {
    .product-media img.lazy:not(.lazy-loaded) {
        padding-top: 0;
        aspect-ratio: 1 / 1;
    }
}

.product-image-gallery .product-gallery-item:before{
    border-color: white!important;
}



/*-----Remove 好酒推荐 Banner in smaller view-----*/
@media screen and (max-width: 1006px){
    .main .hot-title .banner-hot img{
        display:none;
    }
}
/*----------------------------------------------*/

/*-----Footer logo Mobile View------------------*/
@media screen and (max-width: 592px){
    .footer-logo{
        margin:0 auto;
        width:50%;
    }
    .footer-middle .footer-payments{
        text-align:center;
    }
    .footer-payments .footer-insta img{
        margin-left:0px!important;
    }
}
/*----------------------------------------------*/

/*-----Main Banner Mobile View------------------*/
@media screen and (max-width: 479px){
    .banner-container .intro-slider-container:before, .banner-container .intro-slider .slide-image:before {
        padding-top: 99.3333333333%;
    }
}
/*----------------------------------------------*/
/*-----Age Verification Popup Mobile View------------------*/
@media screen and (max-width: 575px){
    #ageModal .old-enough, .not-old-enough {
        width:25%;
        height:40px!important;
        font-size:1.2rem!important;
    }
    #ageModal .age-logo{
        width:30%!important;
    }
}




/*-----Mobile Menu Styling-----*/
.mobile-menu-container{
    background-color: white!important;
}
.mobile-menu-container .mobile-menu-wrapper .mobile-menu a{
    color:black;
}
.mobile-menu-container .mobile-menu-wrapper .mobile-menu li a{
    border-bottom: 0.1rem solid rgba(0,0,0,0.08)!important;
}
.mobile-menu-container .mobile-menu-wrapper .mobile-menu .mmenu-btn::after{
    color:black!important;
}
.mobile-menu li a:hover, .mobile-menu li a:focus {
    background-color: #0f4c81!important;
    color:white!important;
}
.mobile-menu-container .social-icon{
    color: rgba(0,0,0,0.45)!important;
    border-color: rgba(0,0,0,0.45)!important;
}