/*
|--------------------------------------------------------------------------
| ShopCore Main Store Footer
|--------------------------------------------------------------------------
*/

:root{
    --sc-footer-orange:#ff5a00;
    --sc-footer-orange-dark:#e95000;
    --sc-footer-orange-soft:#fff4ee;
    --sc-footer-white:#ffffff;
    --sc-footer-text:#17233b;
    --sc-footer-soft:#64748b;
    --sc-footer-muted:#94a3b8;
    --sc-footer-border:#e7edf4;
    --sc-footer-surface:#f8fafc;
    --sc-footer-container:1180px;
}

/*
|--------------------------------------------------------------------------
| Base Footer
|--------------------------------------------------------------------------
*/

.sc-footer{
    width:100%;
    flex:0 0 auto;
    margin-top:auto;
    font-family:inherit;
}

.sc-mobile-bottom-nav{
    display:none;
}

/*
|--------------------------------------------------------------------------
| Never Show Mobile Powered Badge
|--------------------------------------------------------------------------
*/

.sc-mobile-powered{
    display:none !important;
}

/*
|--------------------------------------------------------------------------
| Desktop Footer
|--------------------------------------------------------------------------
*/

.sc-footer-desktop{
    width:100%;
    background:var(--sc-footer-surface);
    border-top:1px solid var(--sc-footer-border);
}

.sc-footer-container{
    width:min(calc(100% - 56px),var(--sc-footer-container));
    margin:0 auto;
}

/*
|--------------------------------------------------------------------------
| Main Footer Grid
|--------------------------------------------------------------------------
*/

.sc-footer-main{
    display:grid;
    grid-template-columns:minmax(280px,1.45fr) minmax(140px,.65fr) minmax(250px,1fr);
    align-items:start;
    gap:64px;
    padding:48px 0 38px;
}

/*
|--------------------------------------------------------------------------
| Brand
|--------------------------------------------------------------------------
*/

.sc-footer-brand{
    min-width:0;
}

.sc-footer-logo-link{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    text-decoration:none;
}

.sc-footer-logo{
    display:block;
    width:165px;
    height:auto;
    max-width:100%;
    object-fit:contain;
    object-position:left center;
}

.sc-footer-description{
    width:100%;
    max-width:400px;
    margin:15px 0 0;
    color:var(--sc-footer-soft);
    font-size:12px;
    font-weight:500;
    line-height:1.75;
}

/*
|--------------------------------------------------------------------------
| Footer Columns
|--------------------------------------------------------------------------
*/

.sc-footer-column{
    min-width:0;
}

.sc-footer-title{
    margin:0 0 17px;
    color:var(--sc-footer-text);
    font-size:12px;
    font-weight:800;
    line-height:1.2;
}

.sc-footer-links{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
}

.sc-footer-links a{
    display:inline-flex;
    align-items:center;
    color:var(--sc-footer-soft);
    font-size:11.5px;
    font-weight:600;
    line-height:1.35;
    text-decoration:none;
    transition:color .18s ease;
}

.sc-footer-links a:hover{
    color:var(--sc-footer-orange);
}

/*
|--------------------------------------------------------------------------
| Support
|--------------------------------------------------------------------------
*/

.sc-footer-support-list{
    display:flex;
    flex-direction:column;
    gap:13px;
}

.sc-footer-support-item{
    min-width:0;
    display:flex;
    align-items:center;
    gap:11px;
    color:var(--sc-footer-text);
    text-decoration:none;
}

.sc-footer-support-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:var(--sc-footer-orange-soft);
    color:var(--sc-footer-orange);
}

.sc-footer-support-icon svg{
    display:block;
    width:17px;
    height:17px;
    fill:currentColor;
}

