/* Custom Style - Add !important at the end of each class */

/*
	TOUR SALES BLOCKS THEME

	Colors come from the CMS admin (Areas, Edit Design). The --tsb-accent / --tsb-panel / --tsb-text
	variables are filled from those settings in custom_includes/head_code_insert.tpl, so changing a
	color in the admin changes it here too. Only the two decorative tones below are set in this file.

	Sections: 1 Type  2 Header  3 Promo strip  4 Hero  5 Section titles and grids  6 Update cards
	          7 Models  8 Network pass, benefits, closing block  9 Footer and footer bar  10 Small screens
*/

:root {
	--tsb-gold: #F2B24A;
	--tsb-cream: #F7EAD9;
	--tsb-line: rgba(242, 178, 74, 0.28);
}

/* Typeface fallbacks only. The head hook (custom_includes/head_code_insert.tpl) sets --tsb-body and --tsb-display
   on :root from Edit Design (Body Font, Heading Font); `html` has lower specificity than `:root`, so those win. */
html {
	--tsb-display: "Libre Franklin", Arial, sans-serif;
	--tsb-body: "Libre Franklin", Arial, sans-serif;
}


/* 1. TYPE */

body, input, select, textarea, button {
	font-family: var(--tsb-body) !important;
}

body {
	font-weight: 300;
	font-size: 15px;
	-webkit-font-smoothing: antialiased;
}

/* the page only ever scrolls vertically */
html, body {
	max-width: 100%;
	overflow-x: clip;
}

a:focus-visible, button:focus-visible {
	outline: 2px solid var(--tsb-gold) !important;
	outline-offset: 2px;
}


/* 2. HEADER */

header {
	height: 76px !important;
}

.logo img {
	max-width: 300px !important;
}

nav ul li {
	font-size: 16px !important;
	font-weight: 400 !important;
	padding: 0 16px !important;
}

nav ul li::before {
	display: none !important;
}

/* the "More" menu only shows when it has something in it */
.nlbonus:not(:has(li)) {
	display: none !important;
}

.joinNow {
	font-weight: 500 !important;
	padding: 10px 22px !important;
}


/* 3. PROMO STRIP */

.tsb_promo {
	position: relative;
	display: flex;
	justify-content: center;
	background: var(--tsb-accent);
	color: var(--tsb-accent-text);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
}

.tsb_promo_link {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 14px;
	padding: 10px 48px;
	color: inherit !important;
	text-align: center;
}

.tsb_promo_timer {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.tsb_promo_close {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}


/* 4. HERO */

.tsb_hero {
	display: grid;
	grid-template-columns: minmax(440px, 1fr) minmax(0, 1fr);
	grid-template-areas: "copy media";
	min-height: 520px;
	background: var(--tsb-panel);
	border-bottom: 1px solid var(--tsb-line);
}

.tsb_hero_media {
	grid-area: media;
	position: relative;
	overflow: hidden;
	/* shown while the header video loads: the image uploaded as Header Slide 1 */
	background: var(--tsb-panel) url("../images/header/slide1.jpg") 40% center / cover no-repeat;
}

/* the core header video/slides, moved in by custom_header_media.tpl */
.tsb_hero_media .topvideoheader,
.tsb_hero_media .mainBanner,
.tsb_hero_media .iBanner,
.tsb_hero_media .owl-stage-outer,
.tsb_hero_media .owl-stage,
.tsb_hero_media .owl-item,
.tsb_hero_media .bannerPic {
	height: 100% !important;
}

.tsb_hero_media .topvideoheader,
.tsb_hero_media .mainBanner {
	position: absolute;
	inset: 0;
}

.tsb_hero_media video,
.tsb_hero_media .bannerPic img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: 40% center;
}

.tsb_hero_media video {
	object-position: center;
}

/* blends the copy panel into the picture */
.tsb_hero_media::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 22%;
	background: linear-gradient(90deg, var(--tsb-panel), transparent);
	pointer-events: none;
}

.tsb_hero_copy {
	grid-area: copy;
	align-self: center;
	padding: 56px 40px 56px max(3vw, 24px);
}

.tsb_sign {
	display: inline-flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 22px;
	padding: 6px 14px 7px;
	border: 1px solid var(--tsb-line);
	border-radius: 3px;
}

.tsb_sign_native {
	font-family: var(--tsb-display);
	font-size: 22px;
	line-height: 1.5;
	color: var(--tsb-gold);
	text-shadow: 0 0 18px rgba(242, 178, 74, 0.55);
}

.tsb_sign_gloss {
	font-size: 14px;
	font-weight: 400;
	color: var(--tsb-muted);
}

.tsb_hero_heading {
	font-family: var(--tsb-display);
	font-size: clamp(32px, 3.6vw, 60px);
	line-height: 1.08;
	color: var(--tsb-cream);
	text-wrap: balance;
}

