/*
 * ULTIMATUBE — dark skin.
 *
 * Keeps the original layout of style.css (header, nav bar, left aside, tabs,
 * grid, video page) and only restyles it: denser grid, flatter controls, in
 * the spirit of the big tube sites.
 * Loaded after style.css (see wpst_scripts() in functions.php).
 *
 * The palette is the one the site had with the "WP Dark Mode" plugin applied
 * to the original theme (theme main color #dc0707), measured and written out
 * here so every visitor gets it without the plugin. Deactivate the plugin:
 * running it on top of these colors shifts them again.
 */

:root {
	--ut-outer: #232526;     /* page background around the centered layout */
	--ut-page: #191a1b;      /* main column */
	--ut-header: #1f2121;
	--ut-nav: #282b2b;
	--ut-aside: #1f2121;     /* left aside column */
	--ut-panel: #232526;     /* video info panel, dropdowns */
	--ut-control: #2d3030;   /* tags, action bar, secondary buttons */
	--ut-control-hover: #373a3a;
	--ut-input-line: #373a3a;
	--ut-line: #3c3f40;

	--ut-text-strong: #f0ebe2;
	--ut-text: #cec7bc;
	--ut-text-2: #b7b0a2;
	--ut-text-3: #a19788;

	--ut-accent: #a60c0b;
	--ut-accent-hover: #bf1411;
	--ut-accent-line: #ab0c0b;
	--ut-accent-text: #ef3c39;
	--ut-good: #ceff55;

	--ut-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Noto Sans JP", Roboto, Arial, sans-serif;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
html {
	background-color: var(--ut-outer);
}

/* The body stays transparent: a body background would paint over the
   edge-to-edge header backgrounds (z-index: -1 pseudo-elements below). */
body {
	background-color: transparent;
	overflow-x: hidden;
}

body,
button,
input,
select,
textarea {
	font-family: var(--ut-font);
	color: var(--ut-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--ut-text);
}

a {
	color: var(--ut-accent-text);
}

a:hover {
	color: #f46a66;
}

hr {
	background-color: var(--ut-line);
}

pre,
mark,
ins {
	background: var(--ut-panel);
	color: var(--ut-text);
}

.site-content {
	background: var(--ut-aside);
}

.archive-content {
	background: var(--ut-page);
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
select,
textarea,
.wp-editor-container {
	background-color: var(--ut-page);
	border: 1px solid var(--ut-input-line);
	color: var(--ut-text);
	border-radius: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus {
	color: var(--ut-text);
	border-color: var(--ut-text-3) !important;
}

input::placeholder,
textarea::placeholder {
	color: var(--ut-text-3);
}

button,
.button,
.btn,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: var(--ut-accent) !important;
	color: var(--ut-text-strong);
	border: 0;
	border-radius: 3px;
	box-shadow: none;
	text-shadow: none;
}

button:hover,
.button:hover,
.btn:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background-color: var(--ut-accent-hover) !important;
	color: var(--ut-text-strong);
}

.button-grey {
	background: var(--ut-control) !important;
	color: var(--ut-text) !important;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
/* The header is a centered .row; its backgrounds are painted edge to edge
   by pseudo-elements so the bar spans the window like on the big sites. */
.site-branding {
	position: relative;
	background: var(--ut-header);
}

.site-branding::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -100vw;
	right: -100vw;
	z-index: -1;
	background: var(--ut-header);
}

.site-branding .logo a,
.site-title a,
.site-title a:hover {
	color: var(--ut-text-strong);
}

.site-title a {
	font-weight: 700;
	letter-spacing: -0.02em;
}

.site-title a i {
	color: var(--ut-accent-text);
}

p.site-description {
	color: var(--ut-text-3);
	font-size: 12px;
}

.header-search input.input-group-field {
	background: var(--ut-page);
	color: var(--ut-text);
	border: 1px solid var(--ut-input-line);
}

.header-search input.input-group-field:focus {
	color: var(--ut-text-strong);
}

/* Mobile header icons */
#menu-toggle i,
.header-search-mobile i {
	color: var(--ut-text-strong);
}

.menu-toggle-open,
#menu-toggle i.menu-toggle-open {
	color: var(--ut-accent-text);
}

