@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap');

/* =========================================================
   ЕДИНАЯ АДАПТИВНАЯ НАВИГАЦИЯ
   ПК: обычные кнопки
   Планшет/телефон: одна кнопка ☰ + категории
   ========================================================= */

.mobile-menu-button,
.mobile-menu {
    display: none;
}

/* Десктоп: единый ритм верхних кнопок на всех страницах */
@media (min-width: 1101px) {
    .top-bar {
        gap: clamp(32px, 6.2vw, 115px) !important;
        align-items: center;
        justify-content: center;
    }

    .top-bar > a {
        flex: 0 0 auto;
        font-size: clamp(14px, 1.05vw, 18px) !important;
    }

    /* Раньше был резкий скачок значений ровно на 1200px (старый,
       рассинхронизированный слой адаптива). Теперь меняется плавно,
       без единого прыжка, на любой ширине окна браузера. */
    .contacts {
        font-size: clamp(16px, 1.3vw, 20px) !important;
        top: 13px !important; /* было -16px, опущено на 29px вниз (только ПК) */
    }

    /* На главной у .contacts другая исходная база позиционирования
       (position:fixed — не position:relative, как на остальных
       страницах), поэтому её нельзя выровнять тем же смещением, что
       и остальные: используем итоговое пиксельное значение, при
       котором она визуально встаёт на ту же высоту, что и на других
       вкладках. Определяем главную по атрибуту data-menu-depth="0",
       который есть в HTML сразу (без задержки на JS) — иначе долю
       секунды виден "прыжок" от общего правила к этому. */
    body:has(.top-bar[data-menu-depth="0"]) .contacts {
        top: 55px !important;
    }

    .about-container h1,
    .materials-container h1,
    .contacts-container h1,
    .gallery-container h1,
    .order-container h1,
    .category-container h1,
    #content h1 {
        font-size: clamp(48px, 4.6vw, 72px) !important;
    }
}

/* =========================================================
   ПЛАНШЕТ
   ========================================================= */
@media (min-width: 769px) and (max-width: 1100px) {
    html,
    body {
        min-height: 100%;
        height: auto;
    }

    body {
        min-height: 100vh;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background-attachment: fixed !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        background-size: auto 125vh !important;
    }

    /* Скрываем шесть текстовых кнопок: остаётся только ☰ */
    .top-bar {
        position: absolute !important;
        top: 145px !important;
        right: 22px !important;
        left: auto !important;
        width: 58px !important;
        height: 58px !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        display: block !important;
        z-index: 99998 !important;
    }

    .top-bar > a {
        display: none !important;
    }

    .mobile-menu-button {
        display: flex;
        position: relative;
        width: 58px;
        height: 58px;
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 7px;
        cursor: pointer;
        box-shadow: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-menu-button span {
        display: block;
        width: 36px;
        height: 3px;
        border-radius: 3px;
        background: #fff;
        box-shadow: 1px 1px 3px rgba(0,0,0,.8);
        transition: transform .25s ease, opacity .2s ease;
    }

    .top-bar.menu-open .mobile-menu-button span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }

    .top-bar.menu-open .mobile-menu-button span:nth-child(2) {
        opacity: 0;
    }

    .top-bar.menu-open .mobile-menu-button span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }

    .mobile-menu {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        padding: 0 20px;
        box-sizing: border-box;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: center;
        gap: 0 22px;
        border: 0;
        border-radius: 0;
        background: rgba(0,0,0,.25);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        pointer-events: none;
        transition: max-height .38s ease, opacity .25s ease, transform .38s ease, visibility .38s ease, padding .38s ease;
        z-index: 100001;
    }

    .top-bar.menu-open .mobile-menu {
        max-height: 260px;
        padding-top: 12px;
        padding-bottom: 16px;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .top-bar.menu-open .mobile-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .mobile-menu a {
        display: inline-block;
        padding: 4px 0;
        color: #fff !important;
        text-decoration: underline !important;
        font: 700 clamp(16px, 2vw, 21px)/1.2 Arial, Helvetica, sans-serif !important;
        text-transform: none;
        letter-spacing: 0;
        border-radius: 0;
        text-shadow: 1px 1px 3px rgba(0,0,0,.9);
    }

    .mobile-menu a:hover,
    .mobile-menu a.active {
        background: transparent;
        color: #fff !important;
    }

    .mobile-menu .menu-divider {
        display: none;
    }

    .contacts {
        position: absolute !important;
        top: 24px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        width: max-content !important;
        max-width: calc(100vw - 100px) !important;
        align-items: center !important;
        text-align: center !important;
        gap: 5px !important;
        font-size: clamp(16px, 2.2vw, 21px) !important;
        z-index: 9999 !important;
    }

    .phones,
    .email {
        align-items: center !important;
        text-align: center !important;
    }

    .phones { gap: 3px !important; }

    .about-container,
    .materials-container,
    .contacts-container,
    .gallery-container,
    .order-container,
    .category-container,
    #content {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-top: 195px !important;
        padding-left: 28px !important;
        padding-right: 28px !important;
        padding-bottom: 80px !important;
    }

    img,
    video {
        max-width: 100%;
    }
}

