/* ============================================================
   SmokeDonalds
   COMPONENT CARDS THEME + MOBILE V30.2
   ============================================================ */


/*
 * Только комплектующие:
 * - внутри unified modal
 * - на полной странице товара
 *
 * Каталог / поиск / Новое / Популярные
 * этим CSS не меняются.
 */

:is(
    #productQuickModal .sd-product-unified-components-grid-v301,
    .product-compatible .product-grid,
    .product-modern-components-v24 .product-grid,
    .product-modern-components .product-grid
)
.product-card{

    position:relative!important;

    display:flex!important;
    flex-direction:column!important;

    gap:10px!important;

    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    min-height:315px!important;

    margin:0!important;
    padding:10px!important;

    overflow:hidden!important;

    box-sizing:border-box!important;

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

    border-radius:
        15px!important;

    background:
        #17181b!important;

    color:
        #f4f4f4!important;

    text-decoration:none!important;

    box-shadow:none!important;

    transform:none!important;

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

}


/* hover */
:is(
    #productQuickModal .sd-product-unified-components-grid-v301,
    .product-compatible .product-grid,
    .product-modern-components-v24 .product-grid,
    .product-modern-components .product-grid
)
.product-card:hover{

    border-color:
        rgba(239,32,40,.45)!important;

    background:
        #1b1c20!important;

    transform:
        translateY(-2px)!important;

    box-shadow:none!important;

}


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

:is(
    #productQuickModal .sd-product-unified-components-grid-v301,
    .product-compatible .product-grid,
    .product-modern-components-v24 .product-grid,
    .product-modern-components .product-grid
)
.product-card
.product-img{

    position:relative!important;

    display:flex!important;

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

    width:100%!important;
    height:176px!important;
    min-height:176px!important;

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

    overflow:hidden!important;

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

    border-radius:
        11px!important;

    background:
        #111215!important;

}


:is(
    #productQuickModal .sd-product-unified-components-grid-v301,
    .product-compatible .product-grid,
    .product-modern-components-v24 .product-grid,
    .product-modern-components .product-grid
)
.product-card
.product-img img{

    display:block!important;

    width:100%!important;
    height:100%!important;

    max-width:100%!important;
    max-height:100%!important;

    padding:12px!important;

    box-sizing:border-box!important;

    object-fit:contain!important;

    background:transparent!important;

}


/*
 * Fallback "SD", если изображения нет.
 */
:is(
    #productQuickModal .sd-product-unified-components-grid-v301,
    .product-compatible .product-grid,
    .product-modern-components-v24 .product-grid,
    .product-modern-components .product-grid
)
.product-card
.product-img > strong{

    display:flex!important;

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

    width:100%!important;
    height:100%!important;

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

    font-size:42px!important;
    font-weight:950!important;

}


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

:is(
    #productQuickModal .sd-product-unified-components-grid-v301,
    .product-compatible .product-grid,
    .product-modern-components-v24 .product-grid,
    .product-modern-components .product-grid
)
.product-card > strong{

    display:-webkit-box!important;

    margin:
        2px
        2px
        0!important;

    padding:0!important;

    overflow:hidden!important;

    color:
        #f3f3f3!important;

    -webkit-text-fill-color:
        #f3f3f3!important;

    font-size:
        14px!important;

    font-weight:
        900!important;

    line-height:
        1.25!important;

    text-transform:none!important;

    text-decoration:none!important;

    -webkit-box-orient:
        vertical!important;

    -webkit-line-clamp:
        3!important;

}


/* subtitle */
:is(
    #productQuickModal .sd-product-unified-components-grid-v301,
    .product-compatible .product-grid,
    .product-modern-components-v24 .product-grid,
    .product-modern-components .product-grid
)
.product-card > em{

    display:-webkit-box!important;

    margin:
        -2px
        2px
        0!important;

    overflow:hidden!important;

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

    font-size:
        11px!important;

    font-style:
        normal!important;

    font-weight:
        650!important;

    line-height:
        1.3!important;

    -webkit-box-orient:
        vertical!important;

    -webkit-line-clamp:
        2!important;

}


/* ============================================================
   PRICE
   ============================================================ */

:is(
    #productQuickModal .sd-product-unified-components-grid-v301,
    .product-compatible .product-grid,
    .product-modern-components-v24 .product-grid,
    .product-modern-components .product-grid
)
.product-card > b,
:is(
    #productQuickModal .sd-product-unified-components-grid-v301,
    .product-compatible .product-grid,
    .product-modern-components-v24 .product-grid,
    .product-modern-components .product-grid
)
.product-card
[data-product-price]{

    margin:
        auto
        2px
        2px!important;

    color:
        #fff!important;

    -webkit-text-fill-color:
        #fff!important;

    font-size:
        20px!important;

    font-weight:
        950!important;

    line-height:
        1!important;

}


/* ============================================================
   BADGES
   ============================================================ */

:is(
    #productQuickModal .sd-product-unified-components-grid-v301,
    .product-compatible .product-grid,
    .product-modern-components-v24 .product-grid,
    .product-modern-components .product-grid
)
.product-badges{

    position:absolute!important;

    top:8px!important;
    left:8px!important;

    z-index:4!important;

    display:flex!important;
    gap:4px!important;

}


