/**
 * Стили каталога и страницы коллекции. Вынесены из gifts.php: там они занимали
 * 1293 строки из 2796 — почти половину файла — и не кэшировались браузером.
 * Подключается в header.php только на /gifts*.
 */
    /* Общие стили */
    .page-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        color: #fff;
    }
    
    .page-header {
        margin-bottom: 30px;
        text-align: center;
    }
    .page-header h1 { font-size: 32px; margin-bottom: 10px; }
    .page-header h2 { font-size: 16px; color: #888; font-weight: normal; }

    /* Сортировка на главной /gifts */
    .collections-sort-bar {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .collections-sort-bar .sort-label {
        color: #888;
        font-size: 14px;
    }
    .collections-sort-bar .filter-select {
        background: #1a1d2e;
        border: 1px solid #272b3b;
        color: #fff;
        padding: 8px 14px;
        border-radius: 8px;
        font-size: 14px;
        min-width: 220px;
    }
    .collections-sort-mobile { display: none !important; }
    @media (max-width: 900px) {
        .collections-sort-bar { display: none !important; }
        .collections-sort-mobile {
            display: flex !important;
            margin-top: 15px; /* зазор над чипом (между подзаголовком и чипом), а не под ним */
            top: 51px !important; /* на главной нет hero-back-nav */
        }
    }

    /* --- Сетка Коллекций (Главная) --- */
    .collections-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* minmax(0,..) — колонки ужимаются, без горизонтального скролла */
        gap: 20px;
    }
    .collection-card {
        background: #272b3b;
        border-radius: 16px;
        padding: 14px 14px 10px;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s;
        height: auto;
        position: relative;
        overflow: visible; /* уголок ленты выступает за угол, как в Telegram */
    }
@media (hover: hover) { .collection-card:hover {
        transform: translateY(-5px);
    } }

    /* ленточка resale — SVG-уголок как в Telegram, слегка выступает за угол */
    .resale-ribbon {
        position: absolute;
        top: -3px;
        right: -3px;
        width: 52px;
        height: 52px;
        z-index: 3;
        pointer-events: none;
    }
    .resale-ribbon svg { width: 100%; height: 100%; display: block; }
    .resale-ribbon span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) translate(5px, -5px) rotate(45deg);
        color: #fff;
        font-size: 8.5px;
        font-weight: 700;
        text-transform: lowercase;
        letter-spacing: .2px;
    }

    .collection-icon {
        width: 80px;
        height: 80px;
        max-width: 100%;
        margin-bottom: 0;
        object-fit: contain;
        z-index: 1;
    }
    .collection-title {
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        margin: 9px 0 0;
        text-align: center;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        z-index: 1;
    }
    
    .collection-stats {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
        font-size: 12px;
        color: #888;
        margin-bottom: 10px;
        z-index: 1;
    }
    .collection-stats span {
        background: rgba(255,255,255,0.05);
        padding: 3px 8px;
        border-radius: 6px;
    }
    
    .collection-price-badge {
        color: #f5c777;
        font-size: 12px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: rgba(245, 184, 28, 0.14);
        padding: 5px 14px;
        border-radius: 999px;
        margin-top: 8px;
        white-space: nowrap;
    }
    .collection-price-badge i {
        font-size: 16px;
    }

    /* Hero Block Styles */
    .collection-hero-block {
        background: #131624;
        border: 1px solid #272b3b;
        border-radius: 20px;
        padding: 30px;
        margin-bottom: 30px;
        position: relative;
        overflow: hidden;
    }
    .hero-content {
        display: flex;
        gap: 40px;
        align-items: flex-start;
        position: relative;
        z-index: 2;
    }
    .hero-bg-blur {
        position: absolute;
        top: -50%; left: -50%;
        width: 200%; height: 200%;
        background: radial-gradient(circle, rgba(0,136,204,0.05) 0%, rgba(0,0,0,0) 50%);
        z-index: 1;
        pointer-events: none;
    }

    .hero-card {
        width: 320px;
        background: #1a1d2e;
        border: 1px solid #272b3b;
        border-radius: 16px;
        padding: 20px;
        position: relative;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }

    .hero-resale-badge {
        position: absolute;
        top: 15px;
        left: 15px;
        background: rgba(76, 217, 100, 0.1);
        color: #4cd964;
        border: 1px solid #4cd964;
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: bold;
        display: flex;
        align-items: center;
        gap: 5px;
        z-index: 2;
    }

    .hero-img-box {
        width: 100%;
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px 0 20px 0;
    }
    .hero-img-box img {
        width: 85%;
        height: auto;
        filter: drop-shadow(0 0 25px rgba(255,255,255,0.15));
        transition: transform 0.3s;
    }