/* =========================================================
   ТЕЛЕФОН
   ========================================================= */
@media (max-width: 768px) {
    html,
    body {
        min-height: 100%;
        height: auto;
    }

    body {
        min-height: 100vh;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background-attachment: fixed !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        /* Фон увеличивается относительно высоты экрана и НЕ прокручивается вместе с текстом */
        background-size: auto 135vh !important;
    }

    /* На телефоне шесть обычных кнопок верхнего меню убраны */
    .top-bar {
        position: absolute !important;
        top: 170px !important;
        right: 9px !important;
        left: auto !important;
        width: 52px !important;
        height: 52px !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        display: block !important;
        z-index: 99998 !important;
    }

    .top-bar > a {
        display: none !important;
    }

    /* Именно три полоски, без рамки и без квадратной кнопки */
    .mobile-menu-button {
        display: flex;
        position: relative;
        width: 52px;
        height: 52px;
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
        box-shadow: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-menu-button span {
        display: block;
        width: 36px;
        height: 3px;
        border-radius: 3px;
        background: #fff;
        box-shadow: 1px 1px 3px rgba(0,0,0,.85);
        transition: transform .25s ease, opacity .2s ease;
    }

    .top-bar.menu-open .mobile-menu-button span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .top-bar.menu-open .mobile-menu-button span:nth-child(2) {
        opacity: 0;
    }

    .top-bar.menu-open .mobile-menu-button span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* Меню содержит только категории — как на присланном примере */
    /* Панель меню — продолжение той же прозрачной полосы top-bar.
       Она находится внутри top-bar и раскрывается ВНИЗ. */
    .mobile-menu {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        padding: 0 14px;
        box-sizing: border-box;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        border: 0;
        border-radius: 0;
        background: rgba(0,0,0,.25);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        pointer-events: none;
        transition: max-height .38s ease, opacity .25s ease, transform .38s ease, visibility .38s ease, padding .38s ease;
        z-index: 100001;
    }

    .top-bar.menu-open .mobile-menu {
        max-height: 420px;
        padding-top: 10px;
        padding-bottom: 14px;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .mobile-menu a {
        display: block;
        width: min(520px, 92vw);
        box-sizing: border-box;
        padding: 9px 8px;
        color: #fff !important;
        text-decoration: none !important;
        text-align: center;
        font: 700 clamp(15px, 4.5vw, 19px)/1.2 Arial, Helvetica, sans-serif !important;
        text-transform: none;
        letter-spacing: .4px;
        border-radius: 0;
        text-shadow: 1px 1px 3px rgba(0,0,0,.9);
        transition: background .2s ease, letter-spacing .2s ease;
    }

    .mobile-menu a:hover,
    .mobile-menu a:active {
        background: rgba(255,255,255,.10);
        letter-spacing: .8px;
    }

    .mobile-menu a:hover,
    .mobile-menu a.active {
        background: transparent;
        color: #fff !important;
    }

    .mobile-menu .menu-divider {
        display: none;
    }

    /* Контакты — по центру сверху, как на втором скриншоте */
    .contacts {
        position: absolute !important;
        top: 57px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        width: max-content !important;
        max-width: calc(100vw - 20px) !important;
        padding: 0 !important;
        align-items: center !important;
        text-align: center !important;
        gap: 5px !important;
        font-size: clamp(15px, 4.2vw, 19px) !important;
        line-height: 1.15 !important;
        z-index: 9999 !important;
    }

    .phones,
    .email {
        align-items: center !important;
        text-align: center !important;
    }

    .phones { gap: 3px !important; }

    /* Одинаковое начало контента на всех внутренних страницах */
    .about-container,
    .materials-container,
    .contacts-container,
    .gallery-container,
    .order-container,
    .category-container,
    #content {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-top: 235px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        padding-bottom: 80px !important;
    }

    .about-container h1,
    .materials-container h1,
    .contacts-container h1,
    .gallery-container h1,
    .order-container h1,
    .category-container h1,
    #content h1 {
        font-size: clamp(31px, 9.5vw, 48px) !important;
        line-height: 1.05 !important;
        letter-spacing: 1px !important;
    }

    .materials-grid,
    .category-grid,
    .gallery-grid,
    .steps-grid,
    .order-info {
        width: 100% !important;
        max-width: 100% !important;
    }

    img,
    video {
        max-width: 100%;
    }
}

