/*
 * Поправки к app.css — стилям темы medko, перенесённым с Webasyst без изменений.
 * Здесь только то, что пришлось поменять при переезде, — сам app.css не правим,
 * чтобы его можно было сверить с оригиналом.
 *
 * Магазин подключает этот файл сам, и порядок относительно app.css не задан —
 * поэтому у правил на одну ступень больше специфичности (html …).
 */

/* Картинки преимуществ лежали в /wa-data/public/… старого сайта — теперь в теме */
html .i-anonym i { content: url(../images/legacy/incognito.png); }
html .i-quality i { content: url(../images/legacy/badge.png); }
html .i-guarantee i { content: url(../images/legacy/protection.png); }
html .b-ship .notice h3:before { content: url(../images/legacy/info.png); }

/* ── Стили, стоявшие внутри шаблонов прежнего сайта (<style> в header.html,
      index.html, home.products.html) — перенесены сюда без изменений ── */
/* html — app.css задаёт тот же блок «padding: 20px 0» и, подключённый позже,
   перебивал: плашка «Мы работаем» прилипала к значкам */
html .top__header-inner { padding: 20px 0 35px; }
.top__work {
    background-color: #7378A1;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 6px;
    color: #fff;
    position: absolute;
    bottom: 8px;
    right: 0;
}

/* Шапка на 1201–1399px. app.css ужимает меню (отступы 15px, шрифт 13px)
   только до 1200px, а контейнер на 1200–1399 тот же — 1140px; с полными
   отступами и шрифтом 14px пункты «Прайс-лист», «Оплата и доставка»
   переносились на две строки, а «Відгуки» упирались в «УКР». С 1400px
   контейнер шире, там прежний вид. */
@media screen and (min-width: 1201px) and (max-width: 1399.98px) {
    html .top__menu { margin-left: 30px; }
    html .top__menu-item { margin-right: 15px; }
    html .top__menu-item:last-of-type { margin-right: 0; }
    html .top__menu-link { font-size: 13px; }
    html .top__menu-item.is-catalog > a { padding: 7px 12px; }
    html .top__menu-item.is-catalog > a span.icon-wrapper { font-size: 14px; padding-right: 4px; top: 0; }
}

.tg__shop { position: fixed; bottom: 120px; right: 23px; }
.tg__shop-inner { position: relative; }
.tg__shop-inner a {
    padding: 10px 15px;
    border-radius: 6px;
    background-color: #2ab1eb;
    transition: all .3s ease;
    font-size: 14px;
    line-height: 1.2;
    color: #f4f4f4;
    display: flex;
    align-items: center;
    width: 222px;
    height: 53px;
}
.tg__shop-inner a:hover { background-color: #0d89da; }
.tg__shop-link svg { margin-left: 4px; }
.tg__shop-flash {
    margin-right: 8px;
    display: block;
    padding: 2px 4px;
    font-size: 10px;
    background-color: #fff;
    color: #2ab1eb;
    border-radius: 4px;
    animation: blinker 2s linear infinite;
}
.tg__shop-close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background-color: #fff;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    color: #2ab1eb;
    border: 1px #2ab1eb solid;
    z-index: 10;
}
@keyframes blinker { 50% { opacity: 0; } }
.tg__shop[hidden], .top__alert[hidden] { display: none; }

@media screen and (max-width: 576px) {
    .product__table { padding-right: 100px; }
}

.products__item-image a { position: relative; padding-top: 100%; display: block; line-height: 1; }
.products__item-image img {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    margin: auto;
}

/* ── Мобильное меню. Раньше панель строила библиотека mmenu (белая, на весь
      экран, с затемнением и заголовком «Меню»); здесь её повторяет js/theme.js ── */
html.is-mobilemenu-open { overflow: hidden; }
.mobilemenu__nav {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0);
    transition: background .25s ease;
}
.mobilemenu__nav[hidden] { display: none; }
/* app.css прежнего сайта прячет #mobile-menu, пока mmenu не повесит .mm-menu,
   и по id перебивает класс выше — открытую панель показываем явно */
