/*==================================================
    VELOX MOBILE
    Mobile First (0 - 767px)
==================================================*/
/* ======================================
   LAYOUT SWITCHER
====================================== */

.desktop-layout{
    display:block;
}

.mobile-layout{
    padding-top:56px;
    display:none;
}

/* Hide bottom navigation by default */
.velox-bottom-nav{
    display:none;
}



@media (max-width:767px){
    .velox-bottom-nav{
    display:flex;
}

    .desktop-layout{
        display:none !important;
    }

    .mobile-layout{
        display:block !important;
    }



/*==================================================
    GLOBAL
==================================================*/

html,
body{
    padding-top:30px;   /* Adjust if needed */
    padding-bottom:80px;

    overflow-x:hidden !important;

    width:100%;

    font-size:14px;

    -webkit-text-size-adjust:100%;

}

*{

    box-sizing:border-box;

}

img{

    max-width:100%;

    height:auto;

}

section{

    margin-bottom:10px;

}

.velox-container{

    width:100%;

    padding:0 15px;

    margin:0 auto;

}

/* Space for fixed navigation */

body{

    padding-bottom:80px;

}

/*==================================================
    CONTENT
==================================================*/

.wrapper,
.main-wrapper,
.main-content,
.page-content,
.content-wrapper,
.right-side-content,
.velox-content{

    margin-left:0 !important;

    width:100%;

    padding:12px 15px;

}

/*==================================================
    DESKTOP SIDEBAR
==================================================*/

.home5-sidepanel{

    display:none !important;

}

/*==================================================
    HEADER
==================================================*/

.velox-header{

    height:56px !important;



}

.velox-header-container{

    height:56px;

    padding:0 12px;

    display:flex;
    align-items:center;

}

.velox-logo img{

    height:26px;

}

/* Hide Desktop Elements */

.velox-address{

    display:none;

}

.velox-delivery{

    display:none;

}

.velox-search{

    display:none;

}

.velox-user span{

    display:none;

}

.velox-user-btn{

    padding:6px;

}

.velox-cart{

    font-size:22px;

}


/*==================================================
    MOBILE MENU BUTTON
==================================================*/

/*.velox-menu-btn{

    display:flex;

    width:42px;

    height:42px;

    justify-content:center;

    align-items:center;

}
*/

/* ======================================
   VELOX MOBILE MENU BUTTON
====================================== */

.velox-menu-btn,
.mobile-menu-btn{

    width:46px;
    height:46px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#fff;
    border:1px solid #ececec;
    border-radius:14px;

    color:#222;
    font-size:20px;

    cursor:pointer;

    box-shadow:0 3px 10px rgba(0,0,0,.06);

    transition:all .25s ease;
}

/* Hover */

.velox-menu-btn:hover,
.mobile-menu-btn:hover{

    background:#fafafa;
    border-color:#E53935;
    color:#E53935;

}

/* Press */

.velox-menu-btn:active,
.mobile-menu-btn:active{

    transform:scale(.95);

}

/* Icon */

.velox-menu-btn i,
.mobile-menu-btn i{

    font-size:20px;

    transition:.25s;

}


/*==================================================
    MOBILE DRAWER
==================================================*/


/*==================================================
    HERO
==================================================*/

.velox-hero{

    padding:4px 0;

}

.velox-hero-banner{

    min-height:110px;

    padding:13px;

    border-radius:18px;

}

.hero-content{

    width:100%;

}

.hero-content h1{

    font-size:24px;

    line-height:1.05;

    margin-bottom:8px;

}

.hero-content p{

    font-size:13px;

    margin-bottom:12px;

    line-height:1.4;

}

.hero-btn{
	 height:38px;
    padding:0px 18px;

    font-size:14px;

}

.hero-image{

    display:none;

}

/*==================================================
    SERVICES
==================================================*/

.services-grid{

    grid-template-columns:repeat(2,1fr);

    gap:8px;

}

.service-card{

    height:auto;

    padding:10px;
     border-radius:12px;

}

.service-icon{

    width:36px;

    height:36px;

}

.service-info h5{

    font-size:12px;

}

.service-info p{

    font-size:9px;

}

/*==================================================
    SECTION HEADERS
==================================================*/

.velox-section-header,
.promo-header,
.recommended-header{

    margin-bottom:12px;

}

.velox-section-header h2,
.promo-header h2,
.recommended-header h2{

    font-size:22px;

}

.promo-actions{

    gap:6px;

}

.promo-nav{

    width:36px;

    height:36px;

}

/*==================================================
    UTILITIES
==================================================*/

.hide-mobile{

    display:none !important;

}

.show-mobile{

    display:block !important;

}


/*==================================================
    PART 2
    CATEGORIES • FILTERS • PROMOTIONS
    BRANDS • BEST SELLERS
==================================================*/


/*=========================================
    CUISINES
=========================================*/

.velox-cuisine-section{

    margin-top:8px;

}

.velox-cuisine-wrapper{

    gap:12px;

    padding-bottom:10px;

}

.velox-cuisine-item{

    min-width:65px;

}

.velox-cuisine-icon{

    width:52px;

    height:52px;

}

.velox-cuisine-icon img{

    width:36px;

    height:36px;

}

.velox-cuisine-item span{

    margin-top:8px;

    font-size:11px;

}

/*=========================================
    FILTERS
=========================================*/

.velox-filter-wrapper{

    gap:8px;

    padding-top:6px;

}

.velox-filter{

    padding:8px 14px;

    font-size:13px;

}

/*=========================================
    FEATURED DEALS
=========================================*/

.velox-featured-scroll{

    gap:12px;

}

.velox-featured-card{

    min-width:260px;

    height:145px;

    padding:16px;

}

.velox-featured-content{

    width:60%;

}

.velox-featured-content h4{

    font-size:18px;

    margin-bottom:5px;

}

.velox-featured-content h3{

    font-size:22px;

    margin-bottom:10px;

}

.velox-featured-content p{

    font-size:12px;

    margin-bottom:10px;

}

.velox-featured-card img{

    width:105px;

}

/*=========================================
    PROMOTIONS
=========================================*/

.velox-promotions{

    margin-top:10px;

}

.promotion-row{

    gap:12px;

    padding-bottom:10px;

}

.promotion-card{

    flex:0 0 85%;

    height:130px;

    border-radius:16px;

}

.promotion-badge{

    font-size:12px;

    padding:6px 10px;

}

.promotion-status{

    font-size:12px;

    padding:8px 12px;

}

/*=========================================
    BRANDS
=========================================*/

.velox-brands-section{

    padding:12px 0;

}

.brand-row{

    gap:10px;

}

.brand-item{

    flex:0 0 auto;

}

.brand-logo{

    width:60px;

    height:60px;

    border-radius:18px;

}

/*=========================================
    BEST SELLERS
=========================================*/

.velox-products{

    padding-top:12px;

}

.velox-products-row{

    gap:12px;

}

.product-card{

    flex:0 0 135px;

}

.product-image{

    height:105px;

    border-radius:14px;

}

.delivery-time{

    left:8px;

    bottom:8px;

    padding:4px 8px;

    font-size:11px;

}

.product-info{

    margin-top:8px;

}

.product-info h3{

    font-size:17px;

    margin-bottom:2px;

}

.product-info p{

    font-size:12px;

    margin-bottom:2px;

}

.product-info span{

    font-size:12px;

}

/*=========================================
    SCROLLING
=========================================*/

.velox-products-row,
.brand-row,
.promotion-row,
.velox-featured-scroll,
.velox-cuisine-wrapper,
.velox-filter-wrapper{

    scroll-snap-type:x proximity;

    -webkit-overflow-scrolling:touch;

}

/*=========================================
    HIDE SCROLLBARS
=========================================*/

.velox-products-row::-webkit-scrollbar,
.brand-row::-webkit-scrollbar,
.promotion-row::-webkit-scrollbar,
.velox-featured-scroll::-webkit-scrollbar,
.velox-cuisine-wrapper::-webkit-scrollbar,
.velox-filter-wrapper::-webkit-scrollbar{

    display:none;

}


/*==================================================
    PART 3
    RECOMMENDED • NEARBY • ALL STORES
    BOTTOM NAVIGATION
==================================================*/



/*=========================================
    RECOMMENDED
=========================================*/

.velox-recommended{

    padding:12px 0;

}

.recommended-scroll{

    gap:12px;

    padding-bottom:8px;

}

.recommended-card{

    flex:0 0 85%;

}

.recommended-image{

    height:140px;

    border-radius:16px;

}

.recommended-info{

    padding-top:10px;

}

.recommended-info h4{

    font-size:18px;

    margin-bottom:4px;

    line-height:1.2;

}

.recommended-info p{

    font-size:13px;

    line-height:1.4;

}

.badge{

    left:10px;

    bottom:10px;

    font-size:11px;

    padding:6px 10px;

}

.deal{

    top:10px;

    left:10px;

    font-size:11px;

    padding:5px 8px;

}

/*=========================================
    NEARBY
=========================================*/

.nearby-grid{

    grid-template-columns:1fr;

    gap:16px;

}

.nearby-card{

    border-radius:16px;

    overflow:hidden;

    background:#fff;

    box-shadow:0 5px 15px rgba(0,0,0,.06);

}

.nearby-image{

    height:170px;

    margin-bottom:0;

}

.nearby-content{

    padding:14px;

}

.nearby-content h4{

    font-size:18px;

    margin:0 0 3px;

}

.nearby-content p{

    margin:0;

    font-size:13px;

}

.nearby-count{

    padding:7px 12px;

    font-size:12px;

}

/*=========================================
    RESTAURANT FILTER RESULTS
=========================================*/

.merchant-discovery-grid{

    grid-template-columns:repeat(2,1fr);

    gap:12px;

}

.merchant-discovery-grid > .store-card{

    border-radius:16px;

}

.merchant-discovery-grid .store-image{

    height:105px;

}

.merchant-discovery-grid .store-badge{

    top:8px;

    left:8px;

    padding:5px 8px;

    font-size:10px;

}

.merchant-discovery-grid .wishlist-btn{

    width:34px;

    height:34px;

    right:8px;

    top:8px;

}

.merchant-discovery-grid .store-info{

    padding:8px;

}

.merchant-discovery-grid .store-info h4{

    font-size:14px;

    line-height:1.2;

    margin:0 0 2px;

}

.merchant-discovery-grid .store-rating{

    font-size:11px;

    margin:0;

}

.merchant-discovery-grid .store-category{

    font-size:11px;

    margin:4px 0;

}

.merchant-discovery-grid .store-meta{

    flex-direction:column;

    gap:3px;

    font-size:11px;

}


/*=========================================
    SAFE AREA
=========================================*/

body{

    padding-bottom:80px;

}



.cart-badge{

    position:absolute;

    top:2px;

    right:0;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#E53935;

    color:#fff;

    font-size:10px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.notification-dot{

    position:absolute;

    top:8px;

    right:10px;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#E53935;

}

.mobile-address{
     flex:1;              /* Takes all available space */
    min-width:0;         /* Prevents overflow */
    display:flex;
    align-items:center;

    background:#fff;

    padding:8px 15px;

    border-bottom:1px solid #eee;

}

.mobile-address h6{

    margin:0;

    font-size:11px;

    color:#777;

}

.mobile-address strong{

    display:flex;

    align-items:center;

    gap:8px;
     width:100%;
    font-size:17px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    margin-top:2px;

}

.mobile-address i{
    font-size:13px;
    margin-left:4px;
}
.mobile-menu-btn,
.mobile-header-icon{
    flex-shrink:0;
}
.mobile-search{

    background:#fff;

    padding:10px 15px 15px;

}

.mobile-search form{

    position:relative;

}

.search-icon{

    position:absolute;

    left:16px;

    top:50%;

    transform:translateY(-50%);

    color:#999;

}

.mobile-search input{

    width:100%;

    height:46px;

    border:none;

    border-radius:30px;

    background:#f5f5f5;

    padding-left:45px;

    font-size:15px;

    outline:none;

}


/*bottom navigations */
/*==================================================
    BOTTOM NAVIGATION
==================================================*/

.velox-bottom-nav{

 
    position:fixed;

    left:0;

    right:0;

    bottom:0;

    height:70px;

    background:#fff;

    border-top:1px solid #ececec;

    justify-content:space-around;

    align-items:center;

    box-shadow:0 -4px 12px rgba(0,0,0,.08);

    z-index:9999;

    padding-bottom:env(safe-area-inset-bottom);

}

.velox-bottom-nav a{

    flex:1;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:#777;

    font-size:11px;

    font-weight:500;

    transition:.2s;

}

.velox-bottom-nav a i{

    font-size:20px;

    margin-bottom:4px;

}

.velox-bottom-nav a.active{

    color:#E53935;

}

.velox-bottom-nav a:hover{

    color:#E53935;

}

.velox-bottom-nav span{

    line-height:1;

}

.velox-mobile-header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.mobile-header-inner{
    min-height:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 15px;
}

.mobile-address{
    flex:1;
    padding:8px 12px;
    background:#fff;
}

.mobile-search{
    padding:10px 15px 15px;
    background:#fff;
}


.velox-menu-panel{
    position:fixed;
    top:120px;              /* height of your complete header */
    left:-320px;
    width:300px;
    height:calc(100vh - 120px);
    background:#fff;
    overflow-y:auto;
    z-index:10001;
    transition:left .3s ease;
}

.velox-menu-panel.active{
    left:0;
}

.velox-menu-overlay{
    position:fixed;
    top:120px;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    z-index:10000;
}

.velox-menu-overlay.active{
    opacity:1;
    visibility:visible;
}
}



/*=========================================
    SMALL PHONES
=========================================*/

@media (max-width:480px){

    .merchant-discovery-grid{

        grid-template-columns:1fr;

    }

}


/*=========================================
    FLOATING CART
=========================================*/

/*==================================================
    VELOX UX-02 — MOBILE HOMEPAGE DISCOVERY
==================================================*/

@media (max-width:767px){
    body.route-home main.velox-content [data-home-section] .header-title{
        font-size:22px;
        letter-spacing:-.2px;
    }

    body.route-home main.velox-content [data-home-section]:not([data-home-section="best-sellers"]):not([data-home-section="recommended"]) .promo-actions,
    body.route-home main.velox-content [data-home-section="restaurants"] .restaurant-actions{
        display:none;
    }

    body.route-home main.velox-content [data-home-section="restaurants"]{
        margin-top:8px;
        padding:14px 0 8px;
    }

    body.route-home main.velox-content [data-home-section="restaurants"] .home-restaurants-header{
        margin-bottom:10px !important;
    }

    body.route-home main.velox-content [data-home-section="restaurants"] .velox-cuisine-wrapper{
        gap:12px;
        margin-right:-8px;
        padding:2px 16px 12px 0;
    }

    body.route-home main.velox-content [data-home-section="popular-brands"] .brand-row{
        gap:12px;
        margin-right:-8px;
        padding:3px 16px 12px 0;
        overscroll-behavior-inline:contain;
        touch-action:pan-x;
    }

    body.route-home main.velox-content [data-home-section="popular-brands"] .brand-item{
        flex-basis:80px;
    }

    body.route-home main.velox-content [data-home-section="popular-brands"] .brand-logo{
        width:72px;
        height:72px;
        padding:10px;
        border-radius:16px;
    }

    body.route-home main.velox-content [data-home-section="restaurants"] .velox-cuisine-item{
        min-width:68px;
    }

    body.route-home main.velox-content [data-home-section="restaurants"] .velox-cuisine-icon{
        width:56px;
        height:56px;
    }

    body.route-home main.velox-content [data-home-section="restaurants"] .velox-cuisine-icon img{
        width:38px;
        height:38px;
    }

    body.route-home main.velox-content .restaurant-filter-row{
        gap:8px;
        margin-right:-8px;
        padding:6px 16px 4px 0;
    }

    body.route-home main.velox-content .restaurant-filter-row .velox-filter{
        min-height:40px;
        padding:8px 14px;
        font-size:13px;
    }

    body.route-home main.velox-content .restaurant-filter-results{
        margin-top:14px;
    }

    body.route-home main.velox-content [data-home-section="promotions"]{
        padding-top:12px;
        padding-bottom:6px;
    }

    body.route-home main.velox-content [data-home-section="promotions"] .promotion-row{
        gap:12px;
        margin-right:-8px;
        padding:3px 16px 10px 0;
        overscroll-behavior-inline:contain;
        touch-action:pan-x;
    }

    body.route-home main.velox-content [data-home-section="promotions"] .promotion-card{
        flex:0 0 84%;
        min-width:0;
        max-width:330px;
        height:130px;
        border-radius:16px;
    }

    body.route-home main.velox-content [data-home-section="promotions"] .promotion-badge{
        top:10px;
        left:10px;
        padding:6px 10px;
        font-size:12px;
    }

    body.route-home main.velox-content [data-home-section="promotions"] .promotion-card-copy{
        right:10px;
        bottom:8px;
        left:10px;
        gap:8px;
    }

    body.route-home main.velox-content [data-home-section="promotions"] .promotion-card-copy strong{
        font-size:13px;
    }

}

@media (max-width:420px){
    body.route-home main.velox-content [data-home-section="promotions"] .promotion-card{
        max-width:none;
    }
}

@media (max-width:767px){
    body.route-home .local-deals-section .recommended-header{align-items:flex-start;flex-wrap:wrap}
    body.route-home .local-deals-actions{width:100%;justify-content:space-between}
    body.route-home .local-deals-location{padding:7px 11px}
    body.route-home [data-home-section="shops-near-you"] .nearby-shops-row{gap:8px;margin-right:-8px;padding:2px 16px 6px 0;overscroll-behavior-inline:contain;touch-action:pan-x}
    body.route-home [data-home-section="shops-near-you"] .nearby-shop-item{flex-basis:64px}
    body.route-home [data-home-section="shops-near-you"] .nearby-shop-logo{width:64px;height:64px;padding:8px;border-radius:15px}
}

@media (prefers-reduced-motion:reduce){
    body.route-home main.velox-content [data-home-section] :where(a,button,img){
        transition:none;
    }
}