/*--------------------------------------------------------------
# Navigation bar (desktop)
--------------------------------------------------------------*/
@media (min-width: 992px) {
	.site-branding {
		min-height: 64px;
	}

	.header .header-search {
		top: 10px !important;
		width: 44%;
	}

	.header-search input.input-group-field {
		height: 44px;
		font-size: 15px;
		padding: 0 14px;
		border-radius: 3px 0 0 3px;
	}

	.header-search input#searchsubmit {
		height: 44px;
		line-height: 44px;
		width: 56px;
		font-size: 18px;
		border-radius: 0 3px 3px 0;
	}

	#site-navigation {
		height: 40px;
		line-height: 40px;
		background: var(--ut-nav);
		border-bottom: 1px solid var(--ut-line);
	}

	#site-navigation::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: -1px;
		left: -100vw;
		right: -100vw;
		z-index: -1;
		background: var(--ut-nav);
		border-bottom: 1px solid var(--ut-line);
	}

	#site-navigation ul {
		background: transparent;
	}

	#site-navigation > ul > li > a {
		height: 40px;
		line-height: 40px;
		padding: 0 1.1em;
		font-size: 14px;
		font-weight: 700;
		color: var(--ut-text-strong);
		border-bottom: 3px solid transparent;
	}

	#site-navigation > ul > li:hover > a {
		color: var(--ut-text-strong);
		background: rgba(255, 255, 255, 0.05);
	}

	#site-navigation ul li.current-menu-item > a,
	#site-navigation ul li.current-menu-ancestor > a {
		color: var(--ut-text-strong);
		border-bottom-color: var(--ut-accent-line);
	}

	#site-navigation ul ul {
		top: 40px;
		background-color: var(--ut-panel);
		border: 1px solid var(--ut-line);
		border-radius: 0 0 3px 3px;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
		padding: 4px 0;
	}

	#site-navigation ul ul li a {
		color: var(--ut-text-2);
		font-size: 14px;
	}

	#site-navigation ul ul li a:hover {
		background: var(--ut-control);
		color: var(--ut-text-strong);
	}
}

/*--------------------------------------------------------------
# Navigation drawer + header (mobile & tablet, < 992px)
--------------------------------------------------------------*/
@media (max-width: 991.98px) {
	.site-branding {
		min-height: 60px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.site-branding .logo .site-title a {
		font-size: 24px !important;
	}

	.search-menu-mobile {
		top: 15px;
	}

	#menu-toggle i,
	.header-search-mobile i {
		font-size: 24px;
	}

	#site-navigation {
		top: 60px;
		background: var(--ut-panel);
		border-left: 1px solid var(--ut-line);
	}

	body.logged-in #site-navigation.admin-topbar-displayed {
		top: calc(60px + var(--wp-admin--admin-bar--height, 46px));
	}

	#site-navigation > ul {
		background: transparent;
	}

	#site-navigation > ul > li > a {
		color: var(--ut-text);
		padding: 0 20px;
		border-bottom: 1px solid var(--ut-line);
	}

	#site-navigation ul li.current-menu-item > a {
		color: var(--ut-accent-text);
	}

	#site-navigation ul ul {
		background: var(--ut-page);
	}

	#site-navigation ul ul li a {
		color: var(--ut-text-2);
	}

	.header-search {
		background: var(--ut-header);
		padding: 0 0 10px;
	}

	.header-search input.input-group-field {
		height: 44px;
		line-height: 44px;
		padding: 0 14px;
		border-radius: 3px 0 0 3px;
	}

	.header-search input[type="submit"] {
		height: 44px;
		font-size: 18px;
		border-radius: 0 3px 3px 0;
	}
}

/*--------------------------------------------------------------
# Left aside
--------------------------------------------------------------*/
.archive-aside a,
.aside-filters span a {
	color: var(--ut-text-2);
	padding: 5px 10px;
	border-radius: 3px;
}

.archive-aside a.active,
.archive-aside a:hover,
.aside-filters span:hover a {
	background: var(--ut-control);
	color: var(--ut-text-strong);
}

.archive-aside a.active {
	box-shadow: inset 3px 0 0 var(--ut-accent);
}

.aside-filters span a i,
.aside-filters span:hover a i {
	color: var(--ut-text-3);
}

.aside-filters span a.active i {
	color: var(--ut-accent-text);
}

.aside-block {
	border-bottom-color: var(--ut-line);
}

.archive-aside h3 {
	font-size: 14px;
	color: var(--ut-text);
}

.archive-aside a.show-all-link {
	color: var(--ut-accent-text);
}

/*--------------------------------------------------------------
# Headings, tabs, labels
--------------------------------------------------------------*/
.widget-title,
h1.widget-title,
h2.widget-title,
.under-video-block h2,
.page-title,
.page .entry-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--ut-text);
	border-color: var(--ut-line) !important;
}

.widget-title span {
	color: var(--ut-accent-text);
}

.search-video-number,
.homepage-description,
.archive-description p {
	color: var(--ut-text-3);
}

h1.homepage-title {
	color: var(--ut-text);
	font-size: 16px;
	margin-top: 30px;
}

/* Sort tabs (template-parts/content-filters.php): one dark bar with the
   orders side by side on every screen; the current one is filled.
   The old theme turned them into a white dropdown below 768px. */
.filters.sort-tabs {
	display: block;
	height: auto;
	margin: 0 0 16px;
	border: 0;
}

