/* Selected Pop Pink Swipe: compact chrome, portrait-first, deliberate playback. */
.bubble-browse-page { --coral:#ff347d; --ink:#111116; --surface:#f3f4f6; }

.bubble-pop-home { --coral:var(--hime-pink); --ink:var(--hime-ink); background:var(--hime-paper); color:var(--ink); }

.bubble-pop-home .home-area-filter select { border-color:var(--hime-line); color:var(--ink); }
.bubble-pop-home .home-area-filter button { border-color:var(--coral); }
.bubble-pop-home .home-area-filter a { color:var(--hime-berry); }
.pop-home { max-width:1360px; margin:auto; padding:0 36px 42px; }
.pop-sort { margin:18px auto 20px; }
.pop-sort a[aria-current] { background:var(--coral); color:white; }
/* Soft candy-like controls echo the tiara-bunny wordmark. */
.pop-sort a,.pop-categories .category-tabs a,.bubble-pop-home .home-area-filter button { transition:box-shadow .16s ease,translate .16s ease; }
.pop-sort a[aria-current],.pop-categories .category-tabs a[aria-current],.bubble-pop-home .home-area-filter button { background:var(--hime-selected); box-shadow:inset 0 1px 1px #ffffff66,0 3px 7px #ed438b26; }
.pop-sort a:active,.pop-categories .category-tabs a:active,.bubble-pop-home .home-area-filter button:active { translate:0 1px; box-shadow:inset 0 1px 3px #7e284024; }
.pop-categories { margin-bottom:24px; }
.pop-carousel { --portrait-height:clamp(440px,calc(100dvh - 370px),620px); --portrait-width:calc(var(--portrait-height)*.5625); position:relative; display:grid; grid-template-columns:minmax(0,1fr) calc(var(--portrait-width) + 72px) minmax(0,1fr); align-items:center; gap:24px; max-width:1120px; margin:auto; padding:20px 24px; border-radius:28px; background:linear-gradient(135deg,#fbe1ec,#fff0f5 48%,#f9deeb); }
/* Switching posters must not shift the surrounding page. */
.pop-carousel { overflow-anchor:none; touch-action:pan-y pinch-zoom; }
.pop-carousel :is(.pop-video-frame,.pop-preview) { user-select:none; -webkit-user-select:none; }
.pop-active.is-dragging { transform:translateX(var(--home-drag,0px)); animation:none; }
.pop-carousel:has(.is-dragging),.pop-carousel:has(.is-dragging) * { cursor:grabbing; }
.pop-active { min-width:0; grid-column:2; }
.pop-feature { position:relative; width:100%; padding-right:72px; }
.pop-video-frame { width:100%; height:var(--portrait-height); position:relative; border-radius:18px; background:#fff; box-shadow:0 4px 10px #6f314a12,0 16px 28px -10px #652d4b38; }
.pop-video-frame::after { content:""; position:absolute; inset:0; z-index:8; border:1px solid #ffffff40; border-radius:inherit; pointer-events:none; }
.pop-poster-link { position:absolute; inset:0; display:block; border-radius:inherit; }
.pop-poster-link>img { display:block; width:100%; height:100%; border-radius:inherit; object-fit:cover; }
.pop-detail-link { position:absolute; top:12px; left:12px; z-index:7; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:10px 13px; border-radius:24px; background:#fffffff2; color:var(--hime-berry); font-size:12px; line-height:1.4; font-weight:700; box-shadow:0 2px 10px #00000014; }
.pop-detail-link .bubble-icon { width:15px; height:15px; color:var(--coral); }
.pop-poster-link:hover .pop-detail-link { background:white; color:#c41453; }
.pop-feature .pop-video-copy { position:absolute; left:0; right:0; bottom:0; padding:38px 17px 15px; color:white; pointer-events:none; border-radius:0 0 18px 18px; background:linear-gradient(180deg,#10101800,#10101818 40%,#10101866); text-shadow:0 1px 4px #0009; }
.pop-video-copy a { pointer-events:auto; }
.pop-video-copy h2 { margin:0 0 10px; padding-right:20px; font-size:16px; line-height:1.6; font-weight:700; }
.pop-person { display:flex; align-items:center; gap:9px; font-size:11px; width:fit-content; max-width:calc(100% - 45px); }
.pop-person img { width:30px; height:30px; border:2px solid #fff; outline:1px solid #f19cbe; border-radius:50%; object-fit:cover; flex-shrink:0; }
.pop-person span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pop-duration { position:absolute; bottom:17px; right:12px; padding:5px 7px; background:#12121966; border-radius:7px; font-size:12px; }
/* Keep the actions together near the lower edge, like the watch screen. */
.pop-actions { position:absolute; right:0; top:auto; bottom:16px; width:64px; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; }
.pop-actions [data-reactions] { display:contents; }
.pop-actions .engagement-button { --reaction-color:#675363; position:relative; color:var(--ink); min-height:66px; padding:4px 0; gap:4px; text-shadow:none; }
.pop-actions [data-reaction="like"] { --reaction-color:#d92e73; }
.pop-actions [data-reaction="type"] { --reaction-color:#9940c2; }
.pop-actions [data-reaction="sparkle"] { --reaction-color:#a36a00; }
.pop-actions .pop-save { --reaction-color:#b52b63; }
.pop-actions .engagement-button>.bubble-icon { box-sizing:content-box; width:24px; height:24px; padding:9px; border-radius:50%; background:#fff; color:var(--reaction-color); fill:none; stroke-width:1.9; box-shadow:0 2px 6px #9a526524; filter:none; }
.pop-actions .engagement-label { font-size:10px; font-weight:700; line-height:1.3; }
.pop-actions .engagement-count { position:absolute; top:0; right:2px; display:grid; place-items:center; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--reaction-color); color:#fff; font-size:10px; line-height:1; font-weight:700; text-shadow:none; box-shadow:0 0 0 1px #fff; }
.pop-actions .engagement-count[aria-label="0件"] { opacity:0; animation:none; }
.pop-actions .engagement-button[aria-pressed="true"]>.bubble-icon { fill:#fff; color:#fff; background:var(--reaction-color); }
.pop-actions .engagement-button:hover { background:transparent; }
.pop-actions .engagement-button:hover>.bubble-icon { box-shadow:0 2px 8px #9a526545; }
.pop-actions .engagement-button:focus-visible { outline-color:var(--coral); }
.pop-preview { display:block; position:relative; padding:0; border:0; color:white; text-align:left; height:calc(var(--portrait-height)*.86); width:100%; max-width:270px; justify-self:center; border-radius:16px; overflow:hidden; background:#f3f4f6; box-shadow:0 7px 16px -7px #652d4b28; }
.pop-preview>img { width:100%; height:100%; object-fit:cover; object-position:center; filter:brightness(.84) saturate(.88); }
.pop-preview-copy { position:absolute; bottom:0; left:0; right:0; padding:36px 14px 14px; background:linear-gradient(180deg,#10101800,#10101818 40%,#10101866); text-shadow:0 1px 4px #0009; }
.pop-preview-copy strong { display:block; font-size:14px; line-height:1.6; margin-bottom:8px; }
.pop-preview-copy>span { display:block; font-size:11px; padding-right:40px; }
.pop-preview-copy small { position:absolute; right:9px; bottom:10px; padding:4px 6px; background:#15151dd9; border-radius:5px; font-size:11px; }
.pop-step { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; display:grid; place-items:center; background:linear-gradient(180deg,#fff,#fff5fa); color:var(--ink); border:1px solid #f5e9ef; box-shadow:0 4px 12px #602a461f; border-radius:50%; z-index:7; }
.pop-step:active { translate:0 2px; box-shadow:inset 0 1px 3px #602a4620,0 1px 3px #602a461f; }
.pop-carousel:focus-visible,.pop-preview:focus-visible,.pop-step:focus-visible { outline:3px solid #c91e62; outline-offset:5px; }
.pop-step-prev { left:-12px; }.pop-step-next { right:-12px; }
.pop-step .bubble-icon { width:19px; height:19px; }
.pop-pages { display:flex; align-items:center; width:fit-content; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; margin:6px auto 4px; scrollbar-width:thin; }
.pop-pages button { flex:0 0 44px; width:44px; height:44px; padding:0; background:transparent; border:0; display:grid; place-items:center; border-radius:50%; }
.pop-pages button:focus-visible { outline-offset:-4px; }
.pop-pages button::after { content:""; width:7px; height:7px; background:#dce0e6; border-radius:50%; }
.pop-pages button[aria-current]::after { background:var(--coral); }
.pop-section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:18px 0 18px; }
.pop-section-heading h2 { font-size:21px; margin:0; padding-left:13px; border-left:5px solid var(--coral); line-height:1.1; }
.pop-section-heading>a { display:flex; align-items:center; gap:5px; padding:7px 11px; border:1px solid var(--hime-line); border-radius:20px; background:#fff; font-size:12px; color:var(--hime-berry); }
.pop-section-heading>a .bubble-icon { width:13px; height:13px; }
.pop-discover-description { margin:-4px 0 18px; color:var(--hime-muted); font-size:13px; line-height:1.7; }
.pop-performer-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.pop-performer-card { display:flex; align-items:center; gap:16px; min-width:0; padding:18px; border:1px solid var(--hime-line); border-radius:20px; background:#fff; box-shadow:var(--hime-soft-shadow); color:var(--hime-ink); }
.pop-performer-card>img { flex:none; width:80px; height:80px; object-fit:cover; object-position:center 25%; border-radius:50%; border:3px solid #fff; outline:1px solid #f19cbe; }
.pop-performer-copy { display:flex; flex-direction:column; gap:6px; min-width:0; line-height:1.5; overflow-wrap:anywhere; }
.pop-performer-copy strong { font-size:18px; }
.pop-performer-copy>span { font-size:13px; }
.pop-performer-copy small { color:var(--hime-muted); font-size:12px; }
.pop-performer-arrow { flex:none; display:grid; place-items:center; width:32px; height:32px; margin-left:auto; border-radius:50%; background:var(--hime-paper); color:var(--hime-berry); }
.pop-performer-arrow .bubble-icon { width:16px; height:16px; }
.pop-performer-card:hover { border-color:#e899b7; }
.pop-performer-card:focus-visible { outline:3px solid var(--hime-berry); outline-offset:3px; }
.pop-demo-note { font-size:11px; color:#777b84; margin:28px 0 12px; }
.pop-privacy { font-size:11px; color:#737782; line-height:1.8; }
.pop-privacy summary { cursor:pointer; width:fit-content; }
.pop-privacy p { margin:8px 0; }
.pop-active.is-sliding { animation:pop-slide-in .23s ease-out; }
@keyframes pop-slide-in { from {opacity:.6;transform:translateX(var(--slide-from,18px))} to {opacity:1;transform:translateX(0)} }
@media(min-width:701px) and (max-width:1020px) {

 .pop-home { padding-left:28px; padding-right:28px; }.pop-carousel { gap:16px; padding-left:16px; padding-right:16px; --portrait-height:clamp(440px,calc(100dvh - 370px),560px); }.pop-preview { height:calc(var(--portrait-height)*.85); }
 .pop-preview-copy strong { font-size:12px; }.pop-preview-copy>span { font-size:10px; }.pop-performer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {

 .pop-home { padding:0 0 32px; overflow:clip; }.pop-sort { margin:0 auto 13px; }
 .pop-categories { margin:0 10px 18px!important; }
 .pop-carousel { --portrait-height:min(max(410px,calc(100svh - 276px)),calc((100vw - 52px)*1.77778)); --portrait-width:calc(var(--portrait-height)*.5625); min-height:360px; display:block; margin:0; padding:10px 12px 14px; border-radius:20px; }
 .pop-active { width:var(--portrait-width); min-width:0; max-width:calc(100vw - 32px); }
 .pop-feature { padding:0; }.pop-video-frame { height:var(--portrait-height); min-height:360px; border-radius:16px; box-shadow:0 4px 10px #6f314a12,0 13px 23px -10px #652d4b38; }
 .pop-actions { right:3px; top:auto; bottom:128px; width:62px; z-index:5; gap:6px; background:none; }
 .pop-actions .engagement-button { min-height:54px; gap:3px; padding:0; text-shadow:none; }
 .pop-actions .engagement-button>.bubble-icon { width:24px; height:24px; padding:6px; }
 .pop-actions .engagement-label { padding:1px 4px; border-radius:6px; background:#fffffff2; color:#513746; font-size:9px; line-height:1.2; }.pop-actions .engagement-count { top:0; right:5px; font-size:10px; }
 .pop-feature .pop-video-copy { padding:34px 14px 14px; }.pop-video-copy h2 { font-size:15px; padding-right:38px; margin-bottom:10px; }.pop-person { font-size:11px; gap:8px; }.pop-person img { width:29px; height:29px; }
 .pop-duration { font-size:11px; }.pop-preview-prev { display:none; }.pop-preview-next { position:absolute; left:calc(var(--portrait-width) + 24px); top:calc(10px + var(--portrait-height)*.06); height:calc(var(--portrait-height)*.88); width:calc(var(--portrait-width)*.9); max-width:none; pointer-events:auto; }
 .pop-step { display:none; }
 .pop-discover { padding:0 14px; margin-top:20px; }.pop-section-heading { gap:8px; flex-wrap:wrap; }.pop-section-heading h2 { font-size:18px; }.pop-section-heading>a { font-size:11px; }
 .pop-performer-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
 .pop-performer-card { padding:14px; gap:14px; }.pop-performer-card>img { width:72px; height:72px; }
 .pop-demo-note,.pop-privacy { margin-left:16px; margin-right:16px; }

}
@media(max-width:700px) and (max-height:840px) {
 .pop-actions { top:auto; bottom:108px; gap:4px; }.pop-actions .engagement-button { min-height:46px; gap:1px; }.pop-actions .engagement-button>.bubble-icon { width:22px; height:22px; padding:5px; }.pop-actions .engagement-label { padding:0 4px; font-size:9px; line-height:1.2; }.pop-actions .engagement-count { font-size:9px; height:15px; min-width:15px; right:6px; }.pop-video-copy h2 { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { .pop-active.is-sliding { animation:none; } .pop-sort a,.pop-categories .category-tabs a,.bubble-pop-home .home-area-filter button { transition:none; } }