/*==================================================
    TIPA MART — RESPONSIVE DESIGN
    Grogin Home 1 Inspired Layout
==================================================*/


/*==================================================
    1. LARGE TABLET / SMALL DESKTOP
==================================================*/

@media (max-width:1200px){

    /*----------------------------------------------
        HEADER
    ----------------------------------------------*/

    .header__container{

        height:auto;

        padding:18px 0;

        flex-wrap:wrap;

        gap:18px;

    }

    .header__logo{

        flex:0 0 220px;

    }

    .header__logo img{

        width:200px;

    }

    .header__search{

        order:3;

        flex:1 1 100%;

        width:100%;

        min-width:0;

        margin:0;

    }


    /*----------------------------------------------
        NAVIGATION
    ----------------------------------------------*/

    .homepage__top{

        grid-template-columns:240px minmax(0,1fr);

    }

    .homepage__category-nav{

        padding:0 18px;

        font-size:16px;

    }

    .homepage__menu{

        gap:22px;

        padding:0 20px;

    }

    .homepage__menu a{

        font-size:14px;

    }


    /*----------------------------------------------
        HERO
    ----------------------------------------------*/

    .hero{

        grid-template-columns:55% 45%;

    }

    .hero__content{

        padding:35px 40px;

    }

    .hero__title{

        font-size:42px;

    }

    .hero__description{

        font-size:16px;

    }

    .hero__image img{

        width:115%;

        transform:translateX(-20px);

    }

}


/*==================================================
    2. TABLET
==================================================*/

@media (max-width:992px){

    /*----------------------------------------------
        HEADER
    ----------------------------------------------*/

    .header__container{

        justify-content:center;

    }

    .header__logo{

        flex:0 0 auto;

    }

    .header__actions{

        margin-left:auto;

    }

    .header__search{

        order:3;

        flex:0 0 100%;

        width:100%;

        margin:0;

    }


    /*----------------------------------------------
        NAVIGATION
    ----------------------------------------------*/

    .homepage__top{

        grid-template-columns:210px minmax(0,1fr);

    }

    .homepage__category-nav{

        padding:0 14px;

        font-size:14px;

    }

    .homepage__category-nav i{

        margin-right:9px;

        font-size:16px;

    }

    .homepage__menu{

        gap:16px;

        padding:0 15px;

    }

    .homepage__menu a{

        font-size:13px;

    }


    /*----------------------------------------------
        HOMEPAGE CONTENT
    ----------------------------------------------*/

    .homepage__content{

        grid-template-columns:1fr;

        row-gap:20px;

    }

    .homepage__sidebar{

        order:1;

    }

    .homepage__hero-wrapper{

        order:2;

    }


    /*----------------------------------------------
        HERO
    ----------------------------------------------*/

    .hero{

        min-height:420px;

    }

    .hero__content{

        padding:40px;

        text-align:center;

    }

    .hero__description{

        margin-left:auto;

        margin-right:auto;

    }

    .hero__buttons{

        justify-content:center;

    }

    .hero__image{

        display:none;

    }

}


/*==================================================
    3. MOBILE — 768px
==================================================*/

