.container-header {
  width: 100%;
  max-width: 1980px; 
  margin: 0 auto;     /* центрирование */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-header {
    height: 80px;
    background: #fff;
    border-bottom: 1px solid #e9ecef;
}


.offcanvas-body a {
    display: block;          /* каждая ссылка занимает всю строку */
    padding: 10px 15px;      /* внутренние отступы для удобства клика */
    margin-bottom: 5px;      /* расстояние между строками */
    text-decoration: none;   /* убрать подчёркивание */
    color: #333;             /* цвет текста */
    background-color: #f9f9f9; /* фон для выделения */
    border-radius: 4px;      /* скруглённые углы */
    transition: background 0.3s;
}

.offcanvas-body a:hover {
    background-color: #e0e0e0; /* подсветка при наведении */
}

/* ---------------- navbar ------------------------------------------------------------------------ */
.navbar{
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;         /* отступы слева/справа */
    width: 100%;         /* Растягивает контейнер на всю ширину экрана */
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}
.left-group, .right-group {
  display: flex;
  gap: 10px;           /* Отступ между элементами внутри самих групп */
  margin-left: 30px;  /* Отступ слева */
  margin-right: 30px; /* Отступ справа */
}
.nav-menu{
    display: none;
}
.nav-menu img {
    display: none;
}

.nav-catalog{
    display: flex;
    width: 2rem;             /* адаптивная ширина */
    height: 2rem;            /* адаптивная высота */
    align-items: center;
    justify-content: center;
    border: 5px;
    background: 5px;
    padding:0;
    gap: 5px; 
    margin-left: 70px;
}
.nav-catalog img {
    height: 100%;
    width: auto;
    
}
.nav-catalog-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    width: auto;
    height: auto;
    flex-shrink:0;
}

.nav-logo{
    width: 2rem;             /* адаптивная ширина */
    height: 2rem;            /* адаптивная высота */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
}
.nav-logo img {
    height: 200%;
    width: auto;
}
/* .logo {
    font-size: 28px;
    font-weight: 700;
    width: auto;
    height: auto;
    flex-shrink:0;
} */

.nav-search {
    flex-grow: 1;        /* Магия! Говорит поиску занять ВСЁ оставшееся свободное место */
    display: flex;
    align-items: center;
    background-color: #f5f5f5; /* Фон всей поисковой строки */
    border-radius: 8px;        /* Скругление углов */
    padding: 4px 8px;          /* Внутренние отступы, чтобы элементы не прижимались к краям */
    min-width: 50px;             /* Минимальная ширина */
    margin-left: 15px;  /* Отступ слева */
    margin-right: 0px; /* Отступ справа */
}
.nav-search input {
    display: flex;
    flex-grow: 1;              /* Занимает всё свободное пространство слева */
    /* Исправление: убираем системное ограничение инпута на сжатие */
    width: 0;                  
    min-width: 0;
    border: none;              /* Убираем родную рамку инпута */
    background: none;          /* Убираем родной фон инпута */
    padding: 8px;              /* Внутренний отступ для текста */
    outline: none;             /* Убирает стандартный контур при клике */
    font-size: 16px;
}
.nav-btn-search {
    border: none;              /* Убираем рамку кнопки */
    background: none;          /* Убираем фон кнопки */
    padding: 8px;              /* Делаем область клика иконки удобной */
    cursor: pointer;           /* Меняем курсор при наведении */
    display: flex;
    align-items: center;
}
.nav-btn-search img {
    width: avto;               /* Управляем размером иконки */
    height: 24px;
}

