/* =============================================================
 * randyblue.gallery-cb.css
 * =============================================================
 * New stylesheet for the RandyBlue public/free trailer page
 * (gallery.tpl, type=vids). Layout/breakpoints below are taken
 * directly from CockyBoys' cockyboys.main.css rules for
 * #trailerJoin / .movie_wrapper / #signupframe / #cbMobileIframe /
 * .sceneList.alsolike, translated onto RB's new "rb-" prefixed
 * classes (RB's trailer player itself — #trailer_player_container
 * and children — is untouched and only sized to fill .rb-playerBox).
 *
 * Breakpoints match CB's own convention: max-width:767px (mobile),
 * 768–1023px (tablet), everything else = desktop.
 *
 * Loaded site-wide from common/head_styles.tpl at
 * /styles/randyblue.gallery-cb.css.
 * ============================================================= */

/* -------------------------------------------------------------
 * Page wrapper — intentionally NOT capped narrower than RB's own
 * .content-wrapper.container (which this sits inside). CB's own
 * #cbGalleryPage is a transparent, full-width wrapper; this does
 * the same rather than imposing an extra max-width.
 * ------------------------------------------------------------- */
#rbGalleryPage {
    display: block;
    width: 98%;
    max-width: 1560px;
	margin: 0 auto;
    padding: 20px 0 40px;
    box-sizing: border-box;
}

/* -------------------------------------------------------------
 * #rbTrailerJoin — desktop: flex row, player+text on the left
 * (.rb-movieWrapper, 60%), join iframe on the right (.rb-joinFrame,
 * 40%). Matches CB's #trailerJoin > .movie_wrapper + #signupframe.
 * ------------------------------------------------------------- */
#rbTrailerJoin {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    gap: 0;
    width: 100%;
}

#signup {
	font-family: "Poppins", "Arial Narrow", "Helvetica Neue", sans-serif;
    font-weight: 700 !important;
    font-size: 2.5em;
    color: #0F4C81;
    text-align: center;
    margin: 20px 0 30px;
}

@media (max-width: 767) {
	#signup {
		font-size: 1.7em;
	}
}

.rb-movieWrapper {
    width: 65%;
    box-sizing: border-box;
}

.rb-playerBox {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
}

/* The preserved trailer markup (trailerSceneTab.tpl) fills this box;
   its own inline <style> blocks (#pause-zone, #trailer_player_finished,
   etc.) are untouched and still apply as before. */
.rb-playerBox #trailer_player_container,
.rb-playerBox .video-js,
body.page-scene #trailer_player{
    width: 100% !important;
    height: 100% !important;
	min-height: auto !important;
}

#rbGalleryPage .free-pause {
	height: 100% !important;
	min-height: auto;
}

/* Desktop join iframe — flex sibling of .rb-movieWrapper */
.rb-joinFrame {
    width: 35%;
    max-width: 570px;
    aspect-ratio: 580 / 800;
    box-sizing: border-box;
}

.rb-joinFrame iframe {
    width: 100%;
    border: 0;
	aspect-ratio: 580 / 750;
}

/* Mobile/tablet iframe copy — hidden on desktop, shown ≤1023px
   in place of .rb-joinFrame (same pattern as CB's #cbMobileIframe). */
#rbMobileIframe {
    display: none;
}

/* -------------------------------------------------------------
 * Title / meta / description / tags (inside .rb-movieWrapper)
 * ------------------------------------------------------------- */
.rb-trailerTitle {
    font-family: "Poppins", "Arial Narrow", "Helvetica Neue", sans-serif;
    font-weight: 700;
    font-size: 2.5em;
    color: #0F4C81;
    margin: 20px 0 6px;
}

.darkmode .rb-trailerTitle {
    color: #fff;
}

.rb-trailerMeta {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    font-size: 0.95em;
    color: #0f4c81;
	font-size: 1.4em;
}

.darkmode .rb-trailerMeta {
    color: #ccc;
}

