/* ============================================================
   ABOUT / INFO PAGES
   ============================================================ */

/* Минимальная высота - чтобы на совсем короткой странице подвал не
   вставал посреди экрана. Раньше было calc(100vh - 180px): под контентом
   кабинета оставалось ~330px пустоты, а подвал (464px) начинался ниже
   первого экрана - до него приходилось долго крутить. */
.about-page {
    padding: var(--spacing-lg) 0 var(--spacing-xxl);
    min-height: calc(100vh - 460px);
    overflow-x: hidden;
}

.about-breadcrumb-current {
    color: var(--color-text-secondary);
}

/* 26px/600 — общий размер заголовка страницы по всему сайту (см. также
   .catalog-page-title, .account-title, .auth-page__title,
   .checkout-page__title). В макете этот заголовок был 36px и выбивался
   из остальных страниц — привели к единому стилю. */
.about-page__title {
    font-family: var(--font-headers);
    font-size: var(--heading-page);
    font-weight: var(--heading-weight);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-lg);
    margin-top: var(--spacing-md);
    line-height: var(--heading-page-lh);
}

/* ============================================================
   LAYOUT: sidebar + content
   ============================================================ */

.about-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 48px;
    align-items: start;
    max-width: 100%;
    overflow: hidden;
}

/* ============================================================
   SIDEBAR NAV
   ============================================================ */

.about-nav {
    display: flex;
    flex-direction: column;
}

.about-nav__item {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: 12px 16px;
    transition: color var(--transition-default), background var(--transition-default);
    border-radius: 0;
}

.about-nav__item:hover {
    color: var(--color-text-primary);
}

.about-nav__item--active {
    background: var(--color-accent);
    color: var(--color-white);
    font-weight: 700;
}

.about-nav__item--active:hover {
    color: var(--color-white);
    background: var(--color-accent-hover);
}

/* ============================================================
   CONTENT AREA
   ============================================================ */

.about-content {
    min-width: 0;
    overflow: hidden;
}

.about-tab {
    display: block;
}

.about-tab--hidden {
    display: none;
}

/* ============================================================
   HERO IMAGE
   ============================================================ */

.about-hero {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    margin-bottom: var(--spacing-lg);
    background: #1a1a2e;
}

.about-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
}

.about-hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 32px 40px;
}

.about-hero__text {
    font-family: var(--font-headers);
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.4;
    max-width: 560px;
    margin: 0;
}

/* ============================================================
   TEXT BLOCKS
   ============================================================ */

.about-text {
    margin-bottom: var(--spacing-lg);
}

.about-text p {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-text-primary);
    line-height: 1.7;
    margin: 0 0 10px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.about-text p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   SECTION HEADING
   ============================================================ */

.about-section {
    margin-bottom: var(--spacing-lg);
}

/* Подзаголовок внутри текстового блока. Был набран шрифтом основного
   текста и почти не отличался от абзацев вокруг. Ставим самую мелкую
   ступень шкалы: заголовок читается, но не спорит с названием
   страницы. */
.about-section__title {
    font-family: var(--font-headers);
    font-size: var(--heading-sub);
    font-weight: var(--heading-weight);
    color: var(--color-text-primary);
    margin: 0 0 16px;
    line-height: var(--heading-sub-lh);
}

/* ============================================================
   TAGS / CHIPS
   ============================================================ */

.about-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 100%;
}

.about-tag {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-secondary);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    padding: 10px 16px;
    cursor: pointer;
    transition: border-color var(--transition-default), color var(--transition-default);
    text-align: left;
    line-height: 1.4;
    max-width: 100%;
    box-sizing: border-box;
    word-break: break-word;
}

.about-tag:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.about-tag--active {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-white);
}

/* ============================================================
   BRAND LOGOS GRID
   ============================================================ */

.about-brands {
    margin-bottom: var(--spacing-lg);
}

.about-brands__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 100%;
}

