h1,
h2,
h3,
h4,
h5,
h6 {
    color: #000;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    margin-bottom: 30px;
}

body {
    overflow-x: hidden;
}

h1 {
    font-size: 32px;
}

h2 {
    font-size: 28px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 22px;
}

img {
    width: 100%;
}

li {
    margin-bottom: 15px;
}

p,
i {
    color: #000;
    font-family: 'Inter';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.lock {
    overflow-y: hidden;
}



section {
    margin-top: 70px;
}

.h-bold {
    color: #000;
    font-family: 'Inter';
    font-size: 36px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-bottom: 30px;
}

.accent-p {
    color: #000;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.logo a {
    color: #000;
    font-family: 'Inter';
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    text-decoration: none;
}

.logo span {
    color: #FFCD4E;
}

nav a {
    color: #000;
    font-family: 'Inter';
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    text-decoration: none;
}

.section-hr {
    background: #FFCD4E;
    height: 15px;
    width: 100%;
}

.header-phone a {
    color: #000;
    font-family: 'Inter';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
}

.header-basket {
    position: relative;
}

.header-basket-a > svg {
    padding-right: 10px;
}

.header-basket a {
    text-decoration: none;
}

.header-basket-count {
    position: absolute;
    top: 0;
    right: 0;
}

.basket-count {
    position: absolute;
    top: 7px;
    left: 5px;
    color: #000;
    font-family: 'Inter';
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.hero {
    max-height: 797px;
    background: url('../images/hero-mini.jpg'), lightgray 50% / cover no-repeat;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.hero-container {
    height: 797px;
    background: rgba(255, 205, 78, 0.93);
    display: flex;
    align-items: center;
}

.hero h1 {
    color: #000;
    font-family: 'Inter';
    font-size: 60px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    max-width: 589px;
}

.hero-btn p {
    color: #FFF;
    font-family: 'Inter';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    /*padding: 11px 32px;*/
    margin-bottom: 0;
}

.hero-btn {
    cursor: pointer;
    display: flex;
    height: 70px;
    padding: 11px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    background: #000;
    box-shadow: 6px 6px 4px 0px rgba(0, 0, 0, 0.25);
    max-width: 288px;
}

.hero-text {
    display: flex;
    gap: 30px;
    flex-direction: column;
}

.hero-content {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.hero-img img {
    position: absolute;
    top: 110px;
    right: -70px;
    max-width: 870px;
    height: auto;
}

.items-header {
    color: #000;
    font-family: 'Inter';
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 15px;
}

.items-container {
    background: #FFF;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
    display: block;
    height: 100%;
}

form.ms2_form {
    display: block;
    height: 100%;
}

.items-container span {
    color: #000;
    font-family: 'Inter';
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 5px;
}

.items-container p {
    color: #000;
    font-family: 'Inter';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.items-content {
    position: relative;
    padding: 25px 20px;
}

.items-img img {
    width: 100%;
}

.items-container a {
    text-decoration: none;
    color: inherit;
}

.items-show-more a {
    color: #FFF;
    font-family: 'Inter';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
}

.items-show-more {
    text-align: center;
    padding: 11px 15px;
    margin-top: 30px;
    border-radius: 5px;
    background: #000;
    box-shadow: 6px 6px 4px 0px rgba(0, 0, 0, 0.25);
}

.questions-section {
    background: #FFCD4E;
    padding-top: 50px;
    padding-bottom: 50px;
}

.questions-section h3 {
    color: #000;
    font-family: 'Inter';
    font-size: 36px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

.questions-text {
    color: #000;
    font-family: 'Inter';
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.questions-form input::placeholder {
    color: #8E8E8E;
    font-family: 'Inter';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.questions-form textarea::placeholder {
    color: #8E8E8E;
    font-family: 'Inter';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.questions-form input {
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    margin-bottom: 15px;
    padding: 10px 15px;
    border: none;
}

.questions-form textarea {
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    margin-bottom: 15px;
    padding: 10px 15px;
    border: none;
    resize: none;
}

.questions-form {
    display: flex;
    flex-direction: column;
    max-width: 435px;
    width: 100%;
}

.questions-btn {
    border-radius: 5px;
    background: #000;
    box-shadow: 6px 6px 4px 0px rgba(0, 0, 0, 0.25);
    width: 100%;
    text-align: center;
}

.questions-btn button {
    background: #000;
    box-shadow: none;
    color: #FFF;
    font-family: 'Inter';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0;
    padding: 11px 15px;
    border: none;
}

.reviews-bg {
    background: #F5F5F5;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 30px;
}

.footer {
    background: #3B3B3B;
}

.footer a {
    color: #FFF;
    font-family: 'Inter';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
}

.footer h3 {
    color: #FFF;
    font-family: Inter;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.footer-link {
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.footer-link svg {
    margin-right: 10px;
}

.artclose {
    height: 30px;
    width: 33px;
    cursor: pointer;
    display: none;
}

.burgx, .burgx2, .burgx3 {
    margin-top: 3px;
    background: #201610;
    width: 33px;
    height: 4px;
    position: absolute;
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
      transition: transform 0.3s, margin-top 0.3s, opacity 0.3s;
}

.burgx2 {
    margin-top: 13px;
}
.burgx3 {
    margin-top: 23px;

    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

.reviews {
    max-width:560px;
    height:550px;
    overflow:hidden;
    position:relative;
}

.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99999;
    transition: 0.5s;
    text-decoration: none;
}

.back-to-top i {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    background: black;
    color: #fff;
    transition: all 0.4s;
}

.back-to-top:hover {
    bottom: 19px;
    text-decoration: none;
}

.nav-links a {
    transition: color 0.5s;
}

.nav-links a:hover {
    color: #FFCC42;
}

.header-phone p {
    transition: color 0.5s;
}

.header-phone p:hover {
    color: #FFCC42;
}

.hero-btn a {
    color: #FFF;
    font-family: 'Inter';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
    transition: all 0.5s;
}

.hero-btn a:hover {
    font-size: 20px;
}

.items-show-more a {
    transition: all 0.5s;
}

.items-show-more a:hover {
    font-size: 20px;
}

.questions-btn input {
    transition: all 0.5s;
}

.questions-btn input:hover {
    font-size: 20px;
}

footer a {
    transition: all 0.5s;
}

footer a:hover {
    color: #FFCC42;
}

.header {
    background: #FFCD4E;
    height: 101px;
    display: flex;
    align-items: center;
}

.header h1 {
    color: #000;
    text-align: center;
    font-family: 'Inter';
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 0;
}

.content-container {
    margin-top: 60px;
    margin-bottom: 60px;
}

.contacts-description p {
    color: #000;
    font-family: 'Inter';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.contacts-info a {
    color: #000;
    font-family: 'Inter';
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    transition: color 0.5s;
    text-decoration: none;
}

.contacts-info a:hover {
    color: #FFCD4E;
}

.contacts-info svg {
    margin-right: 10px;
}

.contacts-phone-item {
    margin-bottom: 15px;
}

.contacts-phone {
    margin-bottom: 30px;
}

.contacts-mail-item {
    margin-bottom: 15px;
}

.contacts-mail {
    margin-bottom: 30px;
}

.contacts-address {
    margin-bottom: 15px;
}

.contacts-address-item {
    margin-bottom: 30px;
}

.contacts-form h3 {
    color: #000;
    font-family: 'Inter';
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.contacts-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.contacts-form form {
    background: #F7F7F7;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 30px;
}

.sidebar {
    background: #F8F8F8;
    padding-top: 30px;
    padding-bottom: 30px;
}

.sidebar-container {
    margin-left: 15px;
}

.sidebar-filters h3 {
    padding-bottom: 15px;
    margin-bottom: 0;
    color: #000;
    font-family: 'Inter';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.item,
.sub-item {
    color: #000;
    font-family: 'Inter';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.item:not(:last-child) {
    margin-bottom: 10px;
}

.sub-item {
    margin-bottom: 10px;
}

.sub-item {
    display: none;
    margin-left: 20px;
}

.item > input {
    margin-right: 5px;
}

.item svg {
    margin-right: 15px;
}

.sidebar .hr {
    margin-bottom: 30px;
    margin-top: 30px;
    height: 1px;
    width: 100%;
    background: #EEE;
}

.item-cost {
    color: #000;
    text-align: center;
    font-family: 'Inter';
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.item-to-basket {
    background: #000;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 10px 15px;
}

.item-to-basket {
    color: #FFF;
    font-family: 'Inter';
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
    text-align: center;
    transition: font-size 0.5s;
    cursor: pointer;
}

.item-to-basket:hover {
    font-size: 20px;
}

.catalog-items-line {
    margin-top: -20px;
    margin-bottom: 60px;
}

.ms2_form {
    display: flex;
    flex-direction: column;
    height: 600px; /* Фиксированная высота карточки */
}

.items-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Для выравнивания содержимого */
}

.items-img {
    /* Стилизация изображения */
}

.items-content {
    /* Стилизация содержимого карточки */
    flex-grow: 1;
}

.item-footer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Выравнивание содержимого к низу */
}

.item-cost {
    text-align: center;
    margin-bottom: 10px; /* Отступ между ценой и кнопкой */
}

.item-to-basket {
    width: 100%; /* Ширина кнопки */
    text-align: center;
}

/* Стиль для обычного состояния чекбокса */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  background-color: #D9D9D9;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  border: 2px solid transparent; /* Скрыть границу */
}

/* Стиль для чекбокса при выборе */
input[type="checkbox"]:checked {
  background-color: #FFCD4E;
  border-color: #FFCD4E; /* Для соответствия цвету фона */
}

/* Стиль для иконки галочки внутри чекбокса */
input[type="checkbox"]:checked::after {
  content: '';
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="7" viewBox="0 0 9 7" fill="none"><path d="M3.0875 6.51354L0 3.42604L0.771875 2.65417L3.0875 4.96979L8.05729 0L8.82917 0.771875L3.0875 6.51354Z" fill="white"/></svg>');
  background-size: 9px 7px; /* Размер вашего SVG изображения */
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Добавление кастомного стиля для всех подписей, ассоциированных с чекбоксами */
input[type="checkbox"] + span {
  font-size: 16px;
  line-height: 24px;
  vertical-align: middle;
  padding-left: 5px;
}

/* Стиль для области фильтра */
#mse2_filters {
  font-family: 'Inter', sans-serif;
}

/* Стиль для заголовков фильтров */
#mse2_filters h4.filter_title {
  color: #000;
  font-size: 18px;
  margin-bottom: 10px;
}

/* Стиль для контейнера фильтров */
#mse2_filters fieldset {
  border: none;
  padding: 0;
  margin-bottom: 20px;
}

/* Стиль для подписи чекбокса */
input[type="checkbox"] + span {
  margin-left: 8px; /* Отступ между чекбоксом и текстом */
}

#mse2_filters label {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 5px;
}

#mse2_results {
        --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
    }
    
    #mse2_results>* {
    flex-shrink: 0;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
    }
    
    fieldset#mse2_msoption\|used_with {
    margin-top: 30px;
}

fieldset#mse2_resource\|parent {
    margin-top: 30px;
}

#mse2_mfilter {
    margin-top: 30px;
}

#mse2_form {
    margin-top: 30px;
}

#mse2_form button {
    background: #FFCD4E;
    border: none;
    color: black;
    border-radius: 0;
}

#mse2_form button:hover {
    background: #FFCD4E;
}

select#mse2_limit {
    margin-top: 10px;
    margin-bottom: 15px;
}

.item-cost {
    margin-top: 15px;
}

input#mse2_ms\|price_0 {
    margin-left: 5px;
}

