/**
 * ...
 *
 *
 */



/*
 * -----------------------------------------------------------------------------
 *
 * Кнопки : База (На основе bootstrap 4.4.1 + мои старые bs3).
 *
 * -----------------------------------------------------------------------------
 */

[role="button"] {
    cursor: pointer;
}

.btn {
    display: inline-block;

    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;

    border-style: solid;
    border-color: transparent;

    background-color: transparent;

    cursor: pointer;

    -ms-touch-action: manipulation;
        touch-action: manipulation; /* Одиночные нажатия будут выполняться без задержки */

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

/* -!!!

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none !important;
    }
}
*/

.btn:hover {
    text-decoration: none;
}

.btn:focus, .btn.focus {
    outline: 0;
}

/* --- Неактиваня кнопка + Кнопка в неактивном fieldset. --- */

/*

.btn:disabled, 
.btn.disabled {
    opacity: 0.65;
}

*/

a.btn.disabled,
fieldset:disabled a.btn {
    pointer-events: none;
    cursor: not-allowed; /* Не имеет смысла при отключенных pointer-events */
}

/**
 * Блок-кнопки.
 * -----------------------------------------------------------------------------
 */


.btn-block {
    display: block;
    width: 100%;
    
    padding: 0;
}

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
    width: 100%;
    
    padding: 0;
}

/**
 * Кнопки-ссылки.
 * -----------------------------------------------------------------------------
 */

/* - Это моё.

.btn-link {
    display: inline;
    
    margin: 0;
    padding: 0;
    
    border: none;
    background: transparent;
    
    font-size: inherit;
    font-weight: inherit;
    
    text-transform: inherit;
    
    color: inherit;
}

*/


.btn-link {
    display: inline;
    
    margin: 0;
    padding: 0;
    
    border: none;
    background: transparent;
    
    font-size: inherit;
    font-weight: 400;
    
    text-transform: none;
    text-decoration: underline;
    
    color: inherit;
    
    cursor: pointer;
}

.btn-link:hover {
    text-decoration: none;
}

/* 

- Это бутсраповское (версия 4.).

.btn-link {
  font-weight: 400;
  color: #007bff;
  text-decoration: none;
}

.btn-link:hover {
  color: #0056b3;
  text-decoration: underline;
}

.btn-link:focus, 
.btn-link.focus {
  text-decoration: underline;
  box-shadow: none;
}

.btn-link:disabled, 
.btn-link.disabled {
  color: #6c757d;
  pointer-events: none;
}

*/

/*
 * -----------------------------------------------------------------------------
 *
 * Кнопки : Тема : Размеры.
 *
 * -----------------------------------------------------------------------------
 */

.btn {
    padding: 0 15px;
    
    line-height: 32px;
    font-size: 14px;  
    
    border-width: 1px;
    border-radius: 0;
}


/*

@media (min-width: 412px) {
    .btn {
        min-width: 260px;
    }    
}

.btn-sm {

}



*/

.btn-lg {
    width: 200px;
    
    line-height: 48px;
    font-size: 16px;
}

/**
 * Блок-кнопки. Группа блок-кнопок.
 * -----------------------------------------------------------------------------
 */

.btn-block {
    padding-left: 0;
    padding-right: 0;
}
.btn-block + .btn-block {
    margin-top: 10px;
}

/*
 * -----------------------------------------------------------------------------
 *
 * Кнопки : Тема : Цвета + Эффекты.
 *
 * -----------------------------------------------------------------------------
 */

.btn {
    font-weight: 400; 
    text-transform: uppercase;
    
    transition: color .3s ease, 
                border-color .3s ease, 
                background-color .3s ease;
}


/**
 * Кнопка.
 * -----------------------------------------------------------------------------
 */

.btn-dummy {
    color: #000;
    background-color: #fff;
    border-color: #fff;
    
    cursor: default;
}

/**
 * Кнопка.
 * -----------------------------------------------------------------------------
 */

.btn-fill,
.btn-fill:focus,
.btn-fill.focus {
    color: #000;
    background-color: #fff;
    border-color: #fff;
}
.btn-fill:hover,
.btn-fill:active,
.btn-fill.active {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}

/**
 * Кнопка.
 * -----------------------------------------------------------------------------
 */

.btn-frame,
.btn-frame:focus,
.btn-frame.focus {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}
.btn-frame:hover,
.btn-frame:active,
.btn-frame.active {
    color: #000;
    background-color: #fff;
    border-color: #fff;
}

/**
 * Кнопка.
 * -----------------------------------------------------------------------------
 */