/* display:grid перебивал браузерный [hidden]{display:none} — переключатель
   тегов проставлял hidden корректно, но неактивные группы логотипов всё
   равно оставались видимыми одна под другой. */
.about-brands__grid[hidden] {
    display: none;
}

.about-brands__item {
    border: 1px solid var(--color-border);
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    gap: 8px;
    min-height: 100px;
}

.about-brands__logo {
    max-width: 100px;
    max-height: 40px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter var(--transition-default), opacity var(--transition-default);
}

.about-brands__item:hover .about-brands__logo {
    filter: grayscale(0);
    opacity: 1;
}

.about-brands__name {
    font-family: var(--font-headers);
    font-size: 13px;
    font-weight: var(--heading-weight);
    color: var(--color-text-primary);
    text-align: center;
}

/* ============================================================
   BULLET LIST
   ============================================================ */

.about-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Список между абзацами текста (гарантия, возврат и обмен) — свой отступ,
   т.к. .about-list сама по себе margin не задаёт. */
.about-text + .about-list {
    margin-top: var(--spacing-sm);
}

.about-list + .about-text {
    margin-top: var(--spacing-lg);
}

.about-list li {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-text-primary);
    line-height: 1.6;
    padding-left: 28px;
    position: relative;
}

.about-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 2px;
    background: var(--color-accent);
}

/* ============================================================
   TEAM SECTION
   ============================================================ */

/* Заголовок блока. Был 28 — крупнее названия самой страницы (26),
   и «Команда — наша гордость» кричала громче, чем «О компании». */
.about-team__title {
    font-family: var(--font-headers);
    font-size: var(--heading-section);
    line-height: var(--heading-section-lh);
    font-weight: var(--heading-weight);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-md);
}

.about-team__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: var(--spacing-md);
}

.about-team__member {
    display: flex;
    flex-direction: column;
}

.about-team__photo-wrap {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--color-bg-secondary);
    margin-bottom: 12px;
}

.about-team__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-team__name {
    font-family: var(--font-body);
    font-size: var(--font-size-card-name);
    line-height: var(--line-height-card-name);
    font-weight: var(--heading-weight);
    color: var(--color-text-primary);
    margin: 0 0 4px;
}

.about-team__role {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: 0;
}

/* ============================================================
   PROMO CARDS
   ============================================================ */

.about-promo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.about-promo-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--color-text-primary);
}

.about-promo-card__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-bg-secondary);
    margin-bottom: 14px;
}

.about-promo-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.about-promo-card:hover .about-promo-card__img {
    transform: scale(1.05);
}

.about-promo-card__label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 14px;
    background: rgba(9, 30, 66, 0.55);
    font-family: var(--font-headers);
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.about-promo-card__title {
    font-family: var(--font-body);
    font-size: var(--font-size-card-name);
    line-height: var(--line-height-card-name);
    font-weight: var(--heading-weight);
    color: var(--color-text-primary);
    margin: 0 0 6px;
    line-height: 1.4;
    transition: color var(--transition-default);
}

.about-promo-card:hover .about-promo-card__title {
    color: var(--color-accent);
}

.about-promo-card__text {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   SECTION TITLE LARGE
   ============================================================ */

.about-section__title--lg {
    font-family: var(--font-headers);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
}

/* ============================================================
   DELIVERY CARDS
   ============================================================ */

.about-delivery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: var(--spacing-lg);
}

.about-delivery-card__img-wrap {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--color-bg-secondary);
    margin-bottom: 16px;
}

.about-delivery-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-delivery-card__title {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 8px;
}

