/*
 * Страница товара MEDKO24. Основное оформление — в app.css (классы прежнего
 * сайта); здесь стили, стоявшие внутри шаблонов (product.html — галерея,
 * описание — вкладки и сертификаты), и то, что раньше рисовал Fancybox:
 * окно «Товар добавлен в корзину» и просмотр фото.
 * Порядок подключения относительно app.css не задан — где правило должно
 * перебить app.css, у него на ступень больше специфичности (html …).
 */

/* ── Из product.html прежнего сайта ── */
.cat__gallery { margin-top: 12px; display: flex; align-items: center; justify-content: center; }
.cat__gallery-image { margin-right: 1rem; }
.cat__gallery-image:last-of-type { margin-right: 0; }

/* ── Из описаний товаров (стиль стоял в самом тексте описания) ── */
.tablestile1 { text-align: left; font-size: 15px; }
.spec-table table { font-size: 15px; width: 100%; margin: 20px 0 40px; }
.spec-table table th { font-weight: 700; }
.spec-table table tr { border-bottom: 1px solid #ddd; }
.spec-table table td { padding: 5px 0; }
.certbox img { max-width: 300px; }

/* Блок benefits внутри описания: стиль из блока сайта, без изменений
   (картинки значков — theme.css) */
.benefits { text-align: center; font-size: 14px; }
.i-anonym, .i-quality, .i-guarantee {
    display: inline-block;
    padding: 0 10px;
    width: 150px;
    text-align: center;
    margin: 20px 0 40px;
    vertical-align: top;
}
.i-anonym i, .i-quality i, .i-guarantee i { display: block; width: 64px; margin: 20px auto; }

/* Фото не шире колонки: снимки товара бывают крупнее 240 px */
html .category__info-image img { max-width: 100%; height: auto; }
html .cat__gallery-image img { width: 60px; height: 60px; object-fit: contain; }

/* Вкладка, открытая сейчас (на прежнем сайте вкладки не переключались —
   функции tabs() на странице товара не было) */
html .korpus .tablink.is-active { background-color: #036b97; color: #fff; }

/* ── Просмотр фото и сертификатов (был Fancybox) ── */
.medko-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 64px;
}
.medko-lightbox[hidden] { display: none; }
.medko-lightbox__backdrop { position: absolute; inset: 0; background: rgba(24, 24, 27, .92); }
.medko-lightbox__image {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #fff;
}
.medko-lightbox__close,
.medko-lightbox__nav {
    position: absolute;
    width: 48px;
    height: 48px;
    padding: 12px;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .4));
}
.medko-lightbox__close { top: 4px; right: 4px; }
.medko-lightbox__nav { top: 50%; margin-top: -24px; }
.medko-lightbox__nav--prev { left: 8px; }
.medko-lightbox__nav--next { right: 8px; }
.medko-lightbox__nav[hidden] { display: none; }
.medko-lightbox__counter {
    position: absolute;
    top: 16px;
    left: 16px;
    color: #fff;
    font-size: 13px;
}

@media (max-width: 767px) {
    .medko-lightbox { padding: 56px 8px; }
    .medko-lightbox__nav { top: auto; bottom: 4px; margin-top: 0; }
}