/*
 * Адаптив SMT.KZ
 * Подключается последним (functions.php), перекрывает styles.css и media.css.
 * Мобильная раскладка — до 767.98px (см. media.css), планшет — 768–1199px.
 */

/* ---------- Общее ---------- */

html, body {
    overflow-x: clip; /* страховка от горизонтальной прокрутки, не ломает sticky */
}

a, button {
    -webkit-tap-highlight-color: transparent;
}

img {
    max-width: 100%;
    height: auto;
}

/* плашки категорий в баннере: не рвём «Тормозные диски» на две строки */
.category_menu {
    flex-wrap: wrap;
    gap: 8px;
}

.category_menu li:not(:first-child) {
    margin-left: 0;
}

.category_menu a {
    display: inline-block;
    white-space: nowrap;
}

/* ---------- Телефон (до 767px) ---------- */

@media (max-width: 767.98px) {

    /* подвал: .row с отрицательными полями вылезал за экран на 10px */
    .footer-bottom .row {
        margin-left: 0;
        margin-right: 0;
    }

    .contacts-footer > .col > .item {
        text-align: center;
    }

    .footer-bottom .col.copy {
        text-align: center !important; /* перебивает inline text-align: right */
    }

    /* поиск: 16px — минимум, при котором iOS не зумит поле при фокусе */
    .mobile-search {
        padding: 12px 10px;
        position: sticky;
        top: 0;
        z-index: 1000;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
    }

    .mobile-search .dgwt-wcas-search-input {
        height: 48px !important;
        border-radius: 24px !important;
        font-size: 16px !important;
    }

    .mobile-search .dgwt-wcas-search-input::placeholder {
        font-size: 16px;
    }

    .mobile-search__cart {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
        border-radius: 16px;
    }

    .mobile-search__cart svg {
        width: 24px;
        height: 24px;
    }

    /* нижнее меню */
    .mobile-bottom-menu {
        height: auto;
        min-height: 64px;
        padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
    }

    .mobile-bottom-menu .menu-item {
        min-height: 52px;
        font-size: 12px;
        color: #8a8a8a;
        transition: color .2s;
    }

    .mobile-bottom-menu .menu-item svg {
        width: 26px;
        height: 26px;
        margin-bottom: 4px;
    }

    .mobile-bottom-menu .menu-item.active {
        color: #e94b48;
        font-weight: 600;
    }

    .mobile-bottom-menu .menu-item__count {
        position: absolute;
        top: 2px;
        left: 50%;
        margin-left: 6px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: #e94b48;
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        line-height: 18px;
        text-align: center;
    }

    body {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    /* карточки товаров: одинаковая высота заголовка, без «рваной» сетки */
    .bg-shadow {
        gap: 8px;
        box-shadow: none;
    }

    .bg-shadow .table-item {
        height: 100%;
        justify-content: flex-start;
    }

    /* квадратная область под фото — названия идут на одной линии */
    .bg-shadow .table-item > .basis_5:first-child {
        width: 100%;
        padding: 0 !important;
    }

    .bg-shadow .product-tab-pic {
        aspect-ratio: 1 / 1;
        max-height: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 10px;
    }

    .bg-shadow .product-tab-pic img {
        width: 100%;
        height: 100%;
        max-height: none !important;
        object-fit: contain;
    }

    .product-tab-title {
        display: -webkit-box !important;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
        font-size: 13px !important;
        line-height: 1.3;
    }
}

/* большие телефоны / альбомная ориентация: 3 товара в ряд */
@media (min-width: 576px) and (max-width: 767.98px) {
    .bg-shadow {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---------- Планшет и небольшие ноутбуки (768–1199px) ---------- */

@media (min-width: 768px) and (max-width: 1199.98px) {

    /* верхняя полоса: без переносов по слогам */
    .topline-contact {
        padding: 8px 12px;
        gap: 6px;
    }

    .topline-contact > div {
        margin-right: 0;
    }

    .topline-contact .item:first-of-type,
    .topline-contact > .user-login {
        margin-left: 0;
    }

    .topline-contact > div > a,
    .topline-contact > .phone {
        white-space: nowrap;
    }

    .topline-contact > div > a {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        height: 28px;
    }

    .topline-contact > .work-time {
        display: none;
    }

    .topline-contact > .phone {
        margin-left: auto;
    }

    /* баннер: затемнение слева, чтобы текст не терялся на фоне фуры */
    .top-main-description {
        padding: 30px;
    }

    .top-main-description::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(17, 17, 17, .9) 0%, rgba(17, 17, 17, .7) 50%, rgba(17, 17, 17, 0) 85%);
    }

    .top-main-description > .text-box {
        position: relative;
        z-index: 1;
    }

    .top-main-description > .text-box > .title {
        width: 70% !important;
    }

    .top-main-description > .text-box > .text {
        max-width: 60% !important;
    }

    /* таблица каталога: наименованию — всё свободное место */
    .table-item .basis_45 {
        flex: 1 1 0;
        max-width: none;
    }

    .table-item .basis_10 {
        flex: 0 0 110px;
        max-width: 110px;
    }
}

/* до 1024px: в верхней полосе мессенджеры — только иконки */
@media (min-width: 768px) and (max-width: 1023.98px) {

    .whatsapp-top-link,
    .telegram-top-link {
        font-size: 0 !important;
        padding: 3px 8px !important;
    }

    .whatsapp-top-link i,
    .telegram-top-link i {
        font-size: 15px;
    }

    .topline-contact .wishlist_products_counter_text {
        display: none;
    }

    .top-main-description > .text-box > .title,
    .top-main-description > .text-box > .text {
        width: auto !important;
        max-width: 75% !important;
    }

    /* «Подробнее» дублирует ссылку в названии — освобождаем место */
    .table-item .btn-group-product-loop {
        display: none !important;
    }
}