/**
 * Описание магазина (.description внутри "О магазине"/"Доставка" в
 * shop_info.twig) — это HTML из WYSIWYG-редактора продавца, выводится без
 * экранирования ({{ shop_info.description }}/{{delivery_info}}, autoescape
 * выключен глобально в system/library/template/twig.php). Разные продавцы
 * вставляют текст с разным форматированием (свои шрифты, цвета, жирность
 * из скопированного Word/Google Docs) — отсюда разнобой между магазинами:
 * у одних обычный текст, у других — жирный текст чужим шрифтом.
 *
 * Ничего не меняем в данных/админке — только приводим отображение к
 * единому стилю сайта: карточка-подложка вместо голого текста на белом
 * фоне, спокойный обычный текст без навязанной жирности/крупного размера.
 *
 * ВАЖНО: на вкладке "Промокоды" .description оборачивает не текст
 * продавца, а .promocode-list — уже готовый, отдельно оформленный
 * компонент со своим фоном/рамкой. Эти правила туда намеренно НЕ
 * применяются (иначе получалась карточка внутри карточки, а сброс
 * background:transparent!important гасил родной фон плашки промокода).
 */
.manufacturer-page #shop-about .description,
.manufacturer-page #shop-shipping .description {
    position: relative;
    font-family: var(--font-roboto);
    color: var(--gray-800);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 16px 18px;
    /* Тут, а не только в .is-collapsed — JS снимает класс is-collapsed
       ДО того, как меняет max-height при разворачивании, так что transition
       должен быть на элементе постоянно, иначе анимация открытия не
       срабатывает (jump вместо плавного расширения). */
    transition: max-height .25s ease;
}

/* ===== Свернуть длинный текст — длинные описания (несколько абзацев)
   раньше просто занимали весь экран без разбора. Схлопываем до ~5 строк
   с плавным затуханием внизу + кнопка "Показать полностью"; сам JS решает,
   нужна ли кнопка вообще (короткие описания типа "Туркстайл" её не
   получают — text.scrollHeight укладывается в лимит). */
.manufacturer-page #shop-about .description.is-collapsed,
.manufacturer-page #shop-shipping .description.is-collapsed {
    overflow: hidden;
}

.manufacturer-page #shop-about .description.is-collapsed::after,
.manufacturer-page #shop-shipping .description.is-collapsed::after {
    content: '';
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    height: 44px;
    border-radius: 0 0 15px 15px;
    background: linear-gradient(to bottom, rgba(248, 250, 252, 0), var(--gray-50) 85%);
    pointer-events: none;
}

/* display:inline-flex безусловно на .description-toggle перебивал [hidden]
   из юзер-агент стилей (у класса выше специфичность) — кнопка "Показать
   полностью" была видна ВСЕГДА, даже когда JS её не открывал. Условие
   :not([hidden]) возвращает управление видимостью атрибуту.

   Пилюля вместо голой подчёркнутой ссылки — тот же язык, что у остальных
   маленьких кнопок на странице (сердечко/QR/копировать промокод). */
.manufacturer-page .description-toggle {
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(33, 70, 125, .08);
    border: 1px solid rgba(33, 70, 125, .2);
    color: var(--blue);
    font-family: var(--font-roboto);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}

.manufacturer-page .description-toggle:not([hidden]) {
    display: inline-flex;
}

.manufacturer-page .description-toggle:hover {
    background: rgba(33, 70, 125, .14);
    border-color: rgba(33, 70, 125, .32);
}

.manufacturer-page .description-toggle:active {
    transform: scale(.96);
}

.manufacturer-page .description-toggle svg {
    display: block;
    flex-shrink: 0;
    transition: transform .2s ease;
}

/* Стрелка смотрит вниз ("развернуть") в свёрнутом состоянии и переворачивается
   вверх ("свернуть"), когда текст открыт — .is-expanded вешает JS по клику. */
.manufacturer-page .description-wrap.is-expanded .description-toggle svg {
    transform: rotate(180deg);
}

/* Сбрасываем инлайн-форматирование, которое продавцы протащили при вставке
   текста (свой цвет/шрифт/фон/жирность/размер), — единый спокойный стиль
   независимо от источника. */
.manufacturer-page #shop-about .description *,
.manufacturer-page #shop-shipping .description * {
    color: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    background: transparent !important;
    text-align: left !important;
}

.manufacturer-page #shop-about .description p,
.manufacturer-page #shop-shipping .description p {
    margin: 0 0 12px;
}

.manufacturer-page #shop-about .description p:last-child,
.manufacturer-page #shop-shipping .description p:last-child {
    margin-bottom: 0;
}

/* То, что продавец выделил жирным (<strong>/<b>) — лёгкий акцент цветом и
   чуть плотнее насыщенность, а не тяжёлый bold на весь абзац. */
.manufacturer-page #shop-about .description strong,
.manufacturer-page #shop-about .description b,
.manufacturer-page #shop-shipping .description strong,
.manufacturer-page #shop-shipping .description b {
    font-weight: 500 !important;
    color: var(--navy) !important;
}

.manufacturer-page #shop-about .description ul,
.manufacturer-page #shop-about .description ol,
.manufacturer-page #shop-shipping .description ul,
.manufacturer-page #shop-shipping .description ol {
    margin: 0 0 12px;
    padding-left: 20px;
}

.manufacturer-page #shop-about .description li,
.manufacturer-page #shop-shipping .description li {
    margin-bottom: 6px;
}

.manufacturer-page #shop-about .description a,
.manufacturer-page #shop-shipping .description a {
    color: var(--blue) !important;
    text-decoration: underline;
}

/* ===== Десктоп: карточка реквизитов и текст описания стоят в один
   flex-ряд (.d-flex), а .d-flex по умолчанию align-items:stretch —
   поэтому карточка слева растягивалась/сжималась вслед за высотой
   текста при разворачивании/сворачивании справа. Она должна стоять
   отдельно, со своей естественной высотой. */
@media (min-width: 1024px) {
    .manufacturer-page #shop-about > .d-flex,
    .manufacturer-page #shop-shipping > .d-flex {
        align-items: flex-start;
    }
}