/* "Что наденете первым?": the shelf right under the hero. */
.show-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 20px; }
.show-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; min-width: 0; }
.show-tabs::-webkit-scrollbar { display: none; }
.show-tabs button, .show-lucky {
  flex: none; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,255,255,.75); color: var(--ink); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.show-tabs button:hover, .show-lucky:hover { border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); }
.show-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.show-lucky { color: var(--blue); }
.show-lucky:active, .show-tabs button:active { transform: scale(.97); }
.show-tabs button:focus-visible, .show-lucky:focus-visible, .show-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Women's or men's: the first thing in the row of moods. */
.gender { flex: none; display: inline-flex; gap: 2px; padding: 3px; margin-right: 4px; border-radius: 999px; background: #e9eff3; }
.show-tabs .gender button, .fd-moods .gender button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.show-tabs .gender button[aria-pressed="true"], .fd-moods .gender button[aria-pressed="true"] { background: #fff; box-shadow: 0 2px 8px rgba(10,60,110,.14); }

.show-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.show-skel, .show-shot { display: block; aspect-ratio: 3 / 4; border-radius: 22px; }
.show-skel { background: linear-gradient(100deg, #eef3f6 30%, #f8fbfc 50%, #eef3f6 70%); background-size: 220% 100%; animation: show-shine 1.3s linear infinite; }
@keyframes show-shine { to { background-position: -220% 0; } }

.show-card { all: unset; box-sizing: border-box; display: block; min-width: 0; cursor: pointer; border-radius: 22px; animation: show-in .4s both; }
@keyframes show-in { from { opacity: 0; transform: translateY(10px); } }
.show-shot { position: relative; overflow: hidden; background: #eef3f6; box-shadow: 0 10px 26px rgba(10,60,110,.1); transition: box-shadow .25s; }
.show-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.show-badge {
  position: absolute; left: 10px; bottom: 10px; padding: 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink);
  background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5);
  box-shadow: 0 6px 16px rgba(10,60,110,.16); transition: background .2s, color .2s;
}
.show-card b { display: block; margin: 12px 4px 0; font-size: 14px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.show-card small { display: block; margin: 2px 4px 0; font-size: 13px; color: #5b636b; }
@media (hover: hover) {
  .show-card:hover .show-shot { box-shadow: 0 18px 38px rgba(30,156,240,.24); }
  .show-card:hover img { transform: scale(1.04); }
  .show-card:hover .show-badge { background: var(--blue); color: #fff; }
}

.show-more { margin: 24px 0 0; text-align: center; }

@media (max-width: 900px) { .show-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Phones: one swipeable row with the next card peeking in. */
@media (max-width: 640px) {
  .show-bar { flex-direction: column; align-items: stretch; }
  .show-lucky { align-self: flex-start; }
  .show-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 8px; }
  .show-grid::-webkit-scrollbar { display: none; }
  .show-grid > * { flex: 0 0 62vw; max-width: 240px; scroll-snap-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .show-card, .show-skel { animation: none; }
  .show-shot img { transition: none; }
}