/* product-grid.css */
.products-grid { display: grid; gap: var(--sp-4); }
.products-grid-2 { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2,1fr); }
.products-grid-3 { display: grid; gap: var(--sp-4); grid-template-columns: repeat(3,1fr); }
.products-grid-4 { display: grid; gap: var(--sp-4); grid-template-columns: repeat(4,1fr); }
.products-grid-5 { display: grid; gap: var(--sp-4); grid-template-columns: repeat(5,1fr); }

@media (max-width: 1200px) { .products-grid-5 { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 1000px) { .products-grid-4,.products-grid-5 { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 768px)  { .products-grid-3,.products-grid-4,.products-grid-5 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 420px)  { .products-grid-2,.products-grid-3,.products-grid-4,.products-grid-5 { grid-template-columns: 1fr; } }

/* Flash sale header */
.flash-sale-header {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--sp-3) var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  color: white;
}
.flash-sale-title { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; }
.flash-icon { font-size: 20px; }
.flash-sale-wrap { border: 2px solid var(--primary-20); border-top: none; border-radius: 0 0 var(--r-lg) var(--r-lg); padding: var(--sp-5); }

/* Category strip */
.cat-strip { padding: var(--sp-4) 0; background: white; border-bottom: var(--border); }
.cat-strip-scroll { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.cat-strip-scroll::-webkit-scrollbar { display: none; }
.cat-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 6px var(--sp-4);
  border-radius: var(--r-full);
  background: var(--gray-50);
  border: var(--border);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gray-700);
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--ease);
  flex-shrink: 0;
}
.cat-pill:hover, .cat-pill.active { background: var(--primary-bg); border-color: var(--primary-20); color: var(--primary); }
.cat-pill-icon { font-size: 16px; }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--sp-1); margin-top: var(--sp-10); flex-wrap: wrap; }
.page-btn {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  border: var(--border);
  background: white;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-700);
  transition: all var(--ease);
  display: flex; align-items: center; justify-content: center;
}
.page-btn:hover:not(:disabled):not(.dots) { background: var(--primary-bg); border-color: var(--primary-20); color: var(--primary); }
.page-btn.active { background: var(--primary); border-color: var(--primary); color: white; }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }
.page-btn.dots { border: none; background: none; cursor: default; }

/* ── Ürün Grid Mobil Düzeltmeleri ───────────────────────────── */
@media (max-width: 768px) {
  .products-grid { gap: 10px; }

  /* Flash sale header mobilde */
  .flash-sale-header { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .flash-sale-title  { font-size: var(--text-base); }
  .flash-sale-header > div:last-child {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .products-grid { gap: 8px; }
  .flash-sale-wrap { padding: var(--sp-3); }
  .flash-sale-header > div:last-child {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
  }
  .flash-sale-header > div:last-child .btn {
    width: 100%;
    justify-content: center;
  }
}