/* =========================================================
 * SKYONE_CONTEXT_QUICKNAV_CSS_V60_20260902
 *
 * Context-aware quick navigation.
 * Mobile only.
 * ========================================================= */


/*
 * Desktop:
 * contextual navigation doesn't exist visually.
 */
.so-context-quicknav {
    display: none;
}


@media (max-width: 767px) {

    /*
     * The old 4-direction block is desktop/navigation content.
     * On mobile it is replaced by contextual quick-nav.
     */
    .sky-dir-v4.sky-dir-v4--inside {
        display: none !important;
    }


    .so-context-quicknav {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 9px !important;

        width: 100% !important;

        margin: 0 !important;

        padding:
            11px 14px
            12px !important;

        box-sizing: border-box !important;

        background: #ffffff !important;

        border: 0 !important;

        box-shadow: none !important;
    }


    .so-context-quicknav__item {
        display: flex !important;

        align-items: center !important;

        min-width: 0 !important;
        min-height: 58px !important;

        padding:
            8px 10px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        border-radius: 15px !important;

        text-decoration: none !important;

        -webkit-tap-highlight-color:
            rgba(255,118,0,.13) !important;

        transition:
            transform .12s ease,
            border-color .12s ease,
            background .12s ease !important;
    }


    /*
     * First contextual action:
     * strong SKY-ONE orange.
     */
    .so-context-quicknav__item:first-child {
        color: #ffffff !important;

        background:
            linear-gradient(
                135deg,
                #ff7900 0%,
                #f36b00 100%
            ) !important;

        border:
            1px solid #f47100 !important;

        box-shadow:
            0 6px 17px
            rgba(245,111,0,.16) !important;
    }


    /*
     * Second contextual action:
     * quieter so hierarchy remains clear.
     */
    .so-context-quicknav__item:last-child {
        color: #24262c !important;

        background:
            #f6f6f8 !important;

        border:
            1px solid #dedfe4 !important;

        box-shadow:
            0 5px 16px
            rgba(20,21,25,.045) !important;
    }


    .so-context-quicknav__item:active {
        transform:
            scale(.985) !important;
    }


    .so-context-quicknav__icon {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        flex:
            0 0 27px !important;

        width: 27px !important;
        min-width: 27px !important;

        height: 27px !important;

        margin-right:
            8px !important;
    }


    .so-context-quicknav__icon svg {
        display: block !important;

        width: 24px !important;
        height: 24px !important;
    }


    .so-context-quicknav__item:last-child
    .so-context-quicknav__icon {
        color:
            #ff7600 !important;
    }


    .so-context-quicknav__label {
        display: block !important;

        min-width: 0 !important;

        font-size:
            12.5px !important;

        line-height:
            1.13 !important;

        font-weight:
            750 !important;

        letter-spacing:
            -.005em !important;

        overflow-wrap:
            anywhere !important;
    }

}


@media (max-width: 370px) {

    .so-context-quicknav {
        gap: 7px !important;

        padding-left:
            11px !important;

        padding-right:
            11px !important;
    }


    .so-context-quicknav__item {
        min-height:
            56px !important;

        padding:
            8px !important;
    }


    .so-context-quicknav__icon {
        flex-basis:
            23px !important;

        width:
            23px !important;

        min-width:
            23px !important;

        margin-right:
            6px !important;
    }


    .so-context-quicknav__icon svg {
        width:
            21px !important;

        height:
            21px !important;
    }


    .so-context-quicknav__label {
        font-size:
            11.5px !important;
    }

}