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

/* Шрифт Roboto прежний сайт брал с Google Fonts; у нас — из файлов темы */
@font-face { font-family: Roboto; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/roboto-v30-latin_cyrillic/roboto-v30-latin_cyrillic-300.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/roboto-v30-latin_cyrillic/roboto-v30-latin_cyrillic-regular.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/roboto-v30-latin_cyrillic/roboto-v30-latin_cyrillic-italic.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/roboto-v30-latin_cyrillic/roboto-v30-latin_cyrillic-500.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/roboto-v30-latin_cyrillic/roboto-v30-latin_cyrillic-700.woff2) format("woff2"); }

/* Полоса над шапкой — стили блока topmsg прежнего сайта (#alert) */
html .ua-topmsg {
    background: #39aa25;
    padding: 30px 25px;
    font-size: 16px;
    color: #fff;
    position: fixed;
    bottom: 0;
    z-index: 100000;
    width: 100%;
    box-sizing: border-box;
}
html .ua-topmsg__text, html .ua-topmsg__text * { color: #fff; }
html .ua-topmsg__text p { margin: 0; }
html .ua-topmsg__close {
    position: absolute;
    right: 10px;
    top: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}
html .ua-topmsg[hidden] { display: none; }
@media (min-width: 1200px) {
    html body:has(.ua-topmsg:not([hidden])) { padding-top: 50px; }
    html .ua-topmsg {
        position: absolute;
        top: 0;
        bottom: auto;
        height: 50px;
        line-height: 50px;
        padding: 0;
        text-align: center;
        z-index: 1;
    }
    html .ua-topmsg__close { line-height: 50px; }
}

/* «Заказать через телеграм» — стили виджета прежнего сайта (были в разметке страницы) */
html .tg__shop { position: fixed; bottom: 60px; right: 23px; z-index: 50; }
html .tg__shop-inner { position: relative; }
html .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; box-sizing: border-box; text-decoration: none; }
html .tg__shop-inner a:hover { background-color: #0d89da; }
html .tg__shop-flash { margin-right: 8px; display: block; padding: 2px 4px; font-size: 10px; background-color: #fff; color: #2ab1eb; border-radius: 4px; animation: ua-blinker 2s linear infinite; }
html .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 ua-blinker { 50% { opacity: 0; } }

/* Корзина и оформление — внутри контейнера страницы, как checkoutone
   прежнего сайта (стили checkout.css рассчитаны на ширину колонки) */
html .s-content-block > .custom__order {
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
@media (max-width: 767px) {
    html .s-content-block > .custom__order { padding-left: 8px; padding-right: 8px; }
}

/* Кабинет, вход, «Спасибо», оплата, 404 — шаблоны в обёртке
   main__content-wrapper: ширина и поля — как у контейнера страниц */
html .s-content-block > .main__content-wrapper {
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 40px;
    box-sizing: border-box;
}

/* Отзывы: заголовок, достоинства и фото — по настройкам отзывов магазина */
html .s-product-reviews .ua-review-title { margin: 6px 0 2px; }
html .s-product-reviews .ua-review-pc { margin: 6px 0 0; }
html .s-product-reviews .ua-review-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
html .s-product-reviews .ua-review-photos img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 4px; }
html .s-product-reviews .ua-review-photos-input { display: block; color: #4a4a4a; }
html .s-product-reviews .ua-review-photos-input input { display: block; margin-top: 6px; }

/* Клавиатура. Старые стили снимали обводку фокуса совсем (:focus{outline:0});
   для клавиатуры возвращаем её, мышь по-прежнему без рамок */
html :focus-visible { outline: 2px solid #1565c0; outline-offset: 2px; }
/* «Каталог» в шапке и подпункты меню слева раскрываются и по фокусу, не только наведением */
html .s-main-wrapper .s-header-wrapper .s-fixed-container .s-fixed-header .s-column.s-column__link .s-column__sublink:focus-within ul { max-height: 1000px; padding: 22px 0 0; }
html .s-main-wrapper .s-sidebar-wrapper ul li.has-sub-menu:focus-within > ul { max-height: 1000px; }
html .s-main-wrapper .s-sidebar-wrapper ul li.has-sub-menu:focus-within:after { transform: rotate(-180deg); }
@media (prefers-reduced-motion: reduce) {
    html .tg__shop-flash { animation: none; }
}
html .bestsellers-block .ua-filter-none { text-align: center; font-size: 18px; color: #4a4a4a; margin: 20px 0 40px; }