.btn-form,
.btn-form:focus,
.btn-form.focus {
    color: #000;
    background-color: transparent;
    border-color: #000;
}
.btn-form:hover,
.btn-form:active,
.btn-form.active {
    color: #fff;
    background-color: #000;
    border-color: #000;
}

/**
 * Кнопка.
 * -----------------------------------------------------------------------------
 */

/*

.btn-frame-alt,
.btn-frame-alt:focus,
.btn-frame-alt.focus {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}
.btn-frame-alt:hover,
.btn-frame-alt:active,
.btn-frame-alt.active {
    color: var(--color-text);
    background-color: #fff;
    border-color: #fff;
}

*/




/**
 * Кнопка.
 * -----------------------------------------------------------------------------
 */

/*

.btn.empty,
.btn.empty:focus,
.btn.empty.focus {
    color: #333;
    background-color: transparent;
    border-color: #333;
    
    cursor: default;
}
.btn.empty:hover,
.btn.empty:active,
.btn.empty.active {
    color: #333;
    background-color: transparent;
    border-color: #333;
}


*/




.btn-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    
    
    width: 60px; height: 24px;
    
    text-align: center;
    
    color: #fff;
    
    background-color: transparent;
    border: 2px solid #f19813;
    border-radius: 12px;
    
    -webkit-touch-callout: none; /* iOS Safari */   
      -webkit-user-select: none; /* Safari */     
       -khtml-user-select: none; /* Konqueror HTML */     
         -moz-user-select: none; /* Old versions of Firefox */      
          -ms-user-select: none; /* Internet Explorer/Edge */           
              user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

/*

.btn-group .btn-plus,
.btn-group .btn-minus,
.btn-group .count {
    
}


.btn-group .btn-plus,
.btn-group .btn-minus {
    width: 20px;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
}

.btn-group .btn-plus:hover,
.btn-group .btn-minus:hover {
    color: #ebaa71;
}

.btn-group .btn-plus {
    line-height: 20px;
}

.btn-group .btn-minus {
    line-height: 18px;
}

.btn-group .num {
    -ms-flex-positive: 1;
    flex-grow: 1;
    
    font-size: 14px;
    
    line-height: 20px;
}


*/


/*
 *
 *
 *
 *
 */

/*

.btn:disabled, 
.btn.disabled {
    color: #303030 !important;
    background-color: transparent !important;
    border-color: #303030 !important;
    
    pointer-events: none;
}


*/



/**
 * Стрелка в кнопке.
 * -----------------------------------------------------------------------------
 */

/*

.btn .arrow {
    outline: 0px dotted #f00;
    
    position: relative;
    padding-right: 6px;
}

.btn .arrow::after {
    content: "";
    
    display: inline-block;

    position: relative;
    top: -2px; left: 4px;

    width: 6px;
    height: 6px;

    border-color: #202020;
    border-style: solid;
    border-width: 2px;
    
    border-bottom: none;
    border-left: none;

    transform: rotate(45deg);
    
    transition: transform .3s ease, border .3s ease;
}
.btn:hover .arrow::after {
    transform: translateX(6px) rotate(45deg);
}

*/

/*

.btn-prim .arrow::after {
    border-color: #fff;
}
.btn-prim:hover .arrow::after {
    border-color: #6600cc;
}


.btn-prim-frame .arrow::after {
    border-color: #6600cc;
}
.btn-prim-frame:hover .arrow::after {
    border-color: #fff;
}

*/

/**
 * Кнопка со стрелкой.
 * -----------------------------------------------------------------------------
 */


/*

.btn-more {
    padding-right: 25px;
}
.btn-more::after {
    content: "";
    
    display: inline-block;

    position: relative;
    top: -2px; left: 4px;

    width: 6px;
    height: 6px;

    border-color: #202020;
    border-style: solid;
    border-width: 2px;
    
    border-bottom: none;
    border-left: none;

    transform: rotate(45deg);
    
    transition: transform .3s ease;
}

.btn-more:hover::after {
    transform: translateX(6px) rotate(45deg); /* scale(1.5) /
}

*/


/*

.btn-lg.btn-more {
    padding-right: 30px;
}
.btn-lg.btn-more::after {
    left: 6px;
    
    width: 9px;
    height: 9px;
    
    border-width: 3px;
}

*/

/*
 * -----------------------------------------------------------------------------
 *
 * Кнопки : Теелефон.
 *
 * -----------------------------------------------------------------------------
 */

