.claudeLanding{

	/* -- Body -- */
	.catalog-body {
		display: flex;
        gap: 28px;
        align-items: flex-start;

        /* -- Filters -- */
        .catalog-filters{
        	width: 260px;
            flex-shrink: 0;
            background: var(--cs-surface);
            border: 1px solid var(--cs-border);
            padding: 20px;
            position: sticky;
            top: 24px;
            box-shadow: var(--cs-shadow);
            max-height: 800px;
			overflow-y: auto;
			overflow-x: hidden;
			scroll-behavior: smooth;

			&::-webkit-scrollbar {
			    width: 5px;
			}
			&::-webkit-scrollbar-track {
			    background: transparent;
			    margin: 8px 0;
			}
			&::-webkit-scrollbar-thumb {
			    background: var(--cs-border);
			    border-radius: 10px;
			    transition: background var(--cs-transition);
			}
			&:hover::-webkit-scrollbar-thumb {
			    background: var(--cs-accent);
			}
			scrollbar-width: thin;

			.button{
				margin-bottom: 0;
			}

            .filters-title{
            	font-size: 18px;
                margin-bottom: 20px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .filter-group{
            	border-top: 1px solid var(--cs-border);
                padding: 16px 0;

                .filter-group__head{
                	display: flex;
                    align-items: center;
                    justify-content: space-between;
                    cursor: pointer;
                    user-select: none;
                    margin-bottom: 12px;

                    h3{
                    	font-size: 13px;
                        font-weight: 600;
                        text-transform: uppercase;
                        letter-spacing: 1.2px;
                        margin-top: 10px;
                    }

                    .toggle-icon{
                    	font-size: 25px;
                        transition: transform var(--cs-transition);
                        line-height: 1;
                        color: var(--cs-text-muted);
                        transform: rotate(90deg);

                        &.open {
                        	transform: rotate(272deg);
                        }
                    }
                }

                &:not(:has(.toggle-icon.open)){
                	.filter-group__body{
                		display: none;
                	}
                }

                .filter-group__body{

                	/** -- Filter Price -- **/
                	.price-range {
					    .price-slider-wrap {
					        position: relative;
					        height: 4px;
					        background: var(--cs-border);
					        border-radius: 2px;
					        margin: 18px 0 10px;

					        .price-track {
					            position: absolute;
					            height: 100%;
					            background: var(--cs-accent);
					            border-radius: 2px;
					        }

					        input[type="range"] {
					            position: absolute;
					            width: 100%;
					            height: 4px;
					            -webkit-appearance: none;
					            appearance: none;
					            background: transparent;
					            pointer-events: none;
					            top: 0;

					            &::-webkit-slider-thumb {
					                -webkit-appearance: none;
					                appearance: none;
					                width: 18px;
					                height: 18px;
					                border-radius: 50%;
					                background: var(--cs-surface);
					                border: 2px solid var(--cs-accent);
					                cursor: pointer;
					                pointer-events: all;
					                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
					                transition: box-shadow var(--cs-transition);

					                &:hover {
					                    box-shadow: 0 2px 12px rgba(200, 169, 110, 0.4);
					                }
					            }
					        }
					    }

					    .price-inputs {
					        display: flex;
					        gap: 8px;
					        margin-top: 12px;

					        .price-field {
					            flex: 1;

					            label {
					                font-size: 13px;
					                text-transform: uppercase;
					                letter-spacing: 1px;
					                display: block;
					                margin-bottom: 4px;
					            }

					            input {
					                width: 100%;
					                padding: 8px 10px;
					                border: 1px solid var(--cs-border);
					                font-size: 13px;
					                transition: border-color var(--cs-transition);

					                &:focus {
					                    outline: none;
					                    border-color: var(--cs-accent);
					                }
					            }
					        }

					        .sep {
					            align-self: flex-end;
					            padding-bottom: 8px;
					            color: var(--cs-text-muted);
					            font-size: 12px;
					        }
					    }

					    .price-apply{
					    	text-align: right;
						    margin-top: 10px;
						    margin-bottom: 0;
					    }
					}

					/* Checkbox list */
					.checkbox-list {
					    list-style: none;
					    display: flex;
					    flex-direction: column;
					    gap: 6px;
					    margin-left: 0;
					    margin-bottom: 6px;

					    li {
					        label {
					            display: flex;
					            align-items: center;
					            gap: 10px;
					            cursor: pointer;
					            font-size: 13px;
					            color: var(--cs-text-secondary);
					            padding: 4px 0;
					            transition: color var(--cs-transition);

					            &:hover {
					                color: var(--cs-text-primary);
					            }

					            input[type="checkbox"] {
					            	background: #ffffff;
					                -webkit-appearance: none;
					                appearance: none;
					                width: 18px;
					                height: 18px;
					                border: 1.5px solid var(--cs-border);
					                border-radius: 4px;
					                flex-shrink: 0;
					                cursor: pointer;
					                transition: background var(--cs-transition),
					                    border-color var(--cs-transition);
					                position: relative;

					                &:checked {
					                    background: var(--cs-accent);
					                    border-color: var(--cs-accent);

					                    &::after {
					                        content: "";
					                        position: absolute;
					                        left: 4px;
					                        top: 4px;
					                        width: 8px;
					                        height: 5px;
					                        border-left: 2px solid #fff;
					                        border-bottom: 2px solid #fff;
					                        transform: rotate(-45deg);
					                    }
					                }
					            }

					            .attr-name {
					                flex: 1;
					            }
					            .attr-count {
					                color: var(--cs-text-muted);
					                font-size: 11px;
					            }
					        }

					        &.hidden {
					            display: none;
					        }
					    }
					}

					/* Expandable more */
					.expandable-area {
					    max-height: 0;
					    overflow: hidden;

					    &.open {
					    	max-height: max-content;
    						overflow-y: auto;
					    }
					}

					.option-list{
						transition: max-height 0.35s cubic-bezier(.4,0,.2,1);
						margin-bottom: 12px;

						&:has(.expandable-area.open){
							max-height: 300px; 
							overflow-y: auto;

							&::-webkit-scrollbar { width: 4px; }
			                &::-webkit-scrollbar-track { background: transparent; }
			                &::-webkit-scrollbar-thumb { background: var(--cs-border); border-radius: 2px; }
						}
					}
                }
            }
        }

        /* -- Products -- */
        .catalog-products {
          	flex: 1;
          	min-width: 0;

          	.products-toolbar {
	            display: flex;
	            align-items: center;
	            justify-content: space-between;
	            margin-bottom: 20px;
	            flex-wrap: wrap;
	            gap: 12px;

	            .toolbar-left {
				    display: flex;
				    align-items: center;
				    gap: 12px;

				    .results-count {
				        font-size: 13px;
				        color: var(--text-secondary);

				        strong {
				            color: var(--text-primary);
				            font-weight: 600;
				        }
				    }
				}

	            .toolbar-right {
				    display: flex;
				    align-items: center;
				    gap: 16px;

				    .sort-wrap,
				    .per-page-wrap {
				        display: flex;
				        align-items: center;
				        gap: 7px;

				        label {
				            font-size: 12px;
				            color: var(--cs-text-muted);
				            text-transform: uppercase;
				            letter-spacing: 0.8px;
				            white-space: nowrap;
				        }

				        select {
				            padding: 7px 28px 7px 12px;
				            border: 1px solid var(--cs-border);
				            font-size: 13px;
				            color: var(--cs-text-primary);
				            background: var(--cs-surface);
				            cursor: pointer;
				            -webkit-appearance: none;
				            appearance: none;
				            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b6560'/%3E%3C/svg%3E");
				            background-repeat: no-repeat;
				            background-position: right 10px center;
				            transition: border-color var(--cs-transition);

				            &:focus {
				                outline: none;
				                border-color: var(--cs-accent);
				            }
				        }
				    }
				}
	        }

	        .productGrid{
	        	.price-from{
    				font-weight: 500;
    				font-size: 0.85em;
	        	}
	        }
        }
	}

	.mobile-filter-toggle {
        display: none;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: var(--cs-surface);
        border: 1px solid var(--cs-border);
        font-size: 13px;
        font-weight: 600;
        color: var(--cs-text-primary);
        cursor: pointer;
        margin-bottom: 16px;
        box-shadow: var(--cs-shadow);
        width: fit-content;
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
    	&:has(.catalog-filters.open) {
      		.mobile-filter-toggle {
        		background: var(--btn-primary-background);
    			color: var(--btn-primary-color);
      		}
    	}

    	.mobile-filter-toggle {
		    display: flex;
		}

		.catalog-body {
		    flex-direction: column;

		    .catalog-filters {
		        width: 100%;
		        position: static;
		        display: none;

		        &.open {
		            display: block;
		        }
		    }
		}
    }

    @media (max-width: 540px) {
        .products-toolbar {
          	flex-direction: column;
          	align-items: flex-start;

          	.toolbar-right { 
          		flex-wrap: wrap; 
          	}
        }
    }
}

:root{
	--cs-surface: #f6f6f6;
	--cs-border: #eee;
	--cs-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
	--cs-transition: 0.22s cubic-bezier(.4, 0, .2, 1);
	--cs-accent: var(--btn-primary-background);
	--cs-text-muted: #a09a93;
	--cs-text-secondary: #6b6560;
	--cs-text-primary: #1a1714;
}