/* the first sentence of the heading ("Welcome to Thai Pussy Massage.") stays on one line; js heroFit lowers the
   heading size until it fits the copy column (phones let it wrap) */
.tsb_hero_line {
	display: block;
}

@media (min-width: 1200px) {
	.tsb_hero_line {
		white-space: nowrap;
	}
}

.tsb_hero_intro {
	margin-top: 18px;
	max-width: 46ch;
	font-size: 18px;
	line-height: 1.55;
	color: var(--tsb-muted);
}

.tsb_hero_actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 26px;
	margin-top: 30px;
}

.tsb_cta {
	display: inline-block;
	padding: 15px 30px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
}

.tsb_trailer_link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 16px;
	font-weight: 400;
	color: var(--tsb-cream) !important;
	border-bottom: 1px solid transparent;
}

.tsb_trailer_link i {
	font-size: 22px;
	color: var(--tsb-gold);
}

.tsb_trailer_link:hover {
	border-bottom-color: var(--tsb-gold);
}

.tsb_trust {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin-top: 26px;
	font-size: 14px;
	font-weight: 400;
	color: var(--tsb-muted);
}

.tsb_trust i {
	margin-right: 7px;
	font-size: 12px;
	color: var(--tsb-gold);
}

/* feature bar: four reasons to join, directly under the hero */
.tsb_features {
	background: #000;
	border-bottom: 1px solid var(--tsb-line);
}

.tsb_features ul {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tsb_features li {
	padding: 16px 20px;
	border-left: 1px solid var(--tsb-line);
	text-align: center;
}

.tsb_features li:first-child {
	border-left: 0;
}

.tsb_features strong {
	display: block;
	font-family: var(--tsb-display);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--tsb-gold);
}

.tsb_features span {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	font-weight: 400;
	color: var(--tsb-muted);
}


/* 5. SECTION TITLES AND GRIDS */

.centerwrap {
	max-width: 1280px !important;
}

.bodyArea {
	padding-top: 22px !important;
}

.title h1, .title h2 {
	font-family: var(--tsb-display);
	font-size: 28px !important;
	line-height: 1.25 !important;
	text-transform: none !important;
	color: var(--tsb-cream);
}

.viewAll {
	font-size: 14px !important;
	font-weight: 400 !important;
	text-transform: none !important;
}

.iLatestUArea, .photosArea, .subVideoArea {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 20px 14px !important;
}

/* a card or model is never wider than its grid column, whatever width the core styles give it */
.iLatestUArea > *, .photosArea > *, .subVideoArea > *, .modelsArea > *, .iModels > * {
	width: auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.latest_updates_custom {
	padding-bottom: 0px !important;
}

/* separator banner: a full-width strip between two rows of the grid, placed by js/tour_sales_blocks.js.
   It never takes a thumbnail slot, so every row above and below it is complete.
   It is deliberately NOT a scene picture (the owner, 2026-10-13: the thumbs already carry the flesh): a warm
   gradient, one model cut out of her portrait, one large slogan at a time, and a big dark button.
   An optional background photo (Separator Banner: Background Photo) brings back the washed-picture look. */
.tsb_grid_cta {
	grid-column: 1 / -1;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px 36px;
	min-height: 300px;
	margin: 10px 0 6px;
	padding: 0 48px 0 0;
	background: linear-gradient(100deg, #2a0a10 0%, #641a13 32%, #b0391a 64%, #e0953b 100%);
	border: 0;
	overflow: hidden;
	isolation: isolate;
}

.tsb_grid_cta.tsb_band_photo {
	padding: 36px 44px;
	background: var(--tsb-panel) center 35% / cover no-repeat;
	border: 1px solid var(--tsb-line);
}

.tsb_grid_cta.tsb_band_photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(8, 5, 3, 0.93) 0%, rgba(8, 5, 3, 0.86) 34%, rgba(8, 5, 3, 0.5) 52%, rgba(8, 5, 3, 0.12) 70%, rgba(8, 5, 3, 0.08) 100%);
	z-index: -1;
}

.tsb_band_model {
	flex: none;
	align-self: flex-end;
	height: 300px;
	width: auto;
	margin-left: 36px;
	filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55));
	pointer-events: none;
}

.tsb_band_photo .tsb_band_model {
	display: none;
}

.tsb_band_slogans {
	display: grid;
	flex: 1;
	min-width: 0;
	padding: 28px 0;
}

.tsb_band_slogan {
	grid-area: 1 / 1;
	align-self: center;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}

.tsb_band_slogan.tsb_band_on {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	transition-duration: 0.9s;
	transition-delay: 0.3s;
}

