/* =========================================================
   VANCE CEYLON — MOBILE APP UI
   Mobile-only. Desktop layout is not changed.
========================================================= */

@media (max-width:900px){

    html{
        -webkit-text-size-adjust:100%;
        text-size-adjust:100%;
        overscroll-behavior-y:none;
    }

    body{
        overscroll-behavior-y:none;
        -webkit-tap-highlight-color:transparent;
    }

    body.vance-mobile-app-menu-open{
        overflow:hidden !important;
        touch-action:none;
    }

    /* Remove the obsolete category drawer completely on mobile. */
    #mobileCategoryMenu.mobile-category-menu{
        display:none !important;
        visibility:hidden !important;
        pointer-events:none !important;
    }

    /* -----------------------------------------------------
       APP-LIKE MOBILE HEADER
    ----------------------------------------------------- */
    .header,
    .header.scrolled{
        min-height:62px !important;
        height:62px !important;
        padding:0 14px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        background:rgba(255,255,255,.96) !important;
        border-bottom:1px solid rgba(17,17,17,.08) !important;
        backdrop-filter:blur(18px) saturate(1.15) !important;
        -webkit-backdrop-filter:blur(18px) saturate(1.15) !important;
        color:#111 !important;
    }

    .header .mobile-menu-btn{
        position:relative !important;
        z-index:12 !important;
        width:40px !important;
        min-width:40px !important;
        height:40px !important;
        min-height:40px !important;
        padding:0 !important;
        border:1px solid rgba(17,17,17,.10) !important;
        border-radius:50% !important;
        background:#fff !important;
        box-shadow:0 4px 14px rgba(17,17,17,.055) !important;
    }

    .header .mobile-menu-btn span{
        width:15px !important;
        height:1.5px !important;
        background:#111 !important;
    }

    .header .mobile-menu-btn.vance-mobile-app-open{
        opacity:.35 !important;
        pointer-events:none !important;
    }

    .header .logo{
        position:absolute !important;
        left:50% !important;
        top:50% !important;
        transform:translate(-50%,-50%) !important;
        margin:0 !important;
        padding:0 !important;
        color:#111 !important;
        font-family:"Helvetica Neue", Helvetica, Arial, sans-serif !important;
        font-size:14px !important;
        line-height:1 !important;
        font-weight:900 !important;
        letter-spacing:.11em !important;
        text-align:center !important;
        white-space:nowrap !important;
        z-index:8 !important;
    }

    .header .nav{
        display:none !important;
    }

    .header .tools{
        position:relative !important;
        margin-left:auto !important;
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        gap:7px !important;
        z-index:10 !important;
        overflow:visible !important;
    }

    /* Account lives inside the mobile app menu, so the header stays clean. */
    .header .account-trigger{
        display:none !important;
    }

    .header .cart-header-btn{
        width:44px !important;
        min-width:44px !important;
        height:40px !important;
        min-height:40px !important;
        padding:0 5px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        border:1px solid rgba(17,17,17,.10) !important;
        border-radius:999px !important;
        background:#fff !important;
        color:#111 !important;
        font-size:9px !important;
        line-height:1 !important;
        font-weight:850 !important;
        letter-spacing:.06em !important;
        box-shadow:0 4px 14px rgba(17,17,17,.055) !important;
    }

    .header .cart-header-btn .badge{
        top:-4px !important;
        right:-4px !important;
    }

    /* -----------------------------------------------------
       MOBILE SEARCH — ICON IN HEADER, FIELD OPENS ON TAP
    ----------------------------------------------------- */
    .vance-inline-search-shell{
        position:relative !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        width:40px !important;
        min-width:40px !important;
        max-width:40px !important;
        height:40px !important;
        margin:0 !important;
        padding:0 !important;
        overflow:visible !important;
        border:1px solid rgba(17,17,17,.10) !important;
        border-radius:999px !important;
        background:#fff !important;
        box-shadow:0 4px 14px rgba(17,17,17,.055) !important;
        transition:none !important;
        z-index:12 !important;
    }

    .header .tools .vance-inline-search-shell > .vance-inline-search-trigger{
        position:relative !important;
        z-index:3 !important;
        flex:0 0 40px !important;
        width:40px !important;
        min-width:40px !important;
        height:38px !important;
        min-height:38px !important;
        padding:0 !important;
        display:grid !important;
        place-items:center !important;
        border:0 !important;
        border-radius:999px !important;
        background:transparent !important;
        color:#111 !important;
    }

    .vance-inline-search-trigger svg{
        width:20px !important;
        height:20px !important;
        stroke-width:1.8 !important;
    }

    .vance-inline-search-input{
        position:fixed !important;
        top:calc(28px + 62px + 8px) !important;
        left:14px !important;
        right:14px !important;
        width:calc(100vw - 28px) !important;
        height:46px !important;
        min-height:46px !important;
        margin:0 !important;
        padding:0 46px 0 16px !important;
        border:1px solid rgba(17,17,17,.11) !important;
        border-radius:14px !important;
        background:rgba(255,255,255,.99) !important;
        color:#111 !important;
        box-shadow:0 14px 36px rgba(17,17,17,.13) !important;
        font-family:"Helvetica Neue", Helvetica, Arial, sans-serif !important;
        font-size:14px !important;
        font-weight:650 !important;
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transform:translateY(-8px) scale(.985) !important;
        transition:opacity .18s ease, transform .22s ease, visibility .18s ease !important;
        z-index:2147482501 !important;
    }

    .vance-inline-search-input::placeholder{
        color:#777 !important;
        font-size:13px !important;
        font-weight:600 !important;
    }

    .vance-inline-search-shell.is-mobile-open .vance-inline-search-input{
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        transform:translateY(0) scale(1) !important;
    }

    .vance-inline-search-shell.is-mobile-open::after{
        content:"×" !important;
        position:fixed !important;
        top:calc(28px + 62px + 8px) !important;
        right:14px !important;
        width:44px !important;
        height:46px !important;
        display:grid !important;
        place-items:center !important;
        color:#111 !important;
        font:300 24px/1 Arial,sans-serif !important;
        pointer-events:none !important;
        z-index:2147482502 !important;
    }

    .vance-inline-search-results{
        position:fixed !important;
        top:calc(28px + 62px + 62px) !important;
        left:14px !important;
        right:14px !important;
        width:auto !important;
        max-height:min(55dvh, 430px) !important;
        margin:0 !important;
        padding:8px !important;
        border-radius:14px !important;
        border:1px solid rgba(17,17,17,.09) !important;
        background:#fff !important;
        box-shadow:0 18px 55px rgba(17,17,17,.16) !important;
        z-index:2147482500 !important;
    }

    .vance-inline-search-results[hidden]{
        display:none !important;
    }

    /* -----------------------------------------------------
       FULL-SCREEN APP MENU
    ----------------------------------------------------- */
    #vanceMobileAppMenu{
        position:fixed !important;
        inset:0 !important;
        z-index:2147483600 !important;
        width:100vw !important;
        height:100dvh !important;
        display:flex !important;
        flex-direction:column !important;
        background:#f6f6f3 !important;
        color:#111 !important;
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transform:translate3d(-100%,0,0) !important;
        transition:
            transform .38s cubic-bezier(.22,.82,.26,1),
            opacity .22s ease,
            visibility .22s ease !important;
        overflow:hidden !important;
        overscroll-behavior:contain !important;
    }

    #vanceMobileAppMenu.is-open{
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        transform:translate3d(0,0,0) !important;
    }

    .vance-mobile-app-top{
        flex:0 0 auto !important;
        min-height:calc(68px + env(safe-area-inset-top)) !important;
        padding:
            calc(12px + env(safe-area-inset-top))
            16px
            12px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        border-bottom:1px solid rgba(17,17,17,.085) !important;
        background:rgba(246,246,243,.94) !important;
        backdrop-filter:blur(18px) !important;
        -webkit-backdrop-filter:blur(18px) !important;
    }

    .vance-mobile-app-brand{
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        background:transparent !important;
        color:#111 !important;
        font-family:"Helvetica Neue", Helvetica, Arial, sans-serif !important;
        font-size:15px !important;
        line-height:1 !important;
        font-weight:900 !important;
        letter-spacing:.11em !important;
    }

    .vance-mobile-app-close{
        position:relative !important;
        width:42px !important;
        min-width:42px !important;
        height:42px !important;
        min-height:42px !important;
        margin:0 !important;
        padding:0 !important;
        border:1px solid rgba(17,17,17,.10) !important;
        border-radius:50% !important;
        background:#fff !important;
        box-shadow:0 5px 16px rgba(17,17,17,.055) !important;
    }

    .vance-mobile-app-close span{
        position:absolute !important;
        left:50% !important;
        top:50% !important;
        width:15px !important;
        height:1.4px !important;
        background:#111 !important;
        border-radius:10px !important;
    }

    .vance-mobile-app-close span:first-child{
        transform:translate(-50%,-50%) rotate(45deg) !important;
    }

    .vance-mobile-app-close span:last-child{
        transform:translate(-50%,-50%) rotate(-45deg) !important;
    }

    .vance-mobile-app-scroll{
        flex:1 1 auto !important;
        min-height:0 !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch !important;
        padding:
            22px
            16px
            calc(28px + env(safe-area-inset-bottom)) !important;
    }

    .vance-mobile-app-intro{
        padding:4px 2px 23px !important;
    }

    .vance-mobile-app-intro > span,
    .vance-mobile-app-section-title{
        display:block !important;
        margin:0 0 11px !important;
        color:#777 !important;
        font-family:"Helvetica Neue", Helvetica, Arial, sans-serif !important;
        font-size:10px !important;
        line-height:1 !important;
        font-weight:800 !important;
        letter-spacing:.20em !important;
        text-transform:uppercase !important;
    }

    .vance-mobile-app-intro h2{
        margin:0 !important;
        color:#111 !important;
        font-family:"Helvetica Neue", Helvetica, Arial, sans-serif !important;
        font-size:clamp(38px, 11vw, 52px) !important;
        line-height:.90 !important;
        font-weight:900 !important;
        letter-spacing:-.055em !important;
        text-transform:uppercase !important;
    }

    .vance-mobile-app-primary{
        display:flex !important;
        flex-direction:column !important;
        gap:8px !important;
        margin:0 0 28px !important;
    }

    .vance-mobile-app-primary button{
        width:100% !important;
        min-height:66px !important;
        display:grid !important;
        grid-template-columns:34px minmax(0,1fr) 28px !important;
        align-items:center !important;
        gap:8px !important;
        margin:0 !important;
        padding:0 15px !important;
        border:1px solid rgba(17,17,17,.085) !important;
        border-radius:15px !important;
        background:#fff !important;
        color:#111 !important;
        box-shadow:0 5px 20px rgba(17,17,17,.035) !important;
        text-align:left !important;
        touch-action:manipulation !important;
        transition:transform .12s ease, background .12s ease !important;
    }

    .vance-mobile-app-primary button:active{
        transform:scale(.985) !important;
        background:#efefec !important;
    }

    .vance-mobile-nav-number{
        color:#999 !important;
        font-size:9px !important;
        line-height:1 !important;
        font-weight:800 !important;
        letter-spacing:.12em !important;
    }

    .vance-mobile-nav-label{
        color:#111 !important;
        font-family:"Helvetica Neue", Helvetica, Arial, sans-serif !important;
        font-size:17px !important;
        line-height:1.15 !important;
        font-weight:800 !important;
        letter-spacing:-.025em !important;
    }

    .vance-mobile-nav-arrow{
        color:#777 !important;
        font-size:19px !important;
        line-height:1 !important;
        text-align:right !important;
    }

    .vance-mobile-app-section-title{
        margin:0 2px 11px !important;
    }

    .vance-mobile-app-quick{
        display:grid !important;
        grid-template-columns:repeat(3, minmax(0,1fr)) !important;
        gap:8px !important;
        margin-bottom:14px !important;
    }

    .vance-mobile-app-quick button{
        min-width:0 !important;
        min-height:92px !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        justify-content:space-between !important;
        gap:12px !important;
        margin:0 !important;
        padding:13px !important;
        border:1px solid rgba(17,17,17,.085) !important;
        border-radius:15px !important;
        background:#fff !important;
        color:#111 !important;
        box-shadow:none !important;
        text-align:left !important;
        font-family:"Helvetica Neue", Helvetica, Arial, sans-serif !important;
        font-size:11px !important;
        line-height:1.15 !important;
        font-weight:800 !important;
        letter-spacing:-.01em !important;
    }

    .vance-mobile-app-quick button:active{
        transform:scale(.98) !important;
        background:#efefec !important;
    }

    .vance-mobile-quick-icon{
        width:26px !important;
        height:26px !important;
        display:grid !important;
        place-items:center !important;
    }

    .vance-mobile-quick-icon svg,
    .vance-mobile-install-icon svg{
        width:100% !important;
        height:100% !important;
        display:block !important;
        fill:none !important;
        stroke:currentColor !important;
        stroke-width:1.65 !important;
        stroke-linecap:round !important;
        stroke-linejoin:round !important;
    }

    .vance-mobile-install{
        width:100% !important;
        min-height:70px !important;
        display:grid !important;
        grid-template-columns:30px minmax(0,1fr) 24px !important;
        align-items:center !important;
        gap:12px !important;
        margin:14px 0 0 !important;
        padding:12px 14px !important;
        border:0 !important;
        border-radius:15px !important;
        background:#111 !important;
        color:#fff !important;
        text-align:left !important;
    }

    .vance-mobile-install[hidden]{
        display:none !important;
    }

    .vance-mobile-install-icon{
        width:25px !important;
        height:25px !important;
    }

    .vance-mobile-install strong{
        display:block !important;
        color:#fff !important;
        font-size:13px !important;
        line-height:1.2 !important;
        font-weight:850 !important;
    }

    .vance-mobile-install small{
        display:block !important;
        margin-top:3px !important;
        color:rgba(255,255,255,.66) !important;
        font-size:9.5px !important;
        line-height:1.3 !important;
        font-weight:600 !important;
    }

    .vance-mobile-install-arrow{
        font-size:19px !important;
        text-align:right !important;
    }

    .vance-mobile-app-footer{
        display:flex !important;
        flex-direction:column !important;
        gap:5px !important;
        margin-top:24px !important;
        padding:18px 2px 0 !important;
        border-top:1px solid rgba(17,17,17,.085) !important;
        color:#777 !important;
    }

    .vance-mobile-app-footer strong{
        color:#111 !important;
        font-size:10px !important;
        font-weight:900 !important;
        letter-spacing:.12em !important;
    }

    .vance-mobile-app-footer span{
        font-size:10px !important;
        line-height:1.4 !important;
    }

    /* Make mobile taps feel like an app rather than desktop hover. */
    .card:hover,
    .collection:hover,
    .icon-btn:hover{
        transform:none !important;
    }

    button,
    a,
    .card,
    .collection{
        touch-action:manipulation;
    }
}

@media (max-width:390px){
    .vance-mobile-app-scroll{
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .vance-mobile-app-primary button{
        min-height:62px !important;
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .vance-mobile-nav-label{
        font-size:16px !important;
    }

    .vance-mobile-app-quick{
        gap:6px !important;
    }

    .vance-mobile-app-quick button{
        min-height:88px !important;
        padding:11px !important;
        font-size:10px !important;
    }
}

@media (min-width:901px){
    #vanceMobileAppMenu{
        display:none !important;
    }
}