@charset "UTF-8";

/* ============================================================
   1. БАЗОВЫЕ СТИЛИ
   ============================================================ */

/* Плавный переход для всех ссылок */
a {
    transition: color 0.2s ease-in-out;
}

/* Цвет при наведении */
a:hover,
a:focus {
    color: #0F2A6B !important;
}

/* ============================================================
   2. ЛОГОТИП
   ============================================================ */

.logo {
    background-color: transparent !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    height: 2.5em;
}

.logo img {
    height: 100%;
    width: auto;
    display: block;
    max-height: 45px; /* Было 50px - уменьшили до 45px */
}

.spacer {
    flex-grow: 1;
}

@media (max-width: 576px) {
    .logo {
        height: 2em;
    }
    .logo img {
        max-height: 32px; /* Было 40px - уменьшили до 32px */
    }
}

/* ============================================================
   3. ОТСТУПЫ
   ============================================================ */

.breadcrumb {
    margin-top: 1.7em;
}

h1 {
    margin-top: 0.3em;
}

/* ============================================================
   4. БЕЛЫЙ ФОН ДЛЯ ГАЛЕРЕИ FANCYBOX
   ============================================================ */

.fancybox__container {
    --fancybox-bg: #ffffff !important;
    background-color: #ffffff !important;
}

.fancybox__slide {
    background-color: #ffffff !important;
}

.fancybox__image {
    background-color: #ffffff !important;
}

.fancybox__content {
    background: #ffffff !important;
}

.has-image .fancybox__content {
    background: rgba(255, 255, 255, 0) !important;
}

.fancybox__backdrop {
    background: #ffffff !important;
}

.fancybox__slide.has-image {
    background: #ffffff !important;
}

.fancybox__image[style*="object-fit"] {
    background-color: #ffffff !important;
}

/* ============================================================
   5. СТИЛИ ДЛЯ НАВИГАЦИИ FANCYBOX
   ============================================================ */

