/*Скролл бар от Саши Худовой*/
body::-webkit-scrollbar {
    width: 8px;
}
body::-webkit-scrollbar-track {
    background: #FAF6F5;
}
body::-webkit-scrollbar-thumb {
    background: #D9A695;
    border: 2px solid #FAF6F5;
}
/*---*/

/*Зум для фото*/
.zoom {
    overflow: hidden
}
/*---*/

/*убрать обводку у кнопки (автолейаут) справа и слева*/
.tn-molecule {
    border-left: 0px !important;
    border-right: 0px !important;
}
/*---*/


/*рамка со скошенными углами*/
/*фото в img, не в шейп*/
.image-frame .tn-atom {
    position: relative;
}
.image-frame .tn-atom::after {
    content: "";
    position: absolute;
    inset: 0; 
    
    /* Задаем цвет линии */
    background-color: #D9A695;
    margin: -6px;   /*Отступ от края изображения*/
    pointer-events: none; 
    z-index: 5; /* Гарантированно выводим поверх картинки */

    /* --- НАСТРОЙКИ --- */
    --c: 20px; /* Размер скошенного угла */
    --b: 1px;  /* Толщина обводки */
    clip-path: polygon(
        0% var(--c),
        var(--c) 0%,
        calc(100% - var(--c)) 0%,
        100% var(--c),
        100% calc(100% - var(--c)),
        calc(100% - var(--c)) 100%,
        var(--c) 100%,
        0% calc(100% - var(--c)),
        0% var(--c),
        var(--b) var(--c),
        var(--b) calc(100% - var(--c)),
        var(--c) calc(100% - var(--b)),
        calc(100% - var(--c)) calc(100% - var(--b)),
        calc(100% - var(--b)) calc(100% - var(--c)),
        calc(100% - var(--b)) var(--c),
        calc(100% - var(--c)) var(--b),
        var(--c) var(--b),
        var(--b) var(--c)
    );
}
/*---*/

/*рамка со скошенными углами серая*/
/*фото в img, не в шейп*/
.image-frame-gray .tn-atom {
    position: relative;
}
.image-frame-gray .tn-atom::after {
    content: "";
    position: absolute;
    inset: 0; 
    
    /* Задаем цвет линии */
    background-color: #807E7D;
    margin: -6px;   /*Отступ от края изображения*/
    pointer-events: none; 
    z-index: 5; /* Гарантированно выводим поверх картинки */

    /* --- НАСТРОЙКИ --- */
    --c: 20px; /* Размер скошенного угла */
    --b: 1px;  /* Толщина обводки */
    clip-path: polygon(
        0% var(--c),
        var(--c) 0%,
        calc(100% - var(--c)) 0%,
        100% var(--c),
        100% calc(100% - var(--c)),
        calc(100% - var(--c)) 100%,
        var(--c) 100%,
        0% calc(100% - var(--c)),
        0% var(--c),
        var(--b) var(--c),
        var(--b) calc(100% - var(--c)),
        var(--c) calc(100% - var(--b)),
        calc(100% - var(--c)) calc(100% - var(--b)),
        calc(100% - var(--b)) calc(100% - var(--c)),
        calc(100% - var(--b)) var(--c),
        calc(100% - var(--c)) var(--b),
        var(--c) var(--b),
        var(--b) var(--c)
    );
}
/*---*/

/*цвет подписей в чек-боксах*/
    .t-checkbox__control>span {
        color: #827d7a;
    }
/*---*/
    
/*изменение полей ввода при фокусировке*/
    input:focus, textarea:focus {
        border: 0px !important;
        background-color: #F0EBE9 !important;
    }
    
    input, textarea {
        transition: 0.3s;
    }
/*---*/

/*В карточке товара описание перед заголовком*/
.t-store__card__textwrapper {
    display: flex;
    flex-direction: column;
}

.js-store-prod-name {
    order: 2;
    margin-top: 5px;
}

.js-store-price-wrapper.t-store__card__price-wrapper {
    order: 3;
    margin-top: 5px;
}
/*---*/

/*стилизация карточек каталога*/
    /*обводка, ширина и тайминг для карточки*/
    .t-store__card {
        padding: 5px !important;
        border: 1px solid #D9A695;
        transition: .2s;
    }
@media (max-width: 689px) {
    .t-store__card {
        margin: 2px;
        width: calc(25% - 4px);
    }
}    
@media (min-width: 690px) {
    .t-store__card {
        margin: 10px;
        width: calc(25% - 20px);
    }
}     
    
    /*меняем масштаб картинки при наведении на карточку*/
    .t-store__card:hover .t-store__card__bgimg {
        scale: 98%;
    }
    
    /*тайминг для заголовка и картинки*/
    .t-store__card__title, .t-store__card__bgimg {
        transition: .2s;
    }
/*---*/