.filters.sort-tabs .filters-list {
	display: inline-flex !important;
	position: static;
	max-width: 100%;
	padding: 3px;
	gap: 3px;
	background: var(--ut-page);
	border: 1px solid var(--ut-line);
	border-radius: 4px;
	box-shadow: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.filters.sort-tabs .filters-list::-webkit-scrollbar {
	display: none;
}

.filters.sort-tabs .filters-list a,
.filters.sort-tabs .filters-list a:first-child {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	margin: 0;
	padding: 8px 14px;
	border: 0;
	border-radius: 3px;
	color: var(--ut-text-2);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
}

.filters.sort-tabs .filters-list a::before {
	content: none;
}

.filters.sort-tabs .filters-list a i {
	font-size: 13px;
	color: var(--ut-text-3);
}

.filters.sort-tabs .filters-list a:hover {
	background: var(--ut-control);
	color: var(--ut-text-strong);
}

.filters.sort-tabs .filters-list a.active,
.filters.sort-tabs .filters-list a.active:hover {
	background: var(--ut-accent);
	color: var(--ut-text-strong);
}

.filters.sort-tabs .filters-list a.active i {
	color: var(--ut-text-strong);
}

/* Category / tag / actor labels */
.label,
.label.secondary,
a.tag-cloud-link,
.widget_categories ul li a,
.template-actors li a {
	display: inline-block;
	background-color: var(--ut-control) !important;
	border: 0;
	border-radius: 3px;
	color: var(--ut-text-2);
	padding: 5px 10px;
	font-size: 13px;
}

.label i,
a.tag-cloud-link::before {
	color: var(--ut-text-3);
}

.label:hover,
.label:focus,
.label:hover i,
a.tag-cloud-link:hover,
.widget_categories ul li a:hover,
.template-actors li a:hover {
	background-color: var(--ut-control-hover) !important;
	color: var(--ut-text-strong);
}

.more-videos.label,
a.more-videos {
	background: transparent !important;
	color: var(--ut-text-2);
	padding: 4px 0;
}

.more-videos.label:hover {
	color: var(--ut-text-strong);
	background: transparent !important;
}

/*--------------------------------------------------------------
# Video grid
--------------------------------------------------------------*/
.videos-list {
	display: grid;
	grid-template-columns: repeat(var(--ut-cols, 5), minmax(0, 1fr));
	gap: 18px 10px;
	margin: 0;
	overflow: visible;
}

.videos-list > .clear {
	display: none;
}

.videos-list .thumb-block,
.video-list-content .thumb-block {
	float: none;
	display: block;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.video-list-content {
	min-height: 0;
}

/* Listing with the ad zone: the ad takes the top-right corner of the grid
   (two columns, two rows) and the thumbnails flow around it, as the original
   float layout did. */
.video-list-content.with-happy,
.video-widget-container.with-happy {
	display: grid;
	grid-template-columns: repeat(var(--ut-cols, 5), minmax(0, 1fr));
	gap: 18px 10px;
	grid-auto-flow: row dense;
	overflow: visible;
}

.video-list-content.with-happy > .videos-list,
.video-widget-container.with-happy > .videos-list {
	display: contents;
}

.video-list-content.with-happy > .video-archive-ad,
.video-widget-container.with-happy > .video-archive-ad {
	position: static;
	width: auto;
	grid-column: span 2 / -1;
	grid-row: 1 / span 2;
	align-self: stretch;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--ut-panel);
	border-radius: 0;
}

.under-video-block .video-archive-ad {
	background: var(--ut-panel);
}

/* Card */
.thumb-block > a,
.thumb-block > a:visited {
	display: block;
	color: var(--ut-text);
	outline: none;
}

.thumb-block .post-thumbnail {
	background-color: #000;
	overflow: hidden;
}

.thumb-block .post-thumbnail-container,
.thumb-block .post-thumbnail-container img {
	height: 100%;
}

.thumb-block .post-thumbnail img {
	display: block;
	height: 100%;
}

.no-thumb {
	background: var(--ut-control);
}

.no-thumb span {
	color: var(--ut-text-3);
}

span.duration,
.thumb-block span.duration {
	left: auto;
	right: 4px;
	bottom: 4px;
	z-index: 3;
	height: auto;
	padding: 1px 5px;
	line-height: 1.5;
	background: rgba(31, 33, 33, 0.9);
	color: var(--ut-text-strong);
	font-size: 12px;
	font-weight: 700;
	border-radius: 2px;
	font-variant-numeric: tabular-nums;
}

span.hd-video,
.thumb-block span.hd-video {
	top: 4px;
	right: 4px;
	z-index: 3;
	padding: 1px 4px;
	line-height: 1.5;
	background: var(--ut-accent) !important;
	color: var(--ut-text-strong);
	font-size: 11px;
	font-weight: 700;
	font-style: normal;
	border-radius: 2px;
}

.thumb-block .entry-header {
	height: auto;
	padding: 6px 0 0;
	color: var(--ut-text);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
}

.thumb-block .title,
.thumb-block span.title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	max-height: none;
	overflow: hidden;
	color: var(--ut-text);
}