/*

.btn-icon {
    width: 38px;
    height: 38px;
    
    background-image: url(/_images/phone-black.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 28px auto;
    
    border-color: #d0d0d0;
}

.btn-icon:hover {
    background-image: url(/_images/phone.svg);
    border-color: #101010;
}


*/

/*
 * -----------------------------------------------------------------------------
 *
 * Кнопки : Корзина.
 *
 * -----------------------------------------------------------------------------
 */

.btn-cart {
    position: relative;
    padding: 0;
    
    min-width: unset;
    
    width: 42px;
    height: 42px;
    
    border: none;
    
    background-image: url(/_images/icon-card.svg);
    
    background-position: center center;
    background-repeat: no-repeat;
    
    background-size: 28px auto;
}

.btn-cart .count {
    position: absolute;
    
    right: -4px;
    bottom: 0;
    
    width: 16px;
    line-height: 16px;
    
    text-align: center;
    
    font-weight: 600;
    font-size: 10px;
    
    color: #fff;
    background-color: #000;
}

.btn-cart.empty .count {
    display: none;
}

/*
 * -----------------------------------------------------------------------------
 *
 * Кнопки : Меню.
 *
 * -----------------------------------------------------------------------------
 */


/**
 * Кнопка-меню : База.
 * -----------------------------------------------------------------------------
 */

.btn-menu {
    position: relative;
    padding: 0;
}
.btn-menu::before,
.btn-menu::after {
    content: "";
}
.btn-menu .icon-bar,
.btn-menu::before,
.btn-menu::after {
    position: absolute;
    top: 50%;
}

/**
 * Кнопка-меню : Размеры.
 * -----------------------------------------------------------------------------
 */

.btn-menu {
    min-width: unset;
    
    width: 32px;
    height: 32px;
    
    border: none;
}

.btn-menu .icon-bar,
.btn-menu::before,
.btn-menu::after {
    left: 3px; right: 3px;
    
    height: 3px;
    margin-top: -2px;
}
.btn-menu::before {
    transform: translateY(-8px);
}
.btn-menu::after {
    transform: translateY(8px);
}



/**
 * Кнопка меню : Цвета.
 * -----------------------------------------------------------------------------
 */

.btn-menu {
    
}


.btn-menu,
.btn-menu:focus,
.btn-menu.focus {

}
.btn-menu:hover,
.btn-menu:active,
.btn-menu.active {

}


.btn-menu .icon-bar,
.btn-menu::before,
.btn-menu::after {
    background-color: #000;
}

.btn-menu:hover .icon-bar,
.btn-menu:hover::before,
.btn-menu:hover::after {
    background-color: #000;
}

/**
 * Кнопка меню : Эффекты.
 * -----------------------------------------------------------------------------
 */

.btn-menu .icon-bar {
    opacity: 1;
}
.btn-menu.close .icon-bar {
    opacity: 0;
}
.btn-menu.close::before {
    transform: rotate(45deg);
}
.btn-menu.close::after {
    transform: rotate(-45deg);
}


.btn-menu .icon-bar,
.btn-menu::before,
.btn-menu::after {
    transition: transform .3s ease;
}
.btn-menu .icon-bar {
    transition: opacity .15s ease .15s;
}
.btn-menu.close .icon-bar {
    transition: opacity .15s ease;
}

/*
 * -----------------------------------------------------------------------------
 *
 * ...
 *
 * -----------------------------------------------------------------------------
 */



/**
 * Социальное.
 * -----------------------------------------------------------------------------
 */

.btn-social {
    width: 38px;
    height: 38px;

    margin: 0;
    padding: 0;
    
    border-radius: 0;
    
    background-position: center center;
    background-repeat: no-repeat;
    
    /* outline: 1px dotted #f00; */
}

.btn-social-vk {
    background-image: url(/_images/socials/social-vk-white.svg);
    /* background-color: #5181b8; */
    background-size: 38px auto;
}

.btn-social-ig {
    background-image: url(/_images/socials/social-ig-white.svg);
    /* background-color: #f75e61; */
    /* linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%) */
    
    background-size: 36px auto;
}

.btn-social-tg {
    background-image: url(/_images/socials/social-tg-white.svg);
    /* background-color: #37aee2; */
    background-size: 32px auto;
}

.btn-social-wa {
    background-image: url(/_images/socials/social-wa-white.svg);
    /* background-color: #47b33b; */
    
    background-size: 26px auto;
}

.btn-social-ok {
    background-image: url(/_images/socials/social-ok-white.svg);
    /* background-color: #ffbb00; */
    background-size: 34px auto;
}