/* ===========================
   FILTER SECTION
=========================== */

.filter-section {
  background: var(--bg-card);
  padding:    30px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.filter-container {
  display:         flex;
  gap:             16px;
  align-items:     center;
  flex-wrap:       wrap;
}

.filter-container input,
.filter-container select {
  flex:          1;
  min-width:     200px;
  padding:       12px 16px;
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  background:    var(--bg);
  color:         var(--text);
  font-size:     14px;
  transition:    border-color 0.25s, box-shadow 0.25s;
}

.filter-container input:focus,
.filter-container select:focus {
  border-color: var(--primary);
  box-shadow:   0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ===========================
   PRODUCTS SECTION
=========================== */

.products {
  background: var(--bg);
  padding:    60px 0;
}

/* ===========================
   PAGINATION
=========================== */

.pagination {
  display:         flex;
  justify-content: center;
  gap:             10px;
  flex-wrap:       wrap;
  padding:         40px 0 60px;
}

.pagination .btn {
  min-width:  48px;
  padding:    10px 18px;
  background: var(--bg-card);
  color:      var(--text);
  border:     1px solid var(--border);
  box-shadow: none;
}

.pagination .btn:hover,
.pagination .btn.active-page {
  background: var(--primary);
  color:      #fff;
  border-color: var(--primary);
}

/* ===========================
   RESPONSIVE — 992px
=========================== */

@media (max-width: 992px) {

  .filter-container {
    flex-direction: column;
  }

  .filter-container input,
  .filter-container select {
    width:     100%;
    min-width: auto;
  }

}

/* ===========================
   RESPONSIVE — 768px
=========================== */

@media (max-width: 768px) {

  .products { padding: 40px 0; }

}

/* ===========================
   RESPONSIVE — 480px
=========================== */

@media (max-width: 480px) {

  .filter-section { padding: 20px 0; }

}