.thumb-block:hover span.title,
.thumb-block:hover .title {
	color: var(--ut-accent-text);
}

.thumb-block .under-thumb {
	margin-top: 3px;
	line-height: 1.4;
}

.thumb-block .views {
	color: var(--ut-text-3);
	margin-right: 10px;
}

.thumb-block .rating {
	color: var(--ut-good);
}

.thumb-block .views i,
.thumb-block .rating i {
	font-size: 11px;
}

.categories-list .thumb-block .entry-header,
.actors-list .thumb-block .entry-header {
	text-align: left;
	font-weight: 700;
}

.categories-list .thumb-block:hover .entry-header span,
.categories-list .thumb-block:hover .entry-header .cat-title::before {
	color: var(--ut-accent-text);
}

/*--------------------------------------------------------------
# FANZA placements (inc/fanza-placements.php + snippet #36)
--------------------------------------------------------------*/
/* "PR" mark: every FANZA block is labelled as an ad. */
.fanza-pr,
.fanza-native-block h2::before,
.fanza-sidebar-heading:not(:has(.fanza-pr))::before {
	display: inline-block;
	padding: 0 4px;
	border: 1px solid var(--ut-text-3);
	border-radius: 2px;
	color: var(--ut-text-3);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.5;
	vertical-align: 2px;
}

.fanza-native-block h2::before,
.fanza-sidebar-heading:not(:has(.fanza-pr))::before {
	content: "PR";
	margin-right: 6px;
}

.fanza-thumb-block .entry-header {
	height: auto;
}

.fanza-thumb-block .fanza-post-thumbnail::after {
	content: "PR";
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 3;
	padding: 0 4px;
	background: rgba(0, 0, 0, 0.7);
	color: var(--ut-text);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.6;
	border-radius: 2px;
}

.fanza-thumb-block .fanza-price-was {
	color: var(--ut-text-3);
}

/* 1. CTA closing the video panel, phones only: a cover across the card,
   the title under it, then price beside a text link. PC skips it; the
   doujin grid above the related videos already covers that. */
.fanza-cta {
	padding: 0 16px 18px;
}

@media (min-width: 576px) {
	.fanza-cta {
		display: none;
	}
}

.fanza-cta__link,
.fanza-cta__link:visited {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"eyebrow eyebrow"
		"cover   cover"
		"caption caption"
		"price   more";
	gap: 10px 0;
	padding: 10px 12px 12px;
	background: var(--ut-page);
	border: 1px solid var(--ut-line);
	border-radius: 4px;
	color: var(--ut-text);
	text-decoration: none;
}

.fanza-cta__link:hover {
	border-color: var(--ut-accent-line);
	color: var(--ut-text);
}

.fanza-cta__eyebrow {
	grid-area: eyebrow;
	min-width: 0;
	overflow: hidden;
	color: var(--ut-text-2);
	font-size: 12px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* FANZA covers are landscape (about 7:5); this one runs to the card's edges */
.fanza-cta__cover {
	grid-area: cover;
	position: relative;
	margin: 0 -12px;
	aspect-ratio: 7 / 5;
	background: #000;
	overflow: hidden;
}

.fanza-cta__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fanza-cta__off {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 1px 6px;
	background: var(--ut-accent);
	color: var(--ut-text-strong);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	border-radius: 2px;
}

.fanza-cta__caption {
	grid-area: caption;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 2px;
}

.fanza-cta__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: var(--ut-text-strong);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
}

.fanza-cta__link:hover .fanza-cta__title {
	color: var(--ut-accent-text);
}

