/* ============================================================
   SmokeDonalds
   COMPONENTS INSIDE UNIFIED PRODUCT MODAL V30.1
   ============================================================ */


#productQuickModal
.sd-product-unified-components-v301{

    margin:
        0
        22px
        22px!important;

    padding:
        20px!important;

    box-sizing:border-box!important;

    border:
        1px solid
        rgba(255,255,255,.09)!important;

    border-radius:
        20px!important;

    background:
        #141518!important;

}


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

#productQuickModal
.sd-product-unified-components-head-v301{

    display:flex!important;

    align-items:center!important;

    gap:10px!important;

    margin:
        0
        0
        17px!important;

    padding:
        0
        0
        14px!important;

    border-bottom:
        1px solid
        rgba(255,255,255,.08)!important;

}


#productQuickModal
.sd-product-unified-components-index-v301{

    display:flex!important;

    align-items:center!important;

    justify-content:center!important;

    width:34px!important;
    height:28px!important;

    flex:0 0 34px!important;

    border-radius:
        9px!important;

    background:
        rgba(239,32,40,.12)!important;

    color:
        #ff4148!important;

    font-size:
        9px!important;

    font-weight:
        950!important;

}


#productQuickModal
.sd-product-unified-components-title-v301{

    margin:0!important;
    padding:0!important;

    color:#fff!important;

    font-size:
        17px!important;

    font-weight:
        950!important;

    line-height:
        1!important;

    text-transform:
        uppercase!important;

    letter-spacing:
        .015em!important;

}


/* ============================================================
   GRID
   ============================================================ */

#productQuickModal
.sd-product-unified-components-grid-v301{

    display:grid!important;

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

    gap:
        12px!important;

    width:
        100%!important;

    margin:
        0!important;

    padding:
        0!important;

}


/* ============================================================
   ИСПОЛЬЗУЕМ СУЩЕСТВУЮЩУЮ PRODUCT-CARD
   ============================================================ */

#productQuickModal
.sd-product-unified-components-grid-v301
.product-card{

    width:
        100%!important;

    min-width:
        0!important;

    max-width:
        none!important;

    margin:
        0!important;

    box-sizing:
        border-box!important;

}


#productQuickModal
.sd-product-unified-components-grid-v301
.product-img{

    height:
        170px!important;

    min-height:
        170px!important;

}


#productQuickModal
.sd-product-unified-components-grid-v301
.product-img img{

    width:
        100%!important;

    height:
        100%!important;

    object-fit:
        contain!important;

}


/* ============================================================
   LOADING
   ============================================================ */

#productQuickModal
.sd-product-unified-components-loading-v301{

    display:flex!important;

    align-items:center!important;

    justify-content:center!important;

    min-height:
        110px!important;

    color:
        rgba(255,255,255,.35)!important;

    font-size:
        11px!important;

    font-weight:
        850!important;

    text-transform:
        uppercase!important;

    letter-spacing:
        .04em!important;

}


/* ============================================================
   LIGHT
   ============================================================ */

html[data-site-theme="light"]
#productQuickModal
.sd-product-unified-components-v301{

    border-color:
        rgba(0,0,0,.09)!important;

    background:
        #fff!important;

}


html[data-site-theme="light"]
#productQuickModal
.sd-product-unified-components-head-v301{

    border-bottom-color:
        rgba(0,0,0,.08)!important;

}


html[data-site-theme="light"]
#productQuickModal
.sd-product-unified-components-title-v301{

    color:
        #111!important;

}


html[data-site-theme="light"]
#productQuickModal
.sd-product-unified-components-loading-v301{

    color:
        rgba(0,0,0,.35)!important;

}


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

@media(max-width:980px){

    #productQuickModal
    .sd-product-unified-components-grid-v301{

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

    }

}


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

@media(max-width:760px){

    #productQuickModal
    .sd-product-unified-components-v301{

        margin:
            0
            10px
            10px!important;

        padding:
            15px
            12px!important;

        border-radius:
            16px!important;

    }


    #productQuickModal
    .sd-product-unified-components-head-v301{

        margin-bottom:
            12px!important;

        padding-bottom:
            11px!important;

    }


    #productQuickModal
    .sd-product-unified-components-title-v301{

        font-size:
            14px!important;

    }


    /*
     * На телефоне комплектующие листаются
     * горизонтально.
     */

    #productQuickModal
    .sd-product-unified-components-grid-v301{

        display:flex!important;

        gap:
            10px!important;

        overflow-x:
            auto!important;

        overflow-y:
            hidden!important;

        padding:
            0
            0
            7px!important;

        scroll-snap-type:
            x mandatory!important;

        scrollbar-width:
            none!important;

    }


    #productQuickModal
    .sd-product-unified-components-grid-v301::-webkit-scrollbar{

        display:none!important;

    }


    #productQuickModal
    .sd-product-unified-components-grid-v301
    .product-card{

        flex:
            0
            0
            min(
                68vw,
                230px
            )!important;

        width:
            min(
                68vw,
                230px
            )!important;

        scroll-snap-align:
            start!important;

    }


    #productQuickModal
    .sd-product-unified-components-grid-v301
    .product-img{

        height:
            145px!important;

        min-height:
            145px!important;

    }

}