.rb-trailerModels {
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rb-trailerModels li {
    display: inline-block;
}

.rb-trailerModels a {
    color: #0F4C81;
    text-decoration: none;
}

.darkmode .rb-trailerModels a {
    color: #5aadd6;
}

.rb-trailerModels a:hover {
    text-decoration: underline;
}

.rb-trailerDesc {
    font-size: 1.2em;
    font-family: "Poppins", "Arial Narrow", "Helvetica Neue", sans-serif;
    color: #0f4c81;
    line-height: 1.6em;
	padding: 0 5px;
}

.darkmode .rb-trailerDesc {
    color: #ddd;
}

.rb-tags {
    margin-bottom: 10px;
}

@media (max-width: 767px) {
	.rb-tags {
		margin-bottom: 30px;
	}
}

.rb-tags ul.scene-tags {
    display: flex;
    flex-flow: row wrap;
    gap: 7px;
    list-style: none;
    margin: 30px 0 0 0;
    padding: 0;
}

.scene-tags li {
	padding: 0;
}

.rb-tags ul.scene-tags li a {
    display: inline-block;
    background: #eee;
    color: #ffaf00;
    padding: 4px 14px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 0.85em;
    white-space: nowrap;
    text-decoration: none;
}

.rb-tags ul.scene-tags li a:hover {
    background: #003761;
	color: #fff !important;
}

.darkmode .rb-tags ul.scene-tags li a {
    background: #5aadd6;
}

/* =============================================================
 * TABLET  768px – 1023px
 * Stack #trailerJoin vertically; swap join iframe for the mobile
 * copy; 2-column "You Might Also Like" grid. Matches CB's tablet
 * media query exactly.
 * ============================================================= */
@media (min-width: 768px) and (max-width: 1023px) {

    #rbTrailerJoin {
        flex-flow: column nowrap;
        gap: 0;
    }

    .rb-movieWrapper {
        width: 100%;
    }

    .rb-joinFrame {
        display: none;
    }

    #rbMobileIframe {
        display: block;
        width: 100%;
        margin: 16px 0;
    }

    #rbMobileIframe iframe {
        width: 100%;
        border: 0;
		aspect-ratio: 580/790;
    }
}

/* =============================================================
 * MOBILE  ≤767px
 * Same stacking as tablet, plus tighter type/spacing and a
 * single-column "You Might Also Like" grid. Matches CB's mobile
 * media query.
 * ============================================================= */
@media (max-width: 767px) {

    #rbGalleryPage {
        padding: 10px 10px 30px;
    }

    #rbTrailerJoin {
        flex-flow: column nowrap;
        gap: 0;
    }

    .rb-movieWrapper {
        width: 100%;
    }

    .rb-joinFrame {
        display: none;
    }

    #rbMobileIframe {
        display: block;
        width: 100%;
        margin: 10px 0;
    }

    #rbMobileIframe iframe {
        border: 0;
		aspect-ratio: 580 / 790;
		width: 110%;
		position: relative;
		left: -5%;
    }

    .rb-trailerTitle {
        margin: 16px 0 6px;
    }

    .rb-trailerDesc {
        font-size: 1em;
    }
}

/* -------------------------------------------------------------
 * You Might Also Like — #lastest-updates
 *
 * Intentionally NO CSS here. gallery/recommended.tpl now emits the
 * exact same markup/classes as latestupdates.tpl (section.clearfix
 * .container#lastest-updates > h2.section-title > ul.thumb-list.scenes,
 * with scene_list_item.tpl's own col-md-4/col-sm-6/col-xs-12 on each
 * <li>). That's what makes the homepage's "New Gay Porn Scenes" grid
 * responsive (3/2/1 per row), so this section inherits identical
 * behavior from the site's existing legacy CSS with no extra rules
 * needed. A previous revision added a custom .rb-relatedScenes CSS
 * Grid here, which overrode those Bootstrap column widths and broke
 * the mobile/tablet collapse — removed for that reason.
 * ------------------------------------------------------------- */

/* -------------------------------------------------------------
 * CTA banner — modeled on CB's .cta4
 * ------------------------------------------------------------- */

.cta4 {
    width: 100%;
    margin: 40px 0 0;
    text-align: center;
}

.cta4 .cta-desktop {
    display: block;
}

.cta4 .callBanner img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 6px;
}

.cta4__banner--mobile {
    display: none;
}