/* Маленькие телефоны: чуть сильнее увеличиваем фон и уменьшаем контакты */
@media (max-width: 420px) {
    body {
        background-size: auto 145vh !important;
    }

    .contacts {
        top: 55px !important;
        font-size: clamp(14px, 4.1vw, 17px) !important;
    }

    .top-bar {
        top: 166px !important;
        right: 7px !important;
    }

    .mobile-menu {
        gap: 11px 12px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .mobile-menu a {
        font-size: clamp(14px, 4.25vw, 18px) !important;
    }

    .about-container,
    .materials-container,
    .contacts-container,
    .gallery-container,
    .order-container,
    .category-container,
    #content {
        padding-top: 225px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* =========================================================
   V4 — мобильный/планшетный верхний бар
   Логотипу оставлено отдельное место сверху.
   Сам top-bar фиксирован и не двигается при прокрутке.
   ========================================================= */
@media (min-width: 769px) and (max-width: 1100px), (max-width: 768px) {
    .top-bar {
        position: absolute !important;
        top: 140px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: rgba(0, 0, 0, 0.25) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        z-index: 99998 !important;
        overflow: visible !important;
    }

    .top-bar > a {
        display: none !important;
    }

    .mobile-menu-button {
        display: flex !important;
        position: absolute !important;
        top: 0 !important;
        right: 12px !important;
        width: 52px !important;
        height: 52px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 6px !important;
        box-shadow: none !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-menu-button span {
        display: block !important;
        width: 36px !important;
        height: 3px !important;
        border-radius: 3px !important;
        background: #fff !important;
        box-shadow: 1px 1px 3px rgba(0,0,0,.85) !important;
        transition: transform .25s ease, opacity .2s ease;
    }

    .top-bar.menu-open .mobile-menu-button span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .top-bar.menu-open .mobile-menu-button span:nth-child(2) {
        opacity: 0;
    }

    .top-bar.menu-open .mobile-menu-button span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    .mobile-menu {
        display: flex !important;
        position: fixed !important;
        top: 192px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        max-height: calc(100vh - 192px) !important;
        overflow-y: auto !important;
        padding: 18px 14px 24px !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-content: flex-start !important;
        justify-content: center !important;
        gap: 13px 16px !important;
        border: 0 !important;
        border-top: 1px solid rgba(255,255,255,.18) !important;
        border-radius: 0 !important;
        background: rgba(0,0,0,.55) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
        box-shadow: 0 10px 25px rgba(0,0,0,.28) !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-5px);
        pointer-events: none;
        transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
        z-index: 99999 !important;
    }

    .top-bar.menu-open + .mobile-menu,
    .top-bar.menu-open ~ .mobile-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    .mobile-menu a {
        display: inline-block !important;
        padding: 2px 0 !important;
        color: #fff !important;
        text-decoration: underline !important;
        font: 700 clamp(15px, 2.4vw, 20px)/1.2 Arial, Helvetica, sans-serif !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        text-shadow: 1px 1px 3px rgba(0,0,0,.9) !important;
        background: transparent !important;
    }

    .mobile-menu .menu-divider {
        flex-basis: 100%;
        width: 100%;
        height: 1px;
        margin: 1px 10% 1px;
        background: rgba(255,255,255,.2);
    }

    .contacts {
        position: absolute !important;
        top: 30px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: max-content !important;
        max-width: calc(100vw - 24px) !important;
        z-index: 99999 !important;
    }

    /* Реальное место под логотип + контакты + фиксированный top-bar */
    .about-container,
    .materials-container,
    .contacts-container,
    .gallery-container,
    .order-container,
    .category-container,
    #content {
        padding-top: 220px !important;
    }
}

@media (max-width: 768px) {
    .top-bar {
        top: 140px !important;
    }

    .mobile-menu {
        top: 192px !important;
        max-height: calc(100vh - 192px) !important;
    }

    .contacts {
        top: 28px !important;
        font-size: clamp(14px, 4.2vw, 19px) !important;
        line-height: 1.15 !important;
    }
}

@media (max-width: 420px) {
    .top-bar {
        top: 140px !important;
        height: 50px !important;
        min-height: 50px !important;
    }

    .mobile-menu-button {
        width: 50px !important;
        height: 50px !important;
        right: 8px !important;
    }

    .mobile-menu {
        top: 190px !important;
        max-height: calc(100vh - 190px) !important;
        gap: 11px 12px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .mobile-menu a {
        font-size: clamp(14px, 4.25vw, 18px) !important;
    }
}

/* V5.1 — только фиксируем контакты и кнопку меню на телефоне.
   Остальной дизайн версии V5 не изменяется. */
@media (max-width: 768px) {
    .contacts {
        position: absolute !important;
        top: 28px !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate3d(-50%, 0, 0) !important;
        z-index: 99999 !important;
        margin: 0 !important;
    }

    .top-bar {
        position: absolute !important;
        top: 140px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        transform: translate3d(0, 0, 0) !important;
        z-index: 99998 !important;
        margin: 0 !important;
    }

    .mobile-menu-button {
        position: absolute !important;
        top: 0 !important;
    }
}

@media (max-width: 420px) {
    .contacts {
        top: 28px !important;
    }

    .top-bar {
        top: 140px !important;
    }
}


/* =========================================================
   V5 MENU UPDATE — только основные разделы, без категорий.
   Красивое компактное окно навигации.
   ========================================================= */
@media (min-width: 769px) and (max-width: 1100px), (max-width: 768px) {
    .mobile-menu {
        box-sizing: border-box !important;
        top: 198px !important;
        left: 50% !important;
        right: auto !important;
        width: min(92vw, 430px) !important;
        max-height: calc(100vh - 220px) !important;
        transform: translate(-50%, -10px) scale(.98) !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        padding: 10px !important;
        border: 1px solid rgba(255,255,255,.28) !important;
        border-radius: 18px !important;
        background: rgba(18,18,18,.88) !important;
        backdrop-filter: blur(14px) saturate(120%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
        box-shadow: 0 18px 55px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity .22s ease, transform .22s ease, visibility .22s ease !important;
        z-index: 99999 !important;
    }

    .top-bar.menu-open .mobile-menu,
    .top-bar.menu-open + .mobile-menu,
    .top-bar.menu-open ~ .mobile-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate(-50%, 0) scale(1) !important;
        pointer-events: auto !important;
    }

    .mobile-menu a {
        box-sizing: border-box !important;
        width: 100% !important;
        min-height: 46px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 12px !important;
        margin: 0 !important;
        border-radius: 11px !important;
        color: #fff !important;
        background: rgba(255,255,255,.045) !important;
        text-decoration: none !important;
        font: 700 clamp(15px, 4.2vw, 19px)/1.15 Arial, Helvetica, sans-serif !important;
        letter-spacing: .2px !important;
        text-shadow: 0 1px 3px rgba(0,0,0,.8) !important;
        transition: background .18s ease, transform .18s ease !important;
    }

    .mobile-menu a + a {
        margin-top: 5px !important;
    }

    .mobile-menu a:hover,
    .mobile-menu a:active {
        background: rgba(255,255,255,.13) !important;
        transform: translateY(-1px) !important;
    }

    .mobile-menu .menu-divider,
    .mobile-menu .mobile-category-link {
        display: none !important;
    }
}

@media (max-width: 420px) {
    .mobile-menu {
        top: 190px !important;
        width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 205px) !important;
        padding: 8px !important;
        border-radius: 16px !important;
    }
    .mobile-menu a {
        min-height: 43px !important;
        font-size: clamp(14px, 4.3vw, 17px) !important;
    }
}

/* =========================================================
   FINAL MOBILE TOP BAR — по макету пользователя
   Закрыто: одна прозрачная полоса + ☰ справа.
   Открыто: та же прозрачная полоса расширяется вниз,
   физически увеличивая страницу и сдвигая контент.
   ========================================================= */
@media (max-width: 768px) {
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background-attachment: fixed !important;
    }

    /* Контакты прокручиваются вместе со страницей */
    .contacts {
        position: absolute !important;
        top: 22px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: max-content !important;
        max-width: calc(100vw - 30px) !important;
        z-index: 9000 !important;
    }

    /* Полоса находится в потоке страницы: при раскрытии её высота растёт
       и весь контент ниже реально сдвигается вниз. */
    .top-bar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        height: 55px !important;
        min-height: 55px !important;
        margin-top: 55px !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 0 !important;
        white-space: normal !important;
        overflow: hidden !important;
        background: rgba(0, 0, 0, 0.25) !important;
        transition: height .42s cubic-bezier(.22,.61,.36,1) !important;
        z-index: 99998 !important;
    }

    .top-bar > a {
        display: none !important;
    }

    .mobile-menu-button {
        display: flex !important;
        flex: 0 0 55px !important;
        width: 55px !important;
        height: 55px !important;
        min-height: 55px !important;
        margin: 0 8px 0 auto !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 6px !important;
        box-shadow: none !important;
    }

    .mobile-menu-button span {
        width: 36px !important;
        height: 3px !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: 1px 1px 3px rgba(0,0,0,.85) !important;
        transition: transform .32s ease, opacity .22s ease !important;
    }

    .top-bar.menu-open {
        height: 381px !important;
    }

    .top-bar.menu-open .mobile-menu-button span:nth-child(1) {
        transform: translateY(9px) rotate(45deg) !important;
    }
    .top-bar.menu-open .mobile-menu-button span:nth-child(2) {
        opacity: 0 !important;
    }
    .top-bar.menu-open .mobile-menu-button span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg) !important;
    }

    /* ВАЖНО: меню в потоке top-bar, не overlay.
       Поэтому при открытии оно сдвигает весь контент ниже. */
    .mobile-menu,
    .top-bar.menu-open .mobile-menu {
        position: static !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        max-height: 335px !important;
        height: 335px !important;
        margin: 0 !important;
        padding: 48px 20px 8px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: rgba(0, 0, 0, 0.25) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        transition: none !important;
    }

    /* Закрытое меню визуально и физически не занимает места */
    .top-bar:not(.menu-open) .mobile-menu {
        height: 0 !important;
        max-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .mobile-menu a {
        width: 100% !important;
        min-height: 45px !important;
        height: 45px !important;
        margin: 0 !important;
        padding: 7px 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        color: #fff !important;
        background: transparent !important;
        text-decoration: underline !important;
        text-align: center !important;
        font-family: 'Oswald', 'Impact', 'Arial Black', sans-serif !important;
        font-size: clamp(17px, 5vw, 21px) !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
        letter-spacing: .6px !important;
        text-shadow: 1px 1px 3px rgba(0,0,0,.9) !important;
        border: 0 !important;
        border-radius: 0 !important;
        transition: opacity .2s ease !important;
    }

    .mobile-menu a + a {
        margin-top: 0 !important;
    }

    .mobile-menu a:active {
        opacity: .65 !important;
        transform: none !important;
    }

    /* Контент начинается под закрытой полосой и автоматически
       опускается ещё ниже при раскрытии top-bar. */
    #content,
    .about-container,
    .materials-container,
    .contacts-container,
    .gallery-container,
    .order-container,
    .category-container {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin-top: 0 !important;
        padding-top: 30px !important;
    }
}