.phone {
    position: relative;
    .phone-mobile-button {
        display: none;
    }
    .phone-button {
        display: inline-flex;
        position: relative;
        align-items: center;
        background-color: #f8f9fa; /* Мягкий светлый фон */
        border: 1px solid #e9ecef;
        border-radius: 30px;        /* Округлый премиальный вид */
        padding: 6px 6px 6px 16px;  /* Отступ слева больше, так как там нет кнопки */
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        gap: 10px;                  /* Расстояние между иконкой связи и номером */
    }
    /* Иконка гарнитуры (наушники с микрофоном) */
    .phone-icon {
        color: #007aff;             /* Акцентный синий цвет */
        font-size: 18px;
        display: flex;
        align-items: center;
    }
    .phone-number {
        font-size: 16px;
        font-weight: 600;           /* Слегка полужирный для читаемости */
        color: #212529;
        text-decoration: none;
    }
    .phone-dropdown {
        display: none;              /* скрыто по умолчанию */
        position: absolute;         /* позиционируем относительно родителя */
        top: 100%;                  /* сразу под блоком */
        right: 0;
        background: #f9f9f9;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        padding: 10px;
        max-width: 90vw;
        min-width: 220px;
        border-radius: 8px;
        z-index: 1000;
    }
    .phone-dropdown.show {
        display: block;
    }
    /* Кнопка-стрелочка */
    .phone-dropdown-btn {
        background: #ffffff;        /* Белый фон, чтобы кнопка выделялась */
        border: none;
        width: 32px;
        height: 32px;
        border-radius: 50%;         /* Идеально круглая кнопка */
        display: flex;
        align-items: center;
        justify-content: center;
        color: #495057;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Легкая тень кнопки */
        transition: all 0.2s ease;  /* Плавный переход для анимации */
    }
    .phone-dropdown a {
        display: block;
        padding: 5px 10px;
        text-decoration: none;
        color: #333;
    }
    /* Эффект при наведении на стрелочку */
    .phone-dropdown-btn:hover {
        background-color: #007aff;  /* Меняем фон на синий */
        color: #ffffff;             /* Стрелочка становится белой */
        transform: translateY(1px); /* Легкий сдвиг вниз при клике/наведении */
    }
    /* Стили самой иконки-стрелочки внутри кнопки */
    .phone-dropdown-btn i {
        font-size: 14px;
        line-height: 1;
    }
    /* Показать меню при наведении */
    /* .nav-phone:hover .phone-dropdown {
    display: block;
    }  */
}
.nav-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;   
}
.nav-icon {
    width: 2rem;             /* адаптивная ширина */
    height: 2rem;            /* адаптивная высота */
    display: flex;
    align-items: center;
    justify-content: center;
    border:none;
    background:none;
    padding:0;
    gap: 20px;   
}
.nav-icon img {
    height: 100%;
    width: auto;
    
}

.nav-bar {
  display: none;
}

    /* Общие стили для offcanvas */
.offcanvas {
    background-color: #f9f9f9;
    border-left: 1px solid #ddd;
}
.offcanvas .nav-logo img {
    height: 140%;
    width: auto;
}
.offcanvas-header {
    margin: 0;            /* наружные отступы */
    padding: 16px;        /* внутренние отступы */
    height: 50px;         /* фиксированная высота */
    border-bottom: 1px solid #e0e0e0;
}

.offcanvas-title {
    text-align: center;
    width: 100%;
}
.offcanvas-title img {
    height: 24px;
}

/* Поля ввода */
.form-control {
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 0.75rem;
    font-size: 1rem;
}

/* Кнопка входа */
.offcanvas-reg-body .btn-success {
    margin-top: 1rem;
    border-radius: 8px;
    font-weight: 600;
    padding: 0.75rem;
}

/* Эффект при наведении */
.offcanvas-body .btn-success:hover {
    background-color: #28a745;
    color: #fff;
}

/* Кнопка закрытия */
.btn-close {
    filter: invert(0.5);
}


/* -------------- для JS -------------------------------- */
/* контейнер для уведомлений */

.toast-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
}
/* сам toast */
.toast {
    background: #007aff;
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    margin-top: 10px;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}
.toast.show {
    opacity: 1;
    transform: translateY(0);
}
/* ----------------------------------------------------------------- */


