/*
 * PirouVR design system, layer 1 (7 Oct 2026) - loaded after style4.css by every header.
 * Mock-up: https://claude.ai/artifact/J3NypXYJdfLv4UUYE3Hoxa ("Dark, quiet, content first").
 * Near-black grounds; gold = data (scores, ranks); blue = the one action. Bricolage Grotesque for display, Figtree for
 * text (both self-hosted). One scene card everywhere: rounded picture, lifts on hover, studio as text (no logo bubble).
 * New file name per change (pv-7.css...): CloudFront ignores ?v= on /assets.
 * pv-2 (7 Oct): one page grid - every page starts at the same left edge (32px desktop, 16px phone, content capped
 * at 1600px) and one page-title size (48px desktop, 30px phone; profile heroes 64/36).
 * pv-3 (7 Oct): the header search is one rounded pill; listing headers (Trending, New...) on the page grid on phones.
 * pv-4 (7 Oct): listing headers fill the row (they were centred and narrower on phones).
 * pv-5 (7 Oct): one breadcrumb style and position on every page; text links white + underlined (gold is data only).
 * pv-6 (8 Oct): the header search no longer clips its own suggestions dropdown (overflow:hidden came with the pill).
 */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 800;font-stretch:75% 100%;font-display:swap;src:url('/assets/fonts/bricolage-latin-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/figtree-latin-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --pv-ground:#111419;--pv-surface:#181c23;--pv-raised:#232832;--pv-line:#2a2f39;
  --pv-text:#f2f2f5;--pv-muted:#a3a3ad;--pv-gold:#f6cf6b;--pv-action:#2b6cff;--pv-action-hover:#1f5be6;
  --pv-display:'Bricolage Grotesque','Figtree',system-ui,sans-serif;--pv-body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font:var(--pv-body)
}

/* ground and text */
html,body,#pageContainer,#landingContainer,#mainSectionContainer,#mainContentContainer{background-color:var(--pv-ground)!important}
body{font-family:var(--pv-body)!important;color:var(--pv-text);-webkit-font-smoothing:antialiased}
body input,body button,body select,body textarea{font-family:inherit}
h1,h2,.sectionHeaderRow h2,.lpHead h1{font-family:var(--pv-display)!important;letter-spacing:-.025em}
h1{font-weight:800!important}
h2{font-weight:700!important}

/* header bar */
#mastHeadContainer{background-color:rgba(17,20,25,.94)!important;-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--pv-line)}
#topNavContainer,#mastHeadContainer .navigation,#mastHeadContainer nav{background:transparent!important}
#mastHeadContainer .wordmark{font-family:var(--pv-display)!important;font-weight:800;letter-spacing:-.04em}
#mastHeadContainer .searchBarContainer{background:var(--pv-raised)!important;border:1px solid transparent!important;border-radius:999px!important}
#mastHeadContainer .searchBarContainer:focus-within{border-color:#3a3a46!important}
#mastHeadContainer .searchBarContainer .searchBar{background:transparent!important;border:0!important;color:var(--pv-text)!important;padding:0 8px 0 18px!important;font-size:15px!important;font-weight:400!important;outline:none}
#mastHeadContainer .searchBarContainer .searchBar::placeholder{color:#8f8f99}
#mastHeadContainer .searchBarContainer .searchButton{background:transparent!important;border:0!important;color:#c4c4cc}