@media (max-width: 420px) {
    .contacts {
        top: 20px !important;
        max-width: calc(100vw - 18px) !important;
    }

    .top-bar {
        margin-top: 55px !important;
        height: 52px !important;
        min-height: 52px !important;
    }

    .mobile-menu-button {
        flex-basis: 52px !important;
        width: 52px !important;
        height: 52px !important;
        min-height: 52px !important;
    }

    .top-bar.menu-open {
        height: 363px !important;
    }

    .mobile-menu,
    .top-bar.menu-open .mobile-menu {
        height: 311px !important;
        max-height: 311px !important;
        padding: 45px 12px 8px !important;
    }

    .mobile-menu a {
        min-height: 43px !important;
        height: 43px !important;
        font-size: clamp(16px, 5vw, 19px) !important;
    }
}


/* =========================================================
   Точная настройка меню по последнему макету
   ========================================================= */
@media (max-width: 768px) {
    .mobile-menu a {
        /* тот же узкий шрифт, что в предыдущем примере */
        font-family: 'Oswald', sans-serif !important;
        font-weight: 500 !important;
        font-size: clamp(17px, 5vw, 21px) !important;
        letter-spacing: .2px !important;
    }

    /* Опускаем весь список ниже внутри раскрытого бара,
       сохраняя точное горизонтальное центрирование. */
    .mobile-menu,
    .top-bar.menu-open .mobile-menu {
        padding-top: 48px !important;
    }
}