.fanza-cta__meta {
	overflow: hidden;
	color: var(--ut-text-2);
	font-size: 13px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* price and link share one ruled row */
.fanza-cta__price,
.fanza-cta__more {
	align-self: stretch;
	padding-top: 12px;
	border-top: 1px solid var(--ut-line);
}

.fanza-cta__price {
	grid-area: price;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	align-content: center;
	gap: 0 8px;
	line-height: 1.2;
}

.fanza-cta__price b {
	color: var(--ut-text-strong);
	font-size: 22px;
	white-space: nowrap;
}

.fanza-cta__price s {
	color: var(--ut-text-3);
	font-size: 13px;
	white-space: nowrap;
}

/* A text link rather than a filled button: the cover does the selling */
.fanza-cta__more {
	grid-area: more;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	padding-left: 12px;
	color: var(--ut-accent-text);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.fanza-cta__more small {
	color: var(--ut-text-3);
	font-size: 12px;
	font-weight: 400;
}

.fanza-cta__more .fa {
	margin-left: 2px;
	font-size: 18px;
}

.fanza-cta__link:hover .fanza-cta__more {
	color: var(--ut-text-strong);
}

@media (max-width: 359.98px) {
	.fanza-cta__more small {
		display: none;
	}
}

/* 2. "〇〇の同人作品": the PR label of the heading covers the whole
   section, so the cards drop their own PR mark */
.fanza-native-block .fanza-thumb-block .fanza-post-thumbnail::after,
.fanza-row .fanza-thumb-block .fanza-post-thumbnail::after {
	content: none;
}

/* No zoom on hover, like the site's own video thumbnails (the snippet's
   inline CSS comes later, hence the extra body) */
body .fanza-thumb-block:hover .fanza-post-thumbnail img {
	transform: none;
}

/* 4. Row above archive thumbnails */
.fanza-row {
	margin: 0 0 18px;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--ut-line);
}

.fanza-row__title {
	margin: 0 0 10px;
	color: var(--ut-text);
	font-size: 15px;
	font-weight: 700;
}

/* 6. Desktop sidebar */
.fanza-sidebar-container .fanza-sidebar-heading {
	color: var(--ut-text-2);
	font-size: 13px;
}

.fanza-sidebar-card,
.fanza-sidebar-card:visited {
	color: var(--ut-text);
}

.fanza-sidebar-card:hover .fanza-sidebar-title {
	color: var(--ut-accent-text);
	text-decoration: none;
}

.fanza-sidebar-price s {
	color: var(--ut-text-3);
}

@media (max-width: 575.98px) {
	/* FANZA blocks: two per row whatever the site setting, smaller titles */
	.single .fanza-native-block .fanza-videos-list,
	.fanza-row .fanza-videos-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px 10px;
	}

	/* titles as the site's own two-per-row cards have them (temp-style.php) */
	body .single .fanza-native-block .fanza-videos-list .entry-header,
	body .fanza-row .fanza-videos-list .entry-header {
		font-size: 14px;
	}
}

/*--------------------------------------------------------------
# Pagination
--------------------------------------------------------------*/
.pagination ul li,
.mobile-pagination ul li {
	margin: 3px;
}

.pagination ul li a,
.mobile-pagination ul li span,
.mobile-pagination ul li a {
	min-width: 40px;
	padding: 10px 14px;
	text-align: center;
	background-color: var(--ut-control) !important;
	border-color: var(--ut-control) !important;
	color: var(--ut-text-2);
	border-radius: 3px;
}

.pagination ul li a:hover {
	background-color: var(--ut-control-hover) !important;
	color: var(--ut-text-strong);
}

.pagination ul li a.current,
.mobile-pagination .pagination-nav span,
.mobile-pagination .pagination-nav a {
	background-color: var(--ut-accent) !important;
	border-color: var(--ut-accent) !important;
	color: var(--ut-text-strong);
}

/*--------------------------------------------------------------
# Video page
--------------------------------------------------------------*/
.video-player-area {
	background: var(--ut-panel);
}

.video-player-area h1,
.video-player-area .video-infos h1 {
	font-size: 20px;
	line-height: 1.4;
	color: var(--ut-text);
}

.video-player-area .video-infos {
	padding: 16px 20px 12px;
}

.video-player-area .video-infos .views {
	color: var(--ut-text-3);
	font-size: 13px;
}

/* Rating and share both switched off: no empty bar */
.video-actions:not(:has(*)) {
	display: none;
}

.video-actions {
	background: var(--ut-panel);
	border-top: 1px solid var(--ut-line);
	border-bottom: 1px solid var(--ut-line);
	align-items: center;
}

#video-rate {
	margin: 10px 20px;
}

#video-links {
	margin: 0 20px;
}

#video-links a,
#video-links a:visited {
	color: var(--ut-text-2);
	font-weight: 700;
}

#video-links a:hover,
#video-links a:hover i,
a#show-sharing-buttons.active,
a#show-sharing-buttons.active i {
	color: var(--ut-text-strong);
}

#video-links a i {
	color: var(--ut-text-3);
}

.post-like a {
	background: var(--ut-control);
	color: var(--ut-text);
	border-radius: 3px;
}

.post-like a:hover,
.post-like a:hover i {
	background: var(--ut-control-hover);
	color: var(--ut-text-strong);
}

span.post-like,
#video-buttons i,
.show-more i,
.grey-link,
.like #more,
.dislike #less {
	color: var(--ut-text-2);
}

.rating-likes-bar {
	color: var(--ut-text-3);
}

.rating-bar {
	background: var(--ut-outer);
	height: 4px;
}

.rating-bar-meter {
	background-color: var(--ut-accent) !important;
	height: 4px;
}

.video-share {
	border-bottom-color: var(--ut-line);
}

.video-share span.title {
	color: var(--ut-text-2);
}

