/* ============================================
   FIX FOR MOBILE HORIZONTAL SCROLL
   ============================================ */

/* Базовый фикс для всего сайта на мобильных */
@media (max-width: 767px) {
    /* 1. Предотвращаем горизонтальную прокрутку */
    html, body {
        max-width: 100% !important;
        overflow-x: hidden !important;
        position: relative;
    }
    
    /* 2. Обработка контейнеров */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* 3. Фикс для строк */
    .row {
        margin-left: -10px !important;
        margin-right: -10px !important;
        max-width: calc(100% + 20px) !important;
    }
    
    .row > [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* 4. Обработка длинных текстов и заголовков */
    h1, h2, h3, h4,
    .product-thumb h4 a,
    .breadcrumb li,
    .list-group-item,
    .nav > li > a {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
    }
    
    /* 5. Специально для заголовка категории */
    #product-category h1 {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
    
    /* 6. Фикс для хлебных крошек (самая частая проблема) */
    .breadcrumb {
        white-space: normal !important;
        line-height: 1.5 !important;
        margin-bottom: 15px !important;
        padding: 8px 0 !important;
    }
    
    .breadcrumb li {
        display: inline !important;
        max-width: 100% !important;
    }
    
    .breadcrumb li:last-child {
        display: inline-block !important;
        max-width: 100% !important;
        word-break: break-word !important;
    }
    
    /* 7. Фикс для названий товаров в списке */
    .product-thumb .caption h4 a {
        display: block !important;
        max-height: 2.8em !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        -webkit-line-clamp: 2 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
    }
    
    /* 8. Фикс для сайдбара с категориями */
    #column-right .list-group-item,
    #column-left .list-group-item {
        white-space: normal !important;
        padding: 8px 10px !important;
        font-size: 14px !important;
    }
    
    /* 9. Фикс для изображений */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* 10. Фикс для таблиц (если есть) */
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }
    
    /* 11. Фикс для кнопок */
    .btn {
        white-space: normal !important;
    }
    
    /* 12. Фикс для мета-информации в заголовке страницы */
    title {
        /* Это для внутреннего использования браузером */
        max-width: 100% !important;
    }
}

/* Дополнительный фикс для очень маленьких экранов */
@media (max-width: 480px) {
    #product-category h1 {
        font-size: 18px !important;
    }
    
    .breadcrumb {
        font-size: 13px !important;
    }
    
    .product-thumb .caption h4 {
        font-size: 14px !important;
    }
}

/* Принудительный перенос очень длинных слов на всех устройствах */
.long-word-fix {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}