@media only screen and (max-width: 768px){
    .container-fluid{

        padding: 0;
    }
    .container, .container-fluid{
        --bs-gutter-x: 15px;
    }
    .btn_one, .btn_one:active, .btn_one:focus,
    .btn_second, .btn_second:active, .btn_second:focus{
        font-size: 13px;
    }


    h1{
        font-size: calc(22px + (32 - 22) * ((100vw - 320px) / (768 - 320)));
        margin-bottom: 0;
    }

    .breadcrumb-container{
        background: var(--color-gray);
        padding-top: 10px;
    }
    .scrollable-breadcrumb {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0; /* For scrollbar visibility */


    }
    .scrollable-breadcrumb .breadcrumb {
        flex-wrap: nowrap;
        margin-bottom: 5px;
        display: flex;
        font-weight: 300;
        --bs-breadcrumb-font-size: 12px;
        --bs-breadcrumb-item-padding-x: 4px;
    }
    .scrollable-breadcrumb::-webkit-scrollbar {
        height: 3px; /* Уменьшаем высоту скроллбара для горизонтальной прокрутки */
    }
    .scrollable-breadcrumb .breadcrumb-item + .breadcrumb-item {
        margin-left: 4px; /* Добавьте отступ слева к соседним элементам */
    }
    .breadcrumb-item+.breadcrumb-item::before{
        float: unset;
        /*margin-right: 6px;*/
        /*padding: 0;*/
    }


    .section_title{
        text-align: center;
        padding-top: 5px;
        margin-bottom: 10px;
    }

    .header {
        background: var(--color-white);
        --bs-gutter-x: 0rem;
    }


    .home .main{
    padding-bottom: 20px;
    }
    .home .section_title {
        margin-bottom:20px;
    }

    .home .main .grid-container {
        /* 1. Устанавливаем одну колонку */
        grid-template-columns: 1fr;
        /* 2. Выстраиваем все области друг под другом */
        grid-template-areas:
            "form"
            "left-col"
            "item3"
            "item4"
            "item5";

    }

    .home .main .item-big{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 !important;
    }

    .home .main .item-big .content{
        padding: 30px 10px 30px 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .home .main .item-big .content h4{
        font-size: 20px;
    }
    .home .main .item-big .content h5{
        font-size: 18px;
        font-weight: 300;
        background-color: var(--color-black);
        padding: 4px 10px;
        border-radius: 2px;
    }
    .home .main .item-big .content p{
        font-size: 16px;
    }
    .call_to_action{
        flex-direction: column;
    }
    .call_to_action div:nth-child(2){
        width: 100%;
    }

    .call_to_action .btn{
        width: 100%;
    }
    .home .main .item-big .banner.banner-1 {

        position: relative;
        max-height: 200px;
        order: 9;
        left: unset;
    }

    .home .main .item{
        padding: 10px 31px 20px 64px;
    }
    .home .main .item h4{
        font-size: 18px;
    }
    .home .main .item p{
        font-size: 15px;
    }
    .home .main .item .icon{
        padding: 15px;
        left: -8px;
        top: -8px;
    }
    .home .main .item .icon img{
        max-width: 30px;
    }


    .home .select_catalog{
        padding-top: 0;
    }
    .home .select_catalog .block h3{
        font-size: 16px;
        margin: 0 0 15px 0;
    }
    .home .select_catalog .block .btn{
        margin-bottom: 20px;
    }
    .home .select_catalog .blocks{
        flex-direction: column;
    }
    .home .select_catalog .block{
        flex-direction: column;
        padding: 15px 10px;
        align-items: start;
    }
    .home .select_catalog .block .btn{
        margin-bottom: 0;
    }
    .home .select_catalog .block img {
        position: absolute;
        right: 9px;
        bottom: 0px;
        max-height: 113px;
    }
    .home .products{
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }




    .products {
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }
    .products .block img{
    max-height: 265px;
        width: unset;
    }
    .products .block a{
    padding: 10px 10px;
    }
    .products .block h4{
    text-align: start;
    font-size: 13px;
    }
    .products .block .price{
    margin-top: 10px;
    gap: 5px;
        justify-content: start;
    }
    .products .block .price .new, .products .block .price .default{
    font-size: 11px;
    }

    .products .block .price .old{
    font-size: 10px;
    }

    .products .block .discount-badge{
    font-size: 10px;
    padding: 3px;
    }

    .products .block .product-badges{
    padding: 0 5px;
    }
    .products .block .badge-hit-star{
    font-size: 10px;
    width: 42px;
    height: 42px;
    padding-left: 1px;
    }
    .products .block .badge-stock{
    font-size: 10px;
    padding: 4px 6px;
    }

    .products .block .product-card-overlay .btn_one{
    font-size: 10px;
    }



    .category .section_title, .product-page .section_title{
    flex-direction: column;
    padding-top: 10px;
    }
    .category .section_title .btn_one{
        display: none;
    }
    .category .section_title .icon, .product-page .section_title .icon{
    max-width: 19px;
    margin-right: 2px;
    }



    .catalog{
        grid-template-columns: 1fr; /* Changes to a single column */
        column-gap: 0; /* Optional: Removes the column gap */
    }

    .filters {
        position: relative;
        top: unset;
        display: none;
    }
    .filters .filter{
        padding: 0;
    }
    /* Отображаем кнопку "Фильтры" на мобильных устройствах */
    .filters-toggle{
        margin-bottom: 10px;
    }
    .filters-toggle, .close-filters  {
        display: block;
    }

    /* Скрытый по умолчанию блок фильтров */
    .filters.is-open {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        background-color: #fff;
        padding: 20px;
        overflow-y: auto;
    }


    .filters .btn{
        font-size: 14px;
    }
    .filters .btn:last-child{
        margin-top: 10px;
    }


    .filters_top{
        padding: 10px 10px;
        margin-bottom: 10px;
    }
    .sort-container{
        gap: unset;
    }
    .sort-container span, .sort-container .dropdown{
        display: none;
    }
    .sort-group, .limit-group{
        gap: 5px;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    .sort-container .btn.btn_one, .sort-container .btn.btn_one:active, .sort-container .btn.btn_one:focus{
        font-size: 10px;
        padding: 8px 8px;
    }

    .sort-container .btn{
        font-size: 10px;
        padding: 8px 8px;
    }


    .category .section_title, .product-page .section_title{
        flex-direction: column;
        align-items: start;
    }
    .category .section_title .btn_one, .product-page .section_title .btn_one{
        display: none;
    }


    .product-page .product_line{
        padding-bottom: unset;
    }
    .product-page .product-gallery{
        margin-bottom: 20px;
    }
    .product-page .product-gallery img {
        max-width: 150px;
    }
    .product-page .product-info .left-column{
        padding-right: calc(var(--bs-gutter-x) * .5);
        border-right: unset;
        margin-bottom: 20px;
    }
    .product-page .product-info{
        margin-left: unset;
        padding: 20px 15px;
    }

    .product-page .product-info .price .new, .product-page .product-info .price .default{
        font-size: 22px;
    }

    .product-page  .form-check{
        display: flex;
        gap: 10px;
    }

    .product-page  .form_cover strong{
        margin-left: 20px;
    }

    .product-page .product-info .card_footer{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .product-page .product-info .card_footer div{
        width: 100%;
    }
    .product-page .product-info .card_footer .btn_one{
        width: 100%;
    }

    .product-page .product-info .right-column{
        padding-left: calc(var(--bs-gutter-x) * .5);
    }
    .product-page .product-info .wa_get{
        margin-bottom: unset;
    }
    .product-page .product-info .wa_get .btn_one.btn_wa, .product-page .product-info .wa_get .btn_one.btn_wa:active, .product-page .product-info .wa_get .btn_one.btn_wa:focus{
        width: 100% !important;
        font-size: 12.5px !important;
    }
    .product-page .product-info .wa_get .btn_one.btn_wa img{
        max-width: 18px;
    }

    .product-page .product-info .row {

        flex-direction: column;
    }



     .product-page .product-info .left-column,
     .product-page .product-info .right-column {
        display: contents;

    }

    /* 3. Задаём новый порядок для всех дочерних элементов */
     .product-page .product-info .block.badges {
        order: 1;
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
    }
     .product-page .product-info #price-calculator {
        order: 2;
         padding-right: calc(var(--bs-gutter-x) * .5);
         padding-left: calc(var(--bs-gutter-x) * .5);
    }
     .product-page .product-info .colors {
        order: 3; /* Порядок для блоков, которые не перемещаются */
         padding-right: calc(var(--bs-gutter-x) * .5);
         padding-left: calc(var(--bs-gutter-x) * .5);
    }
     .product-page .product-info .block.card-properties {
        order: 4;
         padding-right: calc(var(--bs-gutter-x) * .5);
         padding-left: calc(var(--bs-gutter-x) * .5);
    }
     .product-page .product-info .card_footer {
        order: 5;
         padding-right: calc(var(--bs-gutter-x) * .5);
         padding-left: calc(var(--bs-gutter-x) * .5);
    }
     .product-page .product-info .wa_get {
        order: 6; /* Порядок для блоков, которые не перемещаются */
         padding-right: calc(var(--bs-gutter-x) * .5);
         padding-left: calc(var(--bs-gutter-x) * .5);
    }

    .product-page .product-info .block, .product-page .product-info .card_footer{
        margin-bottom: 20px;
    }

    .product-page .product-info .block.product-variants:last-child{
        margin-bottom: 20px;
    }

    .product-page .product-info .card-properties ul{
        margin-bottom: 20px;
    }

    .product-page .product-info .badge-stock, .product-page .product-info .badge-hit{
        font-size: 12px;
        padding: 4px 8px;
    }

    .product-page .triggers{
        padding-top: 20px;
        padding-bottom: unset;
    }

    .product-page .triggers .container{
        grid-template-columns:  1fr;
        gap: 0;
    }

    footer {
        padding-top: 40px;
    }


    .shops-grid {
        grid-template-columns: 1fr;
        gap: 20px;

    }

    body.page .img-thumbnail{
        margin-bottom: 20px;
    }

    body.page .content{
        padding: 15px;
    }
    body.page .sidebarForm{
        padding-left: 0;
    }


    .form .form-floating{
        margin-bottom: 8px;
    }

    .form .btn{
        margin-bottom: 5px;
    }

    .modal form{
        padding: 15px;
    }

    .modal .form .form-floating{
        margin-bottom: 8px;
    }



    .cart-page .info {
        display: flex;
        align-items: start;
        padding-top: 15px;
        justify-content: start;
        flex-grow: 1;
        flex-direction: column;
        padding-left: 19px;
    }


}

@media only screen and (max-width: 991px) {

    .notify{
        padding-top: 5px;
        padding-bottom: 8px;
    }
    .notify .container a{
        font-size: 10px;
    }
    .header .top .logo a{
        font-size: 20px !important;
        width: fit-content;
    }

    /* --- Скрываем десктопные элементы --- */
    .header .top .btn_catalog,
    .header .top .svyz,
    .header .bottom {
        display: none;
    }

    /* --- Настраиваем верхнюю панель --- */
    .header .top {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 10px 0;
    }

    .header .top .header-cart img {
        max-width: 26px;
    }


    .header .top .header-left-group{
        flex-grow: 1;
    }
    .header .top .search {
        flex-grow: 1;
    }
    .header .top .header-cart {
        display: block; /* Показываем корзину */
        flex-shrink: 0;
        order: 2;
        padding-right: 0;
    }
    .header .top .mobile-menu {
        display: block; /* Показываем бургер */
        flex-shrink: 0;
        cursor: pointer;
        order: 3;
    }

    .header .search{
        display: none;
    }

    .header .top .cart-badge{
        width: 15px;
        height: 15px;
        line-height: 15px;
        right: -7px;
    }
    /* --- Стили для иконки бургера --- */
    .burger-icon {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 25px;
        height: 16px;
    }
    .burger-icon span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #333;
        border-radius: 3px;
    }

    /* --- Стили для полноэкранной панели меню --- */
    .mobile-nav-panel {
        position: fixed;
        top: 0; left: 0;
        width: 100vw; height: 100vh;
        background-color: #ffffff;
        z-index: 1050;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        display: flex;
        flex-direction: column;
    }
    .mobile-nav-panel.is-open {
        opacity: 1;
        visibility: visible;
    }
    .mobile-nav-panel__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        border-bottom: 1px solid #eee;
        flex-shrink: 0;
        background: var(--color-default);
        color: var(--color-white);
    }
    .mobile-nav-panel__header .logo a {
        font-weight: bold; color: var(--color-white); text-decoration: none; font-size: 1.2rem;
    }
    .close-btn {
        font-size: 2.5rem; font-weight: 300; cursor: pointer; line-height: 1;
    }
    .mobile-nav-panel__content {
        padding: 20px 15px;
        overflow-y: auto;
        text-align: center;
    }
    .mobile-nav-panel .nav_catalog {
        margin-bottom: 30px;
    }
    .mobile-nav-panel .nav_catalog h3 {
        margin-bottom: 15px; font-size: 1.3rem; color: #333;
    }
    .mobile-nav-panel .nav_catalog a {
        padding: 10px;
        display: flex;
        align-items: center;
    }
    .mobile-nav-panel .nav_catalog img {
        max-height: 40px; margin-bottom: 0;
    }
    .mobile-nav-panel .menu .buttons {
        display: flex;
        flex-flow: column;
        margin-bottom: 30px;
    }
    .mobile-nav-panel .menu .btn {
         padding: 10px;
    }

    .mobile-nav-panel .menu ul {
        text-align: start;
        list-style: none; padding: 0; margin: 0; border-top: 1px solid #eee;
    }
    .mobile-nav-panel .menu ul li{
        transition: var(--transition-default);
    }
    .mobile-nav-panel .menu ul li a {
        display: block; padding: 15px 10px; text-decoration: none; color: #333; font-size: 1.1rem; border-bottom: 1px solid #eee;
    }

    .mobile-nav-panel .menu ul li:hover{
        background-color: var(--color-gray);
        transition: var(--transition-default);
    }

    .mobile_nav_catalog{
        position: relative;
        display: block;
    }

    a.mobile-phone-icon{
        display: block !important;
    }

    .mobile-nav-panel .search{
        display: block;
        margin-bottom: 20px;
    }



}