/* Workshop skins section of the Scrap shop: search, filters and paging for a long list. */
/* (v2: the info window of a skin set lists its skins with pictures and Workshop links) */
.store-skins { margin-top: 2rem; }
.store-skins[hidden] { display: none; }
.store-skins-head h3 { margin: 0 0 .25rem; font-size: 1.15rem; }
.store-skins-head p { margin: 0 0 .9rem; }
.store-skins-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.store-skins-toolbar input[type="search"],
.store-skins-toolbar select {
  background: var(--v1-surface, #141414);
  color: var(--v1-text, #e8e8e8);
  border: 1px solid var(--v1-border, #2f2f2f);
  border-radius: 8px;
  padding: .5rem .7rem;
  font: inherit;
  max-width: 100%;
}
.store-skins-toolbar input[type="search"] { flex: 1 1 220px; min-width: 0; }
.store-skins-toolbar input:focus-visible,
.store-skins-toolbar select:focus-visible { outline: 2px solid var(--v1-ui-accent, #a8b0bc); outline-offset: 1px; }
.store-skins-count { margin-left: auto; }
.store-skins-pager { display: flex; gap: .8rem; align-items: center; justify-content: center; margin-top: 1.2rem; }
.store-skins-grid[aria-busy="true"] { opacity: .55; transition: opacity .15s; }
/* info window of a skin set: a picture per skin with its name below (a link to the Steam Workshop) */
.store-wiki-tooltip.store-wiki-tooltip--skins { width: min(580px, calc(100vw - 1.5rem)); }
.store-wiki-skins {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
  gap: .7rem .6rem;
  max-height: min(48vh, 420px);
  overflow-y: auto;
  margin: 0 0 .7rem;
  padding: .15rem .35rem .15rem 0;
}
.store-wiki-skin { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.store-wiki-skin-pic {
  display: block;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: #0b0b0b;
  border: 1px solid rgba(255, 255, 255, .08);
}
.store-wiki-skin-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.store-wiki-skin-name {
  font-size: .76rem;
  line-height: 1.25;
  text-align: center;
  color: var(--v1-link, #c8d0da);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
a.store-wiki-skin-name:hover { color: var(--v1-link-hover, #fff); text-decoration: underline; }

@media (max-width: 560px) {
  .store-skins-toolbar select { flex: 1 1 45%; }
  .store-skins-count { margin-left: 0; flex-basis: 100%; }
}