.catalog-section { padding: 32px 0 60px; }

/* Фильтры */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.filter-btn {
  padding: 7px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  font-family: 'Inter', sans-serif;
  position: relative;
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.filter-btn.active { border-color: var(--accent); color: #fff; background: var(--accent); }

/* Цветовые подсказки для типов камней */
.filter-btn[data-type="апатит"]:not(.active):hover        { background: #e0f0ff; border-color: #4fa3d4; color: #1a5c8a; }
.filter-btn[data-type="бирюза"]:not(.active):hover        { background: #e0f7f4; border-color: #00b4a0; color: #007a6d; }
.filter-btn[data-type="изумруд"]:not(.active):hover       { background: #e0f5e9; border-color: #2e9e5b; color: #1a6b3a; }
.filter-btn[data-type="масис берилл"]:not(.active):hover  { background: #e8f5e9; border-color: #66bb6a; color: #2e7d32; }
.filter-btn[data-type="опал"]:not(.active):hover          { background: #f3e5f5; border-color: #ab47bc; color: #7b1fa2; }
.filter-btn[data-type="рубелит"]:not(.active):hover       { background: #fce4ec; border-color: #e91e63; color: #ad1457; }
.filter-btn[data-type="рубин"]:not(.active):hover         { background: #ffebee; border-color: #e53935; color: #b71c1c; }
.filter-btn[data-type="сапфир"]:not(.active):hover        { background: #e3f2fd; border-color: #1976d2; color: #0d47a1; }
.filter-btn[data-type="спесартин"]:not(.active):hover     { background: #fff3e0; border-color: #fb8c00; color: #e65100; }
.filter-btn[data-type="танзанит"]:not(.active):hover      { background: #ede7f6; border-color: #7e57c2; color: #4527a0; }
.filter-btn[data-type="турмалин"]:not(.active):hover      { background: #e8f5e9; border-color: #43a047; color: #1b5e20; }
.filter-btn[data-type="турмалин индиголит"]:not(.active):hover { background: #e3f2fd; border-color: #1565c0; color: #0d47a1; }
.filter-btn[data-type="турмалин лагун"]:not(.active):hover     { background: #e0f7fa; border-color: #00838f; color: #006064; }
.filter-btn[data-type="цаворит"]:not(.active):hover       { background: #e8f5e9; border-color: #2e7d32; color: #1b5e20; }
.filter-btn[data-type="цафорит"]:not(.active):hover       { background: #e8eaf6; border-color: #3949ab; color: #1a237e; }
.filter-btn[data-type="циркон"]:not(.active):hover        { background: #f3e5f5; border-color: #8e24aa; color: #6a1b9a; }
.filter-btn[data-type="шпинель"]:not(.active):hover       { background: #fce4ec; border-color: #d81b60; color: #880e4f; }
.filter-btn[data-type="аметрин"]:not(.active):hover       { background: #f3e5f5; border-color: #9c27b0; color: #6a1b9a; }
.filter-btn[data-type="гранат"]:not(.active):hover        { background: #ffebee; border-color: #c62828; color: #b71c1c; }

/* Контролы (цена + сортировка) */
.catalog-controls {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.price-filter { flex: 1; min-width: 280px; }
.price-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.price-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.price-btn {
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  font-family: 'Inter', sans-serif;
}
.price-btn:hover { border-color: var(--accent); color: var(--accent); }
.price-btn.active { border-color: var(--accent); color: #fff; background: var(--accent); }

/* Сортировка */
.sort-wrap { min-width: 220px; }
.sort-select {
  width: 100%;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.sort-select:hover, .sort-select:focus { border-color: var(--accent); }

.filter-divider { height: 1px; background: var(--border); margin: 0 0 28px; }

/* Сетка */
.stones-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Карточка */
.stone-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
  will-change: transform;
  transition: transform var(--transition), box-shadow var(--transition);
}
.stone-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,.10);
}

/* Медиа */
.stone-card__img {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #eee;
}
.stone-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
  display: block;
}
.stone-card:hover .stone-card__img img { transform: scale(1.04); }
.stone-card__img video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.stone-card__img video.playing { opacity: 1; }
.stone-card__no-photo {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: var(--border);
}

/* Бейджи */
.stone-card__badge-video {
  position: absolute; top: 10px; right: 10px;
  background: rgba(26,58,107,.85); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 4px;
  pointer-events: none; z-index: 3;
}
.stone-card__badge-cert {
  position: absolute; top: 10px; left: 10px;
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 4px;
  pointer-events: none; z-index: 3;
}

/* Статус наличия */
.stone-card__badge-avail {
  position: absolute; bottom: 10px; left: 10px;
  font-size: 10px; font-weight: 600;
  padding: 3px 8px; border-radius: 4px;
  pointer-events: none; z-index: 3;
}
.avail-yes { background: rgba(46,125,50,.85); color: #fff; }
.avail-no  { background: rgba(183,28,28,.75); color: #fff; }

/* Тело карточки */
.stone-card__body { padding: 16px; }
.stone-card__name { font-size: 14px; font-weight: 600; line-height: 1.4; margin-bottom: 6px; color: var(--text); }
.stone-card__weight, .stone-card__origin { font-size: 12px; color: var(--text-muted); margin-bottom: 3px; }
.stone-card__footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
.stone-card__price { font-size: 15px; font-weight: 700; color: var(--accent); }
.stone-card__cta { font-size: 12px; color: var(--text-muted); transition: color var(--transition); }
.stone-card:hover .stone-card__cta { color: var(--accent); }

.empty-catalog {
  grid-column: 1/-1; text-align: center;
  color: var(--text-muted); padding: 60px 0; font-size: 15px;
}
.empty-catalog a { color: var(--accent); }

/* Пагинация */
#pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 6px; margin-top: 48px; flex-wrap: wrap;
}
.page-btn {
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: #fff; color: var(--text); font-size: 14px;
  font-family: 'Inter', sans-serif; cursor: pointer;
  transition: var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.page-btn:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); }
.page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.page-btn[disabled] { opacity: 0.35; cursor: default; }
.page-dots { color: var(--text-muted); font-size: 14px; padding: 0 4px; }

/* Адаптив */
@media (max-width: 1024px) { .stones-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) {
  .stones-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .catalog-controls { gap: 20px; }
}

/* Цена за карат */
.stone-card__pct {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
@media (max-width: 768px) { .stone-card__cta { display: none; } }