/* Mobile category page layout inspired by the provided ti.ua mobile archive. */

.mobile-category-reference {
    display: none;
}

@media (max-width: 767px) {
    .catalog-hero-v2 {
        display: none !important;
    }

    .mobile-category-reference {
        display: block;
        margin: 12px 0 12px;
        padding: 0 2px;
    }

    .mobile-category-breadcrumbs {
        display: flex;
        align-items: center;
        gap: 9px;
        overflow-x: auto;
        margin: 6px 0 16px;
        color: #8f94a3;
        font-size: 13px;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-category-breadcrumbs::-webkit-scrollbar {
        display: none;
    }

    .mobile-category-breadcrumbs a,
    .mobile-category-breadcrumbs b {
        color: inherit;
        font-weight: 500;
        text-decoration: none;
    }

    .mobile-category-breadcrumbs b {
        color: #7a7f8d;
    }

    .mobile-category-title-row {
        display: flex;
        align-items: baseline;
        gap: 10px;
        margin-bottom: 8px;
    }

    .mobile-category-title-row h1 {
        margin: 0;
        color: #202431;
        font-size: 33px;
        line-height: 1;
        letter-spacing: -.055em;
    }

    .mobile-category-title-row span {
        color: #a0a4af;
        font-size: 18px;
        font-weight: 500;
        white-space: nowrap;
    }

    .mobile-category-meta {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 14px;
        color: #716cff;
        font-size: 14px;
        font-weight: 700;
    }

    .mobile-category-meta span {
        color: #635dff;
        letter-spacing: 1px;
    }

    .mobile-category-meta a {
        color: #6d63ff;
        text-decoration: none;
    }

    .mobile-subcategory-rail {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 82px;
        gap: 12px;
        overflow-x: auto;
        margin: 0 -10px 15px;
        padding: 0 10px 2px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-subcategory-rail::-webkit-scrollbar {
        display: none;
    }

    .mobile-subcategory-card {
        display: grid;
        grid-template-rows: 62px auto;
        gap: 6px;
        justify-items: center;
        color: #282c38;
        text-align: center;
        text-decoration: none;
        scroll-snap-align: start;
    }

    .mobile-subcategory-card i {
        position: relative;
        display: block;
        width: 56px;
        height: 62px;
        border-radius: 14px;
        background: linear-gradient(145deg, #e8edf7, #fbfcff);
        box-shadow: inset 0 0 0 1px rgba(17, 26, 54, .04);
    }

    .mobile-subcategory-card i::before,
    .mobile-subcategory-card i::after {
        content: '';
        position: absolute;
        bottom: 6px;
        width: 26px;
        height: 45px;
        border-radius: 8px;
        background: linear-gradient(155deg, #303848, #121824);
        box-shadow: inset 0 0 0 2px rgba(255,255,255,.14);
    }

    .mobile-subcategory-card i::before {
        left: 8px;
        transform: rotate(-5deg);
    }

    .mobile-subcategory-card i::after {
        right: 8px;
        height: 49px;
        background: linear-gradient(155deg, #eef4ff, #90a8db);
        transform: rotate(5deg);
    }

    .mobile-subcategory-card--orange i::after { background: linear-gradient(155deg, #ff7a35, #311911); }
    .mobile-subcategory-card--blue i::after { background: linear-gradient(155deg, #dcecff, #5d8ad8); }
    .mobile-subcategory-card--silver i::after { background: linear-gradient(155deg, #fafafa, #d3d6dd); }
    .mobile-subcategory-card--green i::after { background: linear-gradient(155deg, #a3d7c4, #173629); }
    .mobile-subcategory-card--budget i::after { background: linear-gradient(155deg, #2358f6, #131b44); }

    .mobile-subcategory-card span {
        display: -webkit-box;
        overflow: hidden;
        color: #272b37;
        font-size: 12.5px;
        line-height: 1.16;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .mobile-catalog-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        margin: 4px 0 12px;
    }

    .mobile-sort-form select {
        width: 100%;
        min-height: 42px;
        border: 0;
        border-radius: 14px;
        background: transparent;
        color: #6d63ff;
        font-size: 17px;
        font-weight: 500;
        outline: none;
    }

    .mobile-catalog-controls button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0 19px;
        border: 0;
        border-radius: 999px;
        background: #625cff;
        color: #fff;
        font-size: 17px;
        font-weight: 700;
        box-shadow: 0 10px 22px rgba(98, 92, 255, .24);
    }

    .mobile-catalog-controls button::before {
        content: '≡';
        margin-right: 8px;
        font-size: 22px;
        line-height: 1;
        transform: rotate(180deg);
    }

    .catalog-topline-v2,
    .quick-filter-chips {
        display: none !important;
    }

    .active-filter-chips {
        margin-top: 4px;
    }
}

@media (min-width: 768px) {
    .mobile-category-reference {
        display: none !important;
    }
}