.comment-box { max-width: 600px; margin: 20px auto; font-family: sans-serif; }
.comment-box input, .comment-box textarea { width: 100%; margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
.comment-box button { background: #cd7f32; color: white; border: none; padding: 10px 20px; cursor: pointer; border-radius: 4px; }
.comment strong { color: #333; }
.comment p { margin-top: 5px; color: #555; }
.comment {
    background: #fdfdfd;
    padding: 10px;
    border-radius: 4px;
}
.tg-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #ffffff; /* Фирменный цвет Telegram */
  color: #24A1DE;
  padding: 10px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}
.tg-button:hover {
  background-color: #1d82b3;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}


/* Ограничим максимальный отступ, чтобы на телефонах текст не стал слишком узким */
@media (max-width: 600px) {
    .child-comments .comment {
        margin-left: 10px !important;
    }
}


h1 {
    text-align: left; /* Заголовок слева */
    margin-bottom: 20px;
}


/* Контейнер для десктопа */
.content-wrapper {
    display: flex;
    flex-wrap: wrap; /* Позволяет переносить блоки на новую строку */
    gap: 20px;       /* Отступ между картинкой и таблицей */
    align-items: flex-start; /* Выравнивание по верхнему краю */
}

/* Блоки для картинки и таблицы */
.content-item {
    flex: 1 1 400px; /* На десктопе делят место, если экран шире 800px+ */
}

/* Картинка (всегда 100% своего блока) */
.scheme-img {
    max-width: 100%; /* Картинка никогда не станет шире своего родителя */
    height: auto;
    display: block;
}
/* Таблица */
.parts-table {
    width: 100%; /* На десктопе растягивается на 50% экрана */
    max-width: 500px; /* Чтобы таблица не была слишком гигантской */
    border-collapse: collapse;
    margin: 0; /* По умолчанию прижата влево (для десктопа) */
}
.parts-table th, .parts-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}
.parts-table th { background-color: #f4f4f4; }

/* --- МОБИЛЬНАЯ АДАПТАЦИЯ (экран меньше 768px) --- */
@media (max-width: 768px) {
    .content-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;    /* Центрирует блоки внутри флекса */
        width: 100%; /*  было 100%*/
    }

    .content-item {
        width: 100%;
        display: flex;         /* Делаем сам блок флексовым... */
        justify-content: center; /* ...чтобы центрировать таблицу внутри него */
    }

         .parts-table {
        width: auto;           /* Таблица будет шириной по тексту */
        min-width: 280px;      /* Чтобы не была слишком узкой */
        max-width: 95%;        /* Чтобы не вылезала за края экрана */
        margin: 0 auto;        /* Стандартная центровка */
        display: table;        /* Гарантируем поведение таблицы */
    }

}
/*-----------------------------------------------------*/