/* Обозреватель цветов: /colors/ и /colors/{коллекция}/ — screen-colors.php */

.vk-colors{padding:40px var(--pad) 72px; background:var(--canvas)}

.vk-colors__head{max-width:820px; margin:0 0 32px}
.vk-colors__h1{font:500 clamp(32px,5vw,52px)/1.06 var(--ff-serif); color:var(--graphite); margin:6px 0 8px}
.vk-colors__sub{font:400 15px/1.5 var(--ff-sans); color:var(--ink-65); margin:0 0 20px}
.vk-colors__back{margin:14px 0 0; font:500 13px var(--ff-golos)}
.vk-colors__back a{color:var(--terracotta-ink); text-decoration:none}
.vk-colors__back a:hover{text-decoration:underline}

.vk-colors__search{display:flex; gap:8px; max-width:560px}
.vk-colors__input{flex:1; min-width:0; padding:12px 14px; border:1px solid var(--line-2);
  border-radius:10px; background:var(--surface); color:var(--graphite);
  font:400 15px var(--ff-sans)}
.vk-colors__input:focus{outline:none; border-color:var(--terracotta); box-shadow:0 0 0 3px var(--terracotta-tint)}

/* Сетка цветов */
.vk-colors__grid{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:14px}
.vk-colors__swatch{display:block; text-decoration:none; color:inherit}
.vk-colors__chip{display:block; aspect-ratio:1/1; border-radius:10px;
  border:1px solid var(--line-14); box-shadow:var(--sh-card); transition:transform .12s}
.vk-colors__swatch:hover .vk-colors__chip{transform:translateY(-2px)}
.vk-colors__code{display:block; margin-top:7px; font:500 12px var(--ff-mono);
  color:var(--graphite); letter-spacing:.02em}
.vk-colors__name{display:block; font:400 12px/1.3 var(--ff-sans); color:var(--ink-6);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.vk-colors__empty{font:400 15px var(--ff-sans); color:var(--ink-65); margin:24px 0}

.vk-colors__pager{display:flex; align-items:center; gap:14px; margin:28px 0 0}
.vk-colors__pageno{font:500 12px var(--ff-mono); color:var(--ink-55)}

/* Коллекции (веера) */
.vk-colors__colls{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px}
.vk-colors__coll a{display:block; text-decoration:none; color:inherit; background:var(--surface);
  border:1px solid var(--line-12); border-radius:14px; padding:14px;
  box-shadow:var(--sh-card); transition:transform .12s, box-shadow .12s}
.vk-colors__coll a:hover{transform:translateY(-2px); box-shadow:var(--sh-obj)}
.vk-colors__prev{display:grid; grid-template-columns:repeat(8,1fr); gap:3px; margin-bottom:12px}
.vk-colors__prev span{display:block; aspect-ratio:1/1; border-radius:4px; border:1px solid var(--line-1)}
.vk-colors__colltitle{display:block; font:500 17px var(--ff-serif); color:var(--graphite)}
.vk-colors__collmeta{display:block; margin-top:3px; font:400 12px var(--ff-mono); color:var(--ink-55)}

/* Низ страницы — вход в конфигуратор */
.vk-colors__cta{margin:56px 0 0; padding:24px; border-radius:14px; background:var(--surface-2);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.vk-colors__cta p{margin:0; font:400 16px var(--ff-sans); color:var(--graphite)}

@media (max-width:640px){
  .vk-colors__grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px}
  .vk-colors__search{flex-direction:column}
  .vk-colors__cta{flex-direction:column; align-items:flex-start}
}

/* Коллекция под кодом — только в выдаче поиска: по «7040» приходят похожие
   коды из разных вееров, и без подписи выбор вслепую. */
.vk-colors__coll{
  display:block;font:500 10.5px var(--ff-mono);color:var(--ink-5);
  text-transform:uppercase;letter-spacing:.03em;margin-top:2px;
}