/*catalog_style.css */


/*Головний контент, який росте */
main.catalog {
 flex: 1;
}

/* Footer завжди внизу */
#footer {
 text-align: center;
}

.catalog {
display: flex;
gap: 25px;
padding: 25px;
}

/* LEFT */
.catalog-left {
 flex:0 0 280px;
}

/* FILTER */
.filters {
 width:280px;
 background:#fff;
 border-radius:14px;
 padding:20px;
 box-shadow:0 5px 20px rgba(0,0,0,0.06);
}

.filters label { margin-top:10px; display:block; }
.filters input, .filters select {
 width:100%;
 padding:8px;
 border-radius:8px;
 border:1px solid #ddd;
}

/* SLIDER */
.custom-slider {
 position:relative;
 height:30px;
 margin-top:15px;
}

.slider-track {
 position:absolute;
 top:12px;
 width:100%;
 height:6px;
 background:#ddd;
}

.slider-fill {
 position:absolute;
 top:12px;
 height:6px;
 background:#1e88e5;
}

.slider-thumb {
 position:absolute;
 top:50%;
 transform:translate(-50%,-50%);
 width:18px;
 height:18px;
 background:#1e88e5;
 border-radius:50%;
 cursor:grab;
 border:none;
}

.price-inputs {
 display:flex;
 gap:10px;
 margin-top:10px;
}

.apply-btn {
 margin-top:15px;
 width:100%;
 padding:10px;
 background:#1e88e5;
 color:#fff;
 border:none;
 border-radius:10px;
}


/* RIGHT */
.catalog-right {
 flex: 1;
 min-width:0;
 display: flex;
 flex-direction: column;
}

/* PRODUCTS */
.catalog-products {
 flex: 1;
}

/* GRID */
.grid {
 flex:1;
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
 gap:20px;
}

.card {
 background:#fff;
 border-radius:14px;
 overflow:hidden;
 text-decoration:none;
 color:#000;
 box-shadow:0 3px 10px rgba(0,0,0,0.08);
}

.card:hover{
 transform:translateY(-4px);
 box-shadow:0 10px 24px rgba(2,6,23,0.1);
}

.card img {
 width:100%;
 height:300px;
 object-fit:cover;
}

.card-body { padding:12px; }

.price-main { font-weight:bold; }
.price-usd { color:#777; font-size:13px; }


/* PAGINATION */
.catalog-pagination {
 margin-top: 40px;
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 6px;
 flex-wrap: wrap;
}

/* кнопки */
.catalog-pagination a {
 min-width: 36px;
 height: 36px;
 display: flex;
 align-items: center;
 justify-content: center;
 
 background: #f1f3f5;
 color: #333;
 text-decoration: none;
 
 border-radius: 8px;
 font-size: 14px;
 transition: 0.2s;
}

/* hover */
.catalog-pagination a:hover {
 background: #1e88e5;
 color: #fff;
}

/* активна сторінка */
.catalog-pagination a.active {
 background: #1e88e5;
 color: #fff;
 font-weight: bold;
}

/* стрілки */
.catalog-pagination a.arrow {
 font-weight: bold;
}

@media (max-width: 980px){

 .catalog{
     flex-direction:column;
 }

 .catalog-left{
     width:100%;
     min-width:100%;
 }

 .filters{
     width:100%;
 }

 .grid{
     grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
 }
}