.video-share .video-share-url #clickme,
#clickme i {
	color: var(--ut-accent-text);
}

/* Terms under the video: one labelled row per kind, characters first.
   Two classes: the site's Additional CSS sets .video-tags to flex. */
.video-tags.video-terms {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 16px 20px 14px;
	overflow: visible;
}

.video-terms__row {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	align-items: start;
	gap: 0 8px;
}

.video-terms dt {
	color: var(--ut-text-3);
	font-size: 12px;
	font-weight: 400;
	line-height: 29px; /* one chip's height: the label lines up with the first row */
	white-space: nowrap;
}

.video-terms dd {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

.video-terms .label {
	margin: 0;
	padding: 4px 10px;
	color: var(--ut-text);
	font-size: 13px;
	line-height: 21px;
}

.video-terms__row--character .label {
	color: var(--ut-text-strong);
	font-weight: 700;
}

.video-description {
	color: var(--ut-text-2);
}

.video-description p {
	font-size: 14px;
	line-height: 1.8;
	text-align: left;
}

.morelink,
.morelink:visited {
	color: var(--ut-text-2);
}

.under-video-block {
	border-bottom-color: var(--ut-line);
	padding-top: 24px;
}

.under-video-block h2 {
	margin-bottom: 12px;
}

/*--------------------------------------------------------------
# Video page: one panel, then sections that all look alike
#   動画パネル（動画・タイトル・タグ・説明・おすすめ1作品）
#   → 〇〇の同人作品（PR） → 関連動画 → 他サイトの新着
--------------------------------------------------------------*/
.single .under-video-block {
	position: relative;
	margin: 0;
	padding: 28px 30px 24px;
	border-top: 1px solid var(--ut-line);
	border-bottom: 0;
}

.single .under-video-block h2,
.single .related-title {
	display: flex;
	align-items: center;
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ut-text);
}

/* A video widget given its own title in the admin replaces this heading */
.single .related-block:has(.widget_videos_block > .widget-title) > .related-title {
	display: none;
}

/* "もっと見る" sits on the heading line of the related videos */
.single .related-block .more-videos,
.single .related-block a.more-videos.label {
	position: absolute;
	top: 30px;
	right: 30px;
	float: none;
	margin: 0;
}

/* Partner sites' RSS cards (snippet #40) sit inside the related block but
   read as a section of their own: same rule, heading, grid and cards as
   the doujin works and related videos */
.single .related-block .widget_block:has(.rss-image-grid) {
	margin: 28px -30px 0;
	padding: 28px 30px 0;
	border-top: 1px solid var(--ut-line);
}

.single .related-block .widget_block:has(.rss-image-grid)::before {
	content: "他サイトの新着";
	display: block;
	margin: 0 0 14px;
	color: var(--ut-text);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.under-video-block .rss-image-grid {
	grid-template-columns: repeat(var(--ut-cols, 5), minmax(0, 1fr));
	gap: 18px 10px;
}

/* the 6th card would sit alone on a second row */
.under-video-block .rss-card:nth-child(n + 6) {
	display: none;
}

.under-video-block .rss-thumb {
	background: var(--ut-control);
}

.under-video-block .rss-title {
	margin-top: 0;
	padding-top: 6px;
	color: var(--ut-text);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
}

.under-video-block .rss-card:hover .rss-title {
	color: var(--ut-accent-text);
}

/* "オススメ" on every card says nothing */
.under-video-block .rss-recommend-label,
.under-video-block .rss-meta {
	display: none;
}

/* One badge style on every card: HD, PR, %OFF */
body .fanza-thumb-block .fanza-off {
	top: 4px;
	left: 4px;
	padding: 1px 4px;
	background: var(--ut-accent);
	color: var(--ut-text-strong);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	border-radius: 2px;
}

body .fanza-thumb-block .fanza-off small {
	margin: 0;
	font-size: inherit;
}

.fanza-thumb-block .fanza-post-thumbnail::after {
	padding: 1px 4px;
	background: rgba(31, 33, 33, 0.9);
	color: var(--ut-text-strong);
	font-size: 11px;
	line-height: 1.5;
}

/* Price in the place and size of the views/rating line of a video card */
body .fanza-thumb-block .fanza-price {
	margin-top: 3px;
	gap: 6px;
	line-height: 1.4;
}

body .fanza-thumb-block .fanza-price-now {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
}

body .fanza-thumb-block .fanza-price-now .fanza-yen {
	margin-left: 0;
	font-size: 12px;
}

body .fanza-thumb-block .fanza-price-was {
	font-size: 12px;
}

/* Prices in the work's own color; red stays for the discount badge only */
body .fanza-thumb-block .fanza-price-now,
body .fanza-sidebar-price b {
	color: var(--ut-text-strong);
}

/* The CTA closes the video panel */
.fanza-cta {
	padding: 4px 20px 20px;
}

@media (max-width: 575.98px) {
	.single .under-video-block {
		padding: 22px 16px 20px;
	}

	.single .under-video-block h2,
	.single .related-title {
		font-size: 17px;
	}

	.single .related-block .more-videos,
	.single .related-block a.more-videos.label {
		top: 22px;
		right: 16px;
	}

	.single .related-block .widget_block:has(.rss-image-grid) {
		margin: 24px -16px 0;
		padding: 22px 16px 0;
	}

	.single .related-block .widget_block:has(.rss-image-grid)::before {
		font-size: 17px;
	}

	.fanza-cta {
		padding: 4px 16px 18px;
	}
}

.under-video-block .show-more-related a.button {
	background-color: var(--ut-control) !important;
	color: var(--ut-text);
	padding: 10px 24px;
}

.under-video-block .show-more-related a.button:hover {
	background-color: var(--ut-control-hover) !important;
}

#video-tabs button.tab-link {
	border-bottom-color: var(--ut-line) !important;
	color: var(--ut-text-2);
}

