/* ============================================================
   HOME STORES V106
   ============================================================ */

.home-stores-v106{

    margin-top:
        70px;

    margin-bottom:
        70px;
}


.home-stores-head-v106{

    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        24px;

    margin-bottom:
        22px;
}


.home-stores-head-v106 > div{

    display:
        grid;

    gap:
        5px;
}


.home-stores-head-v106 span{

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .14em;

    opacity:
        .52;
}


.home-stores-head-v106 h2{

    margin:
        0;

    font-size:
        clamp(32px,3vw,46px);

    line-height:
        .95;

    text-transform:
        uppercase;
}


.home-stores-head-v106 p{

    margin:
        4px 0 0;

    font-size:
        14px;

    opacity:
        .62;
}


.home-stores-head-v106 a{

    font-size:
        12px;

    font-weight:
        900;

    text-transform:
        uppercase;

    text-decoration:
        none;

    color:
        inherit;

    opacity:
        .6;
}


/* GRID */

.home-stores-grid-v106{

    display:
        grid;

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

    gap:
        14px;
}


/* CARD */

.home-store-card-v106{

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        auto 1fr;

    grid-template-rows:
        auto 1fr auto;

    column-gap:
        14px;

    min-height:
        180px;

    padding:
        20px 20px 18px;

    border:
        1px solid rgba(20,20,20,.18);

    border-radius:
        18px;

    background:
        #fff;

    color:
        #141414;

    overflow:
        hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


.home-store-card-v106:hover{

    transform:
        translateY(-3px);

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

    border-color:
        rgba(20,20,20,.34);
}


.home-store-number-v106{

    display:
        grid;

    place-items:
        center;

    width:
        42px;

    height:
        42px;

    border-radius:
        13px;

    background:
        #f2f2f1;

    font-size:
        11px;

    font-weight:
        950;
}


.home-store-copy-v106{

    display:
        grid;

    gap:
        4px;

    align-content:
        start;

    padding-top:
        2px;
}


.home-store-copy-v106 strong{

    font-size:
        19px;

    line-height:
        1.08;
}


.home-store-copy-v106 span{

    font-size:
        12px;

    line-height:
        1.3;

    opacity:
        .56;
}


.home-store-hours-v106{

    grid-column:
        1 / -1;

    align-self:
        end;

    display:
        grid;

    gap:
        3px;

    padding-top:
        24px;
}


.home-store-hours-v106 span{

    font-size:
        10px;

    font-weight:
        900;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;

    opacity:
        .42;
}


.home-store-hours-v106 b{

    font-size:
        15px;
}


.home-store-arrow-v106{

    position:
        absolute;

    right:
        17px;

    bottom:
        17px;

    display:
        grid;

    place-items:
        center;

    width:
        42px;

    height:
        42px;

    border:
        1px solid rgba(20,20,20,.12);

    border-radius:
        50%;

    font-size:
        22px;

    font-style:
        normal;

    color:
        #ef1d26;

    background:
        rgba(255,255,255,.9);
}


.home-stores-empty-v106{

    padding:
        24px;

    border:
        1px dashed rgba(20,20,20,.18);

    border-radius:
        18px;

    text-align:
        center;

    font-size:
        14px;

    opacity:
        .55;
}


/* ============================================================
   DARK
   ============================================================ */

html[data-site-theme="dark"]
.home-store-card-v106{

    background:
        #0e0f11;

    color:
        #fff;

    border-color:
        rgba(255,255,255,.18);
}


html[data-site-theme="dark"]
.home-store-card-v106:hover{

    border-color:
        rgba(255,255,255,.34);

    box-shadow:
        0 16px 38px rgba(0,0,0,.30);
}


html[data-site-theme="dark"]
.home-store-number-v106{

    background:
        #191b1f;
}


html[data-site-theme="dark"]
.home-store-arrow-v106{

    background:
        #181a1e;

    border-color:
        rgba(255,255,255,.12);
}


html[data-site-theme="dark"]
.home-stores-empty-v106{

    border-color:
        rgba(255,255,255,.18);
}


/* ============================================================
   ADAPTIVE
   ============================================================ */

@media(max-width:1180px){

    .home-stores-grid-v106{

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


@media(max-width:820px){

    .home-stores-v106{

        margin-top:
            48px;

        margin-bottom:
            48px;
    }


    .home-stores-grid-v106{

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


@media(max-width:560px){

    .home-stores-head-v106{

        align-items:
            start;
    }


    .home-stores-grid-v106{

        grid-template-columns:
            1fr;
    }


    .home-store-card-v106{

        min-height:
            155px;
    }


    .home-stores-head-v106 h2{

        font-size:
            32px;
    }
}



/* ============================================================
   HOME STORES SLIDER V106.1
   ============================================================ */

.home-stores-v106{

    position:
        relative!important;

    overflow:
        visible!important;
}


/* ============================================================
   ОДНА ЛИНИЯ
   ============================================================ */

.home-stores-grid-v106{

    display:
        flex!important;

    grid-template-columns:
        none!important;

    flex-wrap:
        nowrap!important;

    gap:
        14px!important;

    width:
        100%!important;

    max-width:
        100%!important;

    overflow-x:
        auto!important;

    overflow-y:
        hidden!important;

    scroll-behavior:
        smooth!important;

    scroll-snap-type:
        x mandatory!important;

    scrollbar-width:
        none!important;

    -ms-overflow-style:
        none!important;

    overscroll-behavior-inline:
        contain!important;

    padding:
        2px 1px 18px!important;

    margin:
        0!important;
}


.home-stores-grid-v106::-webkit-scrollbar{

    display:
        none!important;
}


/* ============================================================
   КАРТОЧКИ
   ============================================================ */

.home-store-card-v106{

    flex:
        0 0 clamp(285px, 23.5vw, 365px)!important;

    width:
        auto!important;

    min-width:
        0!important;

    min-height:
        180px!important;

    grid-template-columns:
        1fr!important;

    grid-template-rows:
        auto 1fr auto!important;

    scroll-snap-align:
        start!important;

    scroll-snap-stop:
        always!important;
}


.home-store-copy-v106,
.home-store-hours-v106{

    grid-column:
        1!important;
}


/* номера больше нет вообще */

.home-store-number-v106{

    display:
        none!important;
}


/* ============================================================
   СТРЕЛКИ
   ============================================================ */

.home-stores-nav-v106-1{

    position:
        absolute!important;

    z-index:
        8!important;

    top:
        calc(50% + 36px)!important;

    display:
        grid!important;

    place-items:
        center!important;

    width:
        48px!important;

    height:
        48px!important;

    padding:
        0!important;

    border:
        1px solid rgba(20,20,20,.18)!important;

    border-radius:
        50%!important;

    background:
        rgba(28,28,30,.92)!important;

    color:
        #fff!important;

    font:
        700 34px/1 Arial,sans-serif!important;

    cursor:
        pointer!important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.14)!important;

    backdrop-filter:
        blur(10px)!important;

    -webkit-backdrop-filter:
        blur(10px)!important;

    transition:
        transform .18s ease,
        opacity .18s ease,
        box-shadow .18s ease!important;
}


.home-stores-prev-v106-1{

    left:
        -12px!important;
}


.home-stores-next-v106-1{

    right:
        -12px!important;
}


.home-stores-nav-v106-1:hover{

    transform:
        scale(1.06)!important;

    box-shadow:
        0 14px 30px rgba(0,0,0,.20)!important;
}


.home-stores-nav-v106-1:disabled{

    opacity:
        .22!important;

    pointer-events:
        none!important;
}


/* ============================================================
   DARK
   ============================================================ */

html[data-site-theme="dark"]
.home-stores-nav-v106-1{

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

    background:
        rgba(24,24,26,.94)!important;

    color:
        #fff!important;
}


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

@media(max-width:900px){

    .home-store-card-v106{

        flex-basis:
            clamp(270px,43vw,340px)!important;
    }


    .home-stores-nav-v106-1{

        width:
            44px!important;

        height:
            44px!important;

        top:
            calc(50% + 34px)!important;
    }


    .home-stores-prev-v106-1{

        left:
            -6px!important;
    }


    .home-stores-next-v106-1{

        right:
            -6px!important;
    }
}


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

@media(max-width:560px){

    .home-store-card-v106{

        flex-basis:
            86vw!important;

        min-height:
            155px!important;
    }


    .home-stores-grid-v106{

        gap:
            10px!important;

        padding-bottom:
            14px!important;
    }


    .home-stores-nav-v106-1{

        width:
            42px!important;

        height:
            42px!important;

        font-size:
            30px!important;
    }


    .home-stores-prev-v106-1{

        left:
            2px!important;
    }


    .home-stores-next-v106-1{

        right:
            2px!important;
    }
}



/* ============================================================
   STORES EXACT CITY FILTER V106.2

   ВАЖНО:
   карточка имеет display:grid.
   Поэтому не полагаемся только на HTML hidden.

   Если город карточки != выбранному городу:
   display:none!important.
   ============================================================ */

.home-store-card-v106[hidden],
.home-store-card-v106.is-hidden-by-city-v106-2{

    display:
        none!important;
}


/*
 * Даже если какие-нибудь старые responsive-правила
 * снова присвоят display:grid/flex.
 */

@media(min-width:0px){

    .home-stores-grid-v106
    > .home-store-card-v106[hidden],

    .home-stores-grid-v106
    > .home-store-card-v106.is-hidden-by-city-v106-2{

        display:
            none!important;
    }

}



/* ============================================================
   HOME STORES V106.4
   ============================================================ */


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

   Оставляем только:
   НАШИ МАГАЗИНЫ              УПРАВЛЯТЬ
   ============================================================ */

.home-stores-head-v106{

    align-items:
        center!important;

    margin-bottom:
        24px!important;
}


.home-stores-head-v106 > div{

    display:
        block!important;
}


.home-stores-head-v106 > div > span,
.home-stores-head-v106 > div > p{

    display:
        none!important;
}


.home-stores-head-v106 h2{

    margin:
        0!important;
}


/* ============================================================
   ЦЕНТРИРОВАНИЕ

   Этот класс JS включает ТОЛЬКО когда
   карточки помещаются целиком.

   Если появляется overflow — slider снова стартует слева.
   ============================================================ */

.home-stores-grid-v106.is-centered-v106-4{

    justify-content:
        center!important;
}


/* ============================================================
   CARD

   Чуть красивее распределяем пространство.
   ============================================================ */

.home-store-card-v106{

    padding:
        22px 24px 20px!important;
}


.home-store-copy-v106 strong{

    font-size:
        20px!important;

    line-height:
        1.08!important;
}


/* ============================================================
   STATUS AREA
   ============================================================ */

.home-store-hours-v106{

    grid-column:
        1 / -1!important;

    display:
        flex!important;

    align-items:
        flex-end!important;

    justify-content:
        space-between!important;

    gap:
        16px!important;

    padding-top:
        26px!important;

    padding-right:
        58px!important;
}


.home-store-state-v106-4{

    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


.home-store-status-dot-v106-4{

    display:
        block;

    flex:
        0 0 auto;

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        #8b8d91;

    box-shadow:
        0 0 0 5px rgba(139,141,145,.08);
}


.home-store-status-v106-4{

    font-size:
        15px!important;

    line-height:
        1!important;

    font-weight:
        950!important;

    text-transform:
        uppercase!important;
}


.home-store-status-caption-v106-4{

    font-size:
        11px!important;

    line-height:
        1.15!important;

    font-weight:
        850!important;

    opacity:
        .48!important;

    text-align:
        right!important;
}


/* ============================================================
   OPEN
   ============================================================ */

.home-store-card-v106.is-open-v106-4
.home-store-status-v106-4{

    color:
        #20c56b!important;
}


.home-store-card-v106.is-open-v106-4
.home-store-status-dot-v106-4{

    background:
        #20c56b!important;

    box-shadow:
        0 0 0 5px rgba(32,197,107,.11)!important;
}


/* ============================================================
   CLOSED
   ============================================================ */

.home-store-card-v106.is-closed-v106-4
.home-store-status-v106-4{

    color:
        #ef242c!important;
}


.home-store-card-v106.is-closed-v106-4
.home-store-status-dot-v106-4{

    background:
        #ef242c!important;

    box-shadow:
        0 0 0 5px rgba(239,36,44,.11)!important;
}


/* ============================================================
   DARK
   ============================================================ */

html[data-site-theme="dark"]
.home-store-status-caption-v106-4{

    color:
        rgba(255,255,255,.68)!important;
}


html[data-site-theme="dark"]
.home-store-card-v106.is-open-v106-4
.home-store-status-v106-4{

    color:
        #31d97b!important;
}


html[data-site-theme="dark"]
.home-store-card-v106.is-closed-v106-4
.home-store-status-v106-4{

    color:
        #ff343c!important;
}


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

@media(max-width:560px){

    .home-stores-head-v106{

        margin-bottom:
            18px!important;
    }


    .home-store-hours-v106{

        padding-top:
            20px!important;

        padding-right:
            52px!important;
    }


    .home-store-status-caption-v106-4{

        font-size:
            10px!important;
    }

}