.cta4__banner--mobile img {
    width: 100%;
    height: auto;
    display: block;
}

.cta4 .cta-bottom-logo {
    display: block;
    max-width: 340px;
    height: auto;
    margin: 24px auto 16px;
}

.cta4 .watchButton.cta2.cta3 {
    display: inline-block;
    font-family: "Poppins", "Arial Narrow", "Helvetica Neue", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    background: rgb(254, 189, 60);
    background: linear-gradient(rgba(254, 189, 60, 1) 0%, rgba(255, 151, 0, 1) 100%);
    padding: 0.7em 2.4em;
    border-radius: 10px;
    text-decoration: none;
    font-size: 1.5em;
    transition: transform 0.2s ease-in-out;
	text-shadow: 1px 1px 7px rgba(0,0,0,0.4);
}

.cta4 .watchButton.cta2.cta3:hover {
    transform: scale(1.05);
    color: #fff !important;
    text-decoration: none;
}

@media (max-width: 767px) {
    .cta4 .cta-desktop {
        display: none;
    }

    .cta4__banner--mobile {
        display: block;
    }
}

body h2.section-title {
	color: #0F4C81;
	text-decoration: none;
}

.newButton {
	font-family: "Poppins", "Arial Narrow", "Helvetica Neue", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    -o-text-shadow: 1px 1px 7px rgba(0,0,0,0.4);
    -moz-text-shadow: 1px 1px 7px rgba(0,0,0,0.4);
    -webkit-text-shadow: 1px 1px 7px rgba(0,0,0,0.4);
    text-shadow: 1px 1px 7px rgba(0, 0, 0, 0.4);
    -o-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    background: transparent linear-gradient(180deg, #febd3c 0%, #ff9400 40%, #d47e00 100%) 0% 0% no-repeat padding-box;
    color: #fff;
    font-size: 1.4em;
    padding: 0.5em 2em;
    display: inline-block;
    text-align: center;
    -o-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* -------------------------------------------------------------
 * News ticker — modeled on CB's .newsTicker
 * ------------------------------------------------------------- */

.newsTicker.desktop {
    display: block;
    width: 100%;
    margin: 30px 0 0;
    text-align: center;
    padding: 14px 0;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
}

.darkmode .newsTicker.desktop {
    border-color: #333;
}

.newsTicker.desktop p {
    margin: 0;
    font-size: 1.2em;
    font-weight: 600;
    color: #0F4C81;
    letter-spacing: 0.02em;
}

.darkmode .newsTicker.desktop p {
    color: #ccc;
}

.newsTicker.desktop p span {
    color: #ff9f0e;
    margin: 0 10px;
}

.newsTicker.mobile-tablet {
    display: none;
}

@media (max-width: 1023px) {
    .newsTicker.desktop {
        display: none;
    }

    .newsTicker.mobile-tablet {
        display: block;
        width: 100%;
        margin: 20px 0 0;
        padding: 10px 20px;
    }

    .newsTicker.mobile-tablet ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .newsTicker.mobile-tablet li {
        padding: 6px 0;
        font-size: 1.3em;
        font-weight: 600;
        color: #0F4C81;
		text-align: center;
    }

    .darkmode .newsTicker.mobile-tablet li {
        color: #ccc;
        border-color: #333;
    }

    .newsTicker.mobile-tablet li span {
        color: #ff9f0e;
        margin-right: 8px;
    }
}

@media (max-width: 767px) {

	body header .navbar#menu .members-action a {
		padding: 5px 15px;
		font-size: 1.1em;
	}
	
	body header .navbar#menu .members-action a:first-child {
		display: none;
	}
	
	body header .navbar#menu .members-action a.newButton {
        font-size: 1.2em;
        margin-right: 5px;
        margin-top: -5px;
        padding: 10px 30px;
	}
	
	body header .navbar#menu .members-action a.newButton span:first-child {
		display: none;
	}
	
	body header .navbar#menu .members-action a.newButton span:last-child {
		display: block !important;
	}
	
	header .navbar#menu .members-action, header .navbar#menu.menu-fixed .members-action {
		display: flex !important;
	}
		
	body header .navbar#menu {
		margin-top: 0 !important;
	}

	body header .navbar#menu body header .navbar#menu .members-action a {
		display: none;
	}
	
}