.tsb_grid_cta h3 {
	font-family: var(--tsb-display);
	font-size: clamp(30px, 3.1vw, 52px);
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #fff6e6;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.tsb_grid_cta p {
	margin-top: 12px;
	font-size: clamp(16px, 1.25vw, 21px);
	line-height: 1.45;
	color: #fff6e6;
	opacity: 0.92;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* the banner's button: big, dark, gold lettering, unlike the orange buttons elsewhere */
.tsb_grid_cta .tsb_cta {
	flex-shrink: 0;
	padding: 22px 42px;
	border-radius: 10px !important;
	background: #1a0d06 !important;
	color: var(--tsb-gold) !important;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
	transition: filter 0.2s ease, transform 0.2s ease;
}

.tsb_grid_cta .tsb_cta:hover {
	filter: brightness(1.25);
	transform: translateY(-1px);
}

.pagination a {
	font-weight: 400 !important;
	font-size: 16px !important;
}


/* 6. UPDATE CARDS */

.latestUpdateB .videoPic,
.upcomingVideo .videoPic {
	border-radius: 6px;
	background: var(--tsb-panel);
}

.latestUpdateB .videoPic a,
.upcomingVideo .videoPic a {
	display: block;
	position: relative;
}

/* every thumbnail the same shape, whatever size the source image is */
.latestUpdateB .videoPic img,
.upcomingVideo .videoPic img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* running time sits on the picture (cards in the Newest Updates grid print it below by default) */
.latest_updates_custom .latestUpdateB,
.tsb_most_viewed .latestUpdateB {
	position: relative;
	container-type: inline-size;
}

.latest_updates_custom .latestUpdateBinfo .videoInfo li:has(.fa-video),
.tsb_most_viewed .latestUpdateBinfo .videoInfo li:has(.fa-video) {
	position: absolute;
	right: 8px;
	top: calc(56.25cqw - 32px);
	padding: 2px 8px !important;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.74) !important;
	color: #FFF !important;
	font-weight: 400 !important;
	pointer-events: none;
}

.latest_updates_custom .latestUpdateBinfo .videoInfo li:has(.fa-video) i,
.tsb_most_viewed .latestUpdateBinfo .videoInfo li:has(.fa-video) i {
	color: var(--tsb-gold) !important;
}

/* hover preview clip, laid over the thumbnail by js/tour_sales_blocks.js */
.tsb_preview {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	background: #000;
	pointer-events: none;
}

/* while a clip plays, the play mark steps aside and the running time stays on top */
.latestUpdateB .videoPic a:has(.tsb_preview)::after {
	opacity: 0 !important;
}

.latest_updates_custom .latestUpdateBinfo .videoInfo li:has(.fa-video),
.tsb_most_viewed .latestUpdateBinfo .videoInfo li:has(.fa-video) {
	z-index: 2;
}

/* play mark on hover: the thumbnails lead to the join page */
.latestUpdateB .videoPic a::after,
.upcomingVideo .videoPic a::after {
	content: "\f04b";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 18px;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 54px;
	height: 54px;
	margin: -27px 0 0 -27px;
	padding-left: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--tsb-accent);
	color: var(--tsb-accent-text);
	opacity: 0;
	transition: opacity 200ms ease-out;
	pointer-events: none;
}

.latestUpdateB:hover .videoPic a::after,
.upcomingVideo:hover .videoPic a::after {
	opacity: 1;
}

.latestUpdateBinfo {
	padding-top: 7px !important;
	line-height: 1.35 !important;
}

.latestUpdateB h4, .upcomingVideo h4 {
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	margin: 0 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.latestUpdateBinfo p {
	font-size: 12.5px;
	font-weight: 400;
	margin: 0;
}

/* scene card details, added by js/tour_sales_blocks.js from the data in custom_subheader.tpl */
.tsb_card_rich h4 {
	display: flex;
	align-items: center;
	gap: 7px;
	overflow: visible;
}

.tsb_card_rich h4 > a {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tsb_card_flag {
	flex-shrink: 0;
	display: inline-block !important;
	width: 16px !important;
	height: 11px !important;
	margin: 0 6px 0 0;
	border-radius: 2px;
	vertical-align: -1px;
}

.tsb_card_rich h4 .tsb_card_flag {
	margin-right: 0;
}

.tsb_card_age {
	margin-left: -7px;
	font-weight: 400;
	color: var(--tsb-text);
	white-space: nowrap;
}

.tsb_card_rating {
	margin-left: auto;
	padding-left: 8px;
	font-size: 12px;
	font-weight: 400;
	color: var(--tsb-text);
	white-space: nowrap;
}

.tsb_card_rating i {
	margin-right: 4px;
	font-size: 11px;
	color: var(--tsb-gold);
}

.tsb_card_rich .tsb_card_folded {
	display: none !important;
}

.upcomingVideo.tsb_card_rich h4 {
	margin-top: 6px;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--tsb-gold);
}

.tsb_card_rich .tsb_card_desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin: 2px 0 3px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--tsb-muted);
}

