/* Shared UI chips / tiles — use across catalog, showroom, admin pickers. */

.selectable-tile {
  align-items: stretch;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.5rem;
  text-align: start;
  text-decoration: none;
}

.selectable-tile:hover,
.selectable-tile:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
}

.selectable-tile:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.selectable-tile.is-selected,
.selectable-tile[aria-pressed="true"],
.selectable-tile[aria-current="true"] {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.selectable-tile__media {
  aspect-ratio: 4 / 3;
  background: color-mix(in srgb, var(--color-surface-solid) 82%, var(--color-text));
  border-radius: calc(var(--radius) - 0.05rem);
  display: block;
  object-fit: cover;
  width: 100%;
}

.media-thumb {
  display: block;
  max-width: 10rem;
  height: auto;
  object-fit: cover;
}

.selectable-tile__label {
  display: -webkit-box;
  font-size: 0.85rem;
  font-weight: 500;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.35;
  overflow: hidden;
}