.about-delivery-card__text {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   PAYMENT CARDS
   ============================================================ */

.about-payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.about-payment-card {
    border: 1px solid var(--color-border);
    padding: 24px;
    background: var(--color-white);
}

.about-payment-card__icon {
    color: var(--color-text-secondary);
    margin-bottom: 16px;
}

/* img,svg{height:auto} из common.css перебивает атрибуты width/height
   у иконок оплаты, растягивая их на всю ширину карточки — фиксируем
   размер явно, как в макете (28x28). Инлайновый PayKeeper-svg этим
   правилом не задет, ему высота задаётся так же явно. */
.about-payment-card__icon img,
.about-payment-card__icon svg {
    width: 28px;
    height: 28px;
}

.about-payment-card__title {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 8px;
    line-height: 1.4;
}

.about-payment-card__text {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   NEWS TAB
   ============================================================ */

.news-layout {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: 24px;
    align-items: start;
}

.news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* News sidebar filter */
.news-sidebar {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.news-filter-btn {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-secondary);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    padding: 10px 16px;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-default), color var(--transition-default);
}

.news-filter-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.news-filter-btn--active {
    border-color: var(--color-accent);
    color: var(--color-accent);
    font-weight: 600;
}

@media (max-width: 768px) {
    .news-layout {
        grid-template-columns: 1fr;
    }

    .news-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */

/* Форма обратной связи под аккордеоном — тот же .write-card, что и
   на главной, только с отступом сверху: там он давала соседняя сетка. */
.about-content__callback {
    margin-top: var(--spacing-lg);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-item {
    background: var(--color-bg-secondary);
    padding: 0 24px;
}

.faq-item__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 20px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.4;
}

.faq-item__head:hover {
    color: var(--color-accent);
}

.faq-item__arrow {
    flex-shrink: 0;
    color: var(--color-accent);
    transition: transform var(--transition-default);
}

.faq-item--open .faq-item__arrow {
    transform: rotate(180deg);
}

.faq-item__body {
    padding-bottom: 20px;
}

.faq-item__body p {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* ============================================================
   CONTACTS TAB
   ============================================================ */

.contacts-info {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.contacts-info__col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contacts-info__col--address {
    flex: 1;
}

.contacts-info__col--social {
    margin-left: auto;
}

.contacts-info__value {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.contacts-info__label {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Телефон и почта — реальные ссылки (tel:/mailto:), не просто текст,
   как в макете; снимаем стандартное подчёркивание ссылки. */
a.contacts-info__value {
    text-decoration: none;
}

a.contacts-info__value:hover {
    color: var(--color-accent);
}

.contacts-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    border-radius: 0;
    text-decoration: none;
    transition: background var(--transition-default);
}

.contacts-social-btn:hover {
    background: #ead5ff;
}

/* Map */
.contacts-map {
    width: 100%;
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
}

.contacts-map iframe {
    display: block;
    width: 100%;
    height: 400px;
    border: none;
}

/* Contact form */
.contacts-form-wrap {
    background: var(--color-accent-bg);
    padding: 32px;
    margin-bottom: var(--spacing-lg);
}

/* Заголовок, пояснение и сама форма — одной колонкой по центру плашки:
   поля во всю ширину блока выглядели бы растянутыми, а прижатые влево
   оставляли бы пустой правый край. Ширина колонки та же, что у формы
   обратной связи на главной (.write-content). */
.contacts-form__title,
.contacts-form__description,
.contacts-form {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

.contacts-form__title {
    font-family: var(--font-headers);
    font-size: var(--heading-section);
    line-height: var(--heading-section-lh);
    font-weight: var(--heading-weight);
    color: var(--color-accent);
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

.contacts-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.contacts-form__description {
    margin-top: -8px;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.contacts-form__submit {
    width: 100%;
    height: 52px;
    background: var(--color-accent);
    color: var(--color-white);
    border: none;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition-default);
    margin-top: auto;
}

.contacts-form__submit:hover {
    background: var(--color-accent-hover);
}

/* Реквизиты */
.contacts-requisites {
    margin-top: var(--spacing-lg);
}

/* Был самым крупным заголовком на сайте — 32, при названии страницы
   26. Ставим по общей шкале, вровень со «Свяжитесь с нами» рядом. */
.contacts-requisites__title {
    font-family: var(--font-headers);
    font-size: var(--heading-section);
    line-height: var(--heading-section-lh);
    font-weight: var(--heading-weight);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-lg);
}

.contacts-requisites__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 48px;
}

.contacts-req-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contacts-req-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contacts-req-item__value {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.4;
}

.contacts-req-item__label {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-accent);
    margin: 0;
}

.contacts-req-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 14px 20px;
    transition: background var(--transition-default);
}

.contacts-req-download:hover {
    background: #ead5ff;
}

@media (max-width: 768px) {
    .contacts-requisites__grid {
        grid-template-columns: 1fr;
    }

    .contacts-info {
        flex-direction: column;
        gap: 20px;
    }

    .contacts-info__col--social {
        margin-left: 0;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .about-layout {
        grid-template-columns: 180px 1fr;
        gap: 32px;
    }

    /* .about-brands__grid сюда сознательно не включаем: категорий с
       нечётным числом брендов у нас не бывает (все 5 вкладок несут ровно
       по 4 логотипа), а 3 колонки на 4 карточки оставляют одну сиротой
       во втором ряду — так было и в макете, отступ и правда «плывёт». */
    .about-team__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .about-promo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .about-promo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .about-delivery-grid {
        grid-template-columns: 1fr;
    }

    .about-payment-grid {
        grid-template-columns: 1fr;
    }

    .about-layout {
        grid-template-columns: 1fr;
        gap: 0;
        overflow: visible;
    }

    .about-sidebar {
        margin-bottom: var(--spacing-md);
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .about-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 0;
        border-bottom: 2px solid var(--color-border);
        padding-bottom: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100%;
    }

    .about-nav::-webkit-scrollbar {
        display: none;
    }

    .about-nav__item {
        white-space: nowrap;
        padding: 10px 14px;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        font-size: 13px;
    }

    .about-nav__item--active {
        background: none;
        color: var(--color-accent);
        border-bottom-color: var(--color-accent);
    }

    .about-nav__item--active:hover {
        background: none;
        color: var(--color-accent);
    }

    .about-hero__text {
        font-size: 16px;
    }

    .about-brands__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-team__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .about-hero__overlay {
        padding: 16px;
    }

    .about-hero__text {
        font-size: 13px;
    }

    .about-tags {
        gap: 8px;
    }

    .about-tag {
        font-size: 13px;
        padding: 8px 12px;
    }

    .about-brands__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-team__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-team__title {
        font-size: var(--heading-section-mobile);
    }
}

@media (max-width: 600px) {
    .about-page__title {
        font-size: var(--heading-page-mobile);
    }
}

/* ============================================================
   ЮРИДИЧЕСКИЕ СТРАНИЦЫ (политика обработки ПД, оферты)
   ------------------------------------------------------------
   Текст длинный и читается не подряд, а поиском нужного пункта:
   ставим кегль меньше основного (14 против 15), заголовки разделов
   тоже мельче, а приложение с целями обработки — таблицей, которая
   прокручивается вбок на узком экране.
   ============================================================ */

.about-page--legal .about-text p,
.about-page--legal .about-list li {
    font-size: 14px;
    line-height: 1.6;
}

.about-page--legal .about-section__title--lg {
    font-size: 18px;
    margin-bottom: var(--spacing-sm);
}

.about-page--legal .about-section {
    margin-bottom: var(--spacing-lg);
}

.about-page__lead {
    margin: 0 0 var(--spacing-lg);
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: 14px;
}

.about-table-wrap {
    overflow-x: auto;
    margin-bottom: var(--spacing-lg);
}

.about-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
}

.about-table th,
.about-table td {
    border: 1px solid var(--color-border);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}

.about-table th {
    background: var(--color-bg-secondary, #f7f7f9);
    font-weight: 600;
}

.about-table td:first-child {
    min-width: 220px;
}