section .thumb-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

section .thumb-list li {
    overflow: hidden;
    margin: 0;
    padding: 0 1px;
    display: block;
    float: none;
    width: auto;
}

@media (max-width: 1023px) {
	
	section .thumb-list {
		grid-template-columns: repeat(2, 1fr);
	}
	
}

@media (max-width: 767px) {
	
	section .thumb-list {
		grid-template-columns: repeat(1, 1fr);
	}
	
}

/* =============================================================
 * randyblue.main14.css ADDITIONS — MEMBERS VIDEO SCENE PAGE
 * =============================================================
 * New layout for the members-area "full movie" scene page
 * (gallery.tpl, type=vids, logged-in member). Deliberately uses
 * "member-" prefixed classes/ids throughout — NOT the tour's
 * "rb-" classes — so nothing here can ever collide with or
 * accidentally restyle the public trailer page. Structure below
 * intentionally mirrors the tour's #rbTrailerJoin proportions
 * and breakpoints (max-width:767px mobile, 768-1023px tablet,
 * else desktop) for visual consistency between tour and members,
 * without sharing a single selector.
 * ============================================================= */

/* -------------------------------------------------------------
 * Page wrapper — same max-width as the tour's #rbGalleryPage, so
 * the members full-movie page reads at the same content width as
 * the public trailer page.
 * ------------------------------------------------------------- */
#memberGalleryPage {
    display: block;
    width: 98%;
    max-width: 1560px;
    margin: 0 auto;
    padding: 20px 0 40px;
    box-sizing: border-box;
}

/* -------------------------------------------------------------
 * Legacy main2017 fixed min-heights on the player push it down
 * inside its parent (black space above, bottom cut off) now that
 * it's sitting in a fluid, aspect-ratio box. Override at the same
 * breakpoints the legacy rules use, per request.
 * ------------------------------------------------------------- */
@media (max-width: 1199px) {
    body.page-scene #trailer_player, body.page-scene #scene_player, body.page-scene #scene_player_trial_locked {
        min-height: auto !important;
    }
}

@media (max-width: 1299px) {
    body.page-scene #trailer_player, body.page-scene #scene_player, body.page-scene #scene_player_trial_locked {
        min-height: auto !important;
    }
}

@media (max-width: 1599px) {
    body.page-scene #trailer_player, body.page-scene #scene_player, body.page-scene #scene_player_trial_locked {
        min-height: auto !important;
    }
}

body.page-scene #trailer_player, body.page-scene #scene_player, body.page-scene #scene_player_trial_locked {
    min-height: auto !important;
}

/* -------------------------------------------------------------
 * Row 1 — player (75%) + download options (25%)
 * ------------------------------------------------------------- */
#memberPlayerRow {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    width: 100%;
}

.member-movieWrapper {
    width: 75%;
    box-sizing: border-box;
}

.member-playerBox {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
}

/* Legacy main2017 rules size #scene_player/#scene_player_finished
   with fixed pixel dimensions (e.g. height:650px;width:1155px).
   Override with !important so the player fills the new fluid,
   aspect-ratio box instead. */
.member-playerBox #scene_player,
.member-playerBox .video-js,
.member-playerBox #scene_player_finished {
    width: 100% !important;
    height: 100% !important;
    min-height: auto !important;
}

/* Legacy .free-pause is fixed-pixel (e.g. width:1155px;height:650px
   !important) to match the old fixed player size. Force it to fill
   the new fluid box instead so the pause overlay still lines up. */
.member-playerBox .free-pause {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
}

.member-downloadFrame {
    width: 25%;
    max-width: 570px;
    box-sizing: border-box;
    padding-left: 20px;
}

/* -------------------------------------------------------------
 * Shared dropdown component — Streaming Options / Download
 * Options. Both toggles use the same .member-dropdownToggle class
 * (no per-section ID styling) so they render identically. Built
 * on native <details>/<summary> for built-in open/close behavior;
 * default disclosure marker is suppressed and replaced with a
 * custom chevron. List items reuse the same light-grey/rounded/
 * blue-text look as the original download rows.
 * ------------------------------------------------------------- */
