/*==================================================
    TIPA MART
    HOMEPAGE NAVIGATION + LAYOUT
==================================================*/


/*==================================================
    MAIN NAVIGATION
==================================================*/

.homepage__navigation{

    width:100%;

    background:#082C6C;

    position:relative;

    z-index:900;

}


/*==================================================
    NAVIGATION ROW
==================================================*/

.homepage__top{

    display:grid;

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

    min-height:56px;

}


/*==================================================
    SHOP BY CATEGORY WRAPPER
==================================================*/

.homepage__category-wrapper{

    position:relative;

    width:100%;

    min-width:0;

    z-index:5000;

}


/*==================================================
    SHOP BY CATEGORY BUTTON
==================================================*/

.homepage__category-nav{

    width:100%;

    height:56px;

    min-height:56px;

    padding:0 20px;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:10px;

    border:none;

    outline:none;

    background:#F5B51D;

    color:#082C6C;

    font-family:inherit;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    white-space:nowrap;

    text-align:left;

}


/*==================================================
    CATEGORY MENU ICON
==================================================*/

.homepage__category-nav > i:first-child{

    flex:0 0 auto;

    margin-right:4px;

    font-size:18px;

}


/*==================================================
    CATEGORY DOWN ARROW
==================================================*/

.category-toggle-icon{

    flex:0 0 auto;

    margin-left:auto;

    margin-right:0;

    font-size:10px;

    transition:transform .25s ease;

}


/*==================================================
    CATEGORY BUTTON HOVER
==================================================*/

.homepage__category-nav:hover{

    background:#F5B51D;

    color:#082C6C;

}


/*==================================================
    CATEGORY BUTTON FOCUS
==================================================*/

.homepage__category-nav:focus{

    outline:none;

    box-shadow:none;

}


/*==================================================
    MAIN DROPDOWN OPEN STATE
==================================================*/

.homepage__category-wrapper.open
.category-toggle-icon{

    transform:rotate(180deg);

}


/*==================================================
    MAIN CATEGORY DROPDOWN
==================================================*/

.homepage__category-dropdown{

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    min-width:280px;

    background:#FFFFFF;

    border:1px solid #E5E5E5;

    border-top:3px solid #F5B51D;

    box-shadow:0 8px 25px rgba(0,0,0,.12);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:translateY(8px);

    transition:

        opacity .25s ease,

        visibility .25s ease,

        transform .25s ease;

    z-index:5000;

}


/*==================================================
    MAIN DROPDOWN OPEN
==================================================*/

.homepage__category-wrapper.open
.category-dropdown{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateY(0);

}


/*
==================================================
IMPORTANT
==================================================

The actual class is:

.homepage__category-dropdown

So keep this selector as the active
open-state selector.
*/

.homepage__category-wrapper.open
.homepage__category-dropdown{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateY(0);

}


/*==================================================
    MAIN CATEGORY MENU
==================================================*/

.homepage__category-menu{

    list-style:none;

    margin:0;

    padding:8px 0;

}


/*==================================================
    MAIN CATEGORY ITEM
==================================================*/

.homepage__category-menu > li{

    position:relative;

    margin:0;

    padding:0;

    border-bottom:1px solid #F0F0F0;

}


/*==================================================
    LAST CATEGORY
==================================================*/

.homepage__category-menu > li:last-child{

    border-bottom:none;

}


/*==================================================
    PARENT CATEGORY LINK
==================================================*/

.homepage__category-menu > li > a{

    min-height:48px;

    padding:0 16px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    color:#17305B;

    background:#FFFFFF;

    text-decoration:none;

    font-size:13px;

    font-weight:600;

    white-space:nowrap;

    transition:

        background .2s ease,

        color .2s ease;

}


/*==================================================
    CATEGORY LINK CONTENT
==================================================*/

.homepage__category-menu > li > a > span{

    display:flex;

    align-items:center;

    gap:12px;

    min-width:0;

}


/*==================================================
    CATEGORY ICON
==================================================*/

.homepage__category-menu > li > a > span > i{

    width:20px;

    min-width:20px;

    flex:0 0 20px;

    text-align:center;

    color:#082C6C;

    font-size:14px;

}


/*==================================================
    SUBCATEGORY ARROW
==================================================*/

.homepage__category-menu > li > a > i{

    flex:0 0 auto;

    margin-left:auto;

    color:#999999;

    font-size:10px;

    transition:

        color .2s ease,

        transform .2s ease;

}


/*==================================================
    PARENT HOVER
==================================================*/

.homepage__category-menu > li:hover > a{

    background:#F7F8FA;

    color:#082C6C;

}


.homepage__category-menu > li:hover > a > span > i{

    color:#F5B51D;

}


.homepage__category-menu > li:hover > a > i{

    color:#F5B51D;

    transform:translateX(2px);

}


/*==================================================
    SUBCATEGORY FLY-OUT
==================================================*/

.homepage__category-submenu{

    position:absolute;

    top:-1px;

    left:100%;

    width:250px;

    min-width:250px;

    list-style:none;

    margin:0;

    padding:8px 0;

    background:#FFFFFF;

    border:1px solid #E5E5E5;

    box-shadow:8px 8px 25px rgba(0,0,0,.12);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:translateX(8px);

    transition:

        opacity .2s ease,

        visibility .2s ease,

        transform .2s ease;

    z-index:6000;

}


/*==================================================
    SHOW FLY-OUT ON HOVER
==================================================*/

.homepage__category-menu > li:hover
> .homepage__category-submenu{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateX(0);

}


