:root {
  --ch-bg: #2F1E3D;         /* Midnight Plum */
  --ch-surface: #111115;
  --ch-text: #F9F5EF;       /* Bone White */
  --ch-accent: #EBC97F;     /* Candle Gold */
  --ch-blue: #8AB8C4;       /* Moonstone Blue */
  --ch-border: rgba(235, 201, 127, .25);
}

/* Wrap */
.ch-stones-wrap { color: var(--ch-text); }

.ch-stones-wrap .ch-stones-search {
  margin: 0 0 16px 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.ch-stones-wrap input[type="search"] {
  flex: 1 1 220px;
  background: #1a1522;
  color: var(--ch-text);
  border: 1px solid var(--ch-border);
  padding: 10px 12px;
  border-radius: 8px;
}

.ch-stones-wrap button {
  background: var(--ch-accent);
  color: #2b1b12;
  border: 0;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
}

.ch-stones-wrap select[multiple] {
  min-width: 180px;
  min-height: 36px;
}

.ch-stones-wrap .ch-clear {
  display: inline-block;
  padding: 8px 10px;
  border: 1px solid var(--ch-border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ch-text);
}

/* Grid: authoritative rules, no auto-fill */
body .ch-grid,
body .ch-stones-wrap .ch-grid {
  display: grid !important;
  gap: 16px;
  grid-template-columns: 1fr !important; /* phones */
}

/* Tablet: 2 columns */
@media (min-width: 640px) {
  body .ch-grid,
  body .ch-stones-wrap .ch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Desktop: 4 columns */
@media (min-width: 1024px) {
  body .ch-grid,
  body .ch-stones-wrap .ch-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Cards */
.ch-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #120d19;
  border: 1px solid var(--ch-border);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
}

.ch-thumb {
  background: #20172b;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
}

.ch-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ch-thumb__ph { color: #9b8aa8; font-size: 14px; }

.ch-body { padding: 12px; }

.ch-title {
  margin: 0;
  font-size: 18px;
  color: var(--ch-text);
  text-align: center;
}

/* Pagination */
.ch-pagination ul {
  list-style: none;
  display: flex;
  gap: 8px;
  padding: 16px 0;
  margin: 0;
  flex-wrap: wrap;
}

.ch-pagination a,
.ch-pagination span {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--ch-border);
  border-radius: 8px;
  color: var(--ch-text);
}

.ch-pagination .current {
  background: var(--ch-blue);
  color: #0b1b22;
  border-color: transparent;
}