input#mse2_ms\|price_1 {
    margin-left: 5px;
}

form#mse2_filters {
    background: #F8F8F8;
    padding: 15px;
}

fieldset#mse2_msoption\|mark {
    margin-top: 30px;
}

fieldset#mse2_msoption\|mark1 {
    margin-top: 30px;
}

fieldset#mse2_msoption\|mark3 {
    margin-top: 30px;
}

.filter_title {
    margin-bottom: 15px;
}

.image-container {
    width: 100%; /* или конкретная ширина, если требуется */
    height: 200px; /* максимальная высота */
    background-size: cover;
    background-position: center;
}

@media (max-width: 1400px) {
    .hero-img img {
        right: -150px;
    }
}

@media (max-width: 1200px) {
    .hero-img img {
        right: -250px;
        scale: 0.9;
        top: 160px;
    }
}

@media (max-width: 992px) {
    .hero-img img {
        right: -200px;
        top: 350px;
    }
    .nav-menu {
        position: absolute;
        top: 85px;
        left: 0;
        background: white;
        padding-top: 30px;
        padding-bottom: 30px;
        z-index: 1;
        overflow-x: hidden;
    }


    .nav-links,
    .nav-phones {
        margin-left: 30px;
    }

    .artclose {
        display: block;
    }

    .nav-menu {
        visibility: hidden;
    }

    .active {
        visibility: visible;
        border-bottom: 1px solid #dadada;
    }

    .questions-form {
        max-width: 100%;
    }

    .reviews {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .hero-img img {
        display: none;
    }

    .hero-text {
        text-align: center;
    }

    .hero-btn {
        margin: 0 auto;
    }
    
    .table-responsive table {
        width: 100%;
        border: 0;
    }

    .table-responsive thead {
        display: none; /* Скрываем заголовки на маленьких экранах */
    }

    .table-responsive tbody,
    .table-responsive tr,
    .table-responsive td {
        display: block;
        width: 100%;
    }

    .table-responsive tr {
        margin-bottom: 15px;
    }

    .table-responsive td {
        /* text-align: right; */ /* Выравнивание текста по правому краю */
        /* padding-left: 50%; */ /* Отступ для текста, чтобы не накладывался на данные */
        position: relative;
            border: none;
    }

    .table-responsive td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 15px;
        font-weight: bold;
        text-align: left; /* Выравнивание заголовков по левому краю */
    }

    .table-responsive .ms-remove {
        text-align: center; /* Выравнивание кнопки удаления по центру */
    }

    .table-responsive .ms-remove form {
        margin: 0; /* Убрать внешние отступы формы */
    }

    .ms2_form input[type="number"] {
        width: auto; /* Автоматическая ширина для полей ввода */
    }

    .ms2_form .input-group {
        width: 100%; /* Ширина группы ввода на 100% */
    }

    .ms2_form .btn {
        width: 100%; /* Ширина кнопок на 100% */
    }

    .ms-footer {
        display: block;
        width: 100%;
        text-align: center; /* Выравнивание итогов по центру */
    }
    
    /* Скрываем заголовки таблицы */
    .table-responsive .ms-header th {
        display: none;
    }

    /* Стилизация ячеек таблицы */
    .table-responsive td {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: left;
        padding: .75rem; /* Регулируем отступы */
        border-top: 1px solid #dee2e6; /* Добавляем границы для разделения строк */
    }

    /* Добавляем названия полей перед значениями в ячейках */
    .table-responsive td:before {
        content: attr(data-label);
        font-weight: bold;
        width: 100%;
        margin-bottom: .25rem; /* Отступ после названия поля */
    }

    /* Специальные стили для кнопок изменения и удаления */
    .ms2_form {
        width: 100%;
        margin-top: .5rem;
    }

    .ms2_form .btn {
        width: 100%;
    }

    /* Стили для строки итогов, чтобы выглядело аккуратно */
    .ms-footer th {
        display: block;
        width: 100%;
        border: none;
        background: none;
        text-align: right;
    }

    .ms-footer .total {
        text-align: left;
        margin-top: .5rem;
        border: none;
        background: none;
        text-align: right;
    }

    .ms-footer .total_count, .ms-footer .total_weight, .ms-footer .total_cost {
        text-align: right;
        margin-top: .5rem;
    }
    
    .ms-title .title a {
        text-decoration: none;
        color: inherit;
        font-weight: 500;
    }
    
    .table-responsive .ms-title {
        align-items: stretch;
    }
    
    .ms-title .title {
        margin-top: 15px;
    }
    
    .table-striped>tbody>tr:nth-of-type(odd)>* {
        background: none;
        --bs-table-accent-bg: none;
    }
    
    .table-responsive tr.ms-footer {
        display: flex;
    }
    
    .table-responsive tr.ms-footer th {
        text-align: left;
    }
}

@media (max-width: 576px) {
    .hero h1 {
        font-size: 40px;
    }

    .hero-btn {
        padding: 10px 15px;
    }

    .logo a {
        font-size: 24px;
    }
}

body {
overflow-x: hidden;
}

html {
overflow-x: hidden;
}