/* 
    АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ
    Все стили для экранов меньше 768px (телефоны и небольшие планшеты)
*/

@media (max-width: 768px) {
    /* 1. Шапка каталога */
    .cyber-header {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: auto auto;
        gap: 15px;
        padding: 15px 10px;
        align-items: center;
    }
    .header-left, .header-right {
        display: contents; /* Позволяет дочерним элементам встать в Grid родителя */
    }
    
    .logo-container {
        grid-column: 1 / 3;
        grid-row: 1;
        justify-self: start;
        transform: scale(0.6); /* В 2 раза меньше (визуально с учетом паддингов 0.6 норм) */
        transform-origin: left center;
        margin: 0;
    }
    .logo-container .logo-text {
        font-size: 24px; /* Оригинальный размер, scale всё уменьшит */
        white-space: nowrap; /* Не даем тексту разбиваться на 2 строки */
    }
    
    #cart-icon {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        align-self: center;
    }
    /* Возвращаем слово "Корзина" */
    .cart-text {
        display: inline;
    }
    
    .mobile-catalog-title {
        grid-column: 1 / 4;
        grid-row: 2;
        justify-self: center;
        font-size: 22px !important;
        margin: 0;
    }
    
    #mute-toggle {
        display: none !important;
    }
    
    #catalog-interface-label {
        display: block !important;
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
        align-self: center;
        font-size: 11px !important;
        opacity: 0.8;
        color: var(--neon-orange);
        text-transform: lowercase;
        margin: 0;
        white-space: nowrap;
    }
    /* Скрываем Доставка и Контакты в шапке каталога на мобилках */
    .header-btn {
        display: none !important;
    }
    .mobile-catalog-title {
        display: block !important;
        animation: float-catalog 3s ease-in-out infinite;
    }
    
    .catalog-pointer-arrow {
        display: inline-block;
        animation: point-to-catalog 4s infinite;
        font-size: 0.5em;
        vertical-align: middle;
    }
    
    @keyframes point-to-catalog {
        0%     { transform: translateX(0); opacity: 1; }
        10%    { transform: translateX(-6px); opacity: 1; }
        25%    { transform: translateX(-6px); opacity: 1; }
        
        35%    { transform: translateX(-12px); opacity: 1; }
        50%    { transform: translateX(-12px); opacity: 1; }
        
        60%    { transform: translateX(-18px); opacity: 1; }
        74%    { transform: translateX(-18px); opacity: 1; }
        
        75%    { transform: translateX(-18px); opacity: 0; }
        99%    { transform: translateX(0); opacity: 0; }
        100%   { transform: translateX(0); opacity: 1; }
    }
    
    @keyframes float-catalog {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-3px); }
    }
    .catalog-header {
        display: none !important;
    }

    /* 1.1 Шапка Лендинга */
    .nav-container {
        position: relative !important;
        display: grid;
        grid-template-columns: 1fr auto; /* 2 колонки: слева лого, справа кнопка */
        grid-template-rows: auto auto;
        gap: 15px;
        padding: 15px 10px;
        align-items: center;
        width: 100%;
    }
    .nav-container > div:not(.nav-subtitle) {
        display: contents; /* Логотип и кнопки встают в грид, подзаголовок остается блоком */
    }
    
    .nav-container .logo {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        transform: scale(0.6);
        transform-origin: left center;
        white-space: nowrap;
        margin: 0;
    }
    
    .nav-container #mute-toggle {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: center;
        transform: scale(0.9);
        margin: 0;
    }

    .nav-subtitle {
        grid-column: 1 / 3;
        grid-row: 2;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        white-space: normal !important;
        font-size: 13px !important;
        margin-top: 5px;
        margin-bottom: 5px;
        text-align: center;
    }
    
    /* Скрываем Доставка и Контакты на лендинге */
    .nav-links {
        display: none !important;
    }
    .landing-body {
        padding-top: 20px;
    }
    #catalog-view {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        box-sizing: border-box;
    }


    .catalog-container {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 10px 15px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        overflow-x: hidden;
    }

    /* 3. Сетка товаров */
    .products-grid {
        grid-template-columns: 1fr !important; /* 1 колонка по центру */
        gap: 20px !important;
        width: 100% !important;
        justify-content: center;
        transition: all 0.3s ease;
    }
    
    .products-grid.two-cols {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    /* Стили для карточки в 2-х колонках (компактный режим) */
    .products-grid.two-cols .product-title {
        font-size: 13px !important;
        padding: 5px !important;
        margin-bottom: 5px !important;
    }
    .products-grid.two-cols .price-badge {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }
    .products-grid.two-cols .btn-add-cart {
        font-size: 11px !important;
        padding: 8px !important;
        letter-spacing: 0px !important;
    }
    .products-grid.two-cols .product-info {
        padding: 10px !important;
    }
    .products-grid.two-cols .product-desc {
        display: none !important; /* Прячем описание в компактном режиме для экономии места */
    }

    /* 4. Карточка товара */
    .product-card {
        min-width: 0 !important; 
    }
    .product-card .image-wrapper {
        aspect-ratio: 4 / 3; /* Картинка сохраняет пропорции при растяжении */
    }
    .product-image {
        height: 100%;
    }
    .product-card .card-arrow {
        display: none; 
    }
    .product-info {
        padding: 15px;
    }
    .product-title {
        font-size: 18px; /* Возвращаем крупный читаемый заголовок */
        padding: 10px 10px 0;
        margin-bottom: 10px;
    }
    .price-badge {
        font-size: 16px;
        padding: 6px 12px;
    }
    .btn-add-cart {
        font-size: 14px;
        padding: 12px 20px;
    }

    /* 5. Модальное окно (окно товара) */
    .modal {
        padding: 10px;
    }
    .modal-content {
        max-height: none; /* Пусть окно тянется по высоте контента, скроллится будет сам .modal */
        border-radius: 5px;
    }
    .modal-header-info {
        padding: 15px;
    }
    .title-price-row {
        justify-content: center;
        align-items: center;
        padding-right: 0 !important;
        text-align: center;
        gap: 10px;
    }
    .modal-title {
        font-size: 20px;
        text-align: center;
    }
    .modal-image {
        max-height: 250px;
    }
    .modal-info {
        padding: 15px;
    }
    .pc-modal-price {
        display: none !important;
    }
    .mobile-modal-price {
        display: block !important;
    }
    .modal-price-badge {
        font-size: 20px;
    }
    
    /* Скрываем стрелочки навигации на мобильном, так как используем свайпы */
    .slider-btn,
    .product-nav-btn {
        display: none !important;
    }

    /* 6. Боковая корзина */
    .cart-sidebar {
        width: 100%; /* На телефоне корзина открывается на весь экран */
        right: -100%;
    }
    .cart-sidebar.open {
        right: 0;
    }
    .cart-header {
        padding: 15px;
    }
    .cart-items {
        padding: 15px;
    }
    .cart-footer {
        padding: 15px;
    }

    /* 7. Окно контактов */
    #contacts-modal .modal-content {
        max-width: 100%;
    }
    .product-price {
        font-size: 16px;
    }
    
    /* Кнопки Корзины на мобилках - убрал абсолютное позиционирование */
    .btn-add-cart, #add-to-cart-btn {
        position: relative !important;
    }

    .contacts-info {
        font-size: 14px;
    }

    /* 8. Главная (Лэндинг) */
    .landing-title {
        font-size: 40px;
    }
    .landing-subtitle {
        font-size: 16px;
    }
    .landing-logo {
        width: 100px;
        height: 100px;
    }
    .landing-btn {
        font-size: 18px;
        padding: 15px 30px;
    }
    .landing-container {
        padding: 30px 20px;
        width: 90%;
        margin: 0 auto;
        box-sizing: border-box;
    }
    
    .top-catalog-btn {
        font-size: 12px;
        padding: 12px 15px;
        letter-spacing: 1px;
        white-space: normal;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }
    
    body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* 9. Плавающие кнопки (Мобильные) */
    .social-floating-wrapper {
        right: 15px !important;
        bottom: 80px;
    }
    .social-floating-buttons a {
        width: 40px !important;
        height: 40px !important;
    }
    .social-floating-buttons a svg {
        width: 20px !important;
        height: 20px !important;
    }
    .tg-tooltip {
        display: none !important;
    }
}