#video-tabs button.tab-link.active {
	border-bottom-color: var(--ut-accent-line) !important;
	color: var(--ut-text-strong);
}

/* Video player (shape, portrait videos, controls): assets/stylesheets/player.css */

/* Ad zones */
.happy-header-mobile,
.happy-footer,
.happy-footer-mobile,
.happy-related-videos-mobile {
	background: var(--ut-page);
}

.video-archive-ad {
	background: var(--ut-panel);
	border-radius: 0;
}

/*--------------------------------------------------------------
# Pages, comments, modal, misc
--------------------------------------------------------------*/
.entry-content h1,
.custom-content h1,
.title-block h1.entry-title {
	color: var(--ut-text);
	border-bottom-color: var(--ut-line);
}

.title-block {
	background: var(--ut-panel);
}

#breadcrumbs,
#breadcrumbs li {
	color: var(--ut-text-3);
}

#breadcrumbs li.item-current .bread-current {
	color: var(--ut-text);
}

.tags-letter-block .tag-items .tag-item a {
	color: var(--ut-text-2);
}

.tags-letter-block .tag-items .tag-item a:hover {
	color: var(--ut-accent-text);
}

#comments,
#comments .comment-content {
	color: var(--ut-text-2);
}

#wpst-user-modal .modal-content {
	background: var(--ut-panel);
	color: var(--ut-text);
}

#wpst-user-modal h3,
#wpst-user-modal a.close {
	color: var(--ut-text);
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer {
	margin-top: 40px;
	padding: 0;
	background: var(--ut-header);
	border-top: 1px solid var(--ut-line);
	color: var(--ut-text-2);
	font-size: 13px;
	line-height: 1.7;
}

.site-footer__inner {
	max-width: 1350px;
	margin: 0 auto;
	padding: 32px 30px 20px;
}

.site-footer__widgets {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--ut-line);
}

.site-footer__widgets--single {
	grid-template-columns: 1fr;
}

.site-footer .widget-title,
.footer-widget-column .widget-title,
.footer-widget-column .widgettitle {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ut-text);
}

.footer-widget-column ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-widget-column ul li {
	padding: 3px 0;
}

.footer-widget-column a,
.footer-menu a,
.site-info a {
	color: var(--ut-text-2);
}

.footer-widget-column a:hover,
.footer-menu a:hover,
.site-info a:hover {
	color: var(--ut-text-strong);
}

.site-footer__main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 30px;
	padding-bottom: 20px;
}

.site-footer__brand {
	min-width: 0;
}

.site-footer__brand .custom-logo {
	max-height: 32px;
	width: auto;
}

.footer-logo-text {
	font-size: 20px;
	font-weight: 700;
	color: var(--ut-text-strong);
}

.footer-logo-text:hover {
	color: var(--ut-accent-text);
}

.footer-tagline {
	margin: 2px 0 0;
	color: var(--ut-text-3);
	font-size: 12px;
}

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-menu li {
	margin: 0;
}

.site-footer__bottom {
	padding-top: 16px;
	border-top: 1px solid var(--ut-line);
	text-align: center;
}

.site-footer .site-info {
	margin: 0;
	font-size: 12px;
	color: var(--ut-text-3);
}

.back-to-top {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--ut-control);
	border-radius: 3px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
}

.back-to-top:hover {
	background: var(--ut-accent);
}

.back-to-top__arrow {
	display: block;
	width: 10px;
	height: 10px;
	margin-top: 4px;
	border-top: 2px solid var(--ut-text-strong);
	border-left: 2px solid var(--ut-text-strong);
	transform: rotate(45deg);
}

/*--------------------------------------------------------------
# Responsive grid (same breakpoints as style.css)
--------------------------------------------------------------*/
/* Video page grids end on a full row: a short last row (its first card,
   counted from the second row, has fewer than a row's worth left) is hidden */