@media (hover: hover) { .hero-card:hover .hero-img-box img {
        transform: scale(1.05);
    } }

    .hero-price-row {
        margin-top: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #131624;
        padding: 12px;
        border-radius: 12px;
        border: 1px solid #272b3b;
        flex-wrap: wrap;
    }

    .hero-price {
        font-size: 20px;
        font-weight: 800;
        color: #fff;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .hero-discount-badge {
        background: rgba(76, 217, 100, 0.1);
        color: #4cd964;
        border: 1px solid #4cd964;
        font-size: 12px;
        font-weight: bold;
        padding: 2px 6px;
        border-radius: 6px;
    }

    .hero-buy-btn {
        background: linear-gradient(90deg, #6a76e8, #505ac0);
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 700;
        cursor: pointer;
        font-size: 12px;
        text-transform: uppercase;
        transition: 0.2s;
        box-shadow: 0 4px 10px rgba(106, 118, 232, 0.3);
    }
@media (hover: hover) { .hero-buy-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(106, 118, 232, 0.4);
    } }

    .hero-info {
        flex-grow: 1;
        padding-top: 10px;
    }
    .hero-breadcrumbs {
        font-size: 13px;
        color: #666;
        margin-bottom: 15px;
        align-items: flex-end;
    }
    .hero-breadcrumbs img {
        width: 16px;
        margin-right: 5px;
        position: relative;
        top: 2px;
        opacity: 0.7;
    }
    .hero-breadcrumbs a { color: #888; text-decoration: none;margin-right: 5px; }
@media (hover: hover) { .hero-breadcrumbs a:hover { color: #fff; } }
    
    /* Название коллекции не разрываем между строк — переносится целиком */
    .h1-collname { white-space: nowrap; }

    .hero-info h1 {
        font-size: 36px;
        margin: 0 0 5px 0;
        color: #fff;
        font-weight: 800;
        letter-spacing: -0.5px;
    }
    .hero-subtitle {
        color: #888;
        font-size: 16px;
        margin-bottom: 30px;
        font-weight: 500;
    }

    .hero-stats {
        background: #1a1d2e;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid #272b3b;
    }
    .stat-title {
        padding: 16px 24px;
        background: #161925;
        color: #fff;
        font-weight: 700;
        font-size: 16px;
        border-bottom: 1px solid #272b3b;
    }
    .stat-row {
        display: flex;
        justify-content: space-between;
        padding: 16px 24px;
        border-bottom: 1px solid #272b3b;
        font-size: 14px;
        align-items: center;
    }
    .stat-row:last-child { border-bottom: none; }
    .stat-row span:first-child { color: #888; font-weight: 500; }
    .stat-row span:last-child { color: #fff; font-weight: 600; font-size: 15px; }

    .offers-count-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
        font-size: 20px;
        font-weight: 700;
        color: #fff;
        text-transform: uppercase;
    }

    @media (max-width: 900px) {
        .collection-hero-block { 
            padding: 0; 
            background: transparent; 
            border: none; 
            margin-bottom: 10px; 
        }
        .page-header h1 {
            margin-top: 10px;
            margin-bottom: 5px;
            font-size: 20px;
            padding: 0 15px;
        }
        /* Mobile Layout Reordering */
        .hero-content {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
        }
@media (hover: hover) { .collection-card:hover {
            transform: translateY(0);
        } }
        
        .hero-info {
            display: contents; /* Flatten for reordering */
        }

        /* 1. Breadcrumbs */
        .hero-breadcrumbs {
            order: 1;
            width: 100%;
            font-size: 15px;
            margin-bottom: 5px;
            padding: 0 10px;
            text-align: center;
            margin-top: 15px;
        }

        /* 2. Back Nav Bar (Mobile Only) - прилипает под header (51px) при скролле */
        .hero-back-nav {
            display: flex !important;
            align-items: center;
            justify-content: space-between;
            padding: 12px 15px;
            margin: 0;
            position: -webkit-sticky;
            position: sticky;
            top: 51px; /* высота фиксированного header */
            z-index: 99;
            background: #131624;
            border-bottom: 1px solid #272b3b;
        }
        .hero-back-link {
            color: #5eb3e8;
            text-decoration: none;
            font-size: 15px;
            font-weight: 500;
        }
@media (hover: hover) { .hero-back-link:hover {
            color: #7ec8f5;
        } }
        .hero-catalog-name {
            color: #fff;
            font-size: 15px;
            font-weight: 600;
        }

        /* 3. Title — тот же h1, что и на десктопе, только другой вид */
        .hero-info h1 {
            order: 3;
            text-align: center;
            color: #888;
            font-size: 20px; /* 24px не влезает: строка с префиксом = 589px при 375 доступных */
            line-height: 1.25;
            font-weight: 800;
            text-transform: uppercase;
            margin-bottom: 10px;
            letter-spacing: 1px;
            padding: 0 12px;
        }
        .hero-subtitle { display: none; } /* Hide subtitle on mobile if not in screenshot, but we will keep it as "Gift | Neko" block below */
        /* На мобиле прячем Характеристики из hero — их копия (.char-mobile) показывается ниже, под сеткой предложений */
        .hero-info .hero-stats { display: none; }
        .char-mobile { display: block !important; } /* !important: базовое .char-mobile{display:none} стоит ПОЗЖЕ в исходнике и иначе перебивает */
        /* убираем дублирующую линию у «Описания» на мобиле; 30px между секциями, 10px заголовок→контент */
        .collection-description-block { border-top: none !important; padding-top: 0 !important; margin-top: 30px !important; margin-bottom: 0 !important; }
        .collection-description-block h2 { margin-bottom: 10px !important; font-size: 20px !important; }

        /* 4. Card (Image + Price) */
        .hero-card {
            order: 4;
            width: 100%;
            max-width: 100%;
            background: #1a1d2e; /* Dark card bg */
            border-radius: 0px;
            padding: 20px;
            margin-bottom: 0;
            box-shadow: none;
        }
        
        .hero-resale-badge {
            top: 20px; left: 20px;
        }

        .hero-img-box {
            aspect-ratio: auto;
            margin: 0 0 15px 0;
        }
        .hero-img-box img {
            width: 35%; /* Smaller image on mobile */
        }

        /* Price Row inside card */
        .hero-price-row {
            background: #131624; /* Darker inner block */
            padding: 15px;
            border-radius: 12px;
        }

        /* 5. Info Block (Reusing existing H1 styles but placed below image) */
        .hero-info-mobile-block {
            order: 5;
            padding: 0 10px;
        }
        
        /* 6. Stats */
        .hero-stats {
            order: 6;
            width: calc(100% - 40px);
            border-radius: 12px;
            background: #1a1d2e;
            border: none;
            padding: 0 20px;
            margin: 0 auto;
            border: 1px solid #272b3b;
        }
        .stat-title {
            background: transparent;
            padding: 10px 0;
            font-size: 14px;
            color: #fff;
            border: none;
            padding-left: 10px;
        }
        .stat-row {
            background: #1a1d2e; /* Dark bg for rows */
            margin-bottom: 1px;
            padding: 10px 15px;
            font-size: 13px;
        }
        .stat-row:first-of-type { border-radius: 12px 12px 0 0; font-size: 13px;}
        .stat-row:last-child { border-radius: 0 0 12px 12px; font-size: 13px;}
    }

    .gifts-layout {
        display: flex;
        gap: 30px;
        align-items: flex-start;
    }

    /* Сайдбар */
    .filters-sidebar {
        width: 280px;
        flex-shrink: 0;
        background: #0f1325;
        border-radius: 16px;
        padding: 20px;
        border: 1px solid #272b3b;
    }
    
    .sidebar-section {
        margin-bottom: 25px;
        padding-bottom: 25px;
        border-bottom: 1px solid #272b3b;
    }
    .sidebar-section:last-child { border-bottom: none; margin-bottom: 0; }
    
    .sidebar-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .sidebar-title a { font-size: 12px; color: #0088cc; text-decoration: none; }

    /* Меню коллекций в сайдбаре */
    .mini-collections-list {
        max-height: 300px;
        overflow-y: auto;
        padding-right: 5px;
    }
    .mini-collections-list::-webkit-scrollbar { width: 4px; }
    .mini-collections-list::-webkit-scrollbar-thumb { background: #272b3b; border-radius: 4px; }

    .mini-col-item {
        display: flex;
        align-items: center;
        padding: 8px;
        border-radius: 8px;
        color: #b7b7b7;
        text-decoration: none;
        transition: 0.2s;
        margin-bottom: 2px;
    }
.mini-col-item.active {
        background: #272b3b;
        color: #fff;
    }
@media (hover: hover) { .mini-col-item:hover {
        background: #272b3b;
        color: #fff;
    } }
    .mini-col-img {
        width: 24px;
        height: 24px;
        border-radius: 4px;
        margin-right: 10px;
    }
    .mini-col-name {
        font-size: 14px;
        flex-grow: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Контролы фильтров (Новые стили для чекбоксов) */
    .filter-group { margin-bottom: 20px; }
    .filter-label { display: block; font-size: 14px; color: #fff; margin-bottom: 10px; font-weight: 500; }
    
    .filter-list {
        max-height: 250px;
        overflow-y: auto;
        padding-right: 5px;
        scrollbar-width: thin;
        scrollbar-color: #272b3b #0f1325;
    }
    .filter-list::-webkit-scrollbar { width: 4px; }
    .filter-list::-webkit-scrollbar-track { background: #0f1325; }
    .filter-list::-webkit-scrollbar-thumb { background-color: #272b3b; border-radius: 4px; }

    .filter-item {
        display: flex;
        align-items: center;
        padding: 6px 0;
        cursor: pointer;
        font-size: 13px;
        color: #b7b7b7;
        transition: color 0.2s;
        user-select: none;
    }
@media (hover: hover) { .filter-item:hover { color: #fff; } }
    
    .filter-checkbox {
        appearance: none;
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        border: 1px solid #3a3f55;
        border-radius: 4px;
        background: #1a1d2e;
        margin-right: 10px;
        position: relative;
        flex-shrink: 0;
        cursor: pointer;
        transition: all 0.2s;
    }
    .filter-checkbox:checked {
        background: #0088cc;
        border-color: #0088cc;
    }
    .filter-checkbox:checked::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 6px;
        width: 4px;
        height: 9px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }
    
    .filter-icon {
        width: 24px;
        height: 24px;
        object-fit: contain;
        border-radius: 4px;
        margin-right: 8px;
        background: #24283b;
        border: 1px solid #272b3b;
    }
    
    .filter-count {
        margin-left: auto;
        font-size: 12px;
        color: #0088cc;                     /* % редкости — голубой как бейдж в карточке подарка */
        background: rgba(0, 136, 204, 0.1);
        padding: 2px 6px;
        border-radius: 4px;
    }
    
    .filter-select { /* Стиль для select сортировки */
        width: 100%;
        background: #1a1d2e;
        border: 1px solid #3a3f55;
        color: #fff;
        padding: 10px;
        border-radius: 8px;
        outline: none;
        cursor: pointer;
    }

    /* Грид подарков */
    .gifts-content { flex-grow: 1; }
    
    .gifts-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
        gap: 20px;
    }
    
    .gift-card {
        background: #1a1d2e;
        border: 1px solid #272b3b;
        border-radius: 16px;
        overflow: hidden;
        text-decoration: none;
        transition: transform 0.2s;
        display: block;
        position: relative;
    }
@media (hover: hover) { .gift-card:hover { transform: translateY(-5px); border-color: #0088cc; } }
    
    .gift-image-box {
        padding: 0px;
        background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0) 70%);
        display: flex;
        justify-content: center;
        position: relative;
    }
    .gift-image-box img {
        width: 100%;
        aspect-ratio: 1;
        object-fit: contain;
        filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
    }
    .status-badge {
        position: absolute;
        top: 10px; right: 10px;
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
    }
    .badge-sale { background: #0088cc; color: #fff; }
    .badge-sold { background: #2d3246; color: #aaa; }

    .gift-details { padding: 15px; }
    .gift-name {
        color: #fff;
        font-weight: 500;
        margin-bottom: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .gift-price-block {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    .price-rub { font-size: 17px; font-weight: 700; color: #fff; display: block;}
    .price-ton { font-size: 12px; color: #666; }

    /* Пагинация */
    .pagination { margin-top: 40px; display: flex; justify-content: center; gap: 5px; }
    .page-link {
        width: 36px; height: 36px;
        display: flex; align-items: center; justify-content: center;
        background: #1a1d2e;
        color: #fff;
        border-radius: 8px;
        text-decoration: none;
        transition: 0.2s;
    }
.page-link.active { background: #0088cc; }
@media (hover: hover) { .page-link:hover { background: #0088cc; } }

    /* Mobile Header & Filters */
    .mobile-only { display: none !important; }
    .char-mobile { display: none; } /* десктоп: скрыт; на мобиле включается в @media ниже */
    /* Единый стиль заголовков мобильных секций (как «ОПИСАНИЕ»): капс, 24px */
    .m-sect-title { font-size: 20px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 10px; }
    /* Слайдер «Коллекции» под описанием (мобайл, перелинковка). Контейнер .char-mobile уже скрыт на десктопе. */
    .other-collections { margin-bottom: 30px; }
    .other-collections .oc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .other-collections .oc-title { font-size: 20px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 1px; }
    .other-collections .oc-all { color: #5b8cff; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
    .other-collections .oc-scroller { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
    .other-collections .oc-scroller::-webkit-scrollbar { height: 4px; }
    .other-collections .oc-scroller::-webkit-scrollbar-thumb { background: #272b3b; border-radius: 4px; }
    .other-collections .oc-card { flex: 0 0 116px; scroll-snap-align: start; }
    .gift-left .title_mobile {
        display: none;
    }
    @media (max-width: 900px) {
        section.main {
            padding-top: 0;
        }
        .gift-meta {
            margin-bottom: 0px;
        }
@media (hover: hover) { .gift-card:hover {
            transform: translateY(0);
        } }
        /* Reset Desktop Layout */
        .gifts-layout { display: block; }
        .filters-sidebar { display: none; }
        .page-header {  margin-bottom: 0px; }
        .page-container { padding: 0; max-width: 100%; }
        .m-filter-header > span {
            color: #fff;
        }
        .page-header h2 {
            line-height: 21px;
            font-size: 18px;
        }
        .hero-breadcrumbs a {
            font-size: 16px;
            margin: 0 2px;
        }
        .collection-price-badge .price-val {
            white-space: nowrap;
        }
        .collection-card {
            padding: 14px 8px 10px; /* низ 10px — небольшой отступ под чипом, как в макете */
            aspect-ratio: auto;     /* высота по контенту, без принудительной вытянутости */
            border-radius: 16px;
        }
        .collections-grid {
            gap: 8px;
            padding: 0 12px; /* боковые отступы ТОЛЬКО на странице списка коллекций (не на странице товаров) */
        }
        .collection-title {
            white-space: nowrap;
            max-width: 90%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* Show Mobile Elements */
        .hero-info .mobile-only {
            margin-top: 10px;
            padding-left: 27px;
        }
        .mobile-only { 
            display: flex !important; 

        }
        .offers-count-bar {
            padding: 15px 15px 0;
            margin-bottom: 0;
        }
        
        /* Mobile Header */
        .m-back-btn {
            display: flex;
            align-items: center;
            color: #0088cc;
            text-decoration: none;
            font-size: 16px;
            font-weight: 500;
        }
        .m-title-block {
            flex-grow: 1;
        }
        .m-title {
            font-size: 17px;
            font-weight: 600;
            color: #fff;
            line-height: 1.2;
            text-align: right;
        }
        /* Mobile Filter Bar — прилипает под hero-back-nav (51px header + ~45px nav) */
        .mobile-filter-bar {
            display: flex;
            gap: 8px;
            padding: 12px 16px;
            overflow-x: auto;
            justify-content: flex-start;
            background: transparent; /* прозрачный бар → чип реально фростит карточки за собой */
            position: sticky;
            top: 96px; /* header 51px + hero-back-nav ~45px */
            z-index: 98;
            scrollbar-width: none;
        }
        .mobile-filter-bar::-webkit-scrollbar { display: none; }
        
        .m-filter-chip {
            background: rgba(22,27,40,0.55);
            -webkit-backdrop-filter: blur(18px) saturate(1.6);
            backdrop-filter: blur(18px) saturate(1.6);
            padding: 7px 11px;
            border-radius: 20px;
            color: #e0e3e9;
            font-size: 12px;
            white-space: nowrap;
            border: 1px solid rgba(255,255,255,0.12);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); /* верхний блик — эффект стекла */
            cursor: pointer;
        }
        .m-filter-chip.active {
            background: #0088cc;
            color: #fff;
            border-color: #0088cc;
        }
        .m-filter-chip.m-filter-reset { color: #ff6b6b; }
        
        /* Mobile Grid (3 Columns) */
        .gifts-content {
            padding: 10px;
        }
        .gifts-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }
        
        /* Mobile Card Style */
        .gift-card {
            border-radius: 12px;
            border: none;
            background: #24283b; /* Default fallback */
            position: relative;
            aspect-ratio: 3 / 4;
            border: 0;
            overflow: hidden;
        }
        /* Background colors based on index or random to mimic app */
        .gift-card:nth-child(5n+1) { background: linear-gradient(135deg, #3d342b 0%, #292420 100%); border: 1px solid #5c4d3c; }
        .gift-card:nth-child(5n+2) { background: linear-gradient(135deg, #2b3d34 0%, #202924 100%); border: 1px solid #3c5c4a; }
        .gift-card:nth-child(5n+3) { background: linear-gradient(135deg, #2b323d 0%, #202429 100%); border: 1px solid #3c4a5c; }
        .gift-card:nth-child(5n+4) { background: linear-gradient(135deg, #342b3d 0%, #242029 100%); border: 1px solid #4a3c5c; }
        .gift-card:nth-child(5n+5) { background: linear-gradient(135deg, #2b3d3a 0%, #202928 100%); border: 1px solid #3c5c58; }

        .gift-image-box {
            padding: 0px;
            background: transparent;
            height: auto;
            aspect-ratio: 3 / 4;
        }
        .gift-image-box img {
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
            object-fit: cover;
            border-radius: 11px;
        }
        
        .status-badge { display: none; } /* Hide sale badge on mobile */
        
        .gift-details {
            padding: 0 0 0px 0;
            text-align: center;
            position: absolute;
            bottom: 16px;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
        }
        .gift-name { display: none; } /* Hide name on mobile grid */
        
        .gift-details .gift-price-block {
            background: rgba(0,0,0,0.6);
            border-radius: 12px;
            padding: 4px 10px;
            margin: 0;
            backdrop-filter: blur(4px);
        }
        .price-rub { font-size: 12px; font-weight: 600; }
        .price-ton { display: none; }
        
        .gift-number-ribbon {
            position: absolute;
            top: 15px;
            right: -30px;
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            font-size: 9px; /* ниже порога Вебмастера (12px), но крупнее лента выглядит плохо — решение владельца */
            font-weight: bold;
            padding: 3px 30px;
            transform: rotate(45deg);
            z-index: 2;
            text-align: center;
            width: 100px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .m-card-diamond-icon {
            position: absolute;
            top: 6px;
            left: 6px;
            font-size: 14px;
            color: #fff;
            opacity: 0.8;
            z-index: 2;
            border: 1px solid #fff;
            border-radius: 3px;
            width: 16px; 
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .pagination { margin-bottom: 30px; }
    }
    
    /* Loader Styles (Duplicate from previous edit to ensure existence) */
    #page-loader {
        display: none;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(15, 19, 37, 0.9);
        z-index: 9999;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #page-loader.active { display: flex; }
    .loader-spinner {
        width: 50px; height: 50px;
        border: 5px solid rgba(255,255,255,0.1);
        border-top-color: #0088cc;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 15px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Product Modal */
    .modal-product {
        display: none;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.85);
        z-index: 2000;
        justify-content: center;
        align-items: center;
        padding: 20px;
    }
    .modal-product.active { display: flex; }
    
    .product-modal-content {
        background: #1a1d2e;
        border-radius: 20px;
        max-width: 900px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        position: relative;
        padding: 0;
        border: 1px solid #272b3b;
        box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        color: #fff;
    }
    .modal-close-btn {
        position: absolute;
        top: 20px; right: 20px;
        width: 36px; height: 36px;
        background: rgba(255,255,255,0.1);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        color: #fff;
        z-index: 10;
        transition: 0.2s;
    }
    .buy-form-content h3 { color: #fff; }
@media (hover: hover) { .modal-close-btn:hover { background: rgba(255,255,255,0.2); } }

    /* Content inside Ajax Modal */
    .gift-detail-modal {
        display: flex;
        gap: 10px;
        padding: 20px;
    }
    .gift-right .gift-attributes {
        margin-bottom: 10px;
    }
    .gift-left { width: 45%; flex-shrink: 0; }
    .gift-left img { width: 100%; border-radius: 20px; background: #24283b; }
    .gift-right { flex-grow: 1; }
    .gift-right h1 { font-size: 28px; margin-bottom: 10px; margin-top: 0; color: #fff; }
    .gift-meta { color: #888; margin-bottom: 0; font-size: 14px; }
    
    .gift-price-block {
        padding: 0px;
        border-radius: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .gift-price-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    
    .price-main { 
        font-size: 22px; 
        font-weight: bold; 
        color: #fff; 
        display: block; 
        white-space: nowrap;
        line-height: 1.2;
        overflow: visible;
        min-width: min-content;
    }
    .price-sub { 
        color: #888; 
        font-size: 14px; 
        display: block; 
    }
    
    .buy-btn {
        background: linear-gradient(90deg, #0088cc, #005f8f);
        color: #fff; border: none;
        padding: 12px 25px; font-size: 16px;
        border-radius: 25px; cursor: pointer;
        width: auto;
        margin-top: 0;
        white-space: nowrap;
        transition: 0.2s;
    }
@media (hover: hover) { .buy-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,136,204,0.3); } }
    
    .buy-btn:disabled {
        background: #2d3246; /* Grey background */
        color: #666; /* Dimmed text */
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
        opacity: 0.7;
    }

    .gift-desc-text {
        color: #7d8b99;
        line-height: 1.5;
        font-size: 12px;
        margin-top: 22px;
    }

    @media (max-width: 768px) {
        .gift-detail-modal { flex-direction: column; }
        .gift-left { width: 100%; }
        .modal-product { align-items: flex-start; padding: 40px 16px 12px; }
        html.tg-mini .modal-product { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
        .product-modal-content { max-height: 100%; height: auto; border-radius: 20px; padding-bottom: 16px; }
        .modal-close-btn { top: 10px; right: 10px; background: rgba(0,0,0,0.5); }
        .gift-left .title_mobile {
            display: block;
            margin-bottom: 10px;
        font-size: 19px;
        }
        .gift-right h1 {
            display: none;
        }
    }
    
    /* Filter Modal Mobile */
    .m-filter-modal {
        display: none;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.8);
        z-index: 10000;
        align-items: flex-end; /* Bottom sheet style */
    }
    .m-filter-modal.active { display: flex; }
    .m-filter-content {
        background: #1a1d2e;
        width: 100%;
        border-radius: 20px 20px 0 0;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
        animation: slideUp 0.3s ease;
    }
    @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    
    .m-filter-header {
        padding: 15px;
        border-bottom: 1px solid #272b3b;
        text-align: center;
        font-weight: bold;
        position: relative;
    }
    .m-filter-body {
        padding: 20px;
        overflow-y: auto;
    }
    /* Заголовок смысловой группы символов (Животные, Птицы…). В сайдбаре — обычная строка,
       в сетке шторки растягивается на всю ширину ряда (см. .grid-mode ниже). */
    .filter-cat-title {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #7d8494;
        padding: 10px 2px 4px;
    }
    .filter-cat-title:first-child { padding-top: 2px; }

    /* Сетка плиток для атрибутов (Модель/Символ/Фон) — вместо длинного списка в 1 колонку.
       Плитка = картинка на всю площадь, а %/чекбокс/имя лежат ОВЕРЛЕЯМИ поверх неё.
       Включается классом .grid-mode из openMobileFilter (для сортировки НЕ ставится). */
    .m-filter-body.grid-mode {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        align-content: start;
        align-items: start;   /* НЕ растягивать плитку под ряд — иначе aspect-ratio схлопывается */
    }
    /* Заголовок группы в сетке — отдельной строкой во всю ширину, чтобы плитки под ним
       начинали новый ряд. Без position:sticky: заголовки лежат прямыми детьми одной сетки,
       и все пройденные залипали бы в одной точке друг на друге. */
    .grid-mode .filter-cat-title {
        grid-column: 1 / -1;
        padding: 8px 2px 2px;
    }
    .grid-mode .filter-item {
        display: block;
        position: relative;
        height: 0;
        padding: 0 0 100%;           /* квадрат: высота = ширине; иммунно к grid-stretch и не зависит от aspect-ratio */
        background: #272b3b;         /* рамка вокруг иконки + фон, пока картинка грузится / если её нет */
        border: 1.5px solid transparent;
        border-radius: 12px;
        overflow: hidden;            /* оверлеи и картинка обрезаются по скруглению */
        touch-action: manipulation;  /* убирает 300мс double-tap задержку вебвью — тап регистрируется сразу */
    }
    /* Подсветка выбранной плитки. :has поддерживается webview Telegram (совр. WebKit/Chromium) */
    .grid-mode .filter-item:has(.filter-checkbox:checked) {
        border-color: #0088cc;
    }
    /* Картинка модели — почти на всю плитку. Отступ задаём через padding+box-sizing, а НЕ inset:
       у <img> (замещаемый элемент) inset без явных размеров даёт интринсик-размер и картинка схлопывается. */
    .grid-mode .filter-icon {
        position: absolute;
        inset: 0;
        width: 100%; height: 100%;
        box-sizing: border-box;
        padding: 8px;
        object-fit: contain;         /* фигурка целиком, с рамкой #272b3b вокруг */
        margin: 0;
        border: none;
        border-radius: 0;
        background: transparent;
    }
    /* Символы — тёмно-синие ПРОЗРАЧНЫЕ силуэты (fragment.com), на тёмной плитке сливаются.
       Красим только их в светлый (Model/Backdrop цветные — не трогаем; таргет по data-attr чекбокса). */
    .grid-mode .filter-item:has(.filter-checkbox[data-attr="Symbol"]) .filter-icon {
        filter: brightness(0) invert(0.92);
        /* Символы крупнее моделей визуально — даём им больше воздуха. Отступ в % (а не px),
           чтобы иконка одинаково смотрелась на узких и широких телефонах: 27% ≈ 14px→22px
           на плитке 79px, сама фигурка становится на ~30% меньше. */
        padding: 27%;
    }
    /* Фон — цветные орбы (SVG). Крупный круг великоват: больше полей → аккуратный кружок-образец. */
    /* Модели — базовые 8px давали слишком крупную фигурку, ужимаем на ~20%.
       Отступ в % (как у символов), чтобы пропорция держалась на любой ширине экрана. */
    .grid-mode .filter-item:has(.filter-checkbox[data-attr="Model"]) .filter-icon {
        padding: 18%;
    }
    .grid-mode .filter-item:has(.filter-checkbox[data-attr="Backdrop"]) .filter-icon {
        padding: 23%;   /* было 16px; орб ужат ещё на ~10%, отступ в % — как у моделей и символов */
    }
    /* Плейсхолдер, если у модели нет картинки */
    .grid-mode .filter-item:not(:has(.filter-icon))::before {
        content: '';
        position: absolute;
        inset: 5px;
        border-radius: 8px;
        background: #313648;
    }
    /* % редкости — оверлей в ЛЕВОМ верхнем углу, тёмная подложка для читаемости поверх картинки */
    .grid-mode .filter-count {
        position: absolute;
        top: 5px; left: 5px;
        z-index: 2;
        margin: 0;
        font-size: 10px;
        padding: 1px 5px;
        color: #fff;
        background: rgba(0, 136, 204, 0.9);
        border-radius: 6px;
    }
    /* Чекбокс — оверлей в ПРАВОМ верхнем углу */
    .grid-mode .filter-checkbox {
        position: absolute;
        top: 5px; right: 5px;
        z-index: 2;
        margin: 0;
        background: rgba(0, 0, 0, 0.5);       /* виден и на светлой картинке */
        border-color: rgba(255, 255, 255, 0.75);
        transition: none;                     /* без наплыва — заливка/галка появляются мгновенно по клику */
    }
    .grid-mode .filter-checkbox:checked {
        border-color: #0088cc;
        /* Вариант C: stroke-галка инлайн-SVG. Инлайн в CSS = рисуется мгновенно (не глиф шрифта, без FOIT). */
        background: #0088cc url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill='none'%20stroke='%23fff'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M3.5%208.5l3%203%206-6.5'/%3E%3C/svg%3E") center / 14px no-repeat;
    }
    /* Гасим самодельный CSS-бордер-чекмарк из базового правила — в сетке галку рисует SVG выше */
    .grid-mode .filter-checkbox:checked::after {
        content: none;
    }
    /* Имя модели — оверлей СНИЗУ. Мягкий градиент + тень на буквах вместо жёсткой тёмной плашки:
       фигурка снизу не прячется, но текст читается на любой картинке (перебиваем inline nowrap/ellipsis) */
    .grid-mode .filter-item > span:not(.filter-count) {
        position: absolute;
        left: 0; right: 0; bottom: 0;       /* привязка к блоку-плитке, на всю ширину, а не под иконку */
        z-index: 2;
        margin: 0 !important;
        padding: 21px 4px 5px !important;
        background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
        border-radius: 0 0 10px 10px;
        color: #fff !important;
        font-size: 10px;
        line-height: 1.15;
        text-align: center !important;
        text-shadow: 0 1px 3px rgba(0,0,0,0.97), 0 0 2px rgba(0,0,0,0.85);
        white-space: normal !important;
        overflow: hidden !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;                /* максимум 2 строки, дальше многоточие */
        -webkit-box-orient: vertical;
    }
    .m-filter-close {
        position: absolute;
        right: 15px; top: 15px;
        font-size: 24px;
        line-height: 1;
        color: #888;
    }