html .is-lock {
    overflow: hidden;
}

html, body {
  height: 100%;
  margin: 0;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 93vh; /* растягивает контейнер на всю высоту экрана */
}

#main {
  flex: 1; /* заставляет main занимать всё оставшееся пространство */
}

#footer {
  margin-top: auto; /* прижимает футер вниз */
}

body{
    font-family: var(--font-family);
    color: var(--color-dark);
    display: flex;
    flex-direction: column; 
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6{
    color: inherit;
    font-weight: 700;
    line-height: 130%;
}

.front-h1{
    text-transform: uppercase;
    text-align: center;
    color: var(--color-accent);
    font-weight: 800;
    line-height: 144%;
    font-size: 54px;
    margin-block: 40px 52px;
}

.front .container{
    max-width: 1200px;
    width: 100%;
}

.block-title{
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 44px;
}

h1 .h1{
    font-size: 54px;
    text-transform: uppercase;
}
h2 .h2{
    font-size: 44px;
}
h3 .h3{
    font-size: 28px;
}
h4 .h4{
    font-size: 18px;
}
h5 .h5{
    font-size: 14px;
}

button,
label,
input,
textarea,
select,
a,
svg * {
    transition-duration: 0.2s;
}

a{
    color: inherit;
    text-decoration: none;
}

/* a:hover{
    color: var(--color-accent);
} */
#search-api-page-block-form-search {
    margin-bottom: 0 !important;
}

.webform-submission-callback-form .js-form-item{
    margin-bottom: 10px;
}

.webform-submission-callback-form .js-form-type-checkbox{
    display: flex;
    align-items: center;
    gap: 3px;
}

.webform-submission-callback-form .description {
    font-size: 12px;
}

.btn,
.more-link a{
    font-size: 18px;
    color: var(--color-white);
    padding: 10px 28px;
    border-radius: 8px;
    border: 1px solid var(--color-accent);
    background-color: var(--color-accent);
}

.btn:hover{
    background-color: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
}

.view-id-akcii.view-display-id-block_1 .more-link {
    position: absolute;
    bottom: -30px;
}

.more-link a,
.field--name-field-more-link a{
    padding: 13px 40px;
}

.more-btn,
.field--name-field-more-link a{
    font-size: 12px;
    color: var(--color-accent);
    padding: 3px 18px;
    border-radius: 8px;
    border: 1px solid var(--color-accent);
    transition: 0.2s;
}

.more-btn:hover,
.field--name-field-more-link a:hover{
    background-color: var(--color-accent);
    color: var(--color-white);
    border: 1px solid var(--color-accent);
}

/* .action-cart,
.wrapper-cart-button .button--add-to-cart{
    padding: 3px 22px;
    font-size: 12px;
    background-color: var(--color-accent);
    color: var(--color-white);
    border: 1px solid var(--color-accent);
    transition: 0.2s;
}  */

/* .action-cart:hover,
.wrapper-cart-button .button--add-to-cart:hover{
    background-color: transparent;
    color: var(--color-accent);
}  */
.bg-item{
    background-color: var(--color-bg-section);
    padding-block: 70px 90px;
}

.region-search .form-actions{
    display: none;
}

.region-search .form-type-search {
    max-width: 200px;
    width: 100%;
    height: 35px;
}

.region-search .form-type-search input{
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-accent);
    padding: 7px 15px 7px 44px;
    background-image: url('../image/search.svg');
    background-repeat: no-repeat;
    background-size: 17px;
    background-position: 15px 10px;
}

.not-front .wr_content {
    padding-top: 30px;
    padding-bottom: 30px;
}

.body-node--800 .wr_content {
    padding-bottom: 0;
}

.not-front h1{
    margin-bottom: 20px;
}

