/* ═══════════════════════════════════════════════════════════════════
   shop-mobile.css  —  SpeedHelp Shop — адаптивные стили
   Подключается ПОСЛЕДНИМ после всех inline-стилей через layouts/shop.blade.php
   Содержит ТОЛЬКО media queries — десктоп не затрагивает.
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   ОБЩИЙ ВРАППЕР / КОНТЕНТ
   ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .wrap { max-width: 100%; }
}
@media (max-width: 768px) {
    .content { padding: 10px 10px; }
}


/* ══════════════════════════════════════════════
   ШАПКА
   ══════════════════════════════════════════════ */
@media (max-width: 640px) {
    .header-banner img {
        min-height: 54px;
        object-fit: cover;
        object-position: left center;
    }
    .header-cart-badge {
        top: 6px;
        right: 8px;
        padding: 5px 10px;
        font-size: 11px;
        gap: 5px;
    }
}


/* ══════════════════════════════════════════════
   НАВИГАЦИЯ КАТЕГОРИЙ
   Горизонтальный скролл вместо переноса строк
   ══════════════════════════════════════════════ */
@media (max-width: 860px) {
    .cat-nav-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 8px 8px;
        gap: 5px;
        /* скрыть скроллбар визуально */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .cat-nav-bar::-webkit-scrollbar { display: none; }
    .cat-nav-btn {
        font-size: 12px;
        padding: 10px 12px;
        white-space: nowrap;
        flex-shrink: 0;
    }
}
@media (max-width: 480px) {
    .cat-nav-btn { font-size: 11px; padding: 9px 10px; }
}


/* ══════════════════════════════════════════════
   СТРОКА ПОИСКА
   ══════════════════════════════════════════════ */
@media (max-width: 576px) {
    .search-bar form { flex-wrap: wrap; }
    .sort-select { width: 100%; order: 3; }
    /* Prevent iOS zoom on focus */
    .search-input { font-size: 16px; }
}


/* ══════════════════════════════════════════════
   СЕТКА ТОВАРОВ  (index.blade.php)
   ══════════════════════════════════════════════ */
@media (max-width: 960px) {
    .product-card { width: calc(33.33% - 10px); }
}
@media (max-width: 680px) {
    .product-card { width: calc(50% - 8px); }
    .products-grid { gap: 10px; }
}
@media (max-width: 400px) {
    .product-card { width: 100%; }
}

/* Популярные товары */
@media (max-width: 680px) {
    .popular-card { width: calc(25% - 8px); }
}
@media (max-width: 480px) {
    .popular-card { width: calc(33.33% - 7px); }
}
@media (max-width: 360px) {
    .popular-card { width: calc(50% - 5px); }
}


/* ══════════════════════════════════════════════
   СТРАНИЦА ТОВАРА  (product.blade.php)
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .product-title { font-size: 19px; }
    .product-price { font-size: 32px; }
    .btn-buy       { font-size: 16px; padding: 13px; }
    .product-meta td:first-child { width: 36%; }
}
@media (max-width: 480px) {
    .product-title { font-size: 16px; }
    .product-price { font-size: 26px; }
    .btn-buy       { font-size: 15px; padding: 12px; }

    /* Мета-таблица: label сверху, значение снизу */
    .product-meta table,
    .product-meta tbody,
    .product-meta tr,
    .product-meta td { display: block; width: 100% !important; }
    .product-meta td:first-child {
        color: #aaa;
        font-size: 11px;
        padding: 8px 10px 1px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .product-meta td:last-child {
        padding: 2px 10px 8px;
        border-bottom: 1px solid #f0f0f0;
    }
    .product-meta tr:last-child td:last-child { border-bottom: none; }
}


/* ══════════════════════════════════════════════
   КОРЗИНА  (cart.blade.php)
   Таблица → карточки на мобильных
   ══════════════════════════════════════════════ */
@media (max-width: 660px) {
    /* Скрываем заголовки таблицы */
    .cart-table thead { display: none; }

    /* Каждая строка = карточка */
    .cart-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        margin-bottom: 12px;
        padding: 10px 10px 10px 8px;
        position: relative;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }
    .cart-table tbody tr:hover td { background: transparent; }
    .cart-table tbody tr td { border-bottom: none; padding: 2px 0; }

    /* Колонка 1: картинка — фиксированный левый блок */
    .cart-table tbody td:nth-child(1) {
        flex: 0 0 60px;
        align-self: flex-start;
    }
    .cart-img { width: 58px; height: 46px; }

    /* Колонка 2: название товара — занимает остаток ширины рядом с картинкой */
    .cart-table tbody td:nth-child(2) {
        flex: 1 1 0;
        min-width: 0;
        font-size: 13px;
        padding-right: 30px; /* место под кнопку × */
    }

    /* Колонка 3: цена за штуку */
    .cart-table tbody td:nth-child(3) {
        flex: 0 0 auto;
        font-size: 13px;
        color: #555;
        padding-left: 68px; /* отступ под картинку */
    }
    .cart-table tbody td:nth-child(3)::before {
        content: "Preis: ";
        color: #aaa;
        font-size: 11px;
        font-weight: bold;
    }

    /* Колонка 4: форма количества */
    .cart-table tbody td:nth-child(4) { flex: 0 0 auto; }
    .cart-qty-input { width: 50px; padding: 4px 6px; font-size: 14px; }
    .btn-qty-update { padding: 4px 8px; font-size: 12px; }

    /* Колонка 5: итого */
    .cart-table tbody td:nth-child(5) {
        flex: 0 0 auto;
        font-size: 15px;
    }
    .cart-table tbody td:nth-child(5)::before {
        content: "= ";
        color: #aaa;
        font-weight: normal;
    }

    /* Колонка 6: кнопка удаления — абсолютно в правый верхний угол */
    .cart-table tbody td:nth-child(6) {
        position: absolute;
        top: 8px;
        right: 8px;
        padding: 0;
    }

    /* Итоги корзины */
    .cart-summary { justify-content: stretch; }
    .cart-totals  { min-width: unset; width: 100%; }

    /* Кнопки внизу */
    .cart-actions         { flex-direction: column-reverse; }
    .btn-checkout         { width: 100%; text-align: center; box-sizing: border-box; }
    .btn-clear            { width: 100%; text-align: center; }
}


/* ══════════════════════════════════════════════
   ОФОРМЛЕНИЕ ЗАКАЗА  (checkout.blade.php)
   ══════════════════════════════════════════════ */
@media (max-width: 860px) {
    /* Уже есть в inline CSS: column-reverse */
}
@media (max-width: 576px) {
    /* Двухколоночные ряды → одна колонка */
    .form-row { flex-direction: column; gap: 10px; }

    /* Убираем жёсткую ширину PLZ и Land */
    .form-group { flex: 1 1 auto !important; }

    /* Prevent iOS zoom */
    .form-group input,
    .form-group select { font-size: 16px; }

    .btn-order { font-size: 15px; padding: 13px; }

    /* Варианты доставки */
    .checkout-wrap label[onclick] {
        flex-wrap: wrap;
        gap: 6px;
    }
}


/* ══════════════════════════════════════════════
   ФУТЕР
   ══════════════════════════════════════════════ */
@media (max-width: 576px) {
    .footer-top       { flex-direction: column; gap: 16px; padding: 20px 14px 16px; }
    .footer-col       { min-width: unset; }
    .footer-links     { gap: 6px 14px; }
}