.fancybox__container .carousel__button {
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(200, 200, 200, 0.5) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    transform: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.fancybox__container .carousel__button svg {
    stroke: #222222 !important;
    fill: none !important;
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2.5 !important;
    filter: none !important;
    transform: none !important;
}

.fancybox__container .carousel__button.is-prev,
.fancybox__container .carousel__button.is-next {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.fancybox__container .carousel__button.is-prev {
    left: 16px !important;
}

.fancybox__container .carousel__button.is-next {
    right: 16px !important;
}

.fancybox__container .carousel__button.is-close {
    top: 12px !important;
    right: 12px !important;
}

.fancybox__container .carousel__button.is-close svg {
    width: 20px !important;
    height: 20px !important;
}

.fancybox__container .fancybox__counter {
    color: #222222 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 40px !important;
    min-width: 60px !important;
    padding: 0 12px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(200, 200, 200, 0.4) !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.fancybox__container .fancybox__toolbar {
    padding: 8px 12px !important;
    background: transparent !important;
}

.fancybox__container .fancybox__toolbar__items {
    gap: 6px !important;
}

.fancybox__container .carousel__button:hover {
    background: rgba(255, 255, 255, 1) !important;
    border-color: rgba(150, 150, 150, 0.9) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18) !important;
    transform: none !important;
}

.fancybox__container .carousel__button.is-prev:hover,
.fancybox__container .carousel__button.is-next:hover {
    transform: translateY(-50%) !important;
}

.fancybox__container .carousel__button[disabled] {
    opacity: 0.3 !important;
    cursor: default !important;
}

.fancybox__container .carousel__button[disabled]:hover {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(200, 200, 200, 0.5) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10) !important;
    transform: none !important;
}

/* ============================================================
   6. ПОЛОСА ПРОГРЕССА
   ============================================================ */

.fancybox__container .fancybox__progress {
    background: #fdce1b !important;
}

/* ============================================================
   7. СТИЛИ ДЛЯ ПРЕВЬЮ (THUMBNAILS)
   ============================================================ */

.fancybox__thumbs .carousel__slide .fancybox__thumb {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: transparent;
    border-radius: 6px;
    border: 2px solid transparent !important;
}

.fancybox__thumbs .carousel__slide .fancybox__thumb::after {
    display: none !important;
}

.fancybox__thumbs .carousel__slide.is-nav-selected .fancybox__thumb {
    border-color: #555555 !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.fancybox__thumbs .carousel__slide:not(.is-nav-selected):hover .fancybox__thumb {
    border-color: #555555 !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* ============================================================
   8. АДАПТИВНОСТЬ FANCYBOX
   ============================================================ */

@media (max-width: 768px) {
    .fancybox__container .carousel__button {
        width: 36px !important;
        height: 36px !important;
    }
    
    .fancybox__container .carousel__button svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    .fancybox__container .carousel__button.is-prev {
        left: 8px !important;
    }
    
    .fancybox__container .carousel__button.is-next {
        right: 8px !important;
    }
    
    .fancybox__container .carousel__button.is-close {
        top: 8px !important;
        right: 8px !important;
    }
    
    .fancybox__container .fancybox__counter {
        font-size: 13px !important;
        line-height: 34px !important;
        min-width: 50px !important;
        padding: 0 10px !important;
    }
    
    .fancybox__container .fancybox__toolbar__items {
        gap: 4px !important;
    }
}

@media (max-width: 480px) {
    .fancybox__container .carousel__button {
        width: 32px !important;
        height: 32px !important;
    }
    
    .fancybox__container .carousel__button svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    .fancybox__container .fancybox__counter {
        font-size: 12px !important;
        line-height: 30px !important;
        min-width: 40px !important;
        padding: 0 8px !important;
    }
    
    .fancybox__container .fancybox__toolbar__items {
        gap: 3px !important;
    }
}

/* ============================================================
   9. МОБИЛЬНОЕ МЕНЮ
   ============================================================ */

@media (max-width: 576px) {
    .catalog li.sm-multilevel .sm-multicolumn,
    .catalog li.sm-multilevel > ul {
        display: none !important;
    }
    
    .catalog li.sm-multilevel.sm-active .sm-multicolumn,
    .catalog li.sm-multilevel.sm-active > ul {
        display: block !important;
        position: static !important;
        border: none !important;
        padding-left: 0.5em !important;
    }
    
    .catalog li.sm-multilevel > a:before {
        display: none !important;
    }
    
    .catalog li.sm-multilevel > a:after {
        content: " ▼";
        float: right;
        color: #999;
        font-size: 12px;
        transition: transform 0.3s ease;
    }
    
    .catalog li.sm-multilevel.sm-active > a:after {
        transform: rotate(180deg);
    }
    
    .catalog > li > a {
        color: #1A3A8A !important;
    }
    
    .catalog > li > a:hover {
        background: #f5f4f2 !important;
        color: #1A3A8A !important;
    }
    
    .catalog > li.sm-active > a {
        background: #f5f4f2 !important;
        color: #1A3A8A !important;
    }
    
    .catalog li.sm-multilevel .sm-multicolumn a,
    .catalog li.sm-multilevel > ul a {
        padding-left: 1.8em !important;
        font-size: 0.9rem !important;
        color: #555;
        border-left: 2px solid transparent;
        transition: all 0.15s ease;
    }
    
    .catalog li.sm-multilevel .sm-multicolumn a:hover,
    .catalog li.sm-multilevel > ul a:hover {
        background: #f5f4f2 !important;
        border-left-color: #1A3A8A;
        color: #1A3A8A !important;
    }
    
    .sm-groupname {
        display: block !important;
        font-weight: 700;
        font-size: 13px;
        color: #1a1a1a;
        padding: 10px 0 6px 0.5em;
        margin: 6px 0 4px 0;
        border-bottom: 2px solid #f5d742;
        background: transparent !important;
        cursor: default;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    
    .sm-groupname:hover {
        background: transparent !important;
        color: #1a1a1a !important;
    }
}

/* ============================================================
   10. ПК - ОТКРЫТИЕ ПО НАВЕДЕНИЮ
   ============================================================ */

@media (min-width: 577px) {
    .catalog li:hover > a~* {
        display: block !important;
        position: absolute;
        left: 100%;
        top: -1px;
        width: max-content;
    }
    
    .catalog li:hover > a~.sm-multicolumn {
        display: flex !important;
    }
    
    .catalog > li > a {
        color: #1A3A8A !important;
        background: transparent !important;
    }
    
    .catalog > li > a:hover {
        background: #f5f4f2 !important;
        color: #1A3A8A !important;
    }
    
    .catalog > li.sm-active > a {
        background: #f5f4f2 !important;
        color: #1A3A8A !important;
    }
    
    .catalog li.sm-multilevel .sm-multicolumn a:hover,
    .catalog li.sm-multilevel > ul a:hover {
        background: #f5f4f2 !important;
        color: #1A3A8A !important;
    }
    
    .catalog .sm-groupname {
        color: #1a1a1a !important;
        font-size: 13px !important;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        background: transparent !important;
    }
    
    .catalog .sm-groupname:hover {
        background: transparent !important;
        color: #1a1a1a !important;
    }
    
    .catalog li.sm-multilevel > a:before {
        color: #d0d0d0 !important;
        border-top-color: #d0d0d0 !important;
    }
}

/* ============================================================
   11. ОТОБРАЖЕНИЕ ТЕЛЕФОНА И КОРЗИНЫ НА МОБИЛЬНЫХ
   ============================================================ */

@media (max-width: 576px) {
    /* Отменяем скрытие телефона и корзины */
    .appbar > *:nth-child(n+3) {
        display: flex !important;
    }
    
    /* Телефон - делаем компактным */
    .appbar .phone {
        font-size: 0.8em;
        padding-right: 0.5em;
        padding-left: 0.3em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 35%;
    }
    
    /* Скрываем расписание */
    .appbar .schedule {
        display: none !important;
    }
    
    /* Корзина - отступ справа под гамбургер */
    .appbar .icon.counter {
        margin-right: 2.8em;
        padding-right: 0.3em;
    }
    
    /* Счетчик корзины */
    .appbar .icon.counter sup {
        top: -0.5em;
        right: -0.3em;
        font-size: 0.5em;
        padding: 0 0.25rem;
        min-width: 0.8em;
        text-align: center;
        position: absolute;
    }
    
    /* Гамбургер */
    .catalog-btn {
        z-index: 999 !important;
        position: fixed !important;
        right: 0 !important;
        top: 0 !important;
        background: transparent !important;
        padding: 0.4em !important;
        font-size: 1.8rem !important;
        line-height: 1.8rem !important;
    }
}

/* ============================================================
   12. ЦВЕТА ИКОНОК НА МОБИЛЬНЫХ
   ============================================================ */

@media (max-width: 576px) {
    /* Корзина и гамбургер - в цвет бренда */
    .appbar .icon,
    .appbar .icon .powericon-cart,
    .catalog-btn {
        color: #1A3A8A !important;
    }
    
    /* Телефон - черный для контраста */
    .appbar .phone {
        color: #000000 !important;
    }
    
    /* Счетчик - красный */
    .appbar .icon.counter sup {
        background: #e74c3c !important;
        color: #ffffff !important;
    }
}