/* ==========================================================
   Посадочные страницы каталога (контент из БД, таблица info)
   Добавить в конец style.css каталога. Все правила — внутри
   #sa-catalog и включаются только классами sa-*, поэтому
   старые страницы товаров не меняются.
   ========================================================== */

#sa-catalog {
    --sa-accent: #1da1ca;
    --sa-accent-dark: #1789ad;
    --sa-text: #333;
    --sa-muted: #666;
    --sa-line: #e3e8ec;
    --sa-soft: #f5f9fb;
}

/* Вводный абзац */
#sa-catalog .sa-lead {
    font-size: 19px;
    line-height: 1.6;
    color: var(--sa-text);
    margin-bottom: 2rem;
}

/* Ключевые цифры */
#sa-catalog ul.sa-facts {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
#sa-catalog ul.sa-facts li {
    background: var(--sa-soft);
    border-left: 3px solid var(--sa-accent);
    border-radius: 6px;
    padding: 1rem 1.1rem;
    margin: 0;
}
#sa-catalog ul.sa-facts b {
    display: block;
    font-size: 26px;
    line-height: 1.1;
    color: var(--sa-accent);
    margin-bottom: .35rem;
}
#sa-catalog ul.sa-facts span {
    font-size: 14px;
    line-height: 1.35;
    color: var(--sa-muted);
}

/* Картинки парами */
#sa-catalog .sa-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 3rem;
}
#sa-catalog .sa-figures > img,
#sa-catalog .sa-figures > div {
    flex: 1 1 280px;
    max-width: 480px;
}
#sa-catalog .sa-figures img {
    width: 100%;
    margin: 0;
}
#sa-catalog .sa-figures h3 {
    font-size: 16px !important;
    letter-spacing: 0;
}

/* Список с галочками */
#sa-catalog ul.sa-checks {
    list-style: none;
    padding-left: 0;
    margin: 0 0 3rem;
}
#sa-catalog p:has(+ ul.sa-checks) {
    margin-bottom: 1rem;
}
#sa-catalog ul.sa-checks li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: .5rem;
}
#sa-catalog ul.sa-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .35em;
    width: 1rem;
    height: .55rem;
    border-left: 2px solid var(--sa-accent);
    border-bottom: 2px solid var(--sa-accent);
    transform: rotate(-45deg);
}

/* Карточки (секции, исполнения, применение) */
#sa-catalog ul.sa-cards {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
#sa-catalog ul.sa-cards--wide {
    grid-template-columns: repeat(2, 1fr);
}
#sa-catalog ul.sa-cards li {
    background: #fff;
    border: 1px solid var(--sa-line);
    border-radius: 8px;
    padding: 1.1rem 1.2rem;
    margin: 0;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
#sa-catalog ul.sa-cards li:hover {
    border-color: var(--sa-accent);
    box-shadow: 0 6px 18px rgba(29, 161, 202, .12);
    transform: translateY(-2px);
}
#sa-catalog ul.sa-cards li > a,
#sa-catalog ul.sa-cards li > b {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sa-text);
    text-decoration: none;
    margin-bottom: .4rem;
}
#sa-catalog ul.sa-cards li > a {
    color: var(--sa-accent);
}
#sa-catalog ul.sa-cards li > a::after {
    content: " →";
}
#sa-catalog ul.sa-cards li > span {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    color: var(--sa-muted);
}

/* Этапы работы */
#sa-catalog ol.sa-steps {
    list-style: none;
    counter-reset: sa-step;
    padding: 0;
    margin: 0 0 3rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
#sa-catalog ol.sa-steps li {
    counter-increment: sa-step;
    position: relative;
    background: var(--sa-soft);
    border-radius: 8px;
    padding: 1.1rem 1.2rem 1.1rem 4rem;
    margin: 0;
}
#sa-catalog ol.sa-steps li::before {
    content: counter(sa-step);
    position: absolute;
    left: 1.1rem;
    top: 1.1rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--sa-accent);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
#sa-catalog ol.sa-steps b {
    display: block;
    font-size: 16px;
    color: var(--sa-text);
    margin-bottom: .3rem;
}
#sa-catalog ol.sa-steps span {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    color: var(--sa-muted);
}