.latestUpdateBinfo .videoInfo {
	flex-wrap: wrap;
	gap: 0 10px;
	margin-top: 0;
	line-height: 1.4;
}

.latestUpdateBinfo .videoInfo li {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-size: 11.5px !important;
	font-weight: 300 !important;
	color: var(--tsb-muted) !important;
}

.latestUpdateBinfo .videoInfo li::after {
	display: none !important;
}

/* Video Length Thumb Overlay (photo and movie totals printed over the thumbnail) */
.videoOverlay {
	position: absolute !important;
	right: 0px;
	bottom: 0px;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	gap: 14px;
	width: 80%;
	padding: 18px 10px 8px;
	list-style: none !important;
	background: linear-gradient(270deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
	font-size: 13px;
	pointer-events: none;
}

.videoOverlay li {
	display: inline-flex;
	align-items: center;
	color: #FFF !important;
}

.videoOverlay li i {
	margin-right: 6px;
	color: var(--tsb-gold) !important;
}


/* Most Viewed and Coming Soon (core sections, switched on under Areas > Edit Design > Pages and Sections).
   js/tour_sales_blocks.js turns their swipe carousels into rows; these rules keep every row full:
   four across shows 8 (Most Viewed) or 4 (Coming Soon), three across shows 9 or 3, two across shows 8 or 4. */
.tsb_row_grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px 14px;
}

.tsb_row_grid > * {
	min-width: 0;
}

.tsb_row_grid > :nth-child(n+9) {
	display: none;
}

.tsb_row_grid .upcomingVideo img {
	margin-bottom: 0;
}

/* converted core carousels print the totals on the picture already */
.tsb_row_grid .upcomingVideo .latestUpdateBinfo .videoInfo li:has(.fa-video),
.tsb_row_grid .upcomingVideo .latestUpdateBinfo .videoInfo li:has(.fa-camera) {
	display: none;
}

/* Scene cards show no date and no photo count (owner, 2026-10-12); Upcoming Updates keep their release date,
   which the core prints separately (.comingDate). The running time stays on the picture badge, so the
   running-time line goes too once a card has its badge (.tsb_card_rich). */
.latestUpdateB .videoInfo li:has(.fa-calendar),
.latestUpdateB .videoInfo li:has(.fa-camera),
.upcomingVideo .videoInfo li:has(.fa-calendar),
.tsb_card_rich .videoInfo li:has(.fa-video) {
	display: none !important;
}

/* the core's own Most Viewed section has no pictures on a tour; ours replaces it */
.most_viewed_custom:not(.tsb_most_viewed) {
	display: none;
}

.tsb_most_viewed {
	padding-top: 26px;
}

.upcoming_updates_custom .comingDate {
	margin-top: 8px;
	font-size: 13px;
	color: var(--tsb-gold) !important;
}

.upcoming_updates_custom .swipe_detail,
.most_viewed_custom .swipe_detail,
.swipe_detail:has(+ .tsb_row_grid) {
	display: none !important;
}


/* 7. MODELS */

.modelsArea, .iModels {
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	gap: 22px 16px !important;
}

.modelPic {
	border-radius: 6px;
}

.modelBlock h4, .iModels h4 {
	font-size: 16px !important;
	font-weight: 500 !important;
}


/* 8. NETWORK PASS, BENEFITS, CLOSING BLOCK */

/* trailer beside the pitch */
.tsb_trailer {
	padding: 44px 0 0;
}

.tsb_trailer .centerwrap {
	display: grid;
	grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
	align-items: stretch;
	gap: 28px;
}

/* js trailerFit: when the panel cannot fit beside the video at any size, it goes under the video */
.tsb_trailer.tsb_trailer_stack .centerwrap {
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
}

.tsb_trailer_video {
	display: block;
	width: 100%;
	height: auto;
	align-self: start;
	aspect-ratio: 16 / 9;
	background: #000;
	object-fit: cover;
}

.tsb_trailer_copy h2,
.tsb_plans h2 {
	font-family: var(--tsb-display);
	font-size: clamp(26px, 2.4vw, 36px);
	line-height: 1.2;
	color: var(--tsb-cream);
	text-wrap: balance;
}

.tsb_trailer_copy p {
	margin: 12px 0 22px;
	max-width: 44ch;
	font-size: 17px;
	line-height: 1.55;
	color: var(--tsb-muted);
}

.tsb_trailer_copy .tsb_trust {
	margin-top: 18px;
}

/* membership options: the same plans and wording as the join page */
.tsb_plans {
	padding: 52px 0 0;
	text-align: center;
}

