:root {
    --color-default-blue: #023E84;
    --color-default-black: #333333;
}

html {
    display: flex;
    flex-direction: column;
    height: 100%;
}

body {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    letter-spacing: -0.3px;
    /*letter-spacing: -0.02em;*/
}

body.fixed {
    position: fixed;
    width: 100%;
}

main {
    flex-grow: 1;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 400;
    font-family: 'Source Serif 4 48pt', serif;
    line-height: 1.5;
    letter-spacing: -1px;
}

h1 {
    font-size: 48px;
}

/* breadcrumbs */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
}

.breadcrumbs-item {
    letter-spacing: -0.3px;
}

.breadcrumbs-item + .breadcrumbs-item::before {
    content: "\f285";
    font-family: bootstrap-icons !important;
    background-size: contain;
    font-size: 10px;
    display: inline-flex;
    margin: 0 8px;
}

@media screen and (max-width: 1199px) {
    .row:has(.breadcrumbs) {
        margin-bottom: 20px;
    }

    .breadcrumbs {
        font-size: 12px;
        /*margin-top: 0.6rem;*/
        margin-top: 0;
        margin-bottom: 0;
    }

    .breadcrumbs-item {
        font-size: 14px;
    }
}
/* breadcrumbs */


.btn {
    display: inline-flex;
    font-size: 14px;
    font-weight: 400;
    line-height: 164%;
    letter-spacing: -0.02em;
    color: #000;
    background: #fff;
    border: 1px solid #ddd;
    transition: color 0.3s ease,
    background-color 0.3s ease;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.btn:hover {
    color: var(--active-color);
    border-color: #ddd;
    background-color: #f8f9fa;
}

.btn.btn--default {
    min-width: 256px;
    min-height: 46px;
}

.input-group .btn {
    min-width: inherit;
    min-height: inherit;
}

.btn.blue {
    color: #FFFFFF;
    background: var(--color-default-blue);
}

.btn.blue:hover {
    color: var(--active-color);
    border-color: var(--active-color);
    background-color: #fff;
}

.btn.black {
    color: #FFFFFF;
    background: var(--color-default-black);
}

.btn.black:hover {
    color: var(--color-default-black);
    border-color: var(--color-default-black);
    background-color: #fff;
}

.btn.shadow {
    box-shadow: 0 0 11px 0 rgba(0, 0, 0, 0.10);
}

.form-control:focus {
    box-shadow: none;
}

img {
    width: auto;
}

/*  fields  */
.form-group {
    position: relative;
}

/*  radio   */
input[type="radio"] {
    display: none;
}

input[type="radio"] + label {
    font-size: 15px;
    position: relative;
    letter-spacing: -0.03em;
    padding-left: 28px;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

input[type="radio"] + label::before,
input[type="radio"] + label::after {
    content: "";

    position: absolute;
    border-radius: 50%;
    background: #fff;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

input[type="radio"] + label::before {
    width: 18px;
    height: 18px;
    border: 1px solid #BBBBBB
}

input[type="radio"]:checked + label::before {
    background: #313131;
    border-color: #313131;
}

input[type="radio"]:checked + label::after {
    width: 8px;
    height: 8px;
    left: 5px;
    border-color: #313131;
}
/*  radio   */

/*  checkbox   */
.form-group input[type="checkbox"] {
    display: none;
}

.form-group input[type="checkbox"] + label {
    padding-left: 37px;
    position: relative;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.2;
}

.form-group input[type="checkbox"] + label::before,
.form-group input[type="checkbox"] + label::after {
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    top: 50%;
    left: 0;
    border: 1px solid #BBBBBB;
    transform: translateY(-50%);
}


.form-group input[type="checkbox"]:checked + label::before {
    background: var(--color-default-black);
    border-color: var(--color-default-black);
}

.form-group input[type="checkbox"]:checked + label::after {
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    border-color: var(--color-default-black);
}
/*  checkbox   */

/*  text   */
.form-group {
    position: relative;
    /*padding-bottom: 18px;*/
}

input[type="text"] {
    padding: 16px;
    border-radius: 2px;
    font-size: 14px;
    line-height: 1.5;
}

textarea {
    resize: none;
}

.form-group label {
    font-size: 14px;
}

.form-group .accent {
    color: #BC1616;
    font-size: 12px;
}
/*  text   */


/** form-group Switch **/
.switch-box {
    display: inline-block;
    position: relative;
    width: 45px;
    height: 22px;
}

.switch-input {
    display: none;
}

/* Лейбл для тумблера */
.switch-label {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: #CCCCCC;
    border-radius: 20px;
    transition: background-color 0.3s ease;
}

/* Переключатель (кружок) */
.switch-label::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 14px;
    height: 14px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.06), 0 1px 3px 0 rgba(16, 24, 40, 0.1);
}

/* Состояние включено (цвет фона лейбла) */
.switch-input:checked + .switch-label {
    background-color: var(--color-default-blue);
}

/* Состояние включено (переключатель вправо) */
.switch-input:checked + .switch-label::after {
    transform: translateX(24px);
}
/** END Switch **/



.count-select {
    width: 100px;
    overflow: hidden;
    transition: width 0.3s;
    border-radius: 5px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
}

.counter {
    display: flex;
    height: 100%;
}

.counter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-basis: 30px;
    cursor: pointer;
}

.counter-btn.disabled {
    opacity: 0.2;
    cursor: default;
    pointer-events: none; /* полностью отключает клик */
}

.counter-field {
    height: 100%;
    display: flex;
    flex-basis: 40px;
}

.counter-field input,
.counter-field input:focus-visible {
    width: 100%;
    text-align: center;
    border-color: transparent;
    outline: none;
    text-align: center;
}

.counter-field input[type="number"]::-webkit-inner-spin-button,
.counter-field input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Для Firefox */
.counter-field input[type="number"] {
    -moz-appearance: textfield;
}

.icon-cart {
    display: inline-flex;
    -webkit-mask-image: url(../img/cart.svg);
    mask-image: url(../img/cart.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    background: #000;
    width: 20px;
    height: 15px;
}