/* Призыв к действию */
#sa-catalog .sa-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: var(--sa-accent);
    border-radius: 10px;
    padding: 1.5rem 2rem;
    margin: 0 0 3rem;
}
#sa-catalog .sa-cta p {
    color: #fff;
    font-size: 18px;
    margin: 0;
}
#sa-catalog .sa-btn {
    flex-shrink: 0;
    display: inline-block;
    background: #fff;
    color: var(--sa-accent-dark);
    font-weight: 700;
    border-radius: 6px;
    padding: .75rem 1.5rem;
    text-decoration: none;
    transition: background .2s, color .2s;
}
#sa-catalog .sa-btn:hover {
    background: #0f5f78;
    color: #fff;
}

/* FAQ (разметка как на главной: .faq-item / .faq-question / .faq-answer) */
#sa-catalog .sa-faq {
    margin-bottom: 3rem;
}
#sa-catalog .sa-faq .faq-item {
    border: 1px solid var(--sa-line);
    border-radius: 8px;
    margin-bottom: .75rem;
    background: #fff;
    overflow: hidden;
}
#sa-catalog .sa-faq .faq-question {
    position: relative;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 1rem 3rem 1rem 1.2rem;
    font-size: 16px;
    font-weight: 600;
    color: var(--sa-text);
    cursor: pointer;
}
#sa-catalog .sa-faq .faq-question::after {
    content: "+";
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 400;
    color: var(--sa-accent);
    transition: transform .2s;
}
#sa-catalog .sa-faq .faq-item.active {
    border-color: var(--sa-accent);
}
#sa-catalog .sa-faq .faq-item.active .faq-question::after {
    transform: translateY(-50%) rotate(45deg);
}
/* Открытие/закрытие — класс .active ставит custom.js (блок === FAQ ===) */
#sa-catalog .sa-faq .faq-answer {
    display: none;
    padding: 0 1.2rem 1rem;
}
#sa-catalog .sa-faq .faq-item.active .faq-answer {
    display: block;
}
#sa-catalog .sa-faq .faq-answer p {
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}

/* Таблица сравнения комплектаций */
#sa-catalog table.sa-compare td:first-child,
#sa-catalog table.sa-compare th:first-child {
    text-align: left;
}
#sa-catalog table.sa-compare td:not(:first-child) {
    font-size: 18px;
    color: var(--sa-accent);
    font-weight: 700;
}

/* Подзаголовок h3 внутри раздела (слева, а не по центру) */
#sa-catalog h3.sa-subhead {
    text-align: left;
    font-size: 17px !important;
    letter-spacing: 0;
    margin: 0 0 1rem;
}

/* Список с галочками в две колонки */
#sa-catalog ul.sa-checks--cols {
    columns: 2;
    column-gap: 2rem;
}
#sa-catalog ul.sa-checks--cols li {
    break-inside: avoid;
}
@media (max-width: 576px) {
    #sa-catalog ul.sa-checks--cols { columns: 1; }
}

/* Выделенная подсказка */
#sa-catalog .sa-note {
    background: #fff8e6;
    border-left: 3px solid #f0b429;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 0 0 3rem;
}
#sa-catalog .sa-note b {
    display: block;
    color: var(--sa-text);
    margin-bottom: .3rem;
}
#sa-catalog .sa-note span {
    display: block;
    font-size: 15px;
    line-height: 1.5;
    color: var(--sa-muted);
}

/* Мобильные */
@media (max-width: 991px) {
    #sa-catalog ul.sa-facts { grid-template-columns: repeat(2, 1fr); }
    #sa-catalog ul.sa-cards,
    #sa-catalog ol.sa-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    #sa-catalog .sa-lead { font-size: 17px; }
    #sa-catalog ul.sa-cards,
    #sa-catalog ul.sa-cards--wide,
    #sa-catalog ol.sa-steps { grid-template-columns: 1fr; }
    #sa-catalog .sa-cta { flex-direction: column; align-items: flex-start; padding: 1.25rem; }
}