/* Category page specific styles */
    .category-page {
        padding: 20px 0;
    }
    
    .category-layout {
        display: flex;
        gap: 30px;
        margin-top: 20px;
    }
    
    /* Sidebar */
    .category-sidebar {
        flex: 0 0 260px;
        min-width: 260px;
        position: sticky;
        top: 100px;
        align-self: flex-start;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        padding-right: 10px;
    }
    
    .category-sidebar::-webkit-scrollbar {
        width: 4px;
    }
    
    .category-sidebar::-webkit-scrollbar-thumb {
        background: var(--accent);
        border-radius: 10px;
    }
    
    .filter-section {
        margin-bottom: 24px;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 20px;
    }
    
    .filter-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    .filter-section h4 {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        user-select: none;
    }
    
    .filter-section h4 .toggle-icon {
        font-size: 0.7rem;
        transition: transform 0.3s;
    }
    
    .filter-section h4 .toggle-icon.collapsed {
        transform: rotate(-90deg);
    }
    
    .filter-options {
        display: flex;
        flex-direction: column;
        gap: 6px;
        max-height: 300px;
        overflow-y: auto;
        transition: max-height 0.3s ease, opacity 0.3s ease;
    }
    
    .filter-options.collapsed {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        margin: 0;
    }
    
    .filter-options::-webkit-scrollbar {
        width: 3px;
    }
    
    .filter-options::-webkit-scrollbar-thumb {
        background: var(--accent);
        border-radius: 10px;
    }
    
    .filter-option {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.85rem;
        color: var(--text-secondary);
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 4px;
        transition: background 0.2s;
    }
    
    .filter-option:hover {
        background: var(--bg-card-hover);
    }
    
    .filter-option input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: var(--accent);
        cursor: pointer;
        flex-shrink: 0;
    }
    
    .filter-option .count {
        color: var(--text-muted);
        font-size: 0.75rem;
        margin-left: auto;
    }
    
    .price-range-option {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.85rem;
        color: var(--text-secondary);
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 4px;
        transition: background 0.2s;
    }
    
    .price-range-option:hover {
        background: var(--bg-card-hover);
    }
    
    .price-range-option input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: var(--accent);
        cursor: pointer;
        flex-shrink: 0;
    }
    
    /* Product Toolbar */
    .product-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px 16px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius);
        margin-bottom: 20px;
    }
    
    .product-toolbar .results-info {
        font-size: 0.85rem;
        color: var(--text-muted);
    }
    
    .product-toolbar .results-info strong {
        color: var(--text-primary);
    }
    
    .product-toolbar .toolbar-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }
    
    .product-toolbar .search-within {
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
    }
    
    .product-toolbar .search-within input {
        padding: 6px 14px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: var(--bg-input);
        color: var(--text-primary);
        font-size: 0.85rem;
        width: 180px;
        transition: all 0.3s;
    }
    
    .product-toolbar .search-within input:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
        width: 220px;
    }
    
    .product-toolbar .search-within input::placeholder {
        color: var(--text-muted);
    }
    
    .product-toolbar .search-within .clear-search {
        position: absolute;
        right: 10px;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 0.8rem;
        display: none;
    }
    
    .product-toolbar .search-within .clear-search.visible {
        display: block;
    }
    
    .product-toolbar select {
        padding: 6px 32px 6px 14px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: var(--bg-input);
        color: var(--text-primary);
        font-size: 0.85rem;
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
    }
    
    .product-toolbar select:focus {
        outline: none;
        border-color: var(--accent);
    }
    
    .product-toolbar .view-toggle {
        display: flex;
        gap: 4px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        overflow: hidden;
    }
    
    .product-toolbar .view-toggle button {
        padding: 6px 10px;
        background: transparent;
        color: var(--text-muted);
        border: none;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 0.9rem;
    }
    
    .product-toolbar .view-toggle button:hover {
        background: var(--bg-card-hover);
        color: var(--text-primary);
    }
    
    .product-toolbar .view-toggle button.active {
        background: var(--accent);
        color: #fff;
    }
    
    .mobile-filter-btn {
        display: none;
        padding: 8px 16px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        color: var(--text-primary);
        font-weight: 600;
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.2s;
        align-items: center;
        gap: 8px;
    }
    
    .mobile-filter-btn:hover {
        background: var(--bg-card-hover);
        border-color: var(--accent);
    }
    
    .clear-filters-btn-top {
        padding: 6px 14px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        color: var(--text-muted);
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s;
        display: none;
        align-items: center;
        gap: 6px;
    }
    
    .clear-filters-btn-top:hover {
        border-color: #ef4444;
        color: #ef4444;
        background: #fef2f2;
    }
    
    .clear-filters-btn-top.visible {
        display: inline-flex;
    }
    
    /* Pagination */
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 20px 0 10px;
        flex-wrap: wrap;
    }
    
    .pagination a,
    .pagination span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        padding: 0 12px;
        border-radius: 8px;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-muted);
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        transition: all 0.2s;
        text-decoration: none;
        cursor: pointer;
    }
    
    .pagination a:hover {
        background: var(--bg-card-hover);
        border-color: var(--accent);
        color: var(--accent);
    }
    
    .pagination a.active {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent);
    }
    
    .pagination a.disabled,
    .pagination span.disabled {
        opacity: 0.4;
        pointer-events: none;
    }
    
    .pagination .ellipsis {
        background: transparent;
        border: none;
        color: var(--text-muted);
        cursor: default;
    }
    
    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: var(--text-muted);
        grid-column: 1 / -1 !important;
    }
    
    .empty-state i {
        font-size: 3rem;
        opacity: 0.3;
        margin-bottom: 16px;
        display: block;
    }
    
    .empty-state h3 {
        color: var(--text-primary);
        font-size: 1.2rem;
        margin-bottom: 8px;
    }
    
    .empty-state p {
        margin-bottom: 16px;
    }
    
    .empty-state .clear-filters-btn {
        padding: 10px 28px;
        background: var(--accent);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .empty-state .clear-filters-btn:hover {
        background: var(--accent-hover);
        transform: scale(1.02);
    }
    
    /* Mobile Sidebar */
    .sidebar-overlay-filter {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1500;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
        backdrop-filter: blur(4px);
    }
    
    .sidebar-overlay-filter.open {
        opacity: 1;
        visibility: visible;
    }
    
    .mobile-sidebar {
        position: fixed;
        top: 0;
        left: -320px;
        width: 300px;
        max-width: 85vw;
        height: 100%;
        background: var(--bg-popup);
        z-index: 1501;
        transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.12);
        padding: 20px 20px 30px;
        overflow-y: auto;
        border-right: 1px solid var(--border-color);
    }
    
    .mobile-sidebar.open {
        left: 0;
    }
    
    .mobile-sidebar .sidebar-header-mobile {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 16px;
        margin-bottom: 16px;
        border-bottom: 1px solid var(--border-color);
    }
    
    .mobile-sidebar .sidebar-header-mobile h3 {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-primary);
    }
    
    .mobile-sidebar .sidebar-header-mobile .sidebar-close-btn {
        font-size: 1.2rem;
        color: var(--text-muted);
        cursor: pointer;
        background: none;
        border: none;
        padding: 4px 8px;
    }
    
    .mobile-sidebar .sidebar-header-mobile .sidebar-close-btn:hover {
        color: var(--text-primary);
    }
    
    /* Breadcrumb */
    .category-breadcrumb {
        padding: 12px 0 0;
        font-size: 0.85rem;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .category-breadcrumb a {
        color: var(--text-muted);
        transition: color var(--transition);
        text-decoration: none;
    }
    
    .category-breadcrumb a:hover {
        color: var(--accent);
    }
    
    .category-breadcrumb .separator {
        color: var(--text-muted);
        font-size: 0.6rem;
        opacity: 0.5;
    }
    
    .category-breadcrumb .current {
        color: var(--text-primary);
        font-weight: 500;
    }
    
    .category-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        padding: 8px 0 4px;
    }
    
    .category-header h1 {
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .category-header h1 i {
        color: var(--accent);
    }
    
    .category-header .product-count-badge {
        font-size: 0.85rem;
        color: var(--text-muted);
        font-weight: 400;
        background: var(--bg-card);
        padding: 2px 14px;
        border-radius: 50px;
        border: 1px solid var(--border-color);
    }
    
    /* Loading Shimmer */
    .loading-shimmer {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 30px;
    }
    
    .loading-shimmer .shimmer-card {
        background: var(--bg-card);
        border-radius: var(--radius);
        border: 1px solid var(--border-color);
        padding: 16px;
        animation: shimmer 1.5s infinite;
    }
    
    .loading-shimmer .shimmer-card .shimmer-image {
        width: 100%;
        aspect-ratio: 1/0.85;
        background: var(--bg-body);
        border-radius: 8px;
    }
    
    .loading-shimmer .shimmer-card .shimmer-line {
        height: 12px;
        background: var(--bg-body);
        border-radius: 4px;
        margin-top: 12px;
    }
    
    .loading-shimmer .shimmer-card .shimmer-line.short {
        width: 60%;
    }
    
    .loading-shimmer .shimmer-card .shimmer-line.medium {
        width: 80%;
    }
    
    @keyframes shimmer {
        0% { opacity: 1; }
        50% { opacity: 0.6; }
        100% { opacity: 1; }
    }
    
    /* Product card animation */
    .product-card {
        animation: fadeInUp 0.4s ease forwards;
        opacity: 0;
    }
    
    .product-card:nth-child(1) { animation-delay: 0.05s; }
    .product-card:nth-child(2) { animation-delay: 0.10s; }
    .product-card:nth-child(3) { animation-delay: 0.15s; }
    .product-card:nth-child(4) { animation-delay: 0.20s; }
    .product-card:nth-child(5) { animation-delay: 0.25s; }
    .product-card:nth-child(6) { animation-delay: 0.30s; }
    .product-card:nth-child(7) { animation-delay: 0.35s; }
    .product-card:nth-child(8) { animation-delay: 0.40s; }
    .product-card:nth-child(9) { animation-delay: 0.45s; }
    .product-card:nth-child(10) { animation-delay: 0.50s; }
    .product-card:nth-child(11) { animation-delay: 0.55s; }
    .product-card:nth-child(12) { animation-delay: 0.60s; }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* ============================================
       PRODUCT GRID DISPLAY
    ============================================ */
    .product-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 30px;
    }
    
    /* LIST VIEW: 3 products per row on large screens */
    .product-grid.list-view {
        grid-template-columns: repeat(3, 1fr);
    }
    
    @media (min-width: 1600px) {
        .product-grid.grid-view {
            grid-template-columns: repeat(5, 1fr);
        }
        .loading-shimmer {
            grid-template-columns: repeat(5, 1fr);
        }
    }
    
    @media (max-width: 1399px) {
        .product-grid.grid-view {
            grid-template-columns: repeat(4, 1fr);
        }
        .loading-shimmer {
            grid-template-columns: repeat(4, 1fr);
        }
    }
    
    @media (max-width: 1199px) {
        .product-grid.grid-view {
            grid-template-columns: repeat(3, 1fr);
        }
        .loading-shimmer {
            grid-template-columns: repeat(3, 1fr);
        }
        .category-sidebar {
            flex: 0 0 220px;
            min-width: 220px;
        }
    }
    
    @media (max-width: 991px) {
        .category-sidebar {
            display: none;
        }
        .mobile-filter-btn {
            display: inline-flex;
        }
        .category-layout {
            gap: 0;
        }
        .product-grid.grid-view {
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }
        .loading-shimmer {
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }
        /* List view on tablets: 2 per row */
        .product-grid.list-view {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    @media (max-width: 767px) {
        .product-grid.grid-view {
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        .loading-shimmer {
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        .product-toolbar {
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
        }
        .product-toolbar .toolbar-actions {
            justify-content: space-between;
        }
        .product-toolbar .search-within input {
            width: 140px;
        }
        .product-toolbar .search-within input:focus {
            width: 160px;
        }
        .pagination a {
            min-width: 34px;
            height: 34px;
            font-size: 0.75rem;
            padding: 0 8px;
        }
        .category-page {
            padding: 10px 0;
        }
        .category-header h1 {
            font-size: 1.4rem;
        }
        /* List view on phones: 1 per row */
        .product-grid.list-view {
            grid-template-columns: 1fr;
        }
    }
    
    @media (max-width: 480px) {
        .product-grid.grid-view {
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        .loading-shimmer {
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        .product-toolbar .toolbar-actions {
            flex-wrap: wrap;
            justify-content: center;
        }
        .product-toolbar .search-within input {
            width: 120px;
        }
        .product-toolbar .search-within input:focus {
            width: 140px;
        }
        .mobile-sidebar {
            width: 280px;
        }
        .category-header h1 {
            font-size: 1.2rem;
        }
        .category-breadcrumb {
            font-size: 0.7rem;
            gap: 4px;
        }
    }

/* ============================================================
   PROFESSIONAL CATEGORY PAGE ENHANCEMENTS
   Visual-only changes. No functionality or layout logic altered.
============================================================ */
.category-page > .container { width: 100%; max-width: none; padding-inline: clamp(14px, 2.2vw, 34px); }
.category-page { padding: 22px 0 42px; background: radial-gradient(circle at top right, rgba(59,130,246,.045), transparent 28%), var(--bg-body); }
.category-breadcrumb { padding-top: 8px; margin-bottom: 4px; font-size: .8rem; }
.category-breadcrumb a:hover { color: var(--primary); }
.category-header { padding: 12px 0 10px; }
.category-header h1 { font-size: clamp(1.55rem, 2.4vw, 2.15rem); letter-spacing: -.025em; }
.category-header h1 i { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--primary); background: rgba(59,130,246,.10); }
.category-header .product-count-badge { padding: 6px 13px; color: var(--primary); background: rgba(59,130,246,.07); border-color: rgba(59,130,246,.16); font-weight: 750; }
.category-layout { gap: clamp(18px, 2vw, 30px); margin-top: 14px; }
.category-sidebar { flex-basis: 270px; min-width: 270px; padding: 18px 15px 20px 18px; border: 1px solid var(--border-color); border-radius: 16px; background: var(--bg-card); box-shadow: 0 8px 24px rgba(15,23,42,.045); }
.category-sidebar::-webkit-scrollbar-thumb, .filter-options::-webkit-scrollbar-thumb { background: var(--primary); }
.filter-section { margin-bottom: 22px; padding-bottom: 20px; }
.filter-section h4 { margin-bottom: 11px; font-size: .86rem; letter-spacing: .01em; }
.filter-section h4 .toggle-icon { width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; color: var(--text-muted); background: var(--bg-input); }
.filter-option, .price-range-option { min-height: 33px; padding: 6px 8px; border-radius: 8px; transition: background .2s ease, transform .2s ease, color .2s ease; }
.filter-option:hover, .price-range-option:hover { color: var(--text-primary); background: rgba(59,130,246,.07); transform: translateX(3px); }
.filter-option input[type='checkbox'], .price-range-option input[type='checkbox'] { width: 17px; height: 17px; accent-color: var(--primary); }
.filter-option .count { min-width: 27px; padding: 2px 7px; border-radius: 999px; text-align: center; color: var(--text-muted); background: var(--bg-input); font-size: .69rem; }
.clear-filters-btn-top { width: 100%; min-height: 38px; justify-content: center; border-radius: 9px; }
.product-toolbar { position: relative; padding: 15px 17px; border-radius: 15px; box-shadow: 0 6px 20px rgba(15,23,42,.04); }
.product-toolbar .results-info { font-size: .84rem; }
.product-toolbar .toolbar-actions { gap: 10px; }
.product-toolbar .search-within input { min-height: 39px; width: 210px; padding: 8px 34px 8px 13px; border-radius: 9px; }
.product-toolbar .search-within input:focus { width: 250px; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,.10); }
.product-toolbar select { min-height: 39px; border-radius: 9px; }
.product-toolbar .view-toggle { border-radius: 9px; }
.product-toolbar .view-toggle button { min-width: 38px; min-height: 37px; }
.product-toolbar .view-toggle button.active { background: var(--primary); }
.mobile-filter-btn { min-height: 39px; border-radius: 9px; }
.product-grid { gap: clamp(13px, 1.4vw, 21px); }
.product-card { overflow: hidden; border-radius: 15px; border: 1px solid var(--border-color); background: var(--bg-card); box-shadow: 0 4px 14px rgba(15,23,42,.035); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
.product-card:hover { transform: translateY(-5px); border-color: rgba(59,130,246,.26); box-shadow: 0 14px 32px rgba(15,23,42,.09); }
.product-card .image-wrap { position: relative; padding: clamp(12px, 1.4vw, 18px); background: linear-gradient(180deg, rgba(148,163,184,.045), transparent), var(--bg-card); }
.product-card .image-wrap img { transition: transform .3s ease; }
.product-card:hover .image-wrap img { transform: scale(1.025); }
.product-card .info { padding-inline: clamp(12px, 1.3vw, 17px); }
.product-card .name { min-height: 42px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--text-primary); font-weight: 750; line-height: 1.45; }
.product-card .sku { margin-top: 4px; color: var(--text-muted); font-size: .72rem; }
.product-card .prices { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 9px; }
.product-card .prices .current { color: var(--primary); font-size: 1.08rem; font-weight: 850; }
.product-card .prices .old { opacity: .68; }
.product-card .prices .discount { padding: 3px 7px; border-radius: 999px; color: #15803d; background: rgba(34,197,94,.12); font-size: .67rem; font-weight: 800; }
.product-card .stock { margin-top: 8px; }
.product-card .stock .in, .product-card .stock .low { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 8px; border-radius: 999px; font-size: .69rem; font-weight: 750; }
.product-card .stock .in { color: #15803d; background: rgba(34,197,94,.10); }
.product-card .stock .low { color: #b45309; background: rgba(245,158,11,.12); }
.product-card .card-actions { gap: 8px; margin-top: 12px; padding-bottom: 15px; }
.product-card .btn-cart { min-height: 41px; border-radius: 9px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.product-card .btn-cart:hover { transform: translateY(-2px); box-shadow: 0 7px 16px rgba(26,58,107,.16); }
.product-card .btn-wish { min-width: 41px; min-height: 41px; border-radius: 9px; }
.pagination { padding-top: 26px; }
.pagination a, .pagination span { border-radius: 9px; font-weight: 650; }
.pagination a:hover { border-color: var(--primary); color: var(--primary); }
.pagination a.active { background: var(--primary); border-color: var(--primary); }
.empty-state { min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed var(--border-color); border-radius: 16px; background: var(--bg-card); }
.empty-state i { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 20px; color: var(--primary); background: rgba(59,130,246,.08); opacity: 1; }
.empty-state .clear-filters-btn { background: var(--primary); }
.mobile-sidebar { width: 315px; max-width: 90vw; padding: 18px; }
.mobile-sidebar .sidebar-header-mobile { position: sticky; top: -18px; z-index: 2; margin: -18px -18px 16px; padding: 18px; background: var(--bg-popup); }
.mobile-sidebar #mobileSidebarContent .filter-section { padding-inline: 2px; }
@media (max-width: 1199px) { .category-sidebar { flex-basis: 230px; min-width: 230px; padding-inline: 14px; } }
@media (max-width: 767px) {
  .category-page > .container { padding-inline: 12px; }
  .category-page { padding-top: 12px; }
  .category-header { padding: 9px 0 8px; }
  .category-header h1 { width: 100%; gap: 8px; flex-wrap: wrap; font-size: 1.35rem; }
  .category-header h1 i { width: 36px; height: 36px; border-radius: 10px; }
  .category-header .product-count-badge { padding: 4px 9px; font-size: .72rem; }
  .product-toolbar { padding: 12px; border-radius: 13px; }
  .product-toolbar .results-info { width: 100%; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); }
  .product-toolbar .toolbar-actions { width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: 8px; }
  .product-toolbar .search-within { min-width: 0; }
  .product-toolbar .search-within input, .product-toolbar .search-within input:focus { width: 100%; min-width: 0; }
  .product-toolbar select { max-width: 145px; }
  .product-grid.grid-view { gap: 11px; }
  .product-card { border-radius: 12px; }
  .product-card .image-wrap { padding: 10px; }
  .product-card .info { padding-inline: 10px; }
  .product-card .name { min-height: 39px; font-size: .82rem; }
  .product-card .prices .current { font-size: .94rem; }
  .product-card .prices .old { font-size: .72rem; }
  .product-card .prices .discount { font-size: .6rem; }
  .product-card .stock .in, .product-card .stock .low { font-size: .61rem; }
  .product-card .card-actions { gap: 6px; padding-bottom: 11px; }
  .product-card .btn-cart { min-height: 38px; padding-inline: 8px; font-size: .74rem; }
  .product-card .btn-wish { min-width: 38px; min-height: 38px; }
  .pagination { gap: 5px; }
}
@media (max-width: 520px) {
  .category-breadcrumb { font-size: .69rem; }
  .product-toolbar .toolbar-actions { grid-template-columns: 1fr 1fr; }
  .mobile-filter-btn, .product-toolbar .view-toggle { width: 100%; }
  .mobile-filter-btn { justify-content: center; }
  .product-toolbar .search-within { grid-column: 1 / -1; order: -1; }
  .product-toolbar select { width: 100%; max-width: none; }
  .product-toolbar .view-toggle { justify-content: stretch; }
  .product-toolbar .view-toggle button { flex: 1; }
  .product-grid.grid-view { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .product-card .btn-cart { font-size: .68rem; }
  .product-card .btn-cart i { display: none; }
  .pagination a, .pagination span { min-width: 33px; height: 34px; padding-inline: 8px; font-size: .71rem; }
}
@media (max-width: 360px) {
  .category-page > .container { padding-inline: 8px; }
  .product-grid.grid-view { gap: 7px; }
  .product-card .info { padding-inline: 8px; }
  .product-card .name { font-size: .76rem; }
  .product-card .prices .current { font-size: .86rem; }
  .product-card .btn-cart { padding-inline: 5px; font-size: .63rem; }
}

/* ============================================================
   SMALL-SCREEN PRODUCT NAME + MOBILE FILTER PANEL FIXES
   No desktop styling is changed.
============================================================ */
@media (max-width: 991px) {
    .mobile-sidebar {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        padding: 0;
    }

    .mobile-sidebar .sidebar-header-mobile {
        position: sticky;
        top: 0;
        z-index: 5;
        flex: 0 0 auto;
        margin: 0;
        padding: 14px 16px;
        background: var(--bg-popup);
        border-bottom: 1px solid var(--border-color);
    }

    .mobile-filter-header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-clear-filters-btn {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 7px 10px;
        border: 1px solid rgba(239, 68, 68, 0.28);
        border-radius: 8px;
        color: #dc2626;
        background: rgba(239, 68, 68, 0.07);
        font-size: 0.72rem;
        font-weight: 750;
        white-space: nowrap;
    }

    .mobile-clear-filters-btn:hover {
        color: #fff;
        background: #dc2626;
        border-color: #dc2626;
    }

    .mobile-sidebar .sidebar-close-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid var(--border-color);
        border-radius: 9px;
        background: var(--bg-input);
    }

    .mobile-sidebar #mobileSidebarContent {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 16px 18px 28px;
    }
}

@media (max-width: 767px) {
    /* Show the complete product name and let the SKU follow naturally. */
    .product-card .product-link {
        display: block;
    }

    .product-card .name {
        display: block;
        min-height: 0;
        height: auto;
        max-height: none;
        overflow: visible;
        -webkit-line-clamp: unset;
        -webkit-box-orient: initial;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
        line-height: 1.4;
        margin-bottom: 5px;
    }

    .product-card .sku {
        position: static;
        display: block;
        min-height: 1.2em;
        margin-top: 0;
        padding-top: 2px;
        clear: both;
        overflow-wrap: anywhere;
    }
}