nav#mobile-menu.mobilemenu__nav:not([hidden]) { display: block; }
.mobilemenu__nav.is-open { background: rgba(0, 0, 0, .7); }
.mobilemenu__panel {
    position: absolute;
    inset: 0;
    background: #fff;
    color: #444;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .25s ease;
}
.mobilemenu__nav.is-open .mobilemenu__panel { transform: none; }
.mobilemenu__navbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 44px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.mobilemenu__title { font-weight: 500; color: rgba(0, 0, 0, .3); }
.mobilemenu__back, .mobilemenu__close {
    position: absolute;
    top: 0;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    color: rgba(0, 0, 0, .3);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.mobilemenu__back { left: 0; }
.mobilemenu__back[hidden] { display: none; }
.mobilemenu__close { right: 0; font-size: 16px; }
.mobilemenu__nav-list { list-style: none; margin: 0; padding: 0; }
.mobilemenu__nav-list > li > a,
.mobilemenu__nav-list > li > span[data-mobilemenu-sub],
.mobilemenu__list-link {
    display: block;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    color: inherit;
}
/* Язык и телефон — по одной линии с пунктами меню (у mmenu был такой же отступ) */
.mobilemenu__nav-list > li.mobile__menu-custom {
    padding: 15px 20px 5px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.mobilemenu__has-sub > span[data-mobilemenu-sub] { position: relative; cursor: pointer; }
.mobilemenu__has-sub > span[data-mobilemenu-sub]::after {
    content: '';
    position: absolute;
    right: 22px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid rgba(0, 0, 0, .3);
    border-right: 2px solid rgba(0, 0, 0, .3);
    transform: translateY(-50%) rotate(45deg);
}
.mobilemenu__nav-submenu { display: none; list-style: none; margin: 0; padding: 0; }
.mobilemenu__nav.is-sub .mobilemenu__nav-list > li { display: none; }
.mobilemenu__nav.is-sub .mobilemenu__nav-list > li.is-open { display: block; }
.mobilemenu__nav.is-sub .mobilemenu__nav-list > li.is-open > span[data-mobilemenu-sub] { display: none; }
.mobilemenu__nav.is-sub .mobilemenu__nav-list > li.is-open > .mobilemenu__nav-submenu { display: block; }

/* ── «Купить» на любой странице (js/theme.js). Пока магазин кладёт товар —
      крутилка поверх кнопки, как раньше ── */
html .product__table-actions button.is-busy .addcart-loader { display: block; }
html [data-add].is-busy { opacity: .7; pointer-events: none; }
html .product__table-out { color: #999; font-size: 13px; }

/* Таблица найденных товаров: название в строке — ссылка на товар, вид прежний */
html .product__table-name a { color: inherit; text-decoration: none; }
html .product__table-name a:hover { color: #39aa25; }
/* Фото и описание над таблицей подменяются при наведении на строку
   (js/theme.js) — размер блока поэтому постоянный: фото в рамке одной
   высоты, описание обрезается по строкам. Иначе блок менял высоту от
   пропорций фото, таблица сдвигалась, под курсором оказывалась соседняя
   строка и фото начинало мигать */
html .category__info-image a.medko-preview__image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200px;
}
html .category__info-image a.medko-preview__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
html .category__info-image a.medko-preview__image.is-empty img { visibility: hidden; }
html .medko-preview__summary:empty { display: none; }
@media screen and (min-width: 768px) {
    html .category__info-info.medko-preview__info { height: 200px; overflow: hidden; }
    html .medko-preview__summary {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
    }
}

/* Подвал: колонка «Помощь» выводится только с заполненным меню
   (partials/footer.html). Без неё каталог занимает всё место и
   раскладывается в две колонки, а не стоит в левой половине */
html .footer__menu-column:only-child { flex: 0 0 100%; max-width: 100%; }
html .footer__menu-column:only-child .footer__menu-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 30px;
}
html .footer__menu-column:only-child .footer__menu-item.title-item { grid-column: 1 / -1; justify-self: start; }

/* Фокус с клавиатуры. app.css прежнего сайта снимает рамку у ссылок,
   кнопок и полей с !important (a:focus{outline:none!important}) — с
   клавиатуры не было видно, где находишься. :focus-visible срабатывает
   только при переходе клавишей, мышью вид прежний */
html a:focus-visible,
html button:focus-visible,
html [role="button"]:focus-visible,
html input[type="checkbox"]:focus-visible,
html input[type="radio"]:focus-visible {
    outline: 2px solid #036b97 !important;
    outline-offset: 2px;
    /* У ссылок app.css «transition: all .3s» — без этого рамка первые
       0,3 с рисовалась толстой зелёной; анимация наведения остаётся */
    transition-property: color, background-color, border-color, opacity, transform;
}

/* Флажки оформления (custom__checkbox из app.css): app.css прячет сам
   флажок через visibility: hidden и размер 0 — Tab его пропускал, и без
   мыши нельзя было отметить согласие и оформить заказ. Флажок остаётся
   невидимым, но лежит поверх нарисованной галочки и принимает фокус;
   рамка фокуса — на галочке */
html .custom__checkbox .custom__checkbox-checkbox {
    visibility: visible;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 1px;
    width: 19px;
    height: 19px;
    margin: 0;
    z-index: 1;
    cursor: pointer;
}
html .custom__checkbox .custom__checkbox-checkbox:focus-visible ~ .custom__checkbox-checkmark {
    outline: 2px solid #036b97;
    outline-offset: 2px;
    transition-property: border-color, background-color;
}

/* Способы доставки и оплаты, «Физлицо / Компания» в оформлении: переключатель
   прозрачный, но фокус принимает — рамку рисуем на строке способа */
html .custom__order .co-option:has(input:focus-visible),
html .custom__order .co-type:has(input:focus-visible) {
    outline: 2px solid #036b97;
    outline-offset: 2px;
}
html .product__table-preorder { color: #999; font-size: 13px; white-space: nowrap; }

/* ── Окно «Товар добавлен в корзину» (partials/cart-added.html; был Fancybox) ── */
.medko-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.medko-modal[hidden] { display: none; }
.medko-modal__backdrop { position: absolute; inset: 0; background: rgba(24, 24, 27, .92); }
.medko-modal__content {
    position: relative;
    background: #fff;
    color: #374151;
    padding: 36px;
    max-width: 100%;
    border-radius: 0;
}
.medko-modal__close {
    position: absolute;
    top: -40px;
    right: 0;
    width: 40px;
    height: 40px;
    padding: 8px;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
}
/* У app.css окно шире своего места на 10px с каждой стороны (margin: -10px,
   width: 340px) — так в Fancybox прежнего сайта. «max-width: 100%» срезал его
   до 320px, и при отрицательном отступе содержимое уезжало влево: слева 26px,
   справа 46px. Узкий экран — ниже, там своя ширина */
html .modal__cart { max-width: calc(100% + 20px); }
/* Заголовок окна был h1 — вторым на странице; тот же вид без h1 */
html .modal__cart-title { font-size: 18px; font-weight: 500; line-height: 1.2; margin: 0; padding: 0; }
html .modal__product-image img { max-width: 100%; height: auto; display: block; }
/* Рамка фокуса с клавиатуры: у ссылки-картинки — по краю фото (строчная
   ссылка рамку не рисовала), у крестика над окном — белая, на тёмном фоне */
html .modal__product-image a { display: block; }
html .medko-modal__close:focus-visible { outline-color: #fff !important; outline-offset: -2px; }
html .modal__cart-actions a { display: flex; align-items: center; justify-content: center; white-space: normal; }
html .modal__cart-actions .btn-bordered { border: 1px solid #e5e5e5; color: #2d2a2a; background: transparent; }
html .modal__cart-actions .btn-bordered:hover { border-color: #39aa25; }

@media (max-width: 420px) {
    .medko-modal__content { padding: 24px 16px; }
    html .modal__cart { width: 100%; margin: 0; }
}

/* Окно или просмотр фото открыты — страница под ними не прокручивается */
html.is-medko-modal-open,
html.is-medko-modal-open body { overflow: hidden; }

/* Форма CRM ({crm_form}, «Задать вопрос» на «Контактах»): зелёный акцент темы
   вместо стандартного, кнопка — как кнопки темы */
html .crm-form { --crm-form-accent: #39aa25; margin-top: 12px; }
html .crm-form .field__input { border-radius: 3px; }
html .crm-form .crm-form__submit { min-width: 160px; height: 40px; padding: 0 24px; border: 0; font: inherit; font-size: 14px; cursor: pointer; }
html .crm-form .crm-form__actions { margin-top: 12px; }
html .crm-form .crm-form__success:not([hidden]) { display: flex; gap: 12px; align-items: flex-start; border-radius: 3px; }
html .crm-form .crm-form__success-icon { flex: none; color: #39aa25; }
html .crm-form .crm-form__success p { margin: 0 0 6px; font-size: 15px; }
html .crm-form .crm-form__again { color: #39aa25; text-decoration: underline; }
html .crm-form .crm-form__again:hover { color: #246b17; }
@media (max-width: 575px) { html .crm-form .crm-form__submit { width: 100%; } }

/* Кнопка «Я оплатил» дополнения «Оплата по реквизитам»: дополнение даёт ей
   классы базовой темы (btn btn--primary), здесь — вид зелёной кнопки medko
   (theme-btn btn-accent) */
html .cx-iban__paid-btn {
    -webkit-appearance: none;
    appearance: none;
    align-self: flex-start;
    width: auto;
    min-width: 260px;
    max-width: 100%;
    border: 1px solid transparent;
    border-radius: 3px;
    background-color: #39aa25;
    box-shadow: inset 0 -3px #239565;
    color: #fff;
    font: inherit;
    font-size: 14px;
    padding: 9px 20px 11px;
    cursor: pointer;
    transition: background-color .3s ease-in-out;
}
html .cx-iban__paid-btn:hover { background-color: #246b17; }
html .cx-iban__paid-btn:disabled,
html .cx-iban__paid-btn.is-busy { opacity: .6; pointer-events: none; }
@media (max-width: 575px) { html .cx-iban__paid-btn { width: 100%; min-width: 0; } }