/*==================================================
    TIPA MART
    SHOP PROMOTIONAL HEADER
==================================================*/


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

.shop-header{

    position:relative;

    width:100%;

    height:115px;

    overflow:hidden;

    background:#082C6C;

}


/*==================================================
    BANNER IMAGE
==================================================*/

.shop-header__image{

    position:relative;

    width:100%;

    height:115px;

    overflow:hidden;

}


.shop-header__image img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

}


/*==================================================
    OVERLAY
==================================================*/

.shop-header__overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:rgba(8,44,108,.68);

}


/*==================================================
    PAGE CONTAINER
==================================================*/

.shop-header__image .container{

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    z-index:2;

    height:100%;

}


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

.shop-header__content{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}


/*==================================================
    PROMOTIONAL TEXT
==================================================*/

.shop-header__text{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:center;

    gap:3px;

    max-width:650px;

    color:#FFFFFF;

}


/*==================================================
    TITLE
==================================================*/

.shop-header__text h1{

    margin:0;

    color:#FFFFFF;

    font-size:23px;

    font-weight:700;

    line-height:1.2;

}


/*==================================================
    DESCRIPTION
==================================================*/

.shop-header__text p{

    margin:0;

    color:#FFFFFF;

    font-size:13px;

    line-height:1.3;

}


/*==================================================
    SHOP NOW BUTTON
==================================================*/

.shop-header__button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:30px;

    padding:0 16px;

    margin-top:5px;

    border-radius:5px;

    background:#F5B51D;

    color:#082C6C;

    font-size:12px;

    font-weight:700;

    text-decoration:none;

    white-space:nowrap;

    transition:

        background-color .25s ease,

        color .25s ease,

        transform .2s ease;

}


.shop-header__button:hover{

    background:#FFFFFF;

    color:#082C6C;

    transform:translateY(-1px);

}


/*==================================================
    BREADCRUMB
==================================================*/

.shop-header__breadcrumb{

    display:flex;

    align-items:center;

    gap:9px;

    flex-shrink:0;

    padding:7px 11px;

    border-radius:5px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(5px);

    -webkit-backdrop-filter:blur(5px);

    font-size:12px;

    white-space:nowrap;

}


.shop-header__breadcrumb a{

    color:#FFFFFF;

    text-decoration:none;

    transition:color .25s ease;

}


.shop-header__breadcrumb a:hover{

    color:#F5B51D;

}


.shop-header__breadcrumb i{

    color:rgba(255,255,255,.7);

    font-size:9px;

}


.shop-header__breadcrumb .current{

    color:#F5B51D;

    font-weight:700;

}


/*==================================================
    TABLET
==================================================*/

@media (max-width:992px){

    .shop-header,
    .shop-header__image{

        height:110px;

    }


    .shop-header__text h1{

        font-size:21px;

    }


    .shop-header__text p{

        font-size:12px;

    }


    .shop-header__breadcrumb{

        font-size:11px;

        padding:6px 10px;

    }

}


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

@media (max-width:768px){

    .shop-header,
    .shop-header__image{

        height:125px;

    }


    .shop-header__content{

        justify-content:center;

    }


    .shop-header__text{

        width:100%;

        max-width:100%;

        align-items:flex-start;

    }


    .shop-header__text h1{

        font-size:19px;

    }


    .shop-header__text p{

        font-size:11px;

    }


    .shop-header__breadcrumb{

        display:none;

    }

}


/*==================================================
    SMALL MOBILE
==================================================*/

@media (max-width:576px){

    .shop-header,
    .shop-header__image{

        height:120px;

    }


    .shop-header__text h1{

        font-size:17px;

    }


    .shop-header__text p{

        font-size:10px;

    }


    .shop-header__button{

        height:28px;

        padding:0 14px;

        font-size:11px;

    }

}


/*==================================================
    VERY SMALL MOBILE
==================================================*/

@media (max-width:400px){

    .shop-header,
    .shop-header__image{

        height:115px;

    }


    .shop-header__text h1{

        font-size:16px;

    }


    .shop-header__text p{

        font-size:10px;

    }

}