/*==================================================
    SUBCATEGORY ITEM
==================================================*/

.homepage__category-submenu li{

    position:relative;

    margin:0;

    padding:0;

    border-bottom:1px solid #EEEEEE;

}


.homepage__category-submenu li:last-child{

    border-bottom:none;

}


/*==================================================
    SUBCATEGORY LINK
==================================================*/

.homepage__category-submenu a{

    width:100%;

    min-height:44px;

    padding:0 16px;

    display:flex;

    align-items:center;

    gap:10px;

    color:#555555;

    background:#FFFFFF;

    text-decoration:none;

    font-size:12px;

    font-weight:500;

    transition:

        background .2s ease,

        color .2s ease;

}


/*==================================================
    SUBCATEGORY ICON
==================================================*/

.homepage__category-submenu a i{

    width:14px;

    min-width:14px;

    color:#999999;

    font-size:9px;

    transition:color .2s ease;

}


/*==================================================
    SUBCATEGORY HOVER
==================================================*/

.homepage__category-submenu a:hover{

    background:#FFF8DF;

    color:#082C6C;

}


.homepage__category-submenu a:hover i{

    color:#F5B51D;

}


/*==================================================
    EMPTY CATEGORY
==================================================*/

.homepage__category-empty{

    padding:20px;

    color:#888888;

    font-size:13px;

    text-align:center;

}


/*==================================================
    DESKTOP NAVIGATION
==================================================*/

.homepage__nav{

    display:flex;

    align-items:center;

    min-width:0;

}


.homepage__menu{

    width:100%;

    min-height:56px;

    display:flex;

    align-items:center;

    gap:30px;

    list-style:none;

    margin:0;

    padding:0 25px;

}


.homepage__menu li{

    position:relative;

    flex-shrink:0;

}


.homepage__menu a{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:56px;

    color:#FFFFFF;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    white-space:nowrap;

    transition:color .25s ease;

}


.homepage__menu a:hover{

    color:#F5B51D;

}


.homepage__menu a.active{

    color:#F5B51D;

}


.homepage__menu a.active::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    width:70%;

    height:3px;

    margin:auto;

    background:#F5B51D;

    border-radius:3px 3px 0 0;

}


/*==================================================
    HOMEPAGE MAIN AREA
==================================================*/

.homepage{

    padding:0 0 40px;

}


.homepage__content{

    display:grid;

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

    column-gap:20px;

    align-items:stretch;

}


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

.homepage__sidebar{

    display:flex;

    flex-direction:column;

    min-width:0;

}


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

.homepage__hero-wrapper{

    min-width:0;

    padding-top:8px;

}


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

.homepage__hero{

    width:100%;

    min-width:0;

}


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

@media (max-width:1200px){

    .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:13px;

    }


    .homepage__content{

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

        column-gap:16px;

    }


    .homepage__category-submenu{

        width:240px;

        min-width:240px;

    }

}


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

@media (max-width:992px){

    .homepage__top{

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

    }


    .homepage__category-nav{

        padding:0 15px;

        font-size:14px;

    }


    .homepage__category-nav > i:first-child{

        margin-right:0;

        font-size:16px;

    }


    .homepage__menu{

        gap:15px;

        padding:0 15px;

    }


    .homepage__menu a{

        font-size:12px;

    }


    .homepage__content{

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

        column-gap:15px;

    }


    .homepage__category-submenu{

        width:220px;

        min-width:220px;

    }

}


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

@media (max-width:768px){

    .homepage__navigation{

        display:none;

    }


    .homepage__sidebar{

        display:none;

    }


    .homepage{

        padding:0 0 30px;

    }


    .homepage__content{

        display:block;

        width:100%;

    }


    .homepage__hero-wrapper{

        width:100%;

        padding-top:0;

    }


    .homepage__hero{

        width:100%;

    }

}


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

@media (max-width:480px){

    .homepage{

        padding-bottom:25px;

    }

}

/*==================================================
    FLOATING WHATSAPP BUTTON
==================================================*/

.floating-whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    display:flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    z-index:9999;

}


/*==================================================
    WHATSAPP ICON
==================================================*/

.floating-whatsapp__icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#25D366;

    color:#FFFFFF;

    font-size:30px;

    box-shadow:
        0 5px 18px rgba(0,0,0,.20);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


/*==================================================
    HOVER
==================================================*/

.floating-whatsapp:hover
.floating-whatsapp__icon{

    transform:scale(1.08);

    box-shadow:
        0 7px 22px rgba(0,0,0,.28);

}


/*==================================================
    LABEL
==================================================*/

.floating-whatsapp__label{

    padding:9px 14px;

    border-radius:6px;

    background:#082C6C;

    color:#FFFFFF;

    font-size:13px;

    font-weight:600;

    white-space:nowrap;

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

    opacity:0;

    visibility:hidden;

    transform:translateX(8px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;

}


/*==================================================
    SHOW LABEL ON HOVER
==================================================*/

.floating-whatsapp:hover
.floating-whatsapp__label{

    opacity:1;

    visibility:visible;

    transform:translateX(0);

}


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

@media (max-width:768px){

    .floating-whatsapp{

        right:18px;

        bottom:18px;

    }


    .floating-whatsapp__icon{

        width:54px;

        height:54px;

        font-size:28px;

    }


    .floating-whatsapp__label{

        display:none;

    }

}


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

@media (max-width:480px){

    .floating-whatsapp{

        right:15px;

        bottom:15px;

    }


    .floating-whatsapp__icon{

        width:50px;

        height:50px;

        font-size:26px;

    }

}