.member-dropdown {
    margin-bottom: 14px;
}

.member-dropdownToggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #eee;
    color: #0f4c81;
    font-weight: bold;
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.darkmode .member-dropdownToggle {
    background: #333;
    color: #ccc;
}

.member-dropdownToggle::-webkit-details-marker {
    display: none;
}

.member-dropdownToggle::marker {
    content: "";
}

.member-dropdownToggle::after {
    content: "▾";
    margin-left: 8px;
    transition: transform 0.15s ease;
}

.member-dropdown[open] > .member-dropdownToggle::after {
    transform: rotate(180deg);
}

.member-dropdownToggle:hover {
    background: #e2e2e2;
}

.member-dropdownList {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.member-dropdownList li {
    margin: 0 0 8px;
}

.member-dropdownList li a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: #eee;
    color: #0f4c81;
    font-weight: bold;
    padding: 10px 14px;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
}

.member-dropdownList li a:hover {
    background: #0f4c81;
    color: #fff !important;
}

.member-dropdownList li a small {
    display: block;
    color: #6f6f6f;
    font-weight: normal;
    font-size: 0.85em;
}

.member-dropdownList li a:hover small {
    color: #eee;
}

/* Existing gallery_downloads.tpl markup, restyled from inline-block
   to stacked full-width rows. */
#rbDownloadList {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

#rbDownloadList li {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px;
    padding: 0;
}

#rbDownloadList li a.full_download_link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: #eee;
    color: #0f4c81;
    font-weight: bold;
    padding: 10px 14px;
    border-radius: 6px;
    text-decoration: none;
}

#rbDownloadList li a.full_download_link:hover {
    background: #0f4c81;
    color: #fff !important;
}

#rbDownloadList li a.full_download_link small {
    display: block;
    color: #6f6f6f;
    font-weight: normal;
    font-size: 0.85em;
}

#rbDownloadList li a.full_download_link:hover small {
    color: #eee;
}

/* -------------------------------------------------------------
 * Row 2 — info block (50%) + comments (50%)
 * ------------------------------------------------------------- */
#memberInfoCommentsRow {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    width: 100%;
    margin-top: 20px;
}

.member-infoBlock {
    width: 50%;
    box-sizing: border-box;
    padding-right: 30px;
}

.member-commentsBlock {
    width: 50%;
    box-sizing: border-box;
}

.member-titleZone .calendar {
    font-size: 0.95em;
    color: #0f4c81;
    margin-bottom: 6px;
}

.darkmode .member-titleZone .calendar {
    color: #ccc;
}

.member-titleZone h1 {
    margin: 0 0 8px;
}

.member-trailerModels {
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}

.member-trailerModels li {
    display: inline-block;
}

.member-trailerModels a {
    color: #0F4C81;
    text-decoration: none;
}

.darkmode .member-trailerModels a {
    color: #5aadd6;
}

/* Like / favorite / gallery-link row — sits under date+models,
   above the description. */
.member-socialRow {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 16px;
    margin: 0 0 14px;
}

.member-socialRow #likes,
.member-socialRow .linkLikes,
.member-socialRow .liked {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0f4c81;
    font-weight: bold;
    text-decoration: none;
}

.member-socialRow #favorites_add,
.member-socialRow #favorites_del {
    display: inline-flex;
    align-items: center;
    color: #0f4c81;
    text-decoration: none;
}

.member-galleryLink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0f4c81;
    text-decoration: none;
    font-weight: bold;
}

.member-galleryLink:hover {
    color: #ffaf00 !important;
}

.member-galleryIcon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.member-galleryIcon path,
.member-galleryIcon rect,
.member-galleryIcon circle {
    fill: currentColor;
}

.member-trailerDesc {
    font-size: 1.1em;
    color: #0f4c81;
    line-height: 1.6em;
    margin-bottom: 14px;
}

.darkmode .member-trailerDesc {
    color: #ddd;
}