@media (max-width:768px){

    /*----------------------------------------------
        TOP BAR
    ----------------------------------------------*/

    .topbar{

        height:auto;

        padding:10px 0;

    }

    .topbar__container{

        height:auto;

        flex-wrap:wrap;

        gap:8px 20px;

        justify-content:center;

        text-align:center;

    }

    .topbar__left,
    .topbar__right{

        width:100%;

        justify-content:center;

        flex-wrap:wrap;

    }

    .topbar__right{

        gap:8px 18px;

    }

    .topbar__link{

        font-size:13px !important;

    }


    /*----------------------------------------------
        HEADER
    ----------------------------------------------*/

    .header{

        position:relative;

    }

    .header__container{

        width:100%;

        flex-direction:column;

        align-items:center;

        gap:14px;

        padding:15px 15px 18px;

    }

    .header__logo{

        width:100%;

        text-align:center;

    }

    .header__logo img{

        width:200px;

        max-width:100%;

        margin:0 auto;

    }

    .header__tagline{

        margin-left:0;

        text-align:center;

    }


    /*----------------------------------------------
        SEARCH
    ----------------------------------------------*/

    .header__search{

        width:100%;

        margin:0;

    }

    .header__search-form{

        width:100%;

        height:auto;

        display:grid;

        grid-template-columns:1fr auto;

        gap:8px;

        border:none;

        overflow:visible;

    }

    .header__search-input{

        grid-column:1 / -1;

        width:100%;

        height:46px;

        border:2px solid #E5E5E5;

        border-radius:6px;

        padding:0 14px;

    }

    .header__search-category{

        width:100%;

        height:46px;

        border:2px solid #E5E5E5;

        border-radius:6px;

        padding:0 12px;

    }

    .header__search-button{

        width:110px;

        height:46px;

        border-radius:6px;

    }


    /*----------------------------------------------
        HEADER ACTIONS
    ----------------------------------------------*/

    .header__actions{

        width:100%;

        justify-content:center;

        gap:22px;

        margin:0;

    }

    .header__action{

        justify-content:center;

    }

    .header__icon{

        width:38px;

        height:38px;

        font-size:27px;

        margin-right:7px;

    }

    .header__title{

        font-size:13px;

    }

    .header__subtitle{

        font-size:12px;

    }


    /*----------------------------------------------
        HOMEPAGE CONTENT
    ----------------------------------------------*/

    .homepage{

        padding-bottom:25px;

    }

    .homepage__content{

        display:block;

    }

    .homepage__sidebar{

        display:none;

    }

    .homepage__hero-wrapper{

        width:100%;

        padding-top:0;

    }


    /*----------------------------------------------
        HERO
    ----------------------------------------------*/

    .hero-slider{

        min-height:420px;

    }

    .hero{

        display:flex;

        flex-direction:column;

        min-height:620px;

        border-radius:8px;

    }

    .hero__content{

        width:100%;

        padding:40px 25px 20px;

        text-align:center;

    }

    .hero__badge{

        font-size:13px;

    }

    .hero__title{

        font-size:34px;

        line-height:1.15;

        letter-spacing:-.5px;

    }

    .hero__description{

        max-width:100%;

        font-size:15px;

        line-height:1.6;

        margin-left:auto;

        margin-right:auto;

        margin-bottom:20px;

    }

    .hero__buttons{

        justify-content:center;

        flex-wrap:wrap;

        gap:10px;

    }

    .hero__btn{

        min-width:145px;

        height:48px;

        padding:0 18px;

        font-size:14px;

    }

    .hero__image{

        display:flex;

        width:100%;

        height:auto;

        min-height:250px;

        padding:10px 20px 35px;

        justify-content:center;

        align-items:center;

    }

    .hero__image img{

        width:100%;

        max-width:430px;

        transform:none;

        animation:heroFloatMobile 5s ease-in-out infinite;

    }

    @keyframes heroFloatMobile{

        0%{

            transform:translateY(0);

        }

        50%{

            transform:translateY(-6px);

        }

        100%{

            transform:translateY(0);

        }

    }


    /*----------------------------------------------
        SLIDER ARROWS
    ----------------------------------------------*/

    .slider-prev,
    .slider-next{

        width:40px;

        height:40px;

        font-size:17px;

        opacity:1;

        visibility:visible;

    }

    .slider-prev{

        left:10px;

    }

    .slider-next{

        right:10px;

    }


    /*----------------------------------------------
        SLIDER DOTS
    ----------------------------------------------*/

    .slider-dots{

        bottom:12px;

        gap:9px;

    }

    .slider-dot{

        width:10px;

        height:10px;

    }


    /*----------------------------------------------
        GENERAL CONTENT
    ----------------------------------------------*/

    .content{

        padding:20px 15px;

    }

    .page-actions{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

    .page-toolbar{

        flex-direction:column;

        align-items:stretch;

    }

    .page-toolbar input,
    .page-toolbar select{

        width:100%;

    }

    .page-toolbar .toolbar-count{

        margin-left:0;

    }


    /*----------------------------------------------
        FORMS
    ----------------------------------------------*/

    .form-grid{

        grid-template-columns:1fr;

    }


}


/*==================================================
    4. SMALL MOBILE — 576px
==================================================*/

@media (max-width:576px){

    /*----------------------------------------------
        HEADER
    ----------------------------------------------*/

    .header__container{

        padding:14px 12px 16px;

        gap:13px;

    }

    .header__logo img{

        width:190px;

    }

    .header__actions{

        gap:16px;

    }

    .header__icon{

        width:34px;

        height:34px;

        font-size:25px;

        margin-right:5px;

    }

    .header__title{

        font-size:12px;

    }

    .header__subtitle{

        font-size:11px;

    }


    /*----------------------------------------------
        SEARCH
    ----------------------------------------------*/

    .header__search-form{

        grid-template-columns:1fr 95px;

    }

    .header__search-category{

        font-size:13px;

    }

    .header__search-button{

        width:95px;

        font-size:13px;

    }

    .header__search-button span{

        display:none;

    }


    /*----------------------------------------------
        HERO
    ----------------------------------------------*/

    .hero{

        min-height:580px;

    }

    .hero__content{

        padding:35px 20px 15px;

    }

    .hero__title{

        font-size:29px;

    }

    .hero__description{

        font-size:14px;

    }

    .hero__buttons{

        flex-direction:column;

        align-items:center;

    }

    .hero__btn{

        width:100%;

        max-width:240px;

    }

    .hero__image{

        min-height:220px;

        padding:5px 15px 30px;

    }


    /*----------------------------------------------
        SLIDER
    ----------------------------------------------*/

    .slider-prev,
    .slider-next{

        width:36px;

        height:36px;

        font-size:15px;

    }

    .slider-prev{

        left:8px;

    }

    .slider-next{

        right:8px;

    }

}


/*==================================================
    5. VERY SMALL MOBILE — 400px
==================================================*/

@media (max-width:400px){

    .header__logo img{

        width:175px;

    }

    .header__actions{

        gap:12px;

    }

    .header__icon{

        width:32px;

        height:32px;

        font-size:23px;

    }

    .header__title{

        font-size:11px;

    }

    .header__subtitle{

        font-size:10px;

    }


    /*----------------------------------------------
        SEARCH
    ----------------------------------------------*/

    .header__search-category{

        font-size:12px;

        padding:0 8px;

    }

    .header__search-button{

        width:85px;

    }


    /*----------------------------------------------
        HERO
    ----------------------------------------------*/

    .hero{

        min-height:560px;

    }

    .hero__content{

        padding:30px 15px 10px;

    }

    .hero__title{

        font-size:27px;

    }

    .hero__description{

        font-size:13px;

    }

    .hero__image{

        min-height:200px;

        padding-bottom:25px;

    }

}


/*==================================================
    6. TABLE RESPONSIVENESS
==================================================*/

@media (max-width:900px){

    .admin-table-wrapper,
    .table-responsive,
    .products-table-wrapper{

        width:100%;

        overflow-x:auto;

        -webkit-overflow-scrolling:touch;

    }

    .admin-table,
    .products-table{

        min-width:700px;

    }

}


/*==================================================
    7. PRODUCT FILTERS
==================================================*/

@media (max-width:1100px){

    .products-filters{

        grid-template-columns:1fr;

    }

}


/*==================================================
    8. PRODUCT CARD HEADER
==================================================*/

@media (max-width:768px){

    .products-card__header{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

}


/*==================================================
    END
==================================================*/