.sc-footer-support-item > span:last-child{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.sc-footer-support-item strong{
    display:block;
    overflow:hidden;
    color:var(--sc-footer-text);
    font-size:11px;
    font-weight:750;
    line-height:1.25;
    text-overflow:ellipsis;
    white-space:nowrap;
    transition:color .18s ease;
}

.sc-footer-support-item small{
    display:block;
    overflow:hidden;
    color:var(--sc-footer-soft);
    font-size:10px;
    font-weight:500;
    line-height:1.3;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.sc-footer-support-item:hover strong{
    color:var(--sc-footer-orange);
}

/*
|--------------------------------------------------------------------------
| Desktop Footer Bottom
|--------------------------------------------------------------------------
*/

.sc-footer-bottom{
    min-height:64px;
    padding:15px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid var(--sc-footer-border);
}

.sc-footer-bottom p{
    margin:0;
    color:var(--sc-footer-soft);
    font-size:10.5px;
    font-weight:500;
    line-height:1.4;
}

.sc-footer-powered{
    text-align:right;
}

.sc-footer-powered strong{
    color:var(--sc-footer-orange);
    font-weight:800;
}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width:900px) and (min-width:621px){

    .sc-footer-container{
        width:calc(100% - 44px);
    }

    .sc-footer-main{
        grid-template-columns:1.2fr .65fr 1fr;
        gap:34px;
        padding:40px 0 32px;
    }

    .sc-footer-logo{
        width:150px;
    }

    .sc-footer-description{
        max-width:320px;
        font-size:11px;
    }

    .sc-footer-bottom{
        min-height:60px;
    }
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width:620px){

    /*
    |--------------------------------------------------------------------------
    | Hide Normal Footer
    |--------------------------------------------------------------------------
    */

    .sc-footer-desktop{
        display:none;
    }

    .sc-mobile-powered{
        display:none !important;
    }

    /*
    |--------------------------------------------------------------------------
    | iPhone Glass Bottom Navigation
    |--------------------------------------------------------------------------
    */

    .sc-mobile-bottom-nav{
        position:fixed;
        z-index:1500;
        left:50%;
        bottom:calc(10px + env(safe-area-inset-bottom));
        width:min(calc(100% - 20px),480px);
        min-height:68px;
        margin:0;
        padding:7px 8px;
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        align-items:center;
        gap:2px;
        overflow:hidden;
        border:1px solid rgba(255,255,255,.72);
        border-radius:22px;
        background:rgba(255,255,255,.72);
        box-shadow:
            0 14px 45px rgba(15,23,42,.16),
            0 2px 8px rgba(15,23,42,.06),
            inset 0 1px 0 rgba(255,255,255,.85);
        transform:translateX(-50%);
        backdrop-filter:blur(24px) saturate(180%);
        -webkit-backdrop-filter:blur(24px) saturate(180%);
    }

    /*
    |--------------------------------------------------------------------------
    | Glass Highlight
    |--------------------------------------------------------------------------
    */

    .sc-mobile-bottom-nav::before{
        content:"";
        position:absolute;
        inset:0;
        z-index:-1;
        pointer-events:none;
        border-radius:inherit;
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.42) 0%,
                rgba(255,255,255,.12) 45%,
                rgba(255,255,255,.20) 100%
            );
    }

    /*
    |--------------------------------------------------------------------------
    | Mobile Navigation Items
    |--------------------------------------------------------------------------
    */

    .sc-mobile-nav-item{
        position:relative;
        z-index:1;
        min-width:0;
        height:53px;
        margin:0;
        padding:4px 2px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        border:0;
        outline:0;
        border-radius:12px;
        background:transparent !important;
        color:var(--sc-footer-soft);
        text-decoration:none !important;
        box-shadow:none;
        -webkit-tap-highlight-color:transparent;
        transition:color .16s ease,transform .16s ease,opacity .16s ease;
    }

    .sc-mobile-nav-item:hover{
        background:transparent !important;
        color:var(--sc-footer-soft);
        text-decoration:none !important;
    }

    .sc-mobile-nav-item:focus,
    .sc-mobile-nav-item:focus-visible{
        background:transparent !important;
        text-decoration:none !important;
        outline:none;
    }

    .sc-mobile-nav-item:active{
        background:transparent !important;
        transform:scale(.94);
        opacity:.82;
    }

    /*
    |--------------------------------------------------------------------------
    | Active Item - Icon + Text Only
    |--------------------------------------------------------------------------
    */

    .sc-mobile-nav-item.is-active{
        background:transparent !important;
        color:var(--sc-footer-orange);
        box-shadow:none;
    }

    .sc-mobile-nav-item.is-active::before,
    .sc-mobile-nav-item.is-active::after{
        display:none !important;
        content:none !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Mobile Icons
    |--------------------------------------------------------------------------
    */

    .sc-mobile-nav-icon{
        width:21px;
        height:21px;
        flex:0 0 21px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        color:inherit;
    }

    .sc-mobile-nav-icon svg{
        display:block;
        width:100%;
        height:100%;
        fill:currentColor;
    }

    /*
    |--------------------------------------------------------------------------
    | Mobile Labels
    |--------------------------------------------------------------------------
    */

    .sc-mobile-nav-label{
        display:block;
        width:100%;
        max-width:100%;
        margin:0;
        padding:0;
        overflow:hidden;
        color:inherit;
        font-size:9px;
        font-weight:700;
        line-height:1.05;
        text-align:center;
        text-decoration:none !important;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    /*
    |--------------------------------------------------------------------------
    | Never Underline Mobile Navigation
    |--------------------------------------------------------------------------
    */

    .sc-mobile-nav-item,
    .sc-mobile-nav-item:hover,
    .sc-mobile-nav-item:active,
    .sc-mobile-nav-item:focus,
    .sc-mobile-nav-item.is-active,
    .sc-mobile-nav-item .sc-mobile-nav-label{
        text-decoration:none !important;
    }
}

/*
|--------------------------------------------------------------------------
| Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width:420px){

    .sc-mobile-bottom-nav{
        bottom:calc(8px + env(safe-area-inset-bottom));
        width:calc(100% - 16px);
        min-height:64px;
        padding:6px;
        border-radius:20px;
    }

    .sc-mobile-nav-item{
        height:51px;
        gap:4px;
    }

    .sc-mobile-nav-icon{
        width:20px;
        height:20px;
        flex-basis:20px;
    }

    .sc-mobile-nav-label{
        font-size:8.5px;
    }
}

/*
|--------------------------------------------------------------------------
| Very Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width:350px){

    .sc-mobile-bottom-nav{
        width:calc(100% - 12px);
        padding:5px 4px;
        gap:0;
        border-radius:18px;
    }

    .sc-mobile-nav-item{
        height:49px;
        padding-left:1px;
        padding-right:1px;
    }

    .sc-mobile-nav-icon{
        width:19px;
        height:19px;
        flex-basis:19px;
    }

    .sc-mobile-nav-label{
        font-size:8px;
    }
}

/*
|--------------------------------------------------------------------------
| iPhone Safe Areas
|--------------------------------------------------------------------------
*/

@supports (padding:max(0px)){

    @media (max-width:620px){

        .sc-mobile-bottom-nav{
            bottom:max(
                10px,
                calc(8px + env(safe-area-inset-bottom))
            );
        }
    }
}