@media (max-width: 420px) {
    .mobile-menu,
    .top-bar.menu-open .mobile-menu {
        padding-top: 45px !important;
    }
}


/* FINAL FIX: меню не должно пересекаться с ссылками верхнего бара */
@media (max-width: 768px) {
    .top-bar {
        isolation: isolate !important;
    }

    .top-bar > a {
        display: none !important;
        pointer-events: none !important;
    }

    .mobile-menu-button {
        position: absolute !important;
        top: 0 !important;
        right: 8px !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    .mobile-menu {
        z-index: 99999 !important;
    }

    /* Шрифт как на присланном макете: узкий Oswald, средняя насыщенность. */
    .mobile-menu a {
        font-family: 'Oswald', sans-serif !important;
        font-weight: 500 !important;
        font-style: normal !important;
        letter-spacing: .15px !important;
    }
}


/* =========================================================
   TOP-BAR: на мобильном фоне закрытой полоски не должно быть
   внизу раскрытого меню. Сама полоса скрывается при открытии
   и возвращается после закрытия.
   ========================================================= */
@media (max-width: 768px) {
    .top-bar {
        background: rgba(0,0,0,.25) !important;
        transition: background .25s ease !important;
    }

    .top-bar.menu-open {
        background: transparent !important;
    }
}

/* FIX: кнопка ☰/✕ всегда выше раскрытого меню, чтобы крестик принимал нажатия */
@media (max-width: 768px) {
    .mobile-menu-button {
        z-index: 100001 !important;
        pointer-events: auto !important;
    }

    .mobile-menu {
        z-index: 99999 !important;
    }
}

/* =========================================================
   ПЛАНШЕТЫ: верхнее меню как в ПК-версии.
   Бургер на планшетах полностью отключён.
   ========================================================= */
@media (min-width: 769px) and (max-width: 1100px) {
    .top-bar {
        position: fixed !important;
        top: 140px !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin-top: 0 !important;
        padding: 12px 0 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 115px !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        overflow: visible !important;
        background: rgba(0, 0, 0, 0.25) !important;
        z-index: 99998 !important;
    }

    .top-bar > a {
        display: block !important;
        pointer-events: auto !important;
        color: #ffffff !important;
        text-decoration: underline !important;
        font-weight: 500 !important;
        font-size: 18px !important;
        font-family: 'Oswald', 'Impact', 'Arial Black', sans-serif !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        cursor: pointer !important;
    }

    .top-bar > a.active {
        text-decoration: none !important;
    }

    .mobile-menu-button,
    .mobile-menu {
        display: none !important;
        pointer-events: none !important;
    }
}

/* =========================================================
   ФИНАЛЬНАЯ НАСТРОЙКА ПЛАНШЕТА: помещаем все пункты top-bar
   за счёт адаптивного расстояния и шрифта (иначе на узких
   планшетах 769–880px пункты меню обрезаются по краям).
   ========================================================= */
@media (min-width: 769px) and (max-width: 1100px) {
    .top-bar {
        gap: 3.2vw !important;
        padding: 12px 14px !important;
        box-sizing: border-box !important;
    }

    .top-bar > a {
        font-size: clamp(13px, 1.7vw, 16px) !important;
        letter-spacing: .4px !important;
    }
}

/* Заголовок главной страницы всегда одной строкой. */
@media (max-width: 1100px) {
    #content h1 {
        white-space: nowrap !important;
        font-size: clamp(25px, 8vw, 56px) !important;
        letter-spacing: .5px !important;
    }
}

