/* eroflick — страницы шортса, момента, списка моментов, вебкамов. Токены и общие элементы — site.css (обе темы). */
.lab { margin: 22px 0 10px; }
.lab.acc { color: var(--acc-ink); margin-top: 0; }

/* ===== Шортс (макеты DClip / MClip) ===== */
.clip { display: grid; gap: 24px; }
.player { position: relative; width: 100%; max-width: 400px; margin: 0 auto; }
.player video, .player .frame { display: block; width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: 18px; background: #120c1f center/cover no-repeat;
                                box-shadow: var(--shadow), 0 0 0 1px var(--line3); overflow: hidden; }
.player .frame { position: relative; }
.player .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.info h1 { font-size: clamp(24px, 4vw, 34px); line-height: 1.15; font-weight: 800; letter-spacing: -.3px; }
.meta { margin-top: 10px; color: var(--tx3); font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.actions .chip { height: 40px; border: 1px solid var(--line2); background: transparent; color: var(--tx); font-weight: 700; }
.actions .chip:hover { background: var(--chip); }
.actions .chip svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.actions .chip.like[aria-pressed="true"] svg { fill: var(--acc); stroke: var(--acc); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 17px; background: var(--chip); border: 1px solid transparent; color: var(--tx2); font-size: 14px; }
.tag.hot { background: var(--acc-bg); border-color: var(--acc-line); color: var(--acc-soft); font-weight: 500; }
.tag:hover { border-color: var(--acc); color: var(--tx); }
.tag small { margin-left: 6px; color: var(--mute); font-size: 12px; }
.studio { margin-top: 22px; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; background: var(--card2); border-color: var(--line2); }
.studio .thumb { width: 96px; height: 54px; border-radius: 9px; background: radial-gradient(120% 90% at 30% 20%, #6E2BFF 0%, transparent 60%), linear-gradient(160deg, #2C1A45, #100A1C); }
.studio b { display: block; font-size: 15px; } .studio small { color: var(--tx4); font-size: 13px; }
.studio .cta { grid-column: 1 / -1; }
.prose { margin-top: 22px; color: var(--tx2); font-size: 15px; max-width: 62ch; }
.prose p + p { margin-top: 10px; }
.prose a { color: var(--acc-ink); }
.specs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.specs span { height: 28px; padding: 0 11px; display: inline-flex; align-items: center; border-radius: 8px; border: 1px solid var(--line2); color: var(--tx3); font-size: 12px; font-weight: 700; }
.specs .report { height: 28px; padding: 0 6px; display: inline-flex; align-items: center; gap: 5px; color: var(--tx3); font-size: 12px; font-weight: 700; }
.specs .report:hover { color: var(--tx); }
.specs .report svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Сетка плиток ===== */
.more { margin-top: 40px; }
.more-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.more-head h2 { font-size: 22px; font-weight: 800; }
.more-head a { color: var(--acc-ink); font-weight: 700; font-size: 14px; white-space: nowrap; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tile { position: relative; aspect-ratio: 9/16; border-radius: 13px; overflow: hidden; background: #1a1230 center/cover no-repeat; color: #F4EFFA; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,5,13,.9) 10%, transparent 55%); }
.tile .dur { position: absolute; top: 8px; right: 8px; z-index: 1; padding: 2px 7px; border-radius: 6px; background: rgba(10,7,16,.7); font-size: 11px; font-weight: 700; }
.tile .cap { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; }
.tile b { display: block; font-size: 13px; line-height: 1.3; } .tile small { color: rgba(244,239,250,.7); font-size: 12px; }
.tile:hover { box-shadow: 0 0 0 2px var(--acc); }
.tile.cat b { font-size: 16px; }

/* ===== Шортсы по тегу (бывш. «момент», макет DMoment) ===== */
.hero { display: grid; gap: 24px; align-items: end; }
.hero h1 { font-size: clamp(36px, 7vw, 60px); line-height: .98; font-weight: 800; letter-spacing: -1.2px; }
/* Телефон: одно длинное слово («Masturbation», «Selbstgedrehte», «Amatoriale») не влезало в 36 px — заголовок срезался, страница ехала вбок.
   Мельче на узких экранах, а что всё равно не влезло — переносится по слогам (язык страницы в <html lang>) или по букве */
@media (max-width: 600px) { .hero h1 { font-size: clamp(26px, 8.4vw, 36px); hyphens: auto; overflow-wrap: anywhere; } }
.lead { margin-top: 12px; max-width: 64ch; color: var(--tx2); font-size: 16px; }
.lead b { color: var(--tx); }
.hero-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.stats div { padding: 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column-reverse; gap: 2px; }
.stats dd { font: 800 24px/1.1 var(--dsp); } .stats dt { color: var(--tx4); font-size: 12px; }
.pairs .lab { margin-top: 26px; }
.sort { margin: 26px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sort .chip { background: transparent; color: var(--tx3); }
.sort .chip[aria-current] { background: var(--tx); color: var(--bg); }
.sort .pg { margin-left: auto; color: var(--tx4); font-size: 13px; }
.pager { margin: 26px 0; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.pager a, .pager span { min-width: 38px; height: 38px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--chip); border: 1px solid var(--line3); color: var(--tx2); }
.pager a[aria-current] { background: var(--acc); border-color: var(--acc); color: #fff; font-weight: 700; }
.pager span { background: none; border: 0; }
.about { margin-top: 34px; padding: 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); max-width: 820px; }
.about h2 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.about p { color: var(--tx2); }

/* ===== Списки разделов (категории шортсов, вебкамы): заголовок, поиск, A–Z ===== */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.find { height: 42px; width: min(320px, 100%); padding: 0 14px; display: flex; align-items: center; gap: 9px; border-radius: 21px; background: var(--surface2); border: 1px solid var(--line2); color: var(--tx4); }
.find .i { width: 16px; height: 16px; }
.find input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--tx); font: 14px var(--body); }
.find:focus-within { border-color: var(--acc); }
.letters { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.letters a { min-width: 30px; height: 28px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 13px; font-weight: 700; color: var(--tx3); }
.letters a:hover { background: var(--chip); color: var(--acc-ink); }
.letters a[aria-current] { background: var(--acc); color: #fff; }   /* страница буквы: какая открыта */
.az-group { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.az-group > b { font-size: 20px; color: var(--acc-ink); line-height: 34px; }

@media (min-width: 900px) {
  .clip { grid-template-columns: 400px 1fr; gap: 40px; align-items: start; }
  .player { margin: 0; position: sticky; top: 88px; }
  .grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .grid-6 { grid-template-columns: repeat(6, 1fr); }
  .hero { grid-template-columns: 1fr 520px; gap: 40px; }
  .stats { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 600px) and (max-width: 899px) { .grid, .grid-6 { grid-template-columns: repeat(3, 1fr); } }

/* Юридические страницы и 404 */
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.legal .prose { max-width: 76ch; }
.legal .prose h2 { margin: 22px 0 6px; font: 800 18px/1.3 var(--dsp); color: var(--tx); }
.legal .prose code { padding: 1px 5px; border-radius: 5px; background: var(--chip); }
.notfound { padding-top: 60px; padding-bottom: 80px; }

/* Вступление и FAQ на страницах списков (SEO-тексты, видимые) */
.intro { max-width: 76ch; margin: -4px 0 22px; color: var(--tx2); font-size: 15px; line-height: 1.55; }
.intro p + p { margin-top: 10px; }
.intro b { color: var(--tx); }
.about p + p { margin-top: 10px; }
.about a:not(.tag) { color: var(--acc-ink); }   /* ссылки в тексте; плашки-теги в блоке — как везде */
.faq { margin-top: 34px; max-width: 820px; }
.faq h2 { font-size: 20px; font-weight: 800; margin-bottom: 10px; }
.faq details { padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.faq details + details { margin-top: 8px; }
.faq summary { cursor: pointer; font-weight: 700; color: var(--tx); }
.faq details p { margin-top: 8px; color: var(--tx2); }
.faq details b { color: var(--tx); }

/* Модели и студии: шапка с картинкой (макет DModel/DStudio), полоски аватарок (модели студии, похожие) */
.hero.person { grid-template-columns: auto 1fr; align-items: center; }
.hero.person .stats { grid-column: 1 / -1; }
.person .avatar { width: 120px; aspect-ratio: 260/340; height: auto; border-radius: 16px; object-fit: cover; background: var(--surface); }
.person .monogram { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 22px; background: linear-gradient(135deg, var(--acc), #6d3df5); color: #fff; font-size: 44px; font-weight: 800; }
.person h1 { font-size: clamp(30px, 5vw, 52px); overflow-wrap: anywhere; }
.people-strip { margin-top: 30px; }
.people { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.people a { flex: 0 0 auto; width: 84px; text-align: center; color: var(--tx2); font-size: 12px; line-height: 1.3; }
.people img { display: block; width: 72px; height: 72px; margin: 0 auto 6px; border-radius: 50%; object-fit: cover; background: var(--surface); }
.people a:hover img { box-shadow: 0 0 0 2px var(--acc); }
.people span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) {
  .hero.person { grid-template-columns: auto 1fr; gap: 28px; }   /* цифры — строкой под шапкой: длинному имени нужна ширина */
  .person .avatar { width: 168px; }
}

/* Переключатель разделов (Straight / Gay / Trans) на странице категорий */
.orient-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 18px; }

/* А–Я: в букве — самые популярные, остальное за кнопкой «Show all» (длинные буквы растягивали страницу на экраны) */
.az-group:not(.open) .tag.x { display: none; }
.tag.az-more { cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: var(--acc); border: 0; }   /* в строку с тегами, красной кнопкой (Сергей) */
.tag.az-more:hover { filter: brightness(1.1); }
.tag.az-more[aria-busy] { opacity: .6; cursor: progress; }

/* ===== Визуальная проверка 2026-10-06 ===== */
.actions .chip.save[aria-pressed="true"] svg { fill: var(--acc); stroke: var(--acc); }
.nowrap { white-space: nowrap; }
.tile .cap b { overflow-wrap: anywhere; }
.people img { background: var(--chip); border: 1px solid var(--line2); }
/* А–Я: буквы — кнопками и липкой строкой (после прыжка к букве не листать тысячи тегов назад) */
.letters { position: sticky; top: var(--head-h); z-index: 5; background: var(--bg); }
.letters a { min-width: 36px; height: 34px; background: var(--chip); }
/* Телефон: над сеткой меньше «шапки» — цифры одной строкой, связанные теги одной прокручиваемой строкой; буква А–Я над тегами */
@media (max-width: 599px) {
  .stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
  .stats div { padding: 9px 8px; }
  .stats dd { font-size: 17px; } .stats dt { font-size: 11px; }
  .pairs .tags { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .pairs .tags::-webkit-scrollbar { display: none; }
  .pairs .tag { flex: 0 0 auto; }
  .az-group { grid-template-columns: 1fr; gap: 6px; }
  .az-group > b { line-height: 1.2; }
  .more-head { flex-wrap: wrap; }
  .more-head h2 { font-size: clamp(17px, 5.2vw, 22px); text-wrap: balance; }
  .person h1 { font-size: clamp(22px, 7vw, 34px); }
  .letters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .letters::-webkit-scrollbar { display: none; }
  .letters a { flex: 0 0 auto; }
}

/* Страница модели/студии на десктопе: цифры — на всю ширину строки (у студий их 3, оставалось пусто справа) */
@media (min-width: 900px) { .hero.person .stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }

/* ===== QA 2026-10-06 ===== */
/* Телефон: четыре цифры в одну строку не влезали («45,877» — 98 px в колонке 67 px, на 320 px страница шире экрана) — по две в ряд,
   колонки не шире экрана (minmax(0, …)), длинная подпись (de «durchschnittliche Länge») переносится, а не вылезает */
@media (max-width: 599px) {
  .stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats div { min-width: 0; }
  .stats dd { font-size: clamp(15px, 4.6vw, 19px); white-space: nowrap; }
  .stats dt { overflow-wrap: anywhere; }
  /* Модель/студия: картинка и текст рядом — текстовой колонке можно сжиматься, кнопки переносятся (на 320 px «Watch as a feed» и
     «+ Follow» растягивали страницу до 325–338 px) */
  .hero > div { min-width: 0; }
  .hero.person { grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
  .hero-actions .btn { padding: 0 16px; }
  /* Пагинатор: 2 и 3 перед «…» (class far) — прочь, кнопки компактнее: одна строка и на 320 px */
  .pager { gap: 4px; }
  .pager a, .pager span { min-width: 32px; height: 36px; padding: 0 5px; }
  .pager span { min-width: 18px; padding: 0; }
  .pager .far { display: none; }
  /* «Find a category» — во всю ширину (была 320 px при 358 px контента; подсказки — по ширине поля) */
  .page-head > div { min-width: 0; }
  .find { width: 100%; }
  /* «· 3 nouvelles vidéos cette semaine» — одним куском, пока влезает в строку; длиннее строки — переносится (nowrap растягивал страницу) */
  .lead .nowrap { display: inline-block; white-space: normal; }
}
@media (max-width: 360px) { .person .avatar { width: 96px; } }   /* узкий телефон: тексту и кнопкам рядом с картинкой нужно ~176 px */
/* Подпись плитки: длинный ник не рвём посреди слова («problematicberrie/s») — обрезаем многоточием */
.tile .cap b { overflow-wrap: normal; overflow: hidden; text-overflow: ellipsis; }
/* Контраст мелкого текста (было 2.6–4.4:1 при норме 4.5): числа в чипах тегов, подписи цифр, «Page N of M», заголовки секций */
.tag small, .stats dt, .sort .pg, h2.lab { color: var(--tx3); }
/* «Find a category»: идёт фильтр — популярные, буквы и тексты прячем, в буквах — все совпавшие (без «Show all») */
main.filtering > section:not(.az), main.filtering > .intro, main.filtering .letters, main.filtering .az > h2, main.filtering .az-more { display: none; }
main.filtering .az-group .tag.x { display: inline-flex; }
.az [hidden] { display: none !important; }