@media (min-width: 1200px) {
	.single .under-video-block .videos-list > .thumb-block:nth-child(5n + 6):nth-last-child(-n + 4),
	.single .under-video-block .videos-list > .thumb-block:nth-child(5n + 6):nth-last-child(-n + 4) ~ .thumb-block {
		display: none;
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.single .under-video-block .videos-list > .thumb-block:nth-child(4n + 5):nth-last-child(-n + 3),
	.single .under-video-block .videos-list > .thumb-block:nth-child(4n + 5):nth-last-child(-n + 3) ~ .thumb-block {
		display: none;
	}
}

@media (min-width: 576px) and (max-width: 991.98px) {
	.single .under-video-block .videos-list > .thumb-block:nth-child(3n + 4):nth-last-child(-n + 2),
	.single .under-video-block .videos-list > .thumb-block:nth-child(3n + 4):nth-last-child(-n + 2) ~ .thumb-block {
		display: none;
	}
}

@media (max-width: 575.98px) {
	.single .fanza-native-block .videos-list > .thumb-block:nth-child(2n + 3):last-child {
		display: none;
	}
}
@media (max-width: 1199.98px) {
	.videos-list,
	.video-list-content.with-happy,
	.video-widget-container.with-happy {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* partner cards: one full row */
	.under-video-block .rss-image-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.under-video-block .rss-card:nth-child(n + 5) {
		display: none;
	}
}

@media (max-width: 991.98px) {
	.videos-list,
	.video-list-content.with-happy,
	.video-widget-container.with-happy {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* partner cards: two full rows */
	.under-video-block .rss-image-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.under-video-block .rss-card:nth-child(-n + 6) {
		display: block;
	}

	/* No room for the ad corner: it goes under the thumbnails. */
	.video-list-content.with-happy > .video-archive-ad,
	.video-widget-container.with-happy > .video-archive-ad {
		grid-column: 1 / -1;
		grid-row: auto;
		padding: 10px 0;
	}

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

@media (max-width: 575.98px) {
	.videos-list,
	.video-list-content.with-happy,
	.video-widget-container.with-happy {
		grid-template-columns: repeat(var(--ut-cols-mobile, 2), minmax(0, 1fr));
		gap: 22px 10px;
	}

	/* partner cards: two per row like the doujin works, two full rows */
	.under-video-block .rss-image-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px 10px;
	}

	.under-video-block .rss-card:nth-child(n + 5) {
		display: none;
	}

	.under-video-block .rss-title {
		padding-top: 8px;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.5;
	}

	/* Phones: titles as large as the original theme had them, or larger
	   (temp-style.php trims this for the two-per-row option). */
	.thumb-block .entry-header {
		padding-top: 8px;
		font-size: 15px;
		font-weight: 700;
		line-height: 1.5;
	}

	.thumb-block .under-thumb {
		margin-top: 4px;
	}

	.thumb-block .views,
	.thumb-block .rating {
		font-size: 13px;
	}

	/* Phones: the sort tabs share the width equally */
	.filters.sort-tabs .filters-list {
		display: flex !important;
		width: 100%;
	}

	/* icon above the label so they fit even on a 320px screen */
	.filters.sort-tabs .filters-list a,
	.filters.sort-tabs .filters-list a:first-child {
		flex: 1 1 0;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		min-width: 0;
		padding: 8px 2px 7px;
		font-size: 12px;
	}

	.filters.sort-tabs .filters-list a i {
		font-size: 15px;
	}

	.widget-title,
	h1.widget-title,
	h2.widget-title,
	.under-video-block h2 {
		font-size: 17px;
	}

	.video-player-area h1,
	.video-player-area .video-infos h1 {
		margin-bottom: 8px;
		font-size: 18px;
		line-height: 1.5;
	}

	.video-player-area .video-infos {
		padding: 16px 16px 14px;
	}

	.video-player-area .video-infos .views {
		font-size: 13px;
	}

	.video-tags.video-terms {
		gap: 10px;
		padding: 16px 16px 14px;
	}

	.video-terms__row {
		grid-template-columns: 76px minmax(0, 1fr);
	}

	.video-terms dt {
		line-height: 33px;
	}

	.video-terms dd {
		gap: 8px;
	}

	/* larger tap targets */
	.video-terms .label {
		padding: 6px 12px;
		font-size: 14px;
	}

	.video-description {
		padding: 0 16px 18px;
	}

	.video-description p {
		font-size: 15px;
	}

	.site-footer__inner {
		padding: 28px 16px 16px;
	}

	.site-footer__widgets {
		grid-template-columns: 1fr;
	}

	.site-footer__main {
		flex-direction: column;
		text-align: center;
	}

	.footer-menu {
		justify-content: center;
	}
}