/* =========================================
   PAGE HEADER / BREADCRUMBS
   (verbatim from the original catalog design)
   ========================================= */
/* Element+class selector (not just .section-padding) is intentional: it
   out-specifies css/responsive.css's mobile ".section-padding { padding-top:
   50px }" rule regardless of stylesheet load order, so this <main> wrapper
   stays tight on mobile too. Plain .section-padding usages elsewhere (the
   div-based section spacers on index.html) are untouched and still pick up
   the 50px mobile value as designed. */
main.section-padding {
    padding-top: 10px;
    padding-bottom: 60px;
}

.page-header {
    padding-top: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 30px;
}

.page-title {
    font-size: clamp(22px, 1.2vw + 17.7px, 32px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #888;
    margin-bottom: 15px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.breadcrumbs::-webkit-scrollbar { display: none; }
.breadcrumbs > * { flex-shrink: 0; }
.breadcrumbs a { color: #888; transition: 0.3s; }
.breadcrumbs a:hover { color: var(--accent-gold); }
.breadcrumbs i { font-size: 9px; color: #555; }
.breadcrumbs span { color: #ccc; }

/* =========================================
   CATALOG LAYOUT & FILTERS
   ========================================= */
.catalog-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    width: 100%;
}

.sidebar-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0, 0.85); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    z-index: 7999; opacity: 0; pointer-events: none; transition: 0.3s ease;
}
.sidebar-overlay.active { opacity: 1; pointer-events: all; }

.sidebar {
    width: 280px;
    flex: 0 0 280px;
    box-sizing: border-box;
    position: sticky;
    top: calc(var(--header-height) + 40px);
    max-height: calc(100vh - var(--header-height) - 80px);
    overflow-y: auto;
    background: #0a0a0a;
    border: 1px solid #222;
    border-radius: 8px;
    padding: 25px;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }

.sidebar-mobile-header, .sidebar-mobile-footer { display: none; }
.sidebar-content { padding: 0; }

.filter-group {
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #1a1a1a;
}
.filter-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.filter-title {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* SIDEBAR CATEGORY TREE */
.category-tree { display: flex; flex-direction: column; }
.cat-tree-item { border-bottom: 1px solid #1a1a1a; }
.cat-tree-item:last-child { border-bottom: none; }
.cat-tree-parent {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0; color: #fff; font-size: 14px; font-weight: 500;
    text-transform: uppercase; cursor: pointer; transition: 0.3s; user-select: none;
}
.cat-tree-parent:hover, .cat-tree-parent.active { color: var(--accent-gold); }
.cat-tree-parent i { font-size: 12px; transition: transform 0.3s ease; }
.cat-tree-parent.active i { transform: rotate(180deg); }
.cat-tree-sub { display: none; flex-direction: column; padding: 0 0 15px 10px; }
.cat-tree-sub.active { display: flex; }

.cat-tree-sub-item { margin-bottom: 0; }
.cat-tree-sub-parent {
    display: flex; justify-content: space-between; align-items: center;
    color: #777; font-size: 12px; font-weight: 500; text-transform: uppercase;
    margin-top: 12px; margin-bottom: 8px; letter-spacing: 0.5px; cursor: pointer; transition: 0.3s;
}
.cat-tree-sub-parent:hover, .cat-tree-sub-parent.active { color: var(--accent-gold); }
.cat-tree-sub-parent i { font-size: 10px; transition: transform 0.3s ease; }
.cat-tree-sub-parent.active i { transform: rotate(180deg); }

.cat-tree-sub-sub { display: none; flex-direction: column; padding: 0 0 10px 10px; }
.cat-tree-sub-sub.active { display: flex; }

.cat-tree-sublink {
    color: #bbb; font-size: 13px; padding: 4px 0; cursor: pointer; transition: 0.2s;
    display: flex; align-items: center;
}
.cat-tree-sublink::before { content: '-'; margin-right: 8px; color: #555; }
.cat-tree-sublink:hover, .cat-tree-sublink.active { color: var(--accent-gold); }
.cat-tree-sublink.active::before { color: var(--accent-gold); }

/* Desktop Dual Slider */
.price-inputs-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.price-input { background: transparent; border: 1px solid #333; color: #fff; padding: 12px; border-radius: 8px; font-size: 14px; text-align: left; width: 45%; outline: none; transition: 0.3s; }
.price-input:focus { border-color: var(--accent-gold); }
.price-separator { display: none; }
.dual-slider-container { position: relative; height: 40px; display: flex; align-items: center; margin-bottom: 10px; }
.slider-track-bg { position: absolute; width: 100%; height: 4px; background: #333; border-radius: 2px; }
.slider-track { position: absolute; height: 4px; background: var(--accent-gold); border-radius: 2px; z-index: 1; }
.range-input { position: absolute; width: 100%; appearance: none; -webkit-appearance: none; background: transparent; pointer-events: none; z-index: 2; outline: none; margin: 0; }
.range-input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--accent-gold); pointer-events: auto; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }

.btn-apply-filter { width: 100%; background: #1a1a1a; color: #fff; border: 1px solid #333; padding: 12px; border-radius: 4px; margin-top: 15px; font-weight: 500; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; transition: 0.3s; cursor: pointer; }
.btn-apply-filter:hover { background: var(--accent-gold); color: #000; border-color: var(--accent-gold); }
.btn-show-results { display: none; }

/* =========================================
   CATALOG MAIN AREA / TOPBAR
   ========================================= */
.catalog-main {
    flex: 0 0 calc(100% - 280px - 40px);
    width: calc(100% - 280px - 40px);
    max-width: calc(100% - 280px - 40px);
    min-width: 0;
    box-sizing: border-box;
}
/* NOTE: no overflow:hidden here — the calc() width above already prevents
   horizontal overflow at the source, and clipping vertically would also
   cut off the product card's hover-dropdown (weight selector + "До
   кошика") for cards in the last grid row, since it expands downward
   past the card's own box. */
/* css/product-card.css sets margin-bottom:60px on .app-grid for the home
   page's rail spacing; the catalog's own .pagination-wrapper already adds
   margin-top:40px, so cancel the shared rule here to match the original
   spacing instead of stacking both. */
.catalog-main .app-grid { margin-bottom: 0; }

.catalog-topbar {
    display: flex; flex-direction: column; align-items: stretch;
    background: #0a0a0a; border: 1px solid #222; border-radius: 8px;
    padding: 15px 25px; margin-bottom: 30px; gap: 15px;
}

.catalog-topbar-header { display: flex; width: 100%; justify-content: space-between; align-items: center; }

.catalog-results-count { color: #888; font-size: 13px; }
.catalog-results-count span { color: #fff; font-weight: 500; }

.catalog-controls { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.sort-group { display: flex; align-items: center; gap: 15px; }
.sort-label { color: #888; font-size: 13px; }
.sort-buttons { display: flex; border: 1px solid #333; border-radius: 6px; overflow: hidden; background: #0a0a0a; }
.sort-btn { background: transparent; border: none; border-right: 1px solid #333; color: #999; padding: 8px 15px; font-size: 13px; cursor: pointer; transition: 0.3s; }
.sort-btn:last-child { border-right: none; }
.sort-btn:hover, .sort-btn.active { color: var(--accent-gold); background: #151515; }

.view-toggles { display: flex; gap: 5px; background: #111; padding: 4px; border-radius: 6px; border: 1px solid #222; }
.view-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #666; border-radius: 4px; transition: 0.3s; font-size: 14px; cursor: pointer; }
.view-btn.active, .view-btn:hover { background: #2a2a2a; color: var(--accent-gold); }

.mobile-actions { display: none; gap: 15px; align-items: center; }
.mobile-filter-btn, .mobile-sort-btn { background: transparent; border: none; color: var(--accent-gold); font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; outline: none; }

/* MAIN ACTIVE FILTERS */
.main-active-filters { display: none; width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 15px; padding-top: 15px; border-top: 1px solid #1a1a1a; }
.main-active-filters.active { display: flex; }
.maf-group { display: flex; align-items: center; gap: 8px; }
.maf-label { background: var(--accent-gold); color: #000; padding: 8px 12px; border-radius: 4px; font-size: 14px; font-weight: 500; }
.maf-value { display: flex; align-items: center; gap: 10px; background: transparent; border: 1px solid #333; color: #fff; padding: 7px 12px; border-radius: 4px; font-size: 14px; font-weight: 500; }
.maf-value i { color: #888; cursor: pointer; transition: 0.2s; font-size: 14px; }
.maf-value i:hover { color: #ff4444; }

.filter-badge { background: var(--accent-gold); color: #000; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; margin-left: 6px; }

@media (min-width: 1025px) {
    #mobileActiveFiltersContainer { display: none !important; }
}

/* =========================================
   LIST VIEW (desktop) — the shared card component
   ships this markup hidden by default (css/product-card.css);
   these rules turn it on.
   ========================================= */
.app-grid.list-view { display: flex; flex-direction: column; gap: 20px; }

.app-grid.list-view .card-info,
.app-grid.list-view .hover-dropdown,
.app-grid.list-view .grid-wishlist,
.app-grid.list-view .mobile-cart-btn { display: none !important; }

.app-grid.list-view .list-middle-col,
.app-grid.list-view .list-right-col { display: flex !important; }

.app-grid.list-view .card-divider { display: block !important; }
.app-grid.list-view .list-wishlist { display: flex !important; }

.app-grid.list-view .app-card { flex-direction: row; height: auto; align-items: stretch; padding: 16px; gap: 24px; }
.app-grid.list-view .app-card:hover { transform: none; box-shadow: none; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; z-index: 1; }
.app-grid.list-view .card-image-box { width: 160px; height: 160px; flex-shrink: 0; border-radius: 2px; margin: 0; background: #000; }
.app-grid.list-view .list-middle-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; }
.app-grid.list-view .status-art-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; width: 100%; }
.app-grid.list-view .app-name { font-size: 20px; margin: 0 0 6px 0; min-height: auto; line-height: 1.3; }
.app-grid.list-view .art-number { font-size: 11px; color: #555; font-weight: 500; }
.app-grid.list-view .card-rating { display: flex; align-items: center; gap: 4px; color: var(--accent-gold); font-size: 11px; margin-bottom: 12px; }
.app-grid.list-view .card-rating span { color: #555; margin-left: 6px; }
.app-grid.list-view .weight-selector { margin-top: auto; padding-bottom: 4px; background: transparent; display: flex; gap: 6px; width: auto; }
.app-grid.list-view .weight-selector .weight-btn { background: #141414; border: 1px solid #222; color: #777; padding: 6px 12px; font-size: 11px; font-weight: 500; flex: none; width: auto; text-align: center; border-radius: 4px; }
.app-grid.list-view .weight-selector .weight-btn:hover { color: #fff; border-color: #555; }
.app-grid.list-view .weight-selector .weight-btn.active { background: transparent; color: var(--accent-gold); border-color: var(--accent-gold); }
.app-grid.list-view .card-divider { width: 1px; background: #1a1a1a; margin: 0 5px; }
.app-grid.list-view .list-right-col { width: 240px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding-left: 10px; margin-top: 0; }
.app-grid.list-view .list-wishlist { position: relative; top: 0; right: 0; opacity: 1; visibility: visible; transform: none; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); width: 34px; height: 34px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; transition: 0.3s; }
.app-grid.list-view .list-wishlist:hover, .app-grid.list-view .list-wishlist.w-active { border-color: var(--accent-gold); color: var(--accent-gold); }
.app-grid.list-view .price-wrapper { text-align: right; width: 100%; }
.app-grid.list-view .card-price { font-size: 26px; display: flex; align-items: baseline; justify-content: flex-end; margin-bottom: 12px; margin-top: 0; }
.app-grid.list-view .card-price span { font-size: 13px; color: #555; margin-left: 4px; font-weight: 500; }
.app-grid.list-view .btn-action-cart { width: 100%; background: var(--accent-gold); color: #000; padding: 12px; border-radius: 4px; font-weight: 500; font-size: 13px; text-transform: uppercase; cursor: pointer; border: none; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; height: auto; }
.app-grid.list-view .btn-action-cart:hover { background: #fff; }

/* =========================================
   PAGINATION
   ========================================= */
.pagination-wrapper { display: flex; justify-content: center; margin-top: 40px; margin-bottom: 80px; }
.pagination {
    display: flex; align-items: center; gap: 4px;
    background: #101010; border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px; padding: 6px; overflow: visible;
}
.page-btn {
    background: transparent; border: none; border-radius: 8px; color: #888;
    width: 38px; height: 38px; padding: 0; font-size: 14px; font-family: inherit;
    cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px;
    position: relative;
}
.page-btn:has(.page-text) { width: auto; padding: 0 14px; }
.page-btn:hover:not(.disabled):not(.dots):not(.active) { color: #fff; background: rgba(255,255,255,0.05); }
.page-btn.active { color: var(--accent-gold); font-weight: 500; background: transparent; }
.page-btn.active::after {
    content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
    width: 16px; height: 2px; background: var(--accent-gold); border-radius: 2px;
}
.page-btn.disabled { color: #3a3a3a; cursor: not-allowed; }
.page-btn.dots { cursor: default; pointer-events: none; color: #555; width: auto; padding: 0 4px; }

/* =========================================
   MOBILE SORT BOTTOM-SHEET
   ========================================= */
.mobile-sort-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0, 0.8); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    z-index: 7000; display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; pointer-events: none; transition: 0.3s ease;
}
.mobile-sort-overlay.active { opacity: 1; pointer-events: all; }

.mobile-sort-sheet {
    width: 100%; background: #151515; border-radius: 16px 16px 0 0;
    transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding-bottom: 20px; border-top: 1px solid #333;
}
.mobile-sort-overlay.active .mobile-sort-sheet { transform: translateY(0); }

.ms-header { text-align: center; color: #fff; font-size: 16px; font-weight: 500; padding: 20px; border-bottom: 1px solid #222; }
.ms-option { width: 100%; text-align: left; background: transparent; border: none; padding: 20px 25px; color: #fff; font-size: 15px; border-bottom: 1px solid #222; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: 0.2s; }
.ms-option:active { background: #222; }
.ms-option.active { color: var(--accent-gold); }
.ms-option.active::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }

/* =========================================
   RESPONSIVE
   (kept in original cascade order — do not reorder blocks)
   ========================================= */
@media (max-width: 1024px) {
    .catalog-layout { flex-direction: column; align-items: stretch; }

    /* Sidebar becomes position:fixed here (leaves the flex flow entirely),
       so catalog-main must go back to full width — the desktop calc()
       above assumes the sidebar is still taking up flex space. */
    .catalog-main {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }

    .sidebar {
        width: 360px; max-width: 85vw;
        position: fixed; top: 0; left: -100%; bottom: auto; height: 100vh; max-height: none;
        z-index: 8000; border-radius: 0; transform: none; padding: 0;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: none; border-right: 1px solid #222; background: #0a0a0a; display: flex; flex-direction: column;
    }
    .sidebar.active { left: 0; }
    .sidebar-content { flex: 1; overflow-y: auto; padding: 25px; }

    .sidebar-mobile-header {
        display: flex; justify-content: center; align-items: center;
        padding: 0 20px; border-bottom: 1px solid #1a1a1a; position: relative;
        min-height: 60px; flex-shrink: 0; background: #0a0a0a;
    }
    .sidebar-mobile-header h3 { color: #fff; font-size: 16px; font-weight: 500; margin: 0; }
    .sm-close { position: absolute; left: 20px; color: #999; font-size: 18px; cursor: pointer; padding: 10px; margin-left: -10px; }

    #mobileActiveFiltersContainer.active { display: block !important; }

    .btn-show-results { display: block; width: 100%; background: var(--accent-gold); color: #000; padding: 16px; border-radius: 8px; font-weight: 500; font-size: 15px; border: none; cursor: pointer; transition: 0.3s; margin-top: 30px; text-align: center; }
    .btn-show-results:hover { background: #fff; }

    .hide-on-mobile { display: none !important; }

    .price-inputs-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
    .price-input { background: transparent; border: 1px solid #333; color: #fff; padding: 15px; border-radius: 8px; font-size: 15px; text-align: left; width: 45%; }
    .price-separator { display: none; }

    .dual-slider-container { display: flex; }

    .catalog-results-count { display: block; }
    .catalog-controls { display: none !important; }

    .catalog-topbar { display: flex; flex-direction: column; align-items: stretch; padding: 15px 20px; gap: 15px; }
    .catalog-topbar-header { display: flex; width: 100%; justify-content: space-between; align-items: center; }

    .mobile-actions { display: flex; width: 100%; justify-content: space-between; align-items: center; }

    .main-active-filters { display: none; width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 15px; padding-top: 15px; margin-top: 15px; border-top: 1px solid #1a1a1a; }
    .main-active-filters.active { display: flex; }
    .maf-group { display: flex; align-items: center; gap: 8px; }
    .maf-label { background: var(--accent-gold); color: #000; padding: 8px 12px; border-radius: 4px; font-size: 14px; font-weight: 500; }
    .maf-value { display: flex; align-items: center; gap: 10px; background: transparent; border: 1px solid #333; color: #fff; padding: 7px 12px; border-radius: 4px; font-size: 14px; font-weight: 500; }
    .maf-value i { color: #888; cursor: pointer; transition: 0.2s; font-size: 14px; }
    .maf-value i:hover { color: #ff4444; }
    .filter-badge { background: var(--accent-gold); color: #000; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; margin-left: 6px; }

    .app-grid.list-view .app-card { flex-direction: column; gap: 15px; padding: 16px; }
    .app-grid.list-view .card-image-box { width: 100%; height: auto; aspect-ratio: 1/1; border: none; margin: 0; }
    .app-grid.list-view .card-divider { display: none !important; }
    .app-grid.list-view .list-right-col { width: 100%; padding-left: 0; align-items: stretch; }
    .app-grid.list-view .list-wishlist { position: absolute; top: 16px; right: 16px; }
    .app-grid.list-view .status-art-row { flex-direction: column; align-items: flex-start; gap: 5px; }
}

@media (max-width: 600px) {
    .app-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* Unlike the other page-specific stylesheets (about.css, delivery.css,
       etc.), catalog.css had no mobile override for .page-title at all —
       it stayed at the 36px desktop size on phones (visibly oversized,
       e.g. a subcategory title like "ШУ ПУЕР"). Brought in line with the
       ~24px the rest of the site now uses on mobile. */

    .catalog-topbar { padding: 15px; gap: 15px; }
    .catalog-topbar-header { display: none; }
    .mobile-actions { display: flex; width: 100%; justify-content: space-between; align-items: center; }
    .mobile-filter-btn, .mobile-sort-btn { font-size: 14px; }

    .main-active-filters { padding-top: 15px; }

    .pagination { flex-wrap: nowrap; justify-content: center; padding: 6px; gap: 2px; }
    .page-btn { width: 34px; height: 34px; font-size: 13px; margin-bottom: 0; }
    .page-btn:has(.page-text) { padding: 0 12px; }
    .page-text { display: none; }

    .app-grid.list-view .app-name { font-size: 16px; }
    .app-grid.list-view .card-price { font-size: 22px; }
}