#offcanvasAccaunt .profile-language{margin-left:auto}
.profile-language button{font-weight:600}
.profile-user{display:flex;flex-direction:column;align-items:center}
.profile-avatar{width:80px;height:80px;border-radius:50%;background:#212529;color:#fff;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:600}
.profile-user h5{font-size:20px;font-weight:600}
.profile-menu{border-top:1px solid #dee2e6}
.profile-menu-item{width:100%;height:58px;padding:0;border:0;border-bottom:1px solid #dee2e6;background:transparent;display:flex;align-items:center;justify-content:space-between;font-size:16px;text-align:left}
.profile-menu-item:hover{background:#f8f9fa}
.profile-menu-item span:last-child{font-size:25px;line-height:1}
#offcanvasAccaunt .offcanvas-body{padding:24px}


.toast-container{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;align-items:center;gap:10px;width:max-content;max-width:calc(100% - 30px);}
.site-toast{min-width:280px;max-width:500px;padding:14px 20px;border-radius:10px;background:#212529;color:#fff;text-align:center;box-shadow:0 4px 15px rgba(0,0,0,.25);opacity:0;transform:translateY(20px);transition:opacity .3s ease,transform .3s ease;}
.site-toast.show{opacity:1;transform:translateY(0);}
.site-toast.success{background:#198754;}
.site-toast.error{background:#dc3545;}

.offcanvas-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px;height:60px;border-bottom:1px solid #e0e0e0}
.offcanvas-header-left{display:flex;align-items:center;gap:10px;justify-self:start}
.offcanvas-header-left .nav-logo{margin:0}
.offcanvas-header-title{margin:0;justify-self:center;font-size:18px}
.offcanvas-header>.btn-close{justify-self:end;margin:0}
.offcanvas-back{border:0;background:none;padding:0;font-size:22px;margin-right:10px;line-height:1}

@media (min-width: 240px) and (max-width: 576px) {
    .offcanvas {
        .offcanvas-header {
            margin: 0;            /* наружные отступы */
            padding: 16px;        /* внутренние отступы */
            height: 50px;         /* фиксированная высота */
        }
        .offcanvas-menu {
            display: flex;
            justify-content: space-between; /* левый блок прижат к началу, правый к концу */
            align-items: center;            /* выравнивание по вертикали */
            width: 100%;
        }
        .offcanvas-menu-left {
            display: flex;
            justify-content: flex-start;
            margin-left: 15px;
        }
        .offcanvas-menu-right {
            display: flex;
            justify-content: flex-end;
            margin-right: 15px;
            gap: 10px;
        }
        .offcanvas-icon {
            width: 2rem;             /* адаптивная ширина */
            height: 2rem;            /* адаптивная высота */
            display: flex;
            align-items: center;
            /* justify-content: center; */
            border:none;
            background:none;
        }
        .offcanvas-icon img {
            height: 100%;
            width: auto;

        }
        .offcanvas-schedule {
            display: flex;
            flex-direction: column;
            width: 100%;
            .offcanvas-schedule-item {
                display: flex;
                align-items: center;
                justify-content: space-between; /* стрелка уходит вправо */
                padding: 8px 12px;
                border-bottom: 1px solid #eee;
                width: 100%;
                background: none;
            }
            .offcanvas-schedule-item button {
                display: flex;
                align-items: center;
                width: 100%;
                background: none;   /* убираем фон */
                border: none;       /* убираем рамку */
                padding: 0;         /* убираем лишние отступы */
                margin-right: 8px;  /* небольшой отступ от текста */
            }
            .offcanvas-schedule-item img {
                width: 24px;
                margin-right: 8px; /* отступ от текста */
            }
            .offcanvas-schedule-item span {
                flex-grow: 1; /* текст занимает всё пространство между иконкой и стрелкой */
                text-align: left;
            }
            .offcanvas-schedule-item .arrow {
                font-size: 18px;
                flex-grow: 0;       /* стрелка не растягивается */
                margin-left: auto;  /* прижимается к правому краю */
                font-size: 18px;
                color: #888;
            }
        }
        /* ------------------------------------------------------------------------- */
        .offcanvas-info {
            display: flex;
            flex-direction: column;
            width: 100%;
            .offcanvas-info-item {
                display: flex;
                align-items: center;
                justify-content: space-between; /* стрелка уходит вправо */
                padding: 6px 12px;
                border-bottom: 1px solid #eee;
                width: 100%;
                border: none;
                background: none;
            }
            .offcanvas-info-item button {
                display: flex;
                align-items: center;
                width: 100%;
                background: none;   /* убираем фон */
                border: none;       /* убираем рамку */
                padding: 0;         /* убираем лишние отступы */
                margin-right: 8px;  /* небольшой отступ от текста */
            }
            .offcanvas-info-item span {
                flex-grow: 1; /* текст занимает всё пространство между иконкой и стрелкой */
                text-align: left;
            }
            .offcanvas-info-item .arrow {
                font-size: 18px;
                flex-grow: 0;       /* стрелка не растягивается */
                margin-left: auto;  /* прижимается к правому краю */
                font-size: 18px;
                color: #888;
            }
        }
        .offcanvas-timetable {
            
            padding: 0px 12px;
        }
        .offcanvas-timetable span {
            display: block; /* каждый span занимает всю строку */
            margin-bottom: 4px 4px; /* небольшой отступ снизу для разделения */
            font-size: 14px;
        }
    }
    .left-group, .right-group {
        display: flex;
        gap: 10px;         /* Отступ между элементами внутри самих групп */
        margin-left: 0px;  /* Отступ слева */
        margin-right: 0px; /* Отступ справа */
    }
    .container-header {
        padding: 0 10px; /* На мобилке убираем фиксированную ширину, оставляем только отступы по бокам */
    }
    .top-header {
        height: 50px;
        background: #fff;
        border-bottom: 1px solid #e9ecef;
    }
    .navbar{
        height: 50px;
        padding: 5px 5px;
        border-bottom: 1px solid #ddd;
    }
    /* Например, если на ПК элементы стояли в ряд, на мобилке их можно пустить друг под друга */
    .footer-links {
        flex-direction: column; 
    }

    .nav-menu{
        display: flex;
        width: 2rem;             /* адаптивная ширина */
        height: 2rem;            /* адаптивная высота */
        align-items: center;
        justify-content: center;
        border: none;
        background: none;
        padding:0;
        gap: 5px; 
        margin-left: 0px;
        margin-right: 10px;
    }
    .nav-menu img {
        display: flex;
        height: 100%;
        width: auto;
    }
    .nav-logo img {
        margin-top: 5px;
        height: 120%;
        width: auto;
    }
    .nav-catalog{
        display: none;
    }
    .nav-search{
        display: none;
    }


    /* 3. Включаем и прижимаем к низу мобильное меню */
    .nav-bar {
        display: flex;
        position: fixed;
        justify-content: space-around;
        text-align: center;
        bottom: 0;         /* прижимаем к нижнему краю */
        left: 0;
        width: 100%;       /* растягиваем на всю ширину */
        background-color: #fff; /* фон панели */
        border-top: 1px solid #ccc; /* тонкая линия сверху */
        padding: 8px 0;
        z-index: 1000;     /* чтобы панель была поверх контента */
    }
    .bar-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: inherit;
    }
    
/* -------------------------- с этим надо разобраться ---------------------------------------------------------- */
      /* Делаем левый и правый контейнеры аккуратными флексами */
    .header-left, .header-right {
        display: flex;
        align-items: center;
    }
    .header-right .phone {
        margin-right: 10px;
    }
/* ------------------------------------------------------------------------------ */

    #favoriteBtn, #cartBtn {
        display: none;
    }
    #accountBtn {
        display: flex;
    }



}

@media (min-width: 240px) and (max-width: 992px) {
    .phone {
        .phone-button{
            display: none;
        }
        .phone-icon{
            display: none;
        }
        .phone-mobile-button{
            display: flex;
            width: 2rem;             /* адаптивная ширина */
            height: 2rem;            /* адаптивная высота */
            display: flex;
            align-items: center;
            justify-content: center;
            border: 5px;
            background: 5px;
            padding:0;
            gap: 5px; 
            margin-left: 0px;
            margin-right: 10px;
        }
        .phone-mobile-button img {
            display: flex;
            height: 100%;
            width: auto;
        }
    }

}


@media (min-width: 240px) and (max-width: 359px) {
    .phone-dropdown {
        left: 0%;                  /* ставим в центр экрана */
        right: 0%;                /* убираем прижатие к правому краю */
        transform: translateX(-55%);/* смещаем на половину ширины блока */
        min-width: 180px;           /* чтобы не меньше 220px */
        max-width: 180px;            /* но не шире экрана */
    }
    .bar-icon img {
        width: 26px;   /* фиксируем размер картинок */
        margin-bottom: 4px;
    }
    .bar-icon div {
        font-size: 11px;
    }
}
@media (min-width: 360px) and (max-width: 479px) {
/* -------------------------- с этим надо разобраться ---------------------------------------------------------- */
    /* Делаем левый и правый контейнеры аккуратными флексами */
    .header-left, .header-right {
        display: flex;
        align-items: center;
    }
    .header-right .phone {
        margin-right: 10px;
    }
/* ------------------------------------------------------------------------------ */
    .bar-icon img {
        width: 32px;   /* фиксируем размер картинок */
        margin-bottom: 4px;
    }
    .bar-icon div {
        font-size: 14px;
    }
}
@media (min-width: 480px) and (max-width: 576px) {
    .bar-icon img {
        width: 40px;   /* фиксируем размер картинок */
        margin-bottom: 4px;
    }
    .bar-icon div {
        font-size: 16px;
    }

}
@media (min-width: 577px) and (max-width: 768px){
    .left-group {
        gap: 10px;           /* Отступ между элементами внутри самих групп */
        margin-left: 30px;  /* Отступ слева */
        margin-right: 0px; /* Отступ справа */
        }
    .right-group {
        gap: 10px;           /* Отступ между элементами внутри самих групп */
        margin-left: 10px;  /* Отступ слева */
        margin-right: 30px; /* Отступ справа */
        }
    .nav-logo{
        margin-right: 5px;  
    }
    .nav-catalog {
        margin-left: 10px;
    }
    .nav-catalog-text {
        display: none;
    }

}
@media (min-width: 769px) and (max-width: 992px){

    .nav-logo{
        margin-right: 5px;  
    }
    .nav-catalog{
        margin-left: 20px;
    }
    .nav-catalog-text {
        display: none;
    }

}

@media (min-width: 993px) and (max-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}

@media (min-width: 1201px) and (max-width: 1600px) {
  .container {
    max-width: 1600px;
  }
}

@media (min-width: 1920px) {
  .container {
    max-width: 1920px;
  }
}