.member-tags ul.scene-tags {
    display: flex;
    flex-flow: row wrap;
    gap: 7px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.member-tags ul.scene-tags li a {
    display: inline-block;
    background: #eee;
    color: #ffaf00;
    padding: 4px 14px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 0.85em;
    white-space: nowrap;
    text-decoration: none;
}

.member-tags ul.scene-tags li a:hover {
    background: #003761;
    color: #fff !important;
}

.darkmode .member-tags ul.scene-tags li a {
    background: #5aadd6;
}

/* -------------------------------------------------------------
 * Models grid — 2 per row, nested under tags inside the 70% block
 * ------------------------------------------------------------- */
#memberModelsGrid {
    margin-top: 18px;
}

#memberModelsGrid #featured_pornstars {
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

#memberModelsGrid #featured_pornstars > li {
    width: 40% !important;
    float: none !important;
    margin: 0 20px 16px 0 !important;
}

/* -------------------------------------------------------------
 * CAMS section — reuses existing .deals-footer/.f4fFrame markup
 * from common/discountsdeals-footer.tpl unchanged; this just adds
 * spacing now that it sits mid-page instead of just above footer.
 * ------------------------------------------------------------- */
.member-camsSection {
    width: 100%;
    margin: 30px 0 0;
    clear: both;
}

/* =============================================================
 * TABLET  768px – 1023px — same collapse pattern as tour
 * ============================================================= */
@media (min-width: 768px) and (max-width: 1023px) {

    #memberPlayerRow {
        flex-flow: column nowrap;
    }

    .member-movieWrapper {
        width: 100%;
    }

    .member-downloadFrame {
        width: 100%;
        max-width: none;
        padding-left: 0;
        margin-top: 16px;
    }

    #memberInfoCommentsRow {
        flex-flow: column nowrap;
    }

    .member-infoBlock {
        width: 100%;
        padding-right: 0;
    }

    .member-commentsBlock {
        width: 100%;
        margin-top: 20px;
    }
}

/* =============================================================
 * MOBILE  ≤767px
 * DOM order already gives: movie, downloads, title/desc/tags,
 * models grid, comments, cams, you-might-also-like — no reorder
 * needed, just stacking + tighter spacing.
 * ============================================================= */
@media (max-width: 767px) {

    #memberPlayerRow {
        flex-flow: column nowrap;
    }

    .member-movieWrapper {
        width: 100%;
    }

    .member-downloadFrame {
        width: 100%;
        max-width: none;
        padding-left: 0;
        margin-top: 14px;
    }

    #memberInfoCommentsRow {
        flex-flow: column nowrap;
        margin-top: 14px;
    }

    .member-infoBlock {
        width: 100%;
        padding-right: 0;
    }

    .member-commentsBlock {
        width: 100%;
        margin-top: 20px;
    }

    #memberModelsGrid #featured_pornstars > li {
        margin: 0 10px 12px 0 !important;
    }

    .member-trailerDesc {
        font-size: 1em;
    }
}

/* -------------------------------------------------------------
 * "Back to scene" button — highres/gallery page only, top-left,
 * directly under the nav header.
 * ------------------------------------------------------------- */
.member-backToScene {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 16px 0 10px;
    color: #0f4c81;
    font-weight: bold;
    text-decoration: none;
}

.member-backToScene:hover {
    color: #ffaf00 !important;
}

.member-backIcon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* -------------------------------------------------------------
 * lightGallery — hide share and download buttons. Neither is
 * explicitly disabled in the shared ligthGalleryInit() options
 * (in gallery.min.js), so both fall back to their plugin defaults
 * (share:true from lg-share, download:true from core). Hiding via
 * CSS here instead of editing that shared, site-wide JS bundle.
 * ------------------------------------------------------------- */
#lg-share,
#lg-download {
    display: none !important;
}

/* -------------------------------------------------------------
 * In-player quality selector — confirmed non-functional (updates
 * its own menu state but never actually swaps the video source).
 * Hidden rather than stripping the plugin's script/CSS includes,
 * since those are shared, site-wide assets. The new Streaming
 * Options dropdown in the sidebar replaces this with working
 * quality switching.
 * ------------------------------------------------------------- */
.vjs-quality-selector {
    display: none !important;
}