/* the scene card (VideoGridItem), everywhere */
.videoGridItem .thumbnail{position:relative;border-radius:12px!important;overflow:hidden;background:#1b1f27;transition:transform .18s ease,box-shadow .18s ease}
.videoGridItem .thumbnail img{border-radius:0!important;display:block}
.videoGridItem:hover .thumbnail,.thumbnailWrapper:hover .thumbnail{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.55),0 0 0 2px rgba(255,255,255,.14)}
.videoGridItem .duration{background:rgba(0,0,0,.72)!important;border-radius:6px!important;font-weight:700!important;font-size:12px!important;padding:3px 7px!important}
.videoGridItem .cardQ{background:rgba(0,0,0,.72)!important;color:#fff!important;border-radius:6px!important;font-weight:800!important;letter-spacing:.04em;font-size:11px!important}
.videoGridItem h3.title,.videoGrid h3.title{font-family:var(--pv-body)!important;font-weight:600!important;font-size:15px!important;line-height:1.3!important;color:var(--pv-text)!important;letter-spacing:0}
.videoGridItem .studioTileLogo,.videoGrid .studioTileLogo{display:none!important}
.videoGridItem .tileViewCount,.videoGrid .tileViewCount{display:none!important}
.videoGridItem .studioNameLink,.videoGrid .studioNameLink{color:var(--pv-muted)!important;font-size:13px!important;font-weight:500!important}
.videoGridItem .tileAge,.videoGrid .tileAge{color:#7c7c86!important;font-size:12px!important}
.videoGridItem .studioMetaRow,.videoGrid .studioMetaRow{min-height:0!important;margin-top:2px!important}

/* the one action: blue; secondary: quiet */
.heroPrimary,.pvr-btn-primary,.mobileBottomNav .mbn-ctaLabel{background:var(--pv-action)!important;border-color:var(--pv-action)!important;color:#fff!important}
.heroPrimary:hover,.pvr-btn-primary:hover{background:var(--pv-action-hover)!important}

/* pills / tabs / chips used across pages */
.lpTabs a,.lpBrowse a{background:var(--pv-raised)!important}
.lpTabs a.on{background:var(--pv-text)!important;color:var(--pv-ground)!important}

/* breadcrumbs: quiet */
.breadcrumbs,.breadcrumbs a{color:#8f8f99!important}

/* phones: tighter grids are handled per page; nothing here changes layout */
@media (prefers-reduced-motion:reduce){.videoGridItem .thumbnail{transition:none}.videoGridItem:hover .thumbnail{transform:none}}

/* one page grid: the same gutter on every page; page wrappers no longer add their own centring or padding */
:root{--pv-gutter:32px}
@media (max-width:1024px){:root{--pv-gutter:24px}}
@media (max-width:760px){:root{--pv-gutter:16px}}
#mainSectionContainer{padding-left:0!important;padding-right:0!important}
#mainContentContainer{padding-left:max(var(--pv-gutter),calc((100% - 1600px) / 2))!important;padding-right:max(var(--pv-gutter),calc((100% - 1600px) / 2))!important}
#mainContentContainer .bs,#mainContentContainer .stPage,#mainContentContainer .ch,#mainContentContainer .cfWrap,
#mainContentContainer .hbPage,#mainContentContainer .rankingsPage,#mainContentContainer .categoryContainer>.breadcrumbs{max-width:none!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
/* the rankings game and long intros keep a readable width, at the same left edge */
#mainContentContainer .rankVote{max-width:1040px}
#mainContentContainer .rankingsIntro p{max-width:820px}
/* the how-to guides are reading pages: keep the comfortable text width, start at the same edge */
#mainContentContainer .vr-headset{margin-left:0!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}

/* one page-title size (scene titles keep theirs until the scene page rebuild) */
#mainContentContainer h1:not(.spHead h1):not(.pornstarName):not(.pvSh h1){font-size:48px!important;line-height:1.05!important}
#mainContentContainer h1.pornstarName,#mainContentContainer .pvSh h1{font-size:64px!important;line-height:1!important}
@media (max-width:760px){
  #mainContentContainer h1:not(.spHead h1):not(.pornstarName):not(.pvSh h1){font-size:30px!important;line-height:1.1!important}
  #mainContentContainer h1.pornstarName,#mainContentContainer .pvSh h1{font-size:36px!important}
}
#mainContentContainer .largeVideoGridContainer>.videoGridHeader{padding-left:0!important;padding-right:0!important;width:100%;align-self:stretch;box-sizing:border-box}

/* breadcrumbs: the same font, size, colour and spacing on every page (several pages and style4.css set their own) */
#mainContentContainer .breadcrumbs{display:block!important;width:100%;margin:16px 0 14px!important;padding:0!important;font-family:var(--pv-body)!important;font-size:13px!important;font-weight:400!important;line-height:1.4!important;color:#8f8f99!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0}
#mainContentContainer .breadcrumbs a{display:inline!important;padding:0!important;font-size:inherit!important;line-height:inherit!important;color:#a3a3ad!important;text-decoration:none!important}
#mainContentContainer .breadcrumbs a:hover{color:#fff!important;text-decoration:underline!important}
#mainContentContainer .breadcrumbs a::after{content:none!important}
/* page wrappers start right under the header, so the breadcrumb sits at the same height everywhere */
#mainContentContainer .bs,#mainContentContainer .stPage,#mainContentContainer .ch,#mainContentContainer .cfWrap,#mainContentContainer .hbPage,
#mainContentContainer .rankingsPage,#mainContentContainer .vr-headset,#mainContentContainer .trPage{padding-top:0!important;margin-top:0!important}

/* text links inside copy: white and underlined (Spotify); gold stays for scores and ranks, blue for the one action */
#mainContentContainer p a:not([class]),#mainContentContainer li a:not([class]):not(.pvFoot a),#mainContentContainer details a:not([class]){color:#fff;text-decoration:underline;text-underline-offset:2px}
#mainContentContainer p a:not([class]):hover,#mainContentContainer li a:not([class]):not(.pvFoot a):hover,#mainContentContainer details a:not([class]):hover{color:#fff;text-decoration-thickness:2px}

/* pv-11/12 (8 Nov 2026, the owner: "these buttons should all be styled the same and in line with our colour scheme"): ONE
   button for every "see more" on the site - the performer page's Premium button: a blue pill, white bold text, darker blue
   on hover. Big (44px) under a grid ("Show 12 more", then "View all N ›"); small (34px) beside a section heading ("View all").
   The old names (showMoreScenes, upMore, moreShow, stMore, chMore, performerShowAll, sectionHeaderLink, spMore) all get it,
   so every page matches; new markup uses .pvPill / .pvPill--sm. button.* beats style4.css's old "button:hover{width:100%}". */
.pvPillRow{display:flex;justify-content:center;margin:24px 0 8px}
.pvPill,button.pvPill,button.pvPill:hover,
.showMoreScenes,button.showMoreScenes,.upMore,button.upMore,.moreShow,button.moreShow,.stMore,button.stMore,
.chMore,button.chMore,a.spMore,.hbVote,a.hbVote{all:unset;box-sizing:border-box;display:inline-flex!important;align-items:center;justify-content:center;gap:6px;
  height:44px!important;min-height:0!important;width:auto!important;max-width:100%;margin:0;padding:0 24px!important;border:0!important;border-radius:999px!important;
  background:#2b6cff!important;color:#fff!important;font-family:var(--pv-body,system-ui)!important;font-size:15px!important;font-weight:800!important;line-height:1!important;
  text-decoration:none!important;white-space:nowrap;cursor:pointer;transform:none!important;box-shadow:none!important}
.pvPill:hover,button.pvPill:hover,.showMoreScenes:hover,.upMore:hover,.moreShow:hover,.stMore:hover,.chMore:hover,a.spMore:hover,a.hbVote:hover{background:#1f5be6!important;color:#fff!important}
.pvPill:focus-visible,.showMoreScenes:focus-visible,.upMore:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pvPill[hidden],.showMoreScenes[hidden],.upMore[hidden]{display:none!important}
.pvPill::after,.showMoreScenes::after,a.spMore::after,a.hbVote::after{content:none!important}
/* the small one, beside a section heading (pv-12, 8 Nov 2026, the owner: "just text, it's too much as a button"): plain text,
   grey, small capitals - white and underlined on hover. Headings that are links (.pvSecLink) keep the heading look. */
.pvPill--sm,.sectionHeaderRow a.sectionHeaderLink,button.performerShowAll,.performerShowAll,.chRowHead a:not(.pvSecLink),.hbHead a:not(.pvSecLink),.stSec h2 a:not(.pvSecLink),.moreHead a:not(.pvSecLink),span.pvDbAll{all:unset;box-sizing:border-box;
  display:inline-flex!important;align-items:center;flex:none;height:auto!important;padding:0!important;border:0!important;border-radius:0!important;
  background:none!important;color:#a0a0aa!important;font-family:var(--pv-body,system-ui)!important;font-size:13px!important;font-weight:800!important;letter-spacing:.04em!important;
  text-transform:uppercase!important;text-decoration:none!important;white-space:nowrap;cursor:pointer;width:auto!important}
.pvPill--sm:hover,.sectionHeaderRow a.sectionHeaderLink:hover,button.performerShowAll:hover,.chRowHead a:not(.pvSecLink):hover,.hbHead a:not(.pvSecLink):hover,.stSec h2 a:not(.pvSecLink):hover,.moreHead a:not(.pvSecLink):hover,span.pvDbAll:hover{background:none!important;color:#fff!important;text-decoration:underline!important;text-underline-offset:3px}
.sectionHeaderRow a.sectionHeaderLink::after,.hbHead a:not(.pvSecLink)::after,.pvPill--sm::after{content:none!important}
/* section headings that are links: white, with a chevron, underlined on hover */
.pvSecLink,.sectionHeaderRow h2 a,h2 a.pvSecLink{color:inherit!important;text-decoration:none!important}
.pvSecLink::after,h2 a.pvSecLink::after{content:' \203A';color:#a3a3ad}
.pvSecLink:hover,.sectionHeaderRow h2 a:hover{text-decoration:underline!important;text-underline-offset:4px}
.pvSecHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}.pvSecHead h2{margin:0!important}
/* Interactive scene badge on video tiles (24 Oct 2026): scenes with a funscript sync to Lovense / Handy / Honey Play Box */
.videoGridItem .thumbnail .cardTx{position:absolute;z-index:3;top:6px;right:6px;padding:2px 7px;border-radius:6px;background:rgba(0,0,0,.72);color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em;line-height:1.5}
/* pv-13 (8 Nov 2026): the phone search bar (user: "a little shitty") - the magnifier stayed beside the close X (style4.css
   hid .fa-search; the icon is .fa-magnifying-glass), the text was tiny (under 16px iPhones zoom the page on focus) and the
   field had no shape. Now: a rounded field, 16px text, one close X. */
@media (max-width:768px){
  #mastHeadContainer .searchBarContainer.active{height:64px!important;padding:0 12px!important;background:var(--pv-ground,#15151a)!important;border-bottom:1px solid rgba(255,255,255,.08)}
  #mastHeadContainer .searchBarContainer.active form{gap:8px!important}
  #mastHeadContainer .searchBarContainer.active .searchBar{height:44px!important;font-size:16px!important;padding:0 18px!important;border-radius:999px!important;background:#24242c!important;border:1px solid #3a3a45!important;color:#fff!important;outline:none!important}
  #mastHeadContainer .searchBarContainer.active .searchBar:focus{border-color:#2b6cff!important}
  #mastHeadContainer .searchBarContainer.active .searchBar::placeholder{color:#a0a0aa;font-size:16px}
  #mastHeadContainer .searchBarContainer.active .searchButton i,#mastHeadContainer .searchBarContainer.active .searchButton svg{display:none!important}
  #mastHeadContainer .searchBarContainer.active .searchButton{width:44px!important;flex:0 0 44px!important;height:44px!important;border-radius:50%!important}
  #mastHeadContainer .searchBarContainer.active .searchButton::before{font-size:20px!important;color:#fff}
  #mastHeadContainer .searchBarContainer.active #suggestions-container{top:64px!important}
}
/* the open search field: a magnifier inside it - phones only */
@media (max-width:768px){
  #mastHeadContainer .searchBarContainer.active{box-shadow:0 6px 20px rgba(0,0,0,.4)}
  #mastHeadContainer .searchBarContainer.active .searchBar{padding-left:44px!important;background:#24242c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23a0a0aa' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") no-repeat 16px 50%/16px 16px!important}
}