/* =========================================================
   ЛОГОТИП: ПК — в левом верхнем углу.
   На мобильных — над контактами.
   Кликабелен — ведёт на главную (см. mobile-nav.js), поэтому
   позиционируется сама ссылка (.site-logo-link), а картинка
   (.site-logo) просто заполняет её на 100%.
   ========================================================= */
.site-logo-link {
    position: absolute;
    top: 22px;
    left: calc(26vw - 110px);
    width: min(360px, 24vw);
    z-index: 1000;
    display: block;
    line-height: 0;
    transition: transform .25s ease, opacity .25s ease;
}

.site-logo-link:hover,
.site-logo-link:focus-visible {
    transform: scale(1.04);
    opacity: .9;
}

.site-logo {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    user-select: none;
}

@media (min-width: 769px) and (max-width: 1100px) {
    .site-logo-link {
        position: absolute !important;
        top: 8px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: min(330px, 42vw) !important;
        z-index: 9998 !important;
    }

    .site-logo-link:hover,
    .site-logo-link:focus-visible {
        transform: translateX(-50%) scale(1.04) !important;
    }

    /* Логотип на планшете реально занимает ~110px по высоте —
       контакты и меню сдвинуты ниже, чтобы не наезжать на него. */
    .contacts {
        top: 132px !important;
    }

    .top-bar {
        top: 224px !important;
    }

    .about-container,
    .materials-container,
    .contacts-container,
    .gallery-container,
    .order-container,
    .category-container,
    #content {
        padding-top: 298px !important;
    }
}