span.btn-minus,
span.btn-plus{
    cursor: pointer;
}
.pagination{
    color: var(--color-accent);
}
.active>.page-link, 
.page-link.active{
    background-color: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

.page-link:hover {
    z-index: 2;
    color: var(--bs-pagination-hover-color);
    background-color: var(--bs-pagination-hover-bg);
    border-color: var(--bs-pagination-hover-border-color);
}
a:hover {
    --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
}
.page-link {
    color: var(--color-accent);
}
.page-link:hover {
    color: var(--color-accent);
}

/* Кнопки в корзине*/
.ui-dialog-buttonset.form-actions button.button.button--primary,
.ui-dialog-buttonset.form-actions button.button.button--secondary{
    font-size: 15px;
    color: var(--color-white);
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid var(--color-accent);
    background-color: var(--color-accent);
}

.ui-dialog-buttonset.form-actions button.button.button--primary:hover,
.ui-dialog-buttonset.form-actions button.button.button--secondary:hover{
    background-color: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
}

.ui-widget-header {
    border: 1px solid var(--color-bg-section) /*{borderColorHeader}*/;
    background: var(--color-bg-section) /*{bgColorHeader}*/ /*{bgImgUrlHeader}*/ /*{bgHeaderXPos}*/ /*{bgHeaderYPos}*/ /*{bgHeaderRepeat}*/;
}

/*Форма корзины на странице товара*/

.body-product .commerce-order-item-add-to-cart-form{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.body-product .wrapper-cart-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.body-product .field--name-variations .field--widget-commerce-quantity{
    display: flex;
    align-items: center;
    gap: 15px;
}
.body-product .field--name-variations .field--widget-commerce-quantity label{
    display: none;
}

.body-product .field--name-variations .field--widget-commerce-quantity span.btn-minus,
.body-product .field--name-variations .field--widget-commerce-quantity span.btn-plus{
    padding: 19px;
    background-color: var(--color-accent);
    color: var(--color-white);
    border-radius: 5px;
    line-height: 0;
    font-size: 25px;
}

.body-product .field--name-variations .form-item.js-form-type-number.form-type-number input{
    max-width: 100%;
    width: 100%;
    border-radius: 3px;
    padding: 5px;
}

.body-product .commerce-order-item-add-to-cart-form .button--add-to-cart {
    background-color: transparent;
    color: var(--color-accent);
    border-color: var(--color-accent);
    padding: 10px 15px;
    width: 100%;
}
.body-product .field--name-field-cena-tovara .field__item{
    font-size: 33px;
    font-weight: 500;
}

.layout--twocol > .layout__region--second{
    flex: 0 1 20%;
}
/* 
@media screen and (min-width: 40em) {
    .layout--twocol > .layout__region--first, .layout--twocol > .layout__region--second {
        flex: 0 1 45%;
    }
} */

@media screen and (max-width: 1200px) {
    .front-h1 {
        font-size: calc(24px + (54 - 24) * ((100vw - 320px) / (1200 - 320)));
        /* margin-block: 40px 52px; */
    }
    .block-title{
        font-size: calc(25px + (44 - 25) * ((100vw - 320px) / (1200 - 320)));
        margin-bottom: calc(20px + (44 - 20) * ((100vw - 767px) / (1200 - 767)));
    }
    .bg-item {
        background-color: var(--color-bg-section);
        padding-top: calc(40px + (70 - 40) * ((100vw - 320px) / (1200 - 320)));
        padding-bottom: calc(50px + (90 - 50) * ((100vw - 320px) / (1200 - 320)));
    }

    .layout--twocol > .layout__region--second {
        flex: 0 1 31%;
    }
}
@media screen and (max-width: 992px) {
    .layout--twocol > .layout__region--second {
        flex: 0 1 45%;
    }
}
@media screen and (max-width: 767px) {
    .bg-item {
        padding-top: 40px;
        padding-bottom: 50px;
    }
     .block-title{
        margin-bottom: 20px;
    }

    .more-link a,
    .field--name-field-more-link a{
        padding: 13px 30px;
    }
}

@media screen and (max-width: 576px) {
    .wrapper-cart-button .button--add-to-cart{
        max-width: 100%;
        width: 100%;
        padding: 10px;
    }
    .layout--twocol > .layout__region--second {
        flex: 0 1 80%;
        margin: 0 auto;
    }
}
/* 
@media screen and (max-width: 480px) {
    .layout--twocol > .layout__region--second {
        flex: 0 1 80%;
        margin: 0 auto;
    }
} */