/**
 * Карточка "О магазине" / "Доставка" / "Промокоды" (.brand-blocker внутри
 * #shop-about, #shop-shipping, #shop-promocodes в shop_info.twig).
 *
 * Баг с горизонтальным скроллом: .brand-blocker{max-width:300px} — жёсткое
 * значение в пикселях, рассчитанное на десктопную двухколоночную раскладку
 * (карточка слева + текст описания справа). На узких телефонах (320–375px)
 * даже 300px, плюс padding контейнера страницы, уже не помещаются — карточка
 * вылезает за край и появляется горизонтальный скролл всей страницы. На
 * мобильном отменяем фиксированную ширину и переводим на 100%.
 *
 * Заодно освежили сам вид карточки — было 40px паддинга (много для мобильного
 * экрана) и обычный прямоугольник с блёклым серым фоном; сделали компактнее
 * и в едином стиле с остальным редизайном (скругления, токены variables.css).
 * Иконки (icon-shop/icon-clock/icon-location) заменены на инлайн-SVG прямо
 * в шаблоне — иконочный шрифт тут больше не используется.
 */
/* ===== Вид карточки реквизитов — единый на любой ширине (мобильная и
   десктопная версии выглядят одинаково: скругление, серый фон, рамка,
   компактная типографика). Раньше это было только в мобильном блоке
   ниже, а на широких экранах действовал легаси-стиль (padding 40px,
   текст 16px, без рамки) — из-за этого дизайн визуально расходился между
   версиями. Теперь эти правила без media query, применяются везде. */
.manufacturer-page .brand-blocker .blocker-inner {
    box-sizing: border-box;
    background: var(--gray-50);
    padding: 18px 16px;
    border-radius: 16px;
    border: 1px solid var(--gray-200);
    grid-row-gap: 16px;
}

.manufacturer-page .brand-blocker .blocker-inner .item {
    column-gap: 12px;
    font-size: 14px;
    line-height: 1.4;
}

.manufacturer-page .brand-blocker .blocker-inner .item-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--blue);
}

/* Ряд с карточкой реквизитов/описанием садился вплотную под подчёркивание
   табов без единого отступа — на любой ширине, не только мобильной. */
.manufacturer-page #shop-about > .d-flex,
.manufacturer-page #shop-shipping > .d-flex,
.manufacturer-page #shop-promocodes > .d-flex {
    margin-top: 16px;
}

/* У #shop-about/#shop-shipping в легаси (style.min.css) есть
   column-gap:40px между карточкой реквизитов и текстом рядом, а у
   #shop-promocodes его не было вообще — карточка промокода на десктопе
   вплотную упиралась в карточку реквизитов слева. */
.manufacturer-page #shop-promocodes > .d-flex {
    column-gap: 40px;
}

@media (max-width: 1023px) {
    /* На мобильном/планшете карточка с реквизитами компании нужна только
       на вкладке "О магазине" — на "Доставка" и "Промокоды" её убираем
       целиком (по просьбе), там она только отнимала место и (на
       "Промокоды") мешала увидеть сами промокоды под ней. */
    .manufacturer-page #shop-shipping .brand-blocker,
    .manufacturer-page #shop-promocodes .brand-blocker {
        display: none !important;
    }

    /* НАСТОЯЩАЯ причина обрезания и "упирания в границу": в add.css
       (грузится ПОЗЖЕ этого файла) у #shop-about/#shop-shipping есть
       правило с точно таким же селектором (та же специфичность) —
       .brand-blocker{width:100vw; max-width:500px}. 100vw — это ширина
       всего viewport, а не доступного места внутри padding контейнера;
       левый край карточки остаётся на месте (внутри отступа контейнера),
       а правый вылезает за экран ровно на величину этого отступа. Так
       как правило грузится позже и специфичность та же, оно побеждало
       мой прежний max-width:100% каждый раз. Бьём !important. */
    .manufacturer-page #shop-about .brand-blocker,
    .manufacturer-page #shop-shipping .brand-blocker,
    .manufacturer-page #shop-promocodes .brand-blocker {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Длинные значения (юрадрес, полное наименование) переносятся по словам,
       а не раздвигают карточку в ширину. */
    .manufacturer-page .brand-blocker .blocker-inner .item span {
        overflow-wrap: anywhere;
        word-break: break-word;
        min-width: 0;
    }

    /* Тот же принцип для параграфа описания под карточкой — раньше мог
       раздвигать страницу длинным словом/ссылкой без переносов. */
    .manufacturer-page #shop-about .description,
    .manufacturer-page #shop-shipping .description,
    .manufacturer-page #shop-promocodes .description {
        overflow-wrap: anywhere;
        word-break: break-word;
        min-width: 0;
    }

    /* Родительский flex-ряд карточки — тоже классический источник overflow
       без min-width:0 на схлопывающихся элементах (уже не раз чинили этот
       баг в других местах этой страницы). */
    .manufacturer-page #shop-about > .d-flex,
    .manufacturer-page #shop-shipping > .d-flex,
    .manufacturer-page #shop-promocodes > .d-flex {
        max-width: 100%;
    }

    .manufacturer-page #shop-about > .d-flex > *,
    .manufacturer-page #shop-shipping > .d-flex > *,
    .manufacturer-page #shop-promocodes > .d-flex > * {
        min-width: 0;
    }

    /* Карточка растянута на width:100% своего родителя и упирается прямо
       в его границу — визуально нет вообще никакого просвета по бокам.
       Даём самому ряду небольшой боковой отступ, чтобы у карточки (и у
       текста описания рядом) был свой запас от края, а не впритык. */
    .manufacturer-page #shop-about > .d-flex,
    .manufacturer-page #shop-shipping > .d-flex,
    .manufacturer-page #shop-promocodes > .d-flex {
        padding: 0 4px;
    }

    /* Страховка: на сайте нет глобального overflow-x:hidden ни на body, ни
       на html, поэтому любой другой элемент шире экрана (в любом другом
       месте этого блока, не обязательно то, что чинили выше) даёт скролл
       всей страницы вбок. Обрезаем по границе самого контейнера страницы —
       без сайдбар-версии (десктоп/планшет ≥1024px) это правило не работает,
       там ничего не меняется. */
    .manufacturer-page {
        overflow-x: hidden;
        max-width: 100%;
    }
}

/* ===== Карточка промокода — единый вид на любой ширине (было только в
   мобильном блоке, на десктопе оставался легаси: несимметричный
   padding-left:2rem без правого, тяжёлые 24px bold название, иконка
   копирования на иконочном шрифте не по центру). */
.manufacturer-page #shop-promocodes .promocode-list {
    padding: 0;
    row-gap: 12px;
}

.manufacturer-page #shop-promocodes .promocode-item {
    padding: 16px 56px 16px 16px;
    border-radius: 16px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
}

.manufacturer-page #shop-promocodes .promocode-item-name {
    font-size: 19px;
    line-height: 1.3;
}

.manufacturer-page #shop-promocodes .promocode-until {
    font-size: 12px;
    margin-top: 6px;
}

.manufacturer-page #shop-promocodes .promocode-copy {
    right: 12px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--gray-200);
    color: var(--blue);
    font-size: inherit;
}

.manufacturer-page #shop-promocodes .promocode-copy svg {
    display: block;
}