@media (max-width: 768px) {
    .site-logo-link {
        position: absolute !important;
        top: 6px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: min(320px, 82vw) !important;
        z-index: 9998 !important;
    }

    .site-logo-link:hover,
    .site-logo-link:focus-visible {
        transform: translateX(-50%) scale(1.04) !important;
    }

    /* Логотип остаётся сверху, контакты идут сразу под ним.
       Ниже сдвигаем и top-bar, чтобы ничего не пересекалось. */
    .contacts {
        top: clamp(95px, 42vw, 120px) !important;
    }

    .top-bar {
        margin-top: clamp(175px, 62vw, 205px) !important;
    }
}

@media (max-width: 420px) {
    .site-logo-link {
        top: 5px !important;
        width: min(285px, 84vw) !important;
    }

    .contacts {
        top: clamp(95px, 42vw, 110px) !important;
    }

    .top-bar {
        margin-top: clamp(175px, 62vw, 190px) !important;
    }
}

/* =========================================================
   АНИМАЦИЯ ПОЯВЛЕНИЯ ПРИ СКРОЛЛЕ (общий класс для всех страниц —
   элементы скрываются скриптом страницы и получают этот класс,
   когда попадают в область видимости).
   ========================================================= */
.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* =========================================================
   ФОТО В СЕТКАХ (галерея / категории) — курсор и лёгкое
   увеличение при наведении, подсказывает, что фото кликабельно.
   ========================================================= */
