/* ===== Filters & Sidebar ===== */
            :root {
                --secondary-color: #978667;
                --secondary: #ebd7b2;
            }
            .uwu-sticky {
                position: -webkit-sticky;
                position: sticky;
                top: 200px;
            }
            
            .filters ul {
                list-style: none;
                padding: 0;
                margin: 0;
                text-align: center;
            }
            
            .filters ul li {
                font-size: 14px;
                text-transform: capitalize;
                padding: 5px 10px;
                font-weight: 500;
                color: var(--secondary-color);
                border: 1px solid #ddd;
                cursor: pointer;
                border-radius: 50px;
                transition: background-color 0.3s, color 0.3s;
            }
            
            .filters ul li:hover {
                background-color: #f0f0f0;
            }
            
            .filters ul li.active-material,
            .filters ul li.active-project {
                background-color: var(--secondary);
                color: #fff !important;
                border-color: var(--secondary);
            }
            
            .filter-row {
                display: flex;
                flex-wrap: wrap;
                gap: 5px;
            }
            
            /* ===== Tabby Sidebar Box ===== */
            .tabby {
                background-color: #fff;
                padding: 20px;
                border: 1px solid #ddd;
                border-radius: 10px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                /* overflow-y: scroll;  */ /* enable this for scroll */
                overflow-y: auto; 
                height: 550px;
            }

            .tabby summary{
                display: block;
            }
            
            .tabby h5 {
                font-size: 18px;
                font-weight: 600;
                color: #212121;
                margin-bottom: 20px;
            }
            
            .tabby h5::after {
                content: "";
                display: block;
                width: 60px;
                height: 2px;
                background-color: var(--secondary);
                margin-top: 0.5rem;
            }
            
            /* mobile tabby height fix */
            
            /* Floating button */
            .filter-toggle-btn {
                position: fixed;
                bottom: 90px;
                right: 8px;
                background: var(--secondary);
                color: white;
                padding: 12px 18px;
                border-radius: 50px;
                font-size: 14px;
                box-shadow: 0 4px 10px rgba(0,0,0,0.2);
                z-index: 9999;
                cursor: pointer;
                width: auto;
                display: none; /* shown only on mobile */
            }
            
            /* Filter panel (hidden by default) */
            .filter-panel {
                position: fixed;
                bottom: -100%;
                left: 0;
                width: 100%;
                height: 50%;
                background: #fff;
                box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
                transition: bottom .35s ease;
                z-index: 9998;
                overflow-y: auto;
                padding: 20px;
            }
            
            /* Active state: slide up */
            .filter-panel.active {
                bottom: 0;
            }
            
            /* Mobile only */
            @media (max-width: 768px) {
                .filter-toggle-btn {
                    display: block;
                }
                
                .tabby.uwu-sticky { 
                    display: none !important;  /* hide desktop filter panel */
                }
            }
            
            /* ===== Projects Masonry Grid ===== */
            .projects-content .row {
                margin-left: -15px;
                margin-right: -15px;
            }
            
            .projects-content .row .col-lg-4 {
                padding-left: 15px;
                padding-right: 15px;
                margin-bottom: 30px;
            }
            
            .projects-item {
                border: 1px solid #d1d1d1;
                border-radius: 20px;
                overflow: hidden;
                transition: all .3s ease-in-out;
                background: #fff;
            }
            
            .projects-item:hover {
                box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
            }
            
            .projects-item .thumb img {
                width: 100%;
                display: block;
            }
            
            .projects-item .down-content {
                padding: 20px;
            }
            
            .projects-item .down-content h4 {
                font-size: 18px;
                font-weight: 600;
                color: var(--primary-color);
                margin-bottom: 10px;
            }
            
            .projects-item .down-content p {
                color: var(--secondary-color);
                font-size: 14px;
                line-height: 21px;
            }