/* The endless feed. Tokens come from landing.css; the badge and skeleton from showcase.css. */
body.fd { background: #fbfcfd; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.fd-top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 16px;
  background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid var(--line);
}
.fd-logo { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 18px; }
.fd-logo img { width: 28px; height: 28px; border-radius: 8px; }
.fd-btn, .fd-saved {
  min-height: 44px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink);
  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transition: border-color .2s, transform .15s;
}
.fd-btn { padding: 0 16px; color: var(--blue); }
.fd-saved { position: relative; width: 44px; display: grid; place-items: center; padding: 0; }
.fd-saved svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.fd-saved i { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: var(--blue); color: #fff; font: 700 11px/18px inherit; font-style: normal; text-align: center; }
.fd-btn:hover, .fd-saved:hover { border-color: var(--blue); }
.fd-btn:active, .fd-saved:active { transform: scale(.96); }

.fd-main { max-width: 1320px; margin: 0 auto; padding: 0 16px; }
.fd-moods { position: sticky; top: 64px; z-index: 15; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 8px; padding: 12px 16px; background: linear-gradient(#fbfcfd 78%, rgba(251,252,253,0)); }
.fd-moods::-webkit-scrollbar { display: none; }
.fd-moods button { flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.fd-moods button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.fd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fd-sep { grid-column: 1 / -1; padding: 20px 2px 2px; }
.fd-sep h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: -.03em; }
.fd-sep p { margin: 4px 0 0; color: #5b636b; font-size: 15px; }
.fd-empty { grid-column: 1 / -1; padding: 56px 16px; text-align: center; color: #5b636b; font-size: 16px; }

.fd-card { position: relative; min-width: 0; animation: show-in .35s both; }
.fd-try { all: unset; box-sizing: border-box; position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 20px; background: #eef3f6; cursor: pointer; box-shadow: 0 8px 22px rgba(10,60,110,.09); }
.fd-try img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.fd-try:focus-visible, .fd-love:focus-visible, .fd-name:focus-visible, .fd-sides button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.fd-love { all: unset; box-sizing: border-box; position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.fd-love svg { width: 34px; height: 34px; padding: 8px; box-sizing: border-box; border-radius: 50%; background: rgba(255,255,255,.82); fill: none; stroke: var(--ink); stroke-width: 2; transition: transform .15s, fill .15s, stroke .15s; }
.fd-love[aria-pressed="true"] svg { fill: #ff3b6b; stroke: #ff3b6b; transform: scale(1.1); }
.fd-name { display: block; margin-top: 8px; padding: 0 4px; color: var(--ink); text-decoration: none; }
.fd-name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.fd-name small { display: block; color: #5b636b; font-size: 13px; }
@media (hover: hover) {
  .fd-try:hover img { transform: scale(1.04); }
  .fd-try:hover .show-badge { background: var(--blue); color: #fff; }
}

/* "Что вам ближе?": sits among the cards as one more thing to tap. */
.fd-fork, .fd-style { display: flex; flex-direction: column; min-width: 0; aspect-ratio: 3 / 4; padding: 12px; box-sizing: border-box; border-radius: 20px; background: var(--ink); color: #fff; }
.fd-fork > p { margin: 4px 8px 12px; font-weight: 800; font-size: 17px; }
.fd-sides { flex: 1; min-height: 0; display: grid; grid-template-rows: 1fr 1fr; gap: 8px; }
.fd-sides button { all: unset; box-sizing: border-box; position: relative; overflow: hidden; border-radius: 14px; cursor: pointer; min-height: 0; }
.fd-sides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .35s; }
.fd-sides span { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 12px 12px; font-weight: 800; font-size: 15px; background: linear-gradient(transparent, rgba(0,0,0,.72)); }
.fd-sides button:hover img { transform: scale(1.05); }

.fd-style { justify-content: center; gap: 8px; padding: 24px; background: linear-gradient(160deg, #1e9cf0, #0f5fa8); }
.fd-style p { margin: 0; font-size: 15px; opacity: .9; }
.fd-style p:first-child { font-weight: 700; font-size: 13px; opacity: .8; }
.fd-style h3 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; font-weight: 800; }
.fd-style button { align-self: flex-start; margin-top: 12px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: #fff; color: #0f5fa8; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }

.fd-bar { position: fixed; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.fd-bar button { pointer-events: auto; width: min(460px, 100%); min-height: 56px; padding: 0 24px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #3fb0f5, var(--blue)); color: #fff; font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; box-shadow: 0 14px 32px rgba(30,156,240,.4); }

@media (max-width: 1000px) { .fd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .fd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .fd-btn { padding: 0 12px; font-size: 13px; }
  .fd-try, .fd-fork, .fd-style { border-radius: 16px; }
  .fd-style { padding: 16px; }
  .fd-fork > p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .fd-card { animation: none; }
  .fd-try img, .fd-sides img { transition: none; }
}