/* =================================================================
   MOBILE HEADER & NAVIGATION REDESIGN
   ================================================================= */
@media (max-width: 991px) {
    /* Prevent Bootstrap columns from hijacking absolute positioning */
    .header-middle .row,
    .header-middle [class*="col-"] {
        position: static !important;
    }

    /* Header background and relative positioning */
    .header-middle {
        position: relative !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        background-color: #F80E63 !important;
    }

    /* Logo centering and responsive height */
    .logo {
        text-align: center !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        margin: 0 auto !important;
    }
    
    .logo img {
        max-height: 38px !important;
        width: auto !important;
        display: inline-block !important;
    }

    /* Actions container (User Initials & Cart Basket) */
    .header-middle-right {
        position: absolute !important;
        right: 12px !important;
        top: 6px !important;
        height: 36px !important;
        transform: none !important;
        padding-top: 0 !important;
        z-index: 100 !important;
        display: flex !important;
        align-items: center !important;
    }

    .hm-menu {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .hm-menu > li {
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        display: inline-block !important;
    }

    /* Modern Minimalist User Button */
    .hm-wishlist > a {
        border: none !important;
        color: #ffffff !important;
        width: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease !important;
    }

    .hm-wishlist > a i {
        font-size: 20px !important;
    }

    /* Profile Initials Circle Badge */
    .hm-wishlist > a span {
        background: rgba(255,255,255,0.25) !important;
        color: #ffffff !important;
        border: 2px solid rgba(255,255,255,0.6) !important;
        border-radius: 50% !important;
        width: 30px !important;
        height: 30px !important;
        line-height: 26px !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        backdrop-filter: blur(4px) !important;
    }

    /* Modern Minimalist Cart Button */
    .hm-minicart {
        margin-right: 0 !important;
        position: relative !important;
    }

    /* Override glass pill on mobile → compact icon only */
    .hm-minicart > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        height: 36px !important;
        width: 36px !important;
        border-radius: 0 !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        gap: 0 !important;
    }

    .hm-minicart-trigger {
        background: transparent !important;
        border: none !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        gap: 0 !important;
    }

    .hm-minicart-trigger .item-icon {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .hm-minicart-trigger .item-text {
        display: none !important;
    }

    .hm-minicart-trigger .item-icon::before {
        color: #ffffff !important;
        font-size: 20px !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        position: absolute !important;
    }

    /* Cart Count Circular Badge */
    .cart-item-count {
        position: absolute !important;
        top: -4px !important;
        right: -6px !important;
        left: auto !important;
        background: #fff !important;
        color: #f80e63 !important;
        border-radius: 50% !important;
        min-width: 18px !important;
        height: 18px !important;
        line-height: 18px !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        text-align: center !important;
        padding: 0 4px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Prevent mean-bar from hijacking positioning context */
    .mean-container .mean-bar {
        position: static !important;
        background: transparent !important;
        padding: 0 !important;
    }

    /* Ensure mobile menu container doesn't clip absolute elements */
    .mobile-menu {
        overflow: visible !important;
    }

    /* Hamburger & Menu Close Toggle */
    .mean-container a.meanmenu-reveal {
        position: absolute !important;
        top: 6px !important;
        left: 12px !important;
        right: auto !important;
        color: #ffffff !important;
        padding: 0 !important;
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 999999 !important;
    }

    /* Standard clean hamburger lines */
    .mean-container a.meanmenu-reveal span {
        background: #ffffff !important;
        height: 2px !important;
        width: 20px !important;
        margin-top: 4px !important;
        display: block !important;
    }

    .mean-container a.meanmenu-reveal span:first-child {
        margin-top: 0 !important;
    }

    /* Pure CSS Close Icon (X) - 100% Reliable & Independent of font loads */
    .mean-container a.meanmenu-reveal.meanclose {
        color: transparent !important; /* Hide raw text X */
        position: absolute !important;
    }

    .mean-container a.meanmenu-reveal.meanclose::before,
    .mean-container a.meanmenu-reveal.meanclose::after {
        content: "" !important;
        position: absolute !important;
        top: 17px !important; /* Center vertically inside 36px wrapper */
        left: 8px !important;  /* Center horizontally */
        width: 20px !important;
        height: 2px !important;
        background-color: #ffffff !important;
        display: block !important;
    }

    .mean-container a.meanmenu-reveal.meanclose::before {
        transform: rotate(45deg) !important;
    }

    .mean-container a.meanmenu-reveal.meanclose::after {
        transform: rotate(-45deg) !important;
    }

    /* Modern Pill-Style Search Box */
    .hm-searchbox {
        margin: 6px 12px 10px !important;
        width: calc(100% - 24px) !important;
        min-width: 0 !important;
        position: relative !important;
        background: #ffffff !important;
        border-radius: 30px !important;
        overflow: hidden !important;
        border: none !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    }

    .hm-searchbox input {
        width: 100% !important;
        height: 38px !important;
        padding: 0 45px 0 16px !important;
        border: none !important;
        background: #ffffff !important;
        font-size: 13px !important;
        color: #333333 !important;
        border-radius: 30px !important;
    }

    .hm-searchbox button.li-btn {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 44px !important;
        height: 38px !important;
        background: transparent !important;
        border: none !important;
        color: #F80E63 !important;
        font-size: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        transform: none !important;
        border-radius: 0 30px 30px 0 !important;
    }

    /* Mobile Navigation Drawer Dropdown Menu styling */
    .mean-container .mean-nav {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 99999 !important;
        background: #ffffff !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
        border-radius: 0 0 12px 12px !important;
        border-top: 3px solid #F80E63 !important;
        overflow: hidden !important;
    }

    .mean-container .mean-nav ul {
        background: #ffffff !important;
    }

    .mean-container .mean-nav ul li a {
        background: #ffffff !important;
        color: #333333 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        padding: 8px 16px !important;
        border-top: 1px solid #f5f5f5 !important;
        text-transform: none !important;
        letter-spacing: 0.1px !important;
        line-height: 1.3 !important;
    }

    .mean-container .mean-nav ul li a:hover {
        background: #fff5f7 !important;
        color: #F80E63 !important;
    }

    .mean-container .mean-nav ul li li a {
        background: #f5f6f8 !important;
        color: #000000 !important;
        opacity: 1 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        padding: 9px 16px 9px 28px !important;
        border-left: 3px solid #ffccd8 !important;
        border-top: 1px solid #eeeeee !important;
        line-height: 1.3 !important;
    }

    .mean-container .mean-nav ul li li a:hover {
        background: #fff5f7 !important;
        color: #F80E63 !important;
        border-left-color: #F80E63 !important;
    }

    .mean-container .mean-nav ul li li li a {
        padding-left: 36px !important;
        font-size: 11px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    /* Expand button (+ / -) styling */
    .mean-container .mean-nav ul li a.mean-expand {
        background: transparent !important;
        border: none !important;
        width: 36px !important;
        height: 33px !important; /* Matches main item height */
        line-height: 33px !important;
        padding: 0 !important;
        font-size: 16px !important;
        color: transparent !important; /* Hide raw text */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        top: 0 !important;
        right: 0 !important;
    }

    .mean-container .mean-nav ul li li a.mean-expand {
        height: 34px !important; /* Matches sub item height */
        line-height: 34px !important;
    }

    /* Modern Chevron icons using FontAwesome */
    .mean-container .mean-nav ul li a.mean-expand::before {
        content: "\f067" !important; /* FontAwesome plus */
        font-family: fontawesome, FontAwesome !important;
        color: #888888 !important;
        font-size: 11px !important;
        display: block !important;
    }
    .mean-container .mean-nav ul li a.mean-expand.mean-clicked::before {
        content: "\f068" !important; /* FontAwesome minus */
    }
}

/* =================================================================
   MOBILE SHIPPING & FOOTER CLEANUP (max-width: 767px)
   ================================================================= */
@media (max-width: 767px) {
    /* --- SHIPPING SECTION (2x2 Grid with Left Icon & Right Text) --- */
    .footer-shipping {
        padding-top: 15px !important;
        padding-bottom: 5px !important;
    }
    
    .footer-shipping .row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-left: -6px !important;
        margin-right: -6px !important;
    }

    .footer-shipping [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        padding-bottom: 15px !important;
        margin-bottom: 0 !important;
    }

    .li-shipping-inner-box {
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 10px !important;
        background: #fdfdfd !important;
        border: 1px solid #f1f1f1 !important;
        border-radius: 8px !important;
        height: 100% !important;
        text-align: left !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
    }

    .shipping-icon {
        flex-shrink: 0 !important;
        width: 28px !important;
        height: auto !important;
        margin: 0 !important;
    }

    .shipping-icon img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .shipping-text {
        padding-left: 0 !important;
        text-align: left !important;
    }

    .shipping-text h2 {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #333333 !important;
        margin: 0 0 2px !important;
        line-height: 1.2 !important;
        text-transform: none !important;
    }

    .shipping-text p {
        font-size: 9px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        color: #777777 !important;
    }

    /* --- FOOTER CONTACTS & LINKS --- */
    .footer-static-middle {
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }

    .footer-logo-wrap {
        padding: 0 !important;
    }

    .footer-logo {
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    .footer-logo img {
        max-height: 45px !important;
        width: auto !important;
        margin-bottom: 10px !important;
    }

    .footer-logo p.info {
        font-size: 12px !important;
        line-height: 1.5 !important;
        color: #666666 !important;
        text-align: justify !important;
        margin-bottom: 15px !important;
    }

    /* Clean contact list */
    ul.des {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 0 20px 0 !important;
    }

    ul.des li {
        position: relative !important;
        padding-left: 24px !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
        margin-bottom: 8px !important;
        color: #555555 !important;
        text-align: left !important;
    }

    ul.des li i {
        position: absolute !important;
        left: 0 !important;
        top: 3px !important;
        color: #F80E63 !important;
        font-size: 14px !important;
        width: 16px !important;
        text-align: center !important;
    }

    ul.des li span {
        font-weight: 600 !important;
        color: #333333 !important;
    }

    ul.des li a {
        color: #F80E63 !important;
        text-decoration: none !important;
        transition: opacity 0.2s ease !important;
    }

    ul.des li a:hover {
        opacity: 0.8 !important;
    }

    /* Policies section */
    .footer-block {
        margin-top: 15px !important;
        margin-bottom: 20px !important;
    }

    .footer-block-title {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #333333 !important;
        margin-bottom: 10px !important;
        text-transform: uppercase !important;
        border-bottom: 2px solid #F80E63 !important;
        padding-bottom: 4px !important;
        display: inline-block !important;
    }

    .footer-block ul {
        padding-left: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .footer-block ul li {
        margin-bottom: 6px !important;
        text-align: left !important;
    }

    .footer-block ul li a {
        font-size: 12px !important;
        color: #555555 !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        display: inline-block !important;
    }

    .footer-block ul li a::before {
        content: "\f105" !important;
        font-family: FontAwesome !important;
        margin-right: 6px !important;
        color: #F80E63 !important;
        font-size: 12px !important;
    }

    .footer-block ul li a:hover {
        color: #F80E63 !important;
        transform: translateX(3px) !important;
    }

    /* Google Map Responsive */
    .footer-static-middle iframe {
        width: 100% !important;
        height: 180px !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
        margin-top: 10px !important;
    }
}

/* === Mobile: Quantity + Buy Button cùng 1 hàng === */
@media (max-width: 767px) {
    .cart-quantity {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
        float: none !important;
        overflow: visible !important;
        margin-top: 10px !important;
        width: 100% !important;
    }

    .cart-quantity .quantity {
        flex-shrink: 0 !important;
        float: none !important;
    }

    .cart-quantity .quantity label {
        display: none !important;
    }

    .cart-plus-minus {
        float: none !important;
        margin-right: 0 !important;
    }

    .cart-quantity .add-to-cart {
        flex: 1 !important;
        float: none !important;
        margin: 0 !important;
        padding: 13px 10px !important;
        white-space: nowrap !important;
    }
}