:is(
    #productQuickModal .sd-product-unified-components-grid-v301,
    .product-compatible .product-grid,
    .product-modern-components-v24 .product-grid,
    .product-modern-components .product-grid
)
.product-badges
.badge{

    display:inline-flex!important;

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

    min-height:22px!important;

    padding:
        0
        7px!important;

    border-radius:
        6px!important;

    background:
        #ef2028!important;

    color:#fff!important;

    font-size:
        8px!important;

    font-weight:
        950!important;

}


/* ============================================================
   ТЁМНАЯ ТЕМА ПО УМОЛЧАНИЮ
   ============================================================ */

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

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

    background:
        #141518!important;

}


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

    color:
        #fff!important;

}


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

html[data-site-theme="light"]
:is(
    #productQuickModal .sd-product-unified-components-grid-v301,
    .product-compatible .product-grid,
    .product-modern-components-v24 .product-grid,
    .product-modern-components .product-grid
)
.product-card{

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

    background:
        #fff!important;

    color:
        #171717!important;

}


html[data-site-theme="light"]
:is(
    #productQuickModal .sd-product-unified-components-grid-v301,
    .product-compatible .product-grid,
    .product-modern-components-v24 .product-grid,
    .product-modern-components .product-grid
)
.product-card:hover{

    border-color:
        rgba(239,32,40,.40)!important;

    background:
        #fafafa!important;

}


html[data-site-theme="light"]
:is(
    #productQuickModal .sd-product-unified-components-grid-v301,
    .product-compatible .product-grid,
    .product-modern-components-v24 .product-grid,
    .product-modern-components .product-grid
)
.product-card
.product-img{

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

    background:
        #f3f3f1!important;

}


html[data-site-theme="light"]
:is(
    #productQuickModal .sd-product-unified-components-grid-v301,
    .product-compatible .product-grid,
    .product-modern-components-v24 .product-grid,
    .product-modern-components .product-grid
)
.product-card > strong{

    color:
        #171717!important;

    -webkit-text-fill-color:
        #171717!important;

}


html[data-site-theme="light"]
:is(
    #productQuickModal .sd-product-unified-components-grid-v301,
    .product-compatible .product-grid,
    .product-modern-components-v24 .product-grid,
    .product-modern-components .product-grid
)
.product-card > em{

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

}


html[data-site-theme="light"]
:is(
    #productQuickModal .sd-product-unified-components-grid-v301,
    .product-compatible .product-grid,
    .product-modern-components-v24 .product-grid,
    .product-modern-components .product-grid
)
.product-card > b,

html[data-site-theme="light"]
:is(
    #productQuickModal .sd-product-unified-components-grid-v301,
    .product-compatible .product-grid,
    .product-modern-components-v24 .product-grid,
    .product-modern-components .product-grid
)
.product-card
[data-product-price]{

    color:
        #171717!important;

    -webkit-text-fill-color:
        #171717!important;

}


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-title-v301{

    color:
        #171717!important;

}


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

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

    display:grid!important;

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

    gap:
        12px!important;

}


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

@media(max-width:1050px){

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

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

    }

}


@media(max-width:860px){

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

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

    }

}


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

@media(max-width:760px){

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

        margin:
            0
            10px
            10px!important;

        padding:
            14px
            12px
            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-index-v301{

        width:
            30px!important;

        height:
            26px!important;

        flex-basis:
            30px!important;

    }


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

        font-size:
            14px!important;

    }


    /*
     * Горизонтальный нативный слайдер.
     * Чуть видна следующая карточка.
     */

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

        display:flex!important;

        grid-template-columns:
            none!important;

        gap:
            10px!important;

        width:
            calc(
                100%
                + 12px
            )!important;

        margin:
            0
            -12px
            0
            0!important;

        padding:
            0
            12px
            8px
            0!important;

        overflow-x:
            auto!important;

        overflow-y:
            hidden!important;

        scroll-snap-type:
            x mandatory!important;

        scroll-padding-left:
            0!important;

        overscroll-behavior-x:
            contain!important;

        -webkit-overflow-scrolling:
            touch!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(
                72vw,
                250px
            )!important;

        width:
            min(
                72vw,
                250px
            )!important;

        min-height:
            265px!important;

        scroll-snap-align:
            start!important;

        scroll-snap-stop:
            normal!important;

        border-radius:
            13px!important;

    }


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

        height:
            145px!important;

        min-height:
            145px!important;

    }


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

        font-size:
            13px!important;

        -webkit-line-clamp:
            2!important;

    }


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

        font-size:
            10px!important;

    }


    #productQuickModal
    .sd-product-unified-components-grid-v301
    .product-card > b,

    #productQuickModal
    .sd-product-unified-components-grid-v301
    .product-card
    [data-product-price]{

        font-size:
            19px!important;

    }

}


/* очень маленькие телефоны */
@media(max-width:390px){

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

        flex-basis:
            min(
                79vw,
                240px
            )!important;

        width:
            min(
                79vw,
                240px
            )!important;

    }

}