/* Курсор-подсказка «кликабельно» — увеличение уже даёт
   существующий hover-эффект контейнера (.gallery-item:hover,
   .category-item:hover), поэтому картинке достаточно курсора,
   без второго наложенного transform. */
.gallery-item img,
.category-item img {
    cursor: zoom-in;
}

/* =========================================================
   ЛАЙТБОКС: полноэкранный просмотр фото с пролистыванием.
   ========================================================= */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, .94);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
}

.lightbox.open {
    opacity: 1;
    visibility: visible;
}

.lightbox-img {
    max-width: 90vw;
    max-height: 86vh;
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
    transform: scale(.96);
    transition: transform .3s ease;
    user-select: none;
}

.lightbox.open .lightbox-img {
    transform: scale(1);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    z-index: 2; /* строго выше фото — иначе из-за transform на .lightbox-img
                   картинка иногда рисуется поверх кнопок и перекрывает их */
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(0, 0, 0, .45);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background .2s ease, transform .2s ease;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(0, 0, 0, .65);
    transform: scale(1.06);
}

.lightbox-close {
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 26px;
}

.lightbox-prev,
.lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    font-size: 30px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    transform: translateY(-50%) scale(1.06);
}

.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }

.lightbox-counter {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: #fff;
    font-size: 14px;
    letter-spacing: .5px;
    opacity: .85;
}

@media (max-width: 600px) {
    .lightbox-prev,
    .lightbox-next {
        width: 42px;
        height: 42px;
        font-size: 22px;
    }
    .lightbox-prev { left: 6px; }
    .lightbox-next { right: 6px; }
    .lightbox-close {
        top: 10px;
        right: 10px;
        width: 38px;
        height: 38px;
        font-size: 22px;
    }
    .lightbox-counter { top: 12px; font-size: 13px; }
}

/* Доп. подстраховка к JS-защите фото от перетаскивания/выделения. */
img {
    -webkit-user-drag: none;
    user-drag: none;
}

.gallery-item img,
.category-item img,
.material-card img {
    -webkit-touch-callout: none;
    user-select: none;
}


/* На мобильных при увеличенном просмотре фото скрываем виджет обратного звонка. */
@media (max-width: 767px) {
    body.lightbox-open iframe[src*='allwidgets.ru'],
    body.lightbox-open [class*='callback'],
    body.lightbox-open [id*='callback'] {
        display: none !important;
        visibility: hidden !important;
    }
}