/* C: featured description — hidden until the "i" toggle since 2026-07-13; [hidden] kept
   explicit so no later display rule can accidentally override the attribute */
.fap-v3 .fap-about-featured[hidden]{display:none!important}
.fap-v3 .fap-about-featured{margin-top:8px;font-size:13.5px;line-height:1.5;color:#40384a}
.fap-v3 .fap-about-featured .fap-about-more{color:var(--acc,#ef6f57);font-weight:700;text-decoration:none;white-space:nowrap;margin-left:2px}
.fap-v3 .fap-about-featured .fap-about-more:hover{text-decoration:underline}
/* the editorial-wrap + wide-view cards are DARK — the description must be WHITE there, not the
   dark-grey used on the light hero panel. (2026-07-08, owner: sponsored description should be white) */
.fap-t10-wrap .fap-about-featured,.fap-v3 #all-creators.fap-wide:not(.fap-wide-v2) .fap-about-featured{color:#fff!important;margin-top:12px}
.fap-t10-wrap .fap-about-featured{grid-column:2;grid-row:5;align-self:start}
.fap-t10-wrap .fap-about-featured .fap-about-more,.fap-v3 #all-creators.fap-wide:not(.fap-wide-v2) .fap-about-featured .fap-about-more{color:#ffd9c9!important}
@media(max-width:560px){.fap-t10-wrap .fap-about-featured{margin-left:16px;margin-right:16px}}
/* Stat tiles (photos/videos/streams/likes) on mobile: fill the row via align-self:stretch, but
   RESPECT the card's 16px side margins on BOTH sides. The previous width:100% forced the row to the
   full card width and, with the 16px left margin, pushed the last tile past the RIGHT edge (the
   "right margin not respected" bug the owner flagged). align-self:stretch + explicit L/R margins
   = full row, both margins honoured. No width:100%. (2026-07-08) */
@media(max-width:560px){
	.fap-t10-wrap .fap-wide-stats{display:flex!important;align-self:stretch!important;flex-wrap:nowrap!important;box-sizing:border-box!important;margin-left:16px!important;margin-right:16px!important}
	.fap-t10-wrap .fap-ws-tile{flex:1 1 0!important;min-width:0!important}
}

/* D: attention effect */
/* hero — persistent soft peach glow border so the featured slot stands out (no blur/animation = LCP-safe) */
.fap-v3 .feature-card.sponsored-hero,.fap-v3 .feature-card.featured-hero{box-shadow:0 0 0 2px rgba(239,111,87,.6),0 10px 30px rgba(239,111,87,.20)}
/* THE PAID #1 SPONSORED/FEATURED CARD MUST SIT RIGHT BELOW THE H1 (above the fold) on stacked
   layouts — not below the whole hero content block. The old `.hero .hero-main{order:-1}` shoved
   the entire hero-main (eyebrow+H1+intro+stats+popular-tags) above the card, burying the featured
   model on all screens <=1200px (most traffic = mobile). Fix: promote hero-main's children into
   the hero flex flow and order eyebrow -> H1 -> CARD -> rest. Scoped with :has(> .hero-main) so it
   only touches the shared 2-col v3 hero (location/gender/best/newest) and never the other heroes
   (home/couples/free/search have no hero-main). Desktop (>1200px, 2-col) untouched. (2026-07-08) */
/* 720 not 1200 (2026-08-27): 721-1200px is the two-column midsize hero; dissolving .hero-main there scattered its children across the 220px/1fr grid - full note in listing.blade.php */
@media (max-width:720px){
	.fap-v3 .hero:has(> .hero-main){display:flex;flex-direction:column;gap:14px}
	.fap-v3 .hero:has(> .hero-main) > .hero-main{display:contents}
	/* display:contents dissolves .hero-main's box — killing its overflow:hidden AND positioning
	   context. Its decorative ::after circle (theme.css: position:absolute;right:-35px;width:200px)
	   then re-anchors to the page and sticks 35px past the right edge = THE residual horizontal
	   scroll/pan on every screen <=1200px. Kill the flourish here; the panel it decorated no longer
	   exists in the stacked layout. (2026-07-08, found via load-time CDP trace: constant +35px
	   scrollWidth with NO element/margin box past the viewport = pseudo-element.) */
	.fap-v3 .hero:has(> .hero-main) > .hero-main::before,
	.fap-v3 .hero:has(> .hero-main) > .hero-main::after{display:none!important;content:none!important}
	.fap-v3 .hero:has(> .hero-main) > .hero-main > *{order:5}
	.fap-v3 .hero:has(> .hero-main) > .hero-main > .eyebrow{order:1;margin:0}
	.fap-v3 .hero:has(> .hero-main) > .hero-main > h1{order:2;margin:0}
	.fap-v3 .hero:has(> .hero-main) > .feature-card{order:3}
}
/* #3 (2026-07-08): bottom nav — (a) not too spaced on wide screens (the shipped rule's 60px gap
   was the culprit), (b) never overflow the viewport → no horizontal scroll. Default: items content-
   sized, centered, a modest 30px gap. Phones (<=768px): the 6 items flex to share the width and
   shrink (min-width:0 + ellipsis) so all 6 fit. !important beats the shipped v3-deferred rules.
   overflow-x:clip on the root kills residual horizontal scroll while keeping sticky/vertical. */
/* overflow-x:clip (not hidden) — the topbar is position:sticky and hidden would break it. clip is
   a safety net on modern browsers; the real fix is removing the overflow SOURCE (below). */
html,body{overflow-x:clip;max-width:100%}
/* nav spans the viewport via left/right:0 — NOT width:100vw (100vw includes the scrollbar width and
   itself causes horizontal scroll). box-sizing + overflow:hidden keep its content contained. */
.fap-v3-bottomnav{box-sizing:border-box!important;left:0!important;right:0!important;width:auto!important;max-width:100%!important;flex-wrap:nowrap!important;justify-content:center!important;column-gap:30px!important;gap:30px!important;padding:11px 10px!important;overflow:hidden!important}
.fap-v3-bottomnav .bn-item{flex:0 0 auto!important;min-width:0!important}
@media (max-width:768px){
	/* content-sized items evenly distributed (space-around) — fills the bar without stretching each
	   item into a wide, "too-spaced" cell; shrinks (min-width:0 + ellipsis) only if they'd overflow. */
	.fap-v3-bottomnav{justify-content:space-around!important;column-gap:0!important;gap:0!important;padding:9px 2px!important}
	.fap-v3-bottomnav .bn-item{flex:0 1 auto!important;min-width:0!important;max-width:none!important;padding:0 3px!important}
	.fap-v3-bottomnav .bn-item span{display:block!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:10px!important}
	.fap-v3-bottomnav .bn-item svg{width:21px!important;height:21px!important}
}
/* #1 (2026-07-08): the featured/sponsored HERO price now renders as a badge ON the image, above
   the wishlist heart (moved out of the name row into .card-icons). Style it there. */
.fap-v3 .feature-image{position:relative}
.fap-v3 .feature-image .card-icons{position:absolute;top:12px;right:12px;z-index:4;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.fap-v3 .feature-image .card-icons .card-price{display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;line-height:1;padding:6px 11px;border-radius:999px;background:#fff;color:#1a1620;box-shadow:0 2px 8px rgba(0,0,0,.28)}
.fap-v3 .feature-image .card-icons .card-price.free{background:#eafaef;color:#127a37}
/* price moved onto the image → hide the old copy in the name row */
.fap-v3 .feature-info .feature-price{display:none}
/* whole sponsored card clickable → its profile. The overlay sits below the real links/buttons
   (which are lifted to z-index:2) so heart/tags/View-profile still work; empty areas navigate. */
.fap-v3 article.sponsored{position:relative}
.fap-v3 article.sponsored .fap-sp-stretch{position:absolute;inset:0;z-index:1;display:block}
.fap-v3 article.sponsored a:not(.fap-sp-stretch),.fap-v3 article.sponsored button{position:relative;z-index:2}
/* The lift above re-introduces position:relative, which re-activates the base
   .btn-overlay offsets (left/right/bottom:14px) that .creator-body had zeroed by
   going static - pushing the sponsored View Profile button 14px right and 14px up
   versus organic cards. Keep the z-index lift, drop the offsets. */
.fap-v3 article.sponsored .creator-body .btn-overlay{left:auto;right:auto;top:auto;bottom:auto}
/* Same over-broad lift, second casualty: it also turned the photo link from
   position:absolute (base rule, inset:0) into position:relative, so that anchor no
   longer had a definite height. The <img> inside it is height:100%, which then
   resolved against an auto-height parent and fell back to the image's natural
   ratio - a 480x853 avatar rendered 933px tall inside a 525px box and overflowed.
   Square sources happened to look fine, which is why only some cards broke.
   Keep the z-index lift, restore the absolute fill. Scoped to .creator-photo so the
   t10 .creator-name a.creator-photo-link stretch overlay is untouched. */
.fap-v3 article.sponsored .creator-photo .creator-photo-link{position:absolute;inset:0;z-index:2}
/* Midsize desktop: the hero drops to one column at <=1200px and the theme also sets
   .feature-card{max-width:none}, so the featured card stretched the full container -
   1099px wide with a 417px-tall image at a 1150px viewport, versus 340px/205px at
   1400px. Full width is only right on phones, so cap it above the 720px mobile
   breakpoint. Scoped to .hero so other feature cards are untouched. */
@media (min-width:721px) and (max-width:1200px){
  /* Keep the two-column hero down to the mobile breakpoint: the theme collapses it
     to a single flex column at <=1200px, which pushed the intro/description BELOW
     the featured card and (with max-width:none) stretched that card full width.
     The :has(> .hero-main) variant must be overridden too - it is more specific
     than .fap-v3 .hero and is what actually applies on these pages. */
  .fap-v3 .hero,
  .fap-v3 .hero:has(> .hero-main){display:grid;grid-template-columns:220px 1fr;gap:18px;flex-direction:unset}
  .fap-v3 .hero .feature-card{max-width:220px}
}