.tsb_plans_list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-top: 24px;
}

.tsb_plans_list a {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: 22px 16px 20px;
	background: var(--tsb-panel);
	border: 1px solid var(--tsb-line);
	border-radius: 6px;
}

.tsb_plans_list li:first-child a {
	border-color: var(--tsb-gold);
}

.tsb_plan_name {
	font-size: 16px;
	font-weight: 500;
	color: var(--tsb-text);
}

.tsb_plan_price {
	margin-top: 6px;
	font-family: var(--tsb-display);
	font-size: 28px;
	line-height: 1.2;
	color: var(--tsb-gold);
}

.tsb_plan_terms {
	flex: 1;
	margin: 6px 0 16px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--tsb-muted);
}

.tsb_plans_list .tsb_cta {
	width: 100%;
	padding: 11px 12px;
	font-size: 16px;
}

.tsb_plans_note {
	margin-top: 16px;
	font-size: 14px;
	color: var(--tsb-muted);
}

.tsb_network {
	padding: 44px 0 8px;
	text-align: center;
}

.tsb_network h2,
.member_benefits h1,
.tsb_gate h2 {
	font-family: var(--tsb-display);
	font-size: clamp(26px, 2.4vw, 36px);
	line-height: 1.2;
	color: var(--tsb-cream);
	text-wrap: balance;
}

.tsb_network p,
.tsb_gate p {
	max-width: 62ch;
	margin: 12px auto 0;
	font-size: 19px;
	line-height: 1.55;
	color: var(--tsb-cream);
}

.tsb_gate h2:empty, .tsb_gate h2 + p:only-child {
	margin-top: 0;
}

.tsb_network_sites {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 24px;
}

/* with picture tiles the list becomes a grid: ten sites make two full rows of five */
.tsb_network_sites:has(.tsb_network_tile) {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
}

.tsb_network_sites .tsb_network_tile {
	padding: 0;
	border: 0;
	overflow: hidden;
	border-radius: 6px;
}

.tsb_network_tile a {
	display: block;
	position: relative;
}

.tsb_network_tile img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 218 / 164;
	object-fit: cover;
}

.tsb_network_tile .tsb_network_logo {
	position: absolute;
	inset: 0;
	height: 100%;
}

.tsb_network_name {
	position: absolute;
	inset: auto 0 0 0;
	padding: 18px 8px 8px;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent);
	font-size: 14px;
	font-weight: 500;
	color: #FFF;
}

.tsb_network_sites li {
	padding: 7px 16px;
	border: 1px solid var(--tsb-line);
	border-radius: 3px;
	font-size: 15px;
	font-weight: 400;
	color: var(--tsb-text);
}

.member_benefits {
	width: 100%;
	padding: 44px 16px 0;
	text-align: center;
}

.footer_benefits {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: 1280px;
	width: 94%;
	margin: 28px auto 0;
	border-top: 1px solid var(--tsb-line);
	border-left: 1px solid var(--tsb-line);
}

.footer_benefits > * {
	display: flex;
	align-items: center;
	padding: 20px 22px;
	border-right: 1px solid var(--tsb-line);
	border-bottom: 1px solid var(--tsb-line);
}

.benefit_inner {
	display: flex;
	align-items: center;
	gap: 16px;
}

.footer_benefits i {
	flex-shrink: 0;
	width: 30px;
	font-size: 24px;
	text-align: center;
	color: var(--tsb-gold);
}

.footer_benefits .benefit_text {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	color: var(--tsb-text);
}

.footer_benefits h3 {
	margin: 0px;
	font-size: 15px;
	font-weight: 500;
}

.tsb_gate {
	padding: 48px 16px 0;
	text-align: center;
}

.footer_join .getAccess {
	padding: 28px 16px 34px !important;
}

/* footer logo: closer to the Join button, and large enough to read (the file is 470 px wide) */
footer .flogo {
	margin-top: 22px !important;
	padding-top: 0 !important;
}

footer .flogo img {
	width: 330px !important;
	max-width: 80% !important;
	height: auto;
}

.getAccess a {
	font-size: 22px !important;
	font-weight: 500 !important;
	text-transform: none !important;
	padding: 18px 46px !important;
}


/* 9. FOOTER AND FOOTER BAR */

.tsb_footer_trust {
	display: none;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 30px;
	padding: 18px 16px;
	border-top: 1px solid var(--tsb-line);
	border-bottom: 1px solid var(--tsb-line);
	font-size: 14px;
	font-weight: 400;
	color: var(--tsb-muted);
}

.tsb_footer_trust i {
	margin-right: 8px;
	font-size: 12px;
	color: var(--tsb-gold);
}

/* billing/cancel links and the registered business name and address
   (Footer field in Areas, Edit Design, Tour Sales Blocks) */
.tsb_footer_links a {
	display: inline-block;
	margin: 0 9px 4px;
}

.tsb_company {
	display: inline-block;
	margin-bottom: 6px;
	font-size: 12px;
}

/* The footer promo bar waits until the visitor has scrolled past the hero (js/tour_sales_blocks.js) */
.tsb_bar_ready .sfooter {
	padding: 12px 16px !important;
	border-top: 1px solid var(--tsb-line);
	transform: translateY(100%);
	transition: transform 240ms ease-out;
}

.tsb_bar_ready.tsb_bar_show .sfooter {
	transform: none;
}

.sfooter .sftext {
	font-weight: 400;
}

.sfooter_btn {
	display: inline-block;
	font-weight: 500;
	margin-left: 12px !important;
}

@media (prefers-reduced-motion: reduce) {
	.tsb_bar_ready .sfooter,
	.latestUpdateB .videoPic a::after,
	.modelPic img, .videoPic img {
		transition: none !important;
	}

	.sfooter_btn {
		animation: none !important;
	}
}


/* 10. SMALL SCREENS */

@media (max-width: 1199px) {
	.tsb_grid_cta {
		min-height: 240px;
		gap: 14px 24px;
		padding-right: 28px;
	}

	.tsb_band_model {
		height: 240px;
		margin-left: 20px;
	}

	.tsb_grid_cta .tsb_cta {
		padding: 16px 26px;
		font-size: 15px;
	}

	.iLatestUArea, .photosArea, .subVideoArea {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	.tsb_row_grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tsb_row_grid > :nth-child(n+9) {
		display: block;
	}

	.tsb_row_grid > :nth-child(n+10),
	.tsb_row_grid_soon > :nth-child(n+4) {
		display: none;
	}

	/* 4 across: 12 home models make 3 rows; the Models page's 18 would leave 2 alone, so the last 2 are hidden here */
	.modelsArea, .iModels {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}

	.modelsArea > .modelBlock:nth-child(n+17) {
		display: none;
	}

	.footer_benefits {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tsb_plans_list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	.tsb_grid_cta {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		padding: 28px 24px;
		text-align: center;
	}

	.tsb_band_model {
		display: none;
	}

	.tsb_band_slogans {
		padding: 0;
	}

	.tsb_grid_cta .tsb_cta {
		align-self: center;
	}

	.tsb_trailer .centerwrap {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.tsb_features ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tsb_features li:nth-child(odd) {
		border-left: 0;
	}

	.tsb_features li:nth-child(n+3) {
		border-top: 1px solid var(--tsb-line);
	}

	.tsb_hero {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "media" "copy";
		min-height: 0;
	}

	.tsb_hero_media {
		aspect-ratio: 16 / 9;
	}

	.tsb_hero:not(.tsb_hero_has_media) .tsb_hero_media {
		display: none;
	}

	.tsb_hero_media::after {
		inset: auto 0 0 0;
		width: auto;
		height: 30%;
		background: linear-gradient(0deg, var(--tsb-panel), transparent);
	}

	.tsb_hero_copy {
		padding: 28px 20px 32px;
	}
}

@media (max-width: 767px) {
	header {
		height: 64px !important;
	}

	.iLatestUArea, .photosArea, .subVideoArea {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 20px 12px !important;
	}

	.tsb_row_grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 12px;
	}

	.tsb_row_grid > :nth-child(n+9) {
		display: none;
	}

	.tsb_row_grid_soon > :nth-child(n+4) {
		display: block;
	}

	.modelsArea, .iModels {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	.modelsArea > .modelBlock:nth-child(n+17) {
		display: block;
	}

	.title h1, .title h2 {
		font-size: 22px !important;
	}


	.tsb_network_sites:has(.tsb_network_tile) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tsb_features li {
		padding: 12px 10px;
	}

	.tsb_features strong {
		font-size: 16px;
	}

	.tsb_hero_intro {
		font-size: 16px;
	}

	.tsb_cta {
		width: 100%;
	}

	.latestUpdateB h4, .upcomingVideo h4 {
		font-size: 15px !important;
	}

	.getAccess a {
		font-size: 19px !important;
		padding: 16px 28px !important;
	}

	.sfooter .sftext {
		display: block;
		margin-bottom: 8px;
		font-size: 14px;
	}
}

@media (max-width: 419px) {
	.iLatestUArea, .photosArea, .subVideoArea {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.tsb_row_grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.tsb_row_grid > :nth-child(n+5) {
		display: none;
	}

	.modelsArea, .iModels {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.footer_benefits {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* 10. WIDE SCREENS
   The page is laid out for a 1280px content column. On a 4K or ultra-wide monitor that leaves half the
   screen empty, the hero copy sits in the far corner and the header video is cropped to a thin strip.
   From 1800px up the content column widens, the hero copy lines up with it, and the hero grows taller. */

@media (min-width: 1800px) {
	.centerwrap {
		max-width: 1600px !important;
	}

	.footer_benefits {
		max-width: 1600px;
	}

	.tsb_hero {
		container-type: inline-size;
		/* copy column: the empty margin beside the content column, plus 680px of the column itself */
		grid-template-columns: minmax(0, calc((100% - 1600px) / 2 + 900px)) minmax(0, 1fr);
		min-height: clamp(560px, 28vw, 900px);
	}

	.tsb_hero_copy {
		padding-left: calc((100cqw - 1600px) / 2);
		padding-right: 48px;
	}

	.tsb_hero_heading {
		font-size: 66px;
	}

	.tsb_hero_intro {
		font-size: 19px;
		max-width: 50ch;
	}

	.tsb_hero_media::after {
		width: 28%;
	}
}

/* a network tile's alt text, while its picture is still loading, is not shown as a link */
.tsb_network_tile img {
	color: transparent;
}


/* 11. TRAILER PANEL, UPCOMING CAROUSEL, MODELS ROW, FOOTER SPACING */

/* the pitch beside the trailer sits in a bordered panel with a list of what membership covers */
/* Everything in the panel is sized in em from --tsb-tp, which js trailerFit lowers until the panel fits the
   height of the video with every point on one line (16px down to 11px). */
.tsb_trailer_panel {
	--tsb-tp: 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	min-width: 0;
	padding: 1.5em 1.75em;
	border: 1px solid var(--tsb-line);
	background: var(--tsb-panel);
	font-size: var(--tsb-tp);
}

/* plain wrapping (not balanced); js trailerFit sizes it (up to 2.4em) so its last line is not a short orphan */
.tsb_trailer_panel h2 {
	font-size: 2em;
	line-height: 1.15;
	margin: 0;
	max-width: none;
	text-wrap: wrap;
}

.tsb_trailer_panel p {
	margin: 0.5em 0 0.9em;
	max-width: none;
	font-size: 1.05em;
	line-height: 1.4;
}

.tsb_trailer_panel .tsb_cta {
	align-self: flex-start;
	padding: 0.8em 1.7em;
	font-size: 1.1em;
}

.tsb_trailer_panel .tsb_trust {
	margin-top: 0.9em;
	gap: 0.4em 1.4em;
	font-size: 0.85em;
}

.tsb_trailer_points {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

.tsb_trailer_points li {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	padding: 0.42em 0;
	border-top: 1px solid var(--tsb-line);
	font-size: 1em;
	line-height: 1.4;
	color: var(--tsb-cream);
}

.tsb_tp_fit .tsb_trailer_points li {
	white-space: nowrap;
	overflow: hidden;
}

.tsb_trailer_points li:last-child {
	border-bottom: 1px solid var(--tsb-line);
}

.tsb_trailer_points i {
	flex: none;
	margin-top: 0.2em;
	color: var(--tsb-gold);
}

/* Upcoming Updates as a moving carousel: blurred pictures, a lock and the release date on each */
.tsb_upcoming_blur #comingsoon_div.owl-carousel {
	display: block;
}

.tsb_upcoming_blur .upcomingVideo .videoPic {
	position: relative;
	overflow: hidden;
}

.tsb_upcoming_blur .upcomingVideo .videoPic img {
	filter: blur(9px) saturate(0.85) brightness(0.75);
	transform: scale(1.1);
}

.tsb_upcoming_blur .upcomingVideo .videoPic a::after {
	display: none;
}

.tsb_soon_badge {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 13px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(8, 5, 3, 0.7);
	color: var(--tsb-cream);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	pointer-events: none;
}

.tsb_soon_badge i {
	color: var(--tsb-gold);
}

.tsb_upcoming_blur .owl-nav,
.tsb_upcoming_blur .owl-dots {
	display: none !important;
}

/* model cards added after the core's top-rated six look like them */
.popularModelsArea .tsb_model_extra .modelPic img {
	width: 100%;
	height: auto;
	aspect-ratio: 235 / 360;
	object-fit: cover;
}

/* footer: no overrides, so it renders exactly like the MIA tour's (same core stylesheet) */

@media (max-width: 767px) {
	/* phones: the home page shows 8 newest scenes (js gridFill), so its page numbers go; See More has the rest */
	.latest_updates_custom .pagination {
		display: none;
	}

	/* phones: 6 models on the home row (3 rows of 2); the Models page keeps its full list */
	.most_popular_models_custom .iModels > .modelBlock:nth-child(n+7) {
		display: none;
	}

	.tsb_grid_cta.tsb_band_photo {
		min-height: 0;
		padding: 24px 18px;
	}

	.tsb_grid_cta.tsb_band_photo::before {
		background: rgba(8, 5, 3, 0.8);
	}

	.tsb_grid_cta .tsb_cta {
		padding: 16px 24px;
		font-size: 15px;
	}

	.tsb_trailer_panel {
		padding: 1.25em 1.1em;
	}
}

/* 12. TRAILER LIGHTBOX (js trailerLightbox: the core's fancyBox 3.1 cannot play an mp4 link) */
.tsb_lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, 0.92);
}

.tsb_lightbox_inner {
	position: relative;
	width: min(1100px, 100%);
}

.tsb_lightbox video {
	display: block;
	width: 100%;
	max-height: 86vh;
	background: #000;
	border-radius: 8px;
}

.tsb_lightbox_close {
	position: absolute;
	top: -16px;
	right: -16px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--tsb-accent);
	color: var(--tsb-accent-text);
	font-size: 26px;
	line-height: 40px;
	cursor: pointer;
}

.tsb_lightbox_open {
	overflow: hidden;
}

/* 13. MODEL PAGE: picture at its real size, the details next to it filled with a sales panel (js modelBio) */
/* portrait and details are one block of equal height: the panel stretches to the bottom of the portrait */
.model_bio_custom .modelInfo {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 34px;
	padding: 12px 0 4px;
}

.model_bio_custom .modelBioPic {
	flex: 0 0 auto;
	width: 300px;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.model_bio_custom .modelBioPic img {
	display: block;
	width: 300px !important;
	max-width: 100%;
	height: auto !important;
	border-radius: 10px;
}

.model_bio_custom .modelBioDetails {
	flex: 1 1 320px;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.model_bio_custom .modelBioDetails h1 {
	font-family: var(--tsb-display);
	font-weight: 400;
	font-size: clamp(30px, 3vw, 42px);
	line-height: 1.1;
	margin: 0 0 8px;
}

.model_bio_custom .vitalStats ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 22px;
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
}

.model_bio_custom .vitalStats li {
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.5;
}

.model_bio_custom .vitalStats li.tsb_empty,
.model_bio_custom .vitalStats li br {
	display: none;
}

.tsb_bio_panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 12px;
	padding: 22px 26px;
	border: 1px solid var(--tsb-line);
	border-radius: 12px;
	background: var(--tsb-panel);
}

.tsb_bio_panel .tsb_bio_lead {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--tsb-muted);
}

.tsb_bio_panel p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--tsb-text);
	margin: 0 0 12px;
}

.tsb_bio_panel .tsb_trailer_points {
	margin: 0 0 18px;
}

.tsb_bio_panel .tsb_cta {
	display: inline-block;
	align-self: flex-start;
}

.model_bio_custom .title h2 {
	margin-top: 26px;
}

/* a model with one or two scenes gets them at half width, three at a third: no lone thumbnail in a row of four */
@media (min-width: 768px) {
	.model_bio_custom .subVideoArea:has(> .latestUpdateB:first-child:nth-last-child(-n+2)) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.model_bio_custom .subVideoArea:has(> .latestUpdateB:first-child:nth-last-child(3)) {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 767px) {
	.model_bio_custom .modelInfo {
		gap: 18px;
	}
	.model_bio_custom .modelBioPic {
		width: 200px;
	}
	.model_bio_custom .modelBioPic img {
		width: 200px !important;
	}
	.tsb_bio_panel {
		padding: 16px 18px;
	}
}


/* js gridFill: the card that would sit alone on a row of three */
.tsb_fill_hide {
	display: none !important;
}

/* no photo counts anywhere: the core's overlay on category/model-page thumbnails, and the date/count row
   under the cards on the Models page (every model has one scene, so the row said nothing) */
.videoPic .videoOverlay li:has(.fa-camera),
.modelBlock .videoInfo {
	display: none !important;
}

/* plan prices stay on one line in the two-column phone layout */
@media (max-width: 767px) {
	.tsb_plan_price {
		font-size: 22px;
		white-space: nowrap;
	}
}

/* 14. HEADING WEIGHT
   The headings use the Heading Font from Edit Design. With a sans typeface (Libre Franklin, the font of the MIA tour)
   they need weight, so every display heading is bold; a single-weight face such as Chonburi is simply synthesised. */
.tsb_sign_native, .tsb_hero_heading, .tsb_features strong, .title h1, .title h2, .tsb_grid_cta h3,
.tsb_trailer_copy h2, .tsb_plans h2, .tsb_plan_price, .tsb_network h2, .member_benefits h1, .tsb_gate h2,
.model_bio_custom .modelBioDetails h1, .tsb_about_txt h2, .tsb_about_banner h3 {
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* the core loads css/style.css a second time at the end of the body, so its 500 would win without !important */
.title h1, .title h2 {
	font-weight: 700 !important;
}