/* =============================================================================
 * Kinoscope redesign v2 — scoped under body.ks-v2 so nothing leaks into main.
 * Inspired by the design mockups dated 2026-05-16.
 *
 * Touches ONLY:
 *   - global tokens
 *   - the new single-row header (.ks-v2-header) + mobile drawer
 *   - single-video page typography polish
 *   - paywall overlay (.ks-v2-paywall)
 *   - taxonomy/archive listing
 *   - WooCommerce account dashboard (CSS-only refinements)
 *
 * Explicitly DOES NOT touch:
 *   - the homepage body (channel sections)
 *   - any footer
 *   - terms & conditions page
 * ============================================================================= */

/* Footer columns: keep the gap between the page's last content and the
 * footer logo at ~60px on desktop / ~30px on mobile. The inline
 * `padding-top: 25px` on .ks-v2-footer-cols already lands ~60px on
 * desktop (combined with the 11px collapsed margin and the logo's own
 * top offset). On mobile we need ~30px less internal padding, since
 * the logo's offset and collapsed margin are slightly larger here. */
@media (max-width: 767px) {
	.ks-v2-footer-cols {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}
}

/* Smooth anchor scroll for ks-v2 pages (single-video pill tap-to-scroll). */
html:has(body.ks-v2) {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html:has(body.ks-v2) {
		scroll-behavior: auto;
	}
}

body.ks-v2 {
	--ksv2-font: "Inter", "Helvetica Neue", system-ui, -apple-system, sans-serif;
	--ksv2-bg: #000;
	--ksv2-text: #fff;
	--ksv2-text-dim: rgba(255, 255, 255, 0.6);
	--ksv2-text-dimmer: rgba(255, 255, 255, 0.4);
	--ksv2-divider: rgba(255, 255, 255, 0.10);
	--ksv2-divider-soft: rgba(255, 255, 255, 0.06);
	--ksv2-accent: oklch(0.82 0.07 75);
	--ksv2-header-h: 91px;
}

/* WordPress admin-bar height — exposed as a CSS var so sticky / fixed
 * elements (header, mobile drawer) can offset themselves cleanly. The
 * admin bar is `position: fixed` desktop / `position: absolute` mobile
 * and uses 32px / 46px respectively. */
body.admin-bar { --wp-admin--admin-bar--height: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar { --wp-admin--admin-bar--height: 46px; }
}

/* ===========================================================================
 * Hide the legacy two-row header chrome — our v2 header takes its place.
 * The legacy markup still renders because other JS scans it (the login
 * modal is included inside header-v2.php now); we just visually hide the
 * empty ts_userrow/ts_menubar wrappers.
 * ============================================================================= */
body.ks-v2 #ts_userrow,
body.ks-v2 #ts_menubar,
body.ks-v2 .ts-page-loading,
body.ks-v2 .ts-sticky-menu {
	display: none !important;
}

/* The login modal lives in the host wrapper, hidden by Bootstrap's .modal
 * until .ts-show-login-modal triggers it. Keep host invisible until then. */
body.ks-v2 .ks-v2-login-modal-host { display: contents; }

/* ===========================================================================
 * V2 HEADER (single row, sticky, dark)
 * ============================================================================= */

body.ks-v2 {
	background: var(--ksv2-bg);
	color: var(--ksv2-text);
	font-family: var(--ksv2-font);
	-webkit-font-smoothing: antialiased;
}

.ks-v2-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: 50;
	background: #000;
	border-bottom: 1px solid var(--ksv2-divider);
}
/* Align the header content with the body container (.container is
 * max-width 1350 + 20px padding → content edge at x=45 on a 1440vw,
 * x=20 on viewports ≤ 1350vw, etc). The black bar itself remains
 * edge-to-edge via .ks-v2-header. */
.ks-v2-header-inner {
	height: var(--ksv2-header-h);
	max-width: 1350px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	gap: 40px;
}

/* Logo: clamp existing kinoscope png inside the header height. The img inline
 * style ("width: 125px; 64px;") sets width — we override height to fit row. */
.ks-v2-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}
.ks-v2-logo img {
	/* Existing kinoscope PNG (per spec, keep our logo). 90px wide (+50%
	 * from 60) — matches the old design's logo presence relative to the
	 * 15px Raleway nav alongside it. */
	width: 90px !important;
	height: auto !important;
	display: block;
}

/* Nav — match the OLD/original site exactly:
 *   font: 15px Raleway 400, letter-spacing 0.75px, uppercase
 *   padding: 20px 18px
 * The nav stretches to the full header height (align-self: stretch) so
 * each <a>'s bottom edge meets the mega menu's top edge — no gap for the
 * cursor to fall into when moving toward the dropdown. */
.ks-v2-nav { display: flex; align-self: stretch; padding-left: 24px; }
.ks-v2-nav ul {
	display: flex;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: stretch;
}
.ks-v2-nav-item { position: static; display: flex; align-items: stretch; }
.ks-v2-nav-item > a,
.ks-v2-nav-item > a:hover,
.ks-v2-nav-item > a:focus,
.ks-v2-nav-item > a:active {
	display: flex;
	align-items: center;
	padding: 20px 18px;
	font-family: "Raleway", "Helvetica Neue", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.75px;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
	/* Force no underline through every link state — the legacy theme's
	 * global `a:hover { text-decoration: underline }` was bleeding in. */
	text-decoration: none !important;
	transition: opacity 1s ease, color 0.15s;
	position: relative;
}
.ks-v2-nav-item > a:hover,
.ks-v2-nav-item.has-mega:hover > a,
.ks-v2-nav-item.is-current > a { color: var(--ksv2-text); }
/* Mouse-over dim — 80% opacity over 1s for both the main nav items
 * and the mega's "Browse all" link. */
.ks-v2-nav-item > a:hover,
.ks-v2-nav-item.has-mega:hover > a { opacity: 0.8; }
/* No underline on the four main nav items — neither on hover nor on the
 * active-page item. Color change alone signals the hover state. */

/* Mega-menu — full-width drop strip. Positioning context lives on the
 * full-width .ks-v2-header (not .ks-v2-header-inner, which is now
 * constrained to the body container width) so the mega panel itself
 * still spans edge-to-edge while its inner content aligns with the
 * body container. */
.ks-v2-header { position: relative; }
.ks-v2-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #000;
	border-top: 1px solid var(--ksv2-divider);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-14px);
	/* SHOW (rule below): 220ms slide-down + fade — the transition
	 * re-fires every time a different nav item is hovered, which is
	 * the visual confirmation the dropdown content has actually
	 * changed (otherwise all megas look near-identical and the
	 * content swap feels instant / unclear).
	 * HIDE: 200ms delay so the cursor can bridge the nav-item↔mega
	 * gap without the menu collapsing. */
	transition:
		opacity 0.15s ease 0.2s,
		transform 0.15s ease 0.2s,
		visibility 0s 0.35s;
	visibility: hidden;
	padding: 24px 0 30px;
	box-shadow: 0 12px 40px rgba(0,0,0,0.5);
	z-index: 49;
}
/* Invisible hover-bridge: extends the nav item's hover hitbox down
 * by 8px so cursor never enters a non-hovered area while moving
 * toward the mega. */
.ks-v2-nav-item.has-mega > a::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -8px;
	height: 8px;
}
.ks-v2-nav-item.has-mega:hover .ks-v2-mega,
.ks-v2-mega:hover {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
	visibility: visible;
	/* Show transition: 220ms slide-in + fade. Slightly slower than
	 * hide so the entrance is noticeable when switching tabs. */
	transition:
		opacity 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
		transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
		visibility 0s;
}
.ks-v2-mega-inner { max-width: 1350px; margin: 0 auto; padding: 0 20px; }
.ks-v2-mega-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 18px;
}
.ks-v2-mega-kicker {
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ksv2-text-dimmer);
	font-weight: 500;
}
.ks-v2-mega-all {
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ksv2-text);
	text-decoration: none;
	font-weight: 500;
	transition: opacity 0.2s ease;
}
.ks-v2-mega-all:hover { opacity: 0.65; }
.ks-v2-mega-all__arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}
.ks-v2-mega-all:hover .ks-v2-mega-all__arrow { transform: translateX(3px); }
/* Parent theme forces ul { display:flex; gap:0 } — override with
 * specificity + !important so the grid + 20px gap actually apply. */
body.ks-v2 ul.ks-v2-mega-grid {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr) !important;
	gap: 20px !important;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ks-v2-mega-grid a { display: block; text-decoration: none; color: var(--ksv2-text); }
/* Hover behavior: "Scrim lift · siblings dim" (mockup, transition 01).
 * At rest a 42% black scrim sits over every still. On hover of one card,
 * the scrim lifts off the focused thumb and the other list items dim to
 * 40% opacity — the row enters single-target focus mode. 320ms ease-out
 * (midpoint of the 260–480ms spec). No zoom. */
.ks-v2-mega-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #1a1a1a;
	overflow: hidden;
	margin-bottom: 10px;
}
.ks-v2-mega-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ks-v2-mega-thumb::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.42);
	opacity: 1;
	transition: opacity 320ms ease-out;
	pointer-events: none;
}
body.ks-v2 ul.ks-v2-mega-grid > li {
	transition: opacity 320ms ease-out;
}
body.ks-v2 ul.ks-v2-mega-grid:hover > li { opacity: 0.4; }
body.ks-v2 ul.ks-v2-mega-grid:hover > li:hover { opacity: 1; }
body.ks-v2 ul.ks-v2-mega-grid > li:hover .ks-v2-mega-thumb::after { opacity: 0; }
.ks-v2-mega-title { transition: color 0.2s; }
.ks-v2-mega-title {
	font-size: 12px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--ksv2-text);
}

/* Right-side actions — Log In + Start Free Trial styled like the OLD site
 * (14px Raleway, 12px 14px padding identical on both, so the two buttons
 * occupy the exact same box; Login is transparent-on-black, Free Trial is
 * white-on-black). Both items share the same vertical plane this way. */
.ks-v2-header-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 14px;
}
.ks-v2-action {
	font-family: "Raleway", "Helvetica Neue", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	cursor: pointer;
	border: none;
	background: transparent;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 1;
	transition: color 0.15s, background 0.15s;
}
.ks-v2-action:hover { color: var(--ksv2-text); }
.ks-v2-search { padding: 12px 8px; }
.ks-v2-search svg { width: 22px; height: 22px; }
/* LOG IN — text-link styling with an animated underline on hover.
 * No border, no fill, no sweep — the line grows from left to right
 * under the label on hover (scaleX 0→1 via a left-anchored pseudo). */
.ks-v2-login {
	position: relative;
	padding: 12px 14px;
	background: transparent;
	color: #fff !important;
	white-space: nowrap;
	box-shadow: none;
}
.ks-v2-login::after {
	content: '';
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 8px;
	height: 1px;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ks-v2-login:hover::after { transform: scaleX(1); }

/* START FREE TRIAL — independent of LOG IN.
 *   default : white bg, black text, white border (invisible against bg)
 *   hover   : black bg, white text, white border (now visible — black-sweep wipes in)
 * Size locked via inset box-shadow border (same trick as LOG IN). */
.ks-v2-cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: #fff;
	color: #000 !important;
	padding: 12px 14px;
	white-space: nowrap;
	/* WooCommerce Quick Checkout's `.quick-checkout-button` adds a
	 * 15px bottom margin that was shifting the button up 7.5px relative
	 * to the Log In link in the flex row; zero it out. */
	margin: 0 !important;
	transition: color 0.25s ease;
}
/* Sweep accent — black diagonal that wipes across the button on hover. */
.ks-v2-cta::before {
	content: '';
	position: absolute;
	top: -10%;
	bottom: -10%;
	left: 0;
	width: 130%;
	background: #000;
	transform: translateX(-110%) skewX(-18deg);
	transform-origin: top left;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: -1;
}
.ks-v2-cta:hover::before { transform: translateX(-15%) skewX(-18deg); }
.ks-v2-cta:hover { color: #fff !important; }
/* 1px white border via a pinned ::after pseudo. Stacked above the
 * sweep pseudo (z-index:2) so the border stays visible at every
 * point of the animation. pointer-events:none keeps the button
 * interactive. */
.ks-v2-cta::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid #fff;
	pointer-events: none;
	z-index: 2;
}

/* Logged-in user avatar + dropdown.
 * Avatar = 32px circle, dark fill + 1px white ring, two-char initials.
 * Replaces the full-name text; matches `~/Desktop/Desktop _ at rest.html`. */
.ks-v2-user { position: relative; }
.ks-v2-user-avatar {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #1a1a1a;
	border: 1px solid rgba(255, 255, 255, 0.6);
	color: #fff !important;
	font-family: var(--ksv2-font);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-decoration: none !important;
	text-transform: uppercase;
	line-height: 1;
	padding: 0 !important;
	position: relative;
	transition: border-color 0.2s ease;
}
/* Invisible left-side hit area — extends the avatar's click + hover
 * zone leftward AND down past the menu gap so the cursor can track
 * diagonally into the menu without losing :hover. Width is capped at
 * 12px so it stays inside the 14px flex-gap between the search icon
 * and the avatar — the search icon's own click area remains untouched. */
.ks-v2-user-avatar::before {
	content: '';
	position: absolute;
	top: 0;
	right: 100%;
	width: 12px;
	height: calc(100% + 14px);
}
.ks-v2-user:hover .ks-v2-user-avatar,
.ks-v2-user-avatar:focus { border-color: #fff; }
/* Dropdown — small panel anchored to the avatar's right edge. */
.ks-v2-user-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	background: #0c0c0c;
	border: 1px solid var(--ksv2-divider);
	padding: 6px 0;
	min-width: 180px;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-4px);
	transition: opacity 0.15s, transform 0.15s;
	z-index: 60;
}
/* Hover safety zones — two transparent strips beside (not over) the
 * avatar so :hover stays on .ks-v2-user when the cursor drifts past
 * the avatar's 32px column on the way to the menu. Sitting beside
 * the avatar (instead of over it with z-index hacks) leaves the
 * avatar's <a> click target unobstructed. */
.ks-v2-user::before {
	/* Right-side strip: 40px to the right of the avatar, full
	 * column height including the menu-gap row. */
	content: '';
	position: absolute;
	top: 0;
	left: 100%;
	width: 40px;
	height: calc(100% + 14px);
}
.ks-v2-user::after {
	/* Below-avatar strip: bridges the 10px gap to the menu top.
	 * Sits directly under the avatar so it doesn't overlap the
	 * menu (which extends leftward from the avatar's right edge). */
	content: '';
	position: absolute;
	top: 100%;
	right: 0;
	width: 100%;
	height: 14px;
}
.ks-v2-user:hover .ks-v2-user-menu,
.ks-v2-user-menu:hover { opacity: 1; pointer-events: auto; transform: translateY(0); }
.ks-v2-user-menu a {
	display: block;
	padding: 10px 16px;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}
.ks-v2-user-menu a:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }

/* Mobile drawer + mobile-only Free Trial CTA (checkbox-hack toggle, no JS) */
.ks-v2-mobile-checkbox { display: none; }
.ks-v2-mobile-button   { display: none; }
.ks-v2-mobile-drawer   { display: none; }
.ks-v2-mobile-cta      { display: none; }
.ks-v2-icon-close      { display: none; }

@media (max-width: 1150px) {
	.ks-v2-nav, .ks-v2-header-actions { display: none; }
	/* Taller mobile bar with more breathing room (was 60×18; bumping to
	 * 84×22 so logo + button + hamburger all sit comfortably and
	 * vertically centered). */
	.ks-v2-header-inner { height: 84px; padding: 0 22px; gap: 14px; align-items: center; }
	.ks-v2-logo { align-self: center; }
	.ks-v2-logo img { width: 72px !important; }

	/* Mobile Free Trial button — sits between logo and hamburger,
	 * vertically centered by the parent's align-items:center. */
	.ks-v2-mobile-cta {
		display: inline-flex;
		align-items: center;
		align-self: center;
		/* Zero ALL margins so the WC Quick Checkout plugin's
		 * `.quick-checkout-button { margin-bottom:15px }` doesn't
		 * shift the button off-center in the flex row. */
		margin: 0 0 0 auto !important;
		padding: 12px 18px;
		font-family: "Raleway", "Helvetica Neue", system-ui, sans-serif;
		font-size: 12px;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		font-weight: 500;
		color: #000 !important;
		background: #fff;
		text-decoration: none;
		white-space: nowrap;
		line-height: 1;
	}

	.ks-v2-mobile-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		align-self: center;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		cursor: pointer;
		color: var(--ksv2-text);
		line-height: 0;
		/* Sit above the drawer overlay so the icon-swap is visible. */
		position: relative;
		z-index: 70;
	}
	.ks-v2-mobile-button svg { width: 24px; height: 24px; }
	/* Single button toggles its icon — burger when closed, X when open.
	 * The button stays in its original position (no jump). */
	.ks-v2-mobile-button .ks-v2-icon-close { display: none; }
	.ks-v2-mobile-checkbox:checked ~ .ks-v2-mobile-button .ks-v2-icon-menu  { display: none; }
	.ks-v2-mobile-checkbox:checked ~ .ks-v2-mobile-button .ks-v2-icon-close { display: block; }

	/* Drawer: full-height panel that fades + slides down into place.
	 * Always in the DOM, hidden via opacity:0 + a small upward translate
	 * when closed. pointer-events:none on the hidden state so the (now
	 * invisible) drawer doesn't block clicks on the page below. */
	.ks-v2-mobile-drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: calc(var(--ksv2-header-h-mobile, 84px) + var(--wp-admin--admin-bar--height, 0px));
		right: 0;
		bottom: 0;
		left: 0;
		background: #000;
		padding: 22px 28px 32px;
		z-index: 60;
		overflow-y: auto;
		opacity: 0;
		transform: translateY(-12px);
		pointer-events: none;
		transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		will-change: opacity, transform;
	}
	.ks-v2-mobile-checkbox:checked ~ .ks-v2-mobile-drawer {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	/* Search input — large bordered field below the head */
	.ks-v2-mobile-search {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 16px 18px;
		border: 1px solid rgba(255,255,255,0.18);
		margin-bottom: 28px;
	}
	.ks-v2-mobile-search svg { width: 18px; height: 18px; color: rgba(255,255,255,0.5); flex-shrink: 0; }
	.ks-v2-mobile-search input {
		flex: 1;
		background: transparent;
		border: none;
		outline: none;
		color: var(--ksv2-text);
		font-family: var(--ksv2-font);
		font-size: 15px;
	}
	.ks-v2-mobile-search input::placeholder { color: rgba(255,255,255,0.4); }

	/* Big nav list — no borders between items */
	.ks-v2-mobile-nav { list-style: none; padding: 0; margin: 0; }
	.ks-v2-mobile-nav li { margin: 0; }
	.ks-v2-mobile-nav a {
		display: block;
		padding: 18px 0;
		font-family: var(--ksv2-font);
		font-size: 32px;
		font-weight: 300;
		letter-spacing: -0.005em;
		color: var(--ksv2-text);
		text-decoration: none;
		line-height: 1.1;
		transition: opacity 0.25s ease;
	}
	.ks-v2-mobile-nav a:hover { opacity: 0.6; }

	/* Divider */
	.ks-v2-mobile-divider {
		border: 0;
		border-top: 1px solid rgba(255,255,255,0.12);
		margin: 28px 0 24px;
	}

	/* Auth: full-width white CTA + centered Sign In below */
	.ks-v2-mobile-auth { display: flex; flex-direction: column; align-items: center; gap: 22px; }
	/* CTA hover: same diagonal black sweep as the desktop .ks-v2-cta —
	 * ::before pseudo skewed -18deg, translates from off-left to over
	 * the button on hover; ::after pinned border stays visible above.
	 * isolation:isolate keeps the pseudo stacking contained. */
	.ks-v2-mobile-cta-block {
		position: relative;
		overflow: hidden;
		isolation: isolate;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 22px 18px;
		background: #fff;
		color: #000 !important;
		font-family: "Raleway", "Helvetica Neue", system-ui, sans-serif;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		text-decoration: none !important;
		margin: 0 !important;
		line-height: 1;
		transition: color 0.25s ease;
	}
	.ks-v2-mobile-cta-block::before {
		content: '';
		position: absolute;
		top: -10%; bottom: -10%;
		left: 0; width: 130%;
		background: #000;
		transform: translateX(-110%) skewX(-18deg);
		transform-origin: top left;
		transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: -1;
	}
	.ks-v2-mobile-cta-block:hover::before { transform: translateX(-15%) skewX(-18deg); }
	.ks-v2-mobile-cta-block:hover { color: #fff !important; }
	.ks-v2-mobile-cta-block::after {
		content: '';
		position: absolute;
		inset: 0;
		border: 1px solid #fff;
		pointer-events: none;
		z-index: 2;
	}
	/* Sign-in hover: animated underline grow (same scaleX 0→1 as the
	 * desktop .ks-v2-login). */
	.ks-v2-mobile-signin {
		position: relative;
		font-family: "Raleway", "Helvetica Neue", system-ui, sans-serif;
		font-size: 14px;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: rgba(255,255,255,0.85);
		text-decoration: none !important;
		padding-bottom: 4px;
	}
	.ks-v2-mobile-signin::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 1px;
		background: #fff;
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.ks-v2-mobile-signin:hover::after { transform: scaleX(1); }

	/* Social icons row at bottom of drawer */
	.ks-v2-mobile-socials {
		display: flex;
		gap: 22px;
		margin-top: auto;
		padding-top: 36px;
	}
	.ks-v2-mobile-socials a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		color: rgba(255,255,255,0.55);
		text-decoration: none;
	}
	.ks-v2-mobile-socials a:hover { color: var(--ksv2-text); }
	.ks-v2-mobile-socials svg { width: 24px; height: 24px; display: block; }
	.ks-v2-mobile-socials a:nth-child(2) svg { width: 20px; }
}

/* ===========================================================================
 * SINGLE-VIDEO PAGE polish (image 22 inspiration)
 * - Big title, lighter weight, tighter letter-spacing
 * - Meta line in small caps
 * - Director/Country/Year/etc as a clean right-side stack
 * ============================================================================= */

body.ks-v2.single-video .post-content h2.title,
body.ks-v2.single-video h1.title,
body.ks-v2.single-video .entry-title h3.title {
	font-size: clamp(36px, 5vw, 72px);
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0 0 16px;
}
body.ks-v2.single-video .film-meta-main h6 {
	font-size: 12px !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ksv2-text-dimmer) !important;
	font-weight: 400;
	margin-top: 0;
	margin-bottom: 24px;
}
body.ks-v2.single-video .film-meta-sidebar h6.meta-title {
	font-size: 10.5px !important;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ksv2-text-dimmer) !important;
	font-weight: 500;
	margin-top: 18px !important;
	margin-bottom: 6px !important;
}
body.ks-v2.single-video .film-meta-sidebar .meta-field {
	font-size: 14px;
	color: var(--ksv2-text) !important;
}
/* Bin the "In your library" / "Download" buttons if anything ever introduces
 * them — per spec we explicitly don't add those CTAs. */
body.ks-v2 .ks-v2-in-library,
body.ks-v2 .ks-v2-download { display: none !important; }

/* ===========================================================================
 * PAYWALL OVERLAY (image 23 inspiration)
 * Replaces the legacy locked-content.php overlay's visual shell. JS that
 * gates the player still drives visibility — we only restyle.
 * ============================================================================= */

body.ks-v2 .locked-paywall,
body.ks-v2 .locked-content {
	background: rgba(0,0,0,0.78) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 48px 36px !important;
	border: 1px solid rgba(255,255,255,0.12) !important;
	width: auto !important;
	max-width: 520px;
	margin: 0 !important;
	text-align: center !important;
	/* Override legacy child-style.css `.locked-div { top:50%; left:50%;
	 * margin-left:-150px; margin-top:60px; width:300px }` — that fixed
	 * 300px width clips the "START FREE TRIAL" CTA, and the negative
	 * margins offset the card from the player center. */
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
}
/* Hide the legacy player-circle button (the round outline with the
 * play-or-lock icon swapped in by locked-content.php's jQuery). The
 * v2 paywall card alone communicates the locked state — the duplicate
 * lock icon overlapping the card is just noise.
 *
 * SCOPED to the locked state only: an earlier version of this rule
 * targeted .single-video .play-btn unconditionally and quietly broke
 * the play affordance on every non-paywalled film. */
/* Hide the legacy circular play affordance (.play-btn + .videoPlay)
 * whenever the paywall card is also being rendered. JS in
 * locked-content.php moves the paywall card into .overimg, so it lives
 * as a SIBLING of .play-btn (not a child). Use :has() on .overimg to
 * match anywhere a .locked-paywall exists inside the player frame. */
body.ks-v2.single-video .overimg:has(.locked-paywall) .play-btn,
body.ks-v2.single-video .overimg:has(.locked-paywall) .videoPlay {
	display: none !important;
}

/* === Player viewport sizing =============================================
 * Slot model: a fixed (max 1350px × (100vh-header)) container. The
 * video and poster `object-fit: contain` inside it — they scale to
 * touch whichever dimension hits first, letterboxing the other.
 *
 * Layout uses block + absolute children (not flex), because:
 *   - .overimg / #post-video toggle via jQuery .show()/.hide(); flex
 *     siblings would re-distribute width when one disappears.
 *   - Plyr's `.plyr--video` is its own flex container with a controls
 *     row child; nesting it inside our flex would fight Plyr's layout.
 *   - Absolute children let both states inherit identical bounds. */
body.ks-v2.single-video .embedded_videos {
	height: calc(100vh - var(--ksv2-header-h, 91px));
	width: 100%;
	max-width: 1350px;
	margin-left: auto;
	margin-right: auto;
	background: #000;
	position: relative;
	display: block;
}
body.ks-v2.single-video .video-frame {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
}
body.ks-v2.single-video .overimg,
body.ks-v2.single-video #post-video {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
}
body.ks-v2.single-video #post-video .video-container {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
}
/* Plyr fills the slot, overriding Plyr's default `max-width: 100%` +
 * the 16:9 lock on `.plyr__video-wrapper--fixed-ratio`. */
body.ks-v2.single-video .plyr--video {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	background: #000 !important;
}
body.ks-v2.single-video .plyr--video .plyr__video-wrapper,
body.ks-v2.single-video .plyr--video .plyr__video-wrapper--fixed-ratio {
	aspect-ratio: auto !important;
	padding-bottom: 0 !important;
	height: 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	position: relative !important;
}
body.ks-v2.single-video .plyr--video video,
body.ks-v2.single-video .plyr--video .plyr__video-wrapper video,
body.ks-v2.single-video .plyr--video .plyr__video-wrapper--fixed-ratio video {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
}
/* Plyr's own poster overlay (`.plyr__poster`, the bg-image element it
 * renders for `<video poster>`) — make it contain instead of cover so
 * it matches the video's contain behavior on first paint. */
body.ks-v2.single-video .plyr--video .plyr__poster {
	background-size: contain !important;
	background-color: #000 !important;
}
/* Pre-click poster fills the slot via inset:0; img inside contains. */
body.ks-v2.single-video .overimg .over-image {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	display: block !important;
}
body.ks-v2.single-video .overimg .over-image img,
body.ks-v2.single-video .overimg .thumb-image {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	display: block !important;
}
/* Mobile: header is 84px. */
@media (max-width: 1150px) {
	body.ks-v2.single-video .embedded_videos {
		height: calc(100vh - 84px);
	}
}

/* === Hairline Ring play button ===========================================
 * Per design spec (~/Desktop/01 _ Hairline ring.html):
 *   1px white ring, no fill, no shadow. Triangle small, fades in at
 *   center on hover; ring scales up from 0.85.
 * Clicking anywhere triggers the existing JS click handler. */
body.ks-v2.single-video .overimg { position: relative; cursor: pointer; }
/* Subtle dim at rest that lifts on hover — invites the click on the
 * whole still. Pseudo sits over the poster image (z-index 2) but
 * under the Hairline Ring play-btn (z-index 5), so the ring + triangle
 * remain visible. 1s transition for a gentle fade. */
body.ks-v2.single-video .overimg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
	pointer-events: none;
	z-index: 2;
	opacity: 1;
	transition: opacity 1s ease;
}
body.ks-v2.single-video .overimg:hover::after { opacity: 0; }
/* Center via `inset:0 + margin:auto` so the transform property can be
 * dedicated to scale only — no translate-50% + scale composition that
 * silently pushes the ring off-center. */
body.ks-v2.single-video .overimg .play-btn {
	position: absolute !important;
	inset: 0 !important;
	margin: auto !important;
	width: 80px !important;
	height: 80px !important;
	border: 1px solid rgba(255, 255, 255, 0.9) !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	z-index: 5 !important;
	cursor: pointer !important;
	transform: scale(0.85) !important;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) !important;
	box-sizing: border-box !important;
	padding: 0 !important;
}
body.ks-v2.single-video .overimg:hover .play-btn,
body.ks-v2.single-video .overimg .play-btn:hover {
	transform: scale(1) !important;
	border-color: #fff !important;
}
/* Inner <a> fills the ring so the whole circle is clickable. The
 * parent theme draws its own thick `box-shadow: inset 0 0 0 3px white`
 * + a scaling :after fill on .videoPlay — both killed here so only
 * our 1px border remains. */
body.ks-v2.single-video .overimg .play-btn .videoPlay {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	position: relative !important;
	top: auto !important;
	left: auto !important;
	background: transparent !important;
	background-color: transparent !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	transition: none !important;
}
body.ks-v2.single-video .overimg .play-btn .videoPlay::before { display: none !important; }
body.ks-v2.single-video .overimg .play-btn .videoPlay i { display: none !important; }
/* Kill the parent's scaling-white-fill hover effect on .videoPlay:after. */
body.ks-v2.single-video .overimg .play-btn:hover .videoPlay {
	box-shadow: none !important;
	color: inherit !important;
}
/* Play triangle — always visible at rest, just like Plyr's stock
 * .plyr__control--overlaid play icon. 2px margin-left optically
 * centers the triangle's mass inside the ring. */
body.ks-v2.single-video .overimg .play-btn .videoPlay::after {
	content: '' !important;
	display: block !important;
	position: static !important;
	width: 0 !important;
	height: 0 !important;
	border-style: solid !important;
	border-width: 7px 0 7px 11px !important;
	border-color: transparent transparent transparent #fff !important;
	margin-left: 2px !important;
	opacity: 1 !important;
	background: transparent !important;
	transform: none !important;
	border-radius: 0 !important;
	transition: none !important;
	pointer-events: none;
}
body.ks-v2.single-video .overimg .play-btn:hover .videoPlay::after {
	transform: none !important;
}

/* === Film cards: full-card clickability + Hairline Ring on hover ========
 * Homepage cards (ts-grid-view / ts-big-posts articles) have multiple
 * scattered links — title link, image link, view-more overlay — but no
 * single click target covers the whole card. Stretched-link pattern:
 * promote the .image-holder anchor to fill the whole article via
 * ::after { inset: 0 }; raise inner non-link interactive bits above it
 * with z-index so taxonomy/author links still work.
 *
 * Plus a Hairline Ring overlay on the image holder — appears on hover
 * over the still, matches the single-page play button. */
body.ks-v2 .ts-grid-view article,
body.ks-v2 .ts-big-posts article {
	position: relative;
}
body.ks-v2 .ts-grid-view article .image-holder > a::after,
body.ks-v2 .ts-big-posts article .image-holder > a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}
body.ks-v2 .ts-grid-view article .entry-author a,
body.ks-v2 .ts-grid-view article .entry-title a,
body.ks-v2 .ts-big-posts article .entry-author a,
body.ks-v2 .ts-big-posts article .entry-title a,
body.ks-v2 .ts-grid-view article .btn.small,
body.ks-v2 .ts-big-posts article .btn.small,
body.ks-v2 .ts-grid-view article .single-video-tags a,
body.ks-v2 .ts-big-posts article .single-video-tags a {
	position: relative;
	z-index: 2;
}

/* Hairline Ring overlay on image hover — both grid + big-post cards
 * AND the v2 .ks-v2-film-card (archive grid). */
body.ks-v2 .ts-grid-view article .image-holder,
body.ks-v2 .ts-big-posts article .image-holder,
body.ks-v2 .ks-v2-film-card .ks-v2-film-thumb {
	position: relative;
}
body.ks-v2 .ts-grid-view article .image-holder::after,
body.ks-v2 .ts-big-posts article .image-holder::after,
body.ks-v2 .ks-v2-film-card .ks-v2-film-thumb::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 56px;
	height: 56px;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.85);
	transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
	pointer-events: none;
	z-index: 3;
	box-sizing: border-box;
}
body.ks-v2 .ts-grid-view article:hover .image-holder::after,
body.ks-v2 .ts-big-posts article:hover .image-holder::after,
body.ks-v2 .ks-v2-film-card:hover .ks-v2-film-thumb::after {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}
/* Play triangle inside the ring — small, fades in on hover. */
body.ks-v2 .ts-grid-view article .image-holder::before,
body.ks-v2 .ts-big-posts article .image-holder::before,
body.ks-v2 .ks-v2-film-card .ks-v2-film-thumb::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 9px;
	border-color: transparent transparent transparent #fff;
	transform: translate(calc(-50% + 2px), -50%);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
	z-index: 4;
}
body.ks-v2 .ts-grid-view article:hover .image-holder::before,
body.ks-v2 .ts-big-posts article:hover .image-holder::before,
body.ks-v2 .ks-v2-film-card:hover .ks-v2-film-thumb::before {
	opacity: 1;
}
/* Kill the parent theme's chunky play overlay (`.overlay-effect`):
 *  - dark rgba(0,0,0,0.8) backdrop fading in on hover → not wanted
 *  - chunky <i.icon-play> glyph + <span>Play</span> → replaced by
 *    our Hairline Ring + triangle pseudo-elements above.
 * But `.view-more` is the real <a href="..."> — keep it, just stretch
 * it to fill the image-holder so clicking the ring (or anywhere on
 * the card image) actually navigates. */
body.ks-v2 .ts-grid-view article .image-holder .overlay-effect,
body.ks-v2 .ts-big-posts article .image-holder .overlay-effect {
	background: transparent !important;
	opacity: 1 !important;
	z-index: 2 !important;
}
body.ks-v2 .ts-grid-view article .image-holder .overlay-effect .view-more,
body.ks-v2 .ts-big-posts article .image-holder .overlay-effect .view-more {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
}
body.ks-v2 .ts-grid-view article .image-holder .overlay-effect .view-more > i,
body.ks-v2 .ts-grid-view article .image-holder .overlay-effect .view-more > span,
body.ks-v2 .ts-big-posts article .image-holder .overlay-effect .view-more > i,
body.ks-v2 .ts-big-posts article .image-holder .overlay-effect .view-more > span {
	display: none !important;
}
/* `.entry-overlay` wraps the .view-more anchor — keep it visible (as
 * an invisible structural wrapper) so its child <a> still renders.
 * Don't display:none it; on .default-effect cards it's position:static
 * anyway, so the absolutely-positioned .view-more inside resolves
 * inset:0 against .overlay-effect, filling the whole image. */
body.ks-v2 .locked-paywall .kicker {
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ksv2-text-dim);
	margin-bottom: 14px;
}
body.ks-v2 .locked-paywall h3 {
	font-size: 28px;
	font-weight: 300;
	letter-spacing: -0.01em;
	color: var(--ksv2-text) !important;
	margin: 0 0 12px !important;
}
body.ks-v2 .locked-paywall p {
	font-size: 14px;
	color: var(--ksv2-text-dim) !important;
	line-height: 1.6;
	margin-bottom: 24px !important;
}
body.ks-v2 .locked-paywall .ks-v2-paywall-cta,
body.ks-v2 .locked-paywall .ks-v2-login-cta /* legacy class kept for older cached markup */ {
	display: inline-block;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: 14px 28px;
	font-size: 11px;
	line-height: 1;                  /* without this, child-style.css's `body.single-video` line-height inflates the text box and clips at the bottom */
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	color: #000 !important;          /* beat child-style.css `.locked-div .quick-checkout-button { color: #ffffff }` */
	background: #fff !important;
	border: 0 !important;            /* beat the same legacy white border */
	border-radius: 0 !important;
	margin: 0 !important;            /* beat the legacy 15px top/bottom margin */
	height: auto !important;
	vertical-align: middle;
	text-align: center;
	text-indent: 0.18em;             /* nudge text right by exactly the trailing letter-spacing so glyphs appear optically centred */
	text-decoration: none;
	cursor: pointer;
	transition: color 0.25s ease;
}
/* Diagonal black-sweep hover, same as the header `.ks-v2-cta`. */
body.ks-v2 .locked-paywall .ks-v2-paywall-cta::before,
body.ks-v2 .locked-paywall .ks-v2-login-cta::before {
	content: '';
	position: absolute;
	top: -10%;
	bottom: -10%;
	left: 0;
	width: 130%;
	background: #000;
	transform: translateX(-110%) skewX(-18deg);
	transform-origin: top left;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: -1;
}
body.ks-v2 .locked-paywall .ks-v2-paywall-cta:hover::before,
body.ks-v2 .locked-paywall .ks-v2-login-cta:hover::before {
	transform: translateX(-15%) skewX(-18deg);
}
body.ks-v2 .locked-paywall .ks-v2-paywall-cta:hover,
body.ks-v2 .locked-paywall .ks-v2-login-cta:hover {
	color: #fff !important;
	background: #fff !important;     /* keep the underlying bg white; the ::before sweep is what darkens visually */
}
/* 1px white border pinned above the sweep. Invisible against the white
 * button at rest; once the black sweep wipes in on hover, the border
 * becomes the visible outline that keeps the element reading as a button. */
body.ks-v2 .locked-paywall .ks-v2-paywall-cta::after,
body.ks-v2 .locked-paywall .ks-v2-login-cta::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid #fff;
	pointer-events: none;
	z-index: 2;
}
body.ks-v2 .locked-paywall .ks-v2-paywall-foot {
	margin-top: 22px;
	font-size: 12px;
	color: var(--ksv2-text-dimmer);
}
body.ks-v2 .locked-paywall .ks-v2-paywall-foot a {
	color: var(--ksv2-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ===========================================================================
 * LOGIN MODAL — Direction A · Dark editorial (auth-modals.jsx LoginA)
 *
 * Compiled from the design file with these exact values (no improvisation):
 *   width 460  ·  padding 44 44 36 (footnote area 0 44 36)
 *   sheet bg #0d0d0d  ·  border 1px rgba(255,255,255,0.07)
 *   shadow 0 30 80 rgba(0,0,0,0.6)  ·  backdrop rgba(0,0,0,0.62)
 *   kicker 10.5/500/0.22em  ·  title 26/300/-0.01em (NOT 44px)
 *   label 10.5/500/0.18em  ·  input 14/300/0.01em pad 14 16
 *   input bg rgba(255,255,255,0.04) border 1px rgba(255,255,255,0.12)
 *   submit pad 15 18  ·  11.5/500/0.22em  ·  bg #fff color #000
 *   footnote 12.5/300  ·  borderTop rgba(255,255,255,0.07)
 *   trial link uses AM_ACCENT (oklch 0.82 0.07 75) color + border-bottom
 *
 * Bootstrap modal shell stays (existing JS hooks use .modal.in) but every
 * Bootstrap visual is overridden.
 * ============================================================================= */
body.ks-v2 .ks-v2-login-modal.modal {
	background: rgba(0, 0, 0, 0.62) !important;
	padding: 0 !important;
}
body.ks-v2 .ks-v2-login-modal .modal-dialog {
	width: 460px !important;
	max-width: calc(100% - 40px) !important;
	margin: 56px auto !important;
}
body.ks-v2 .ks-v2-login-modal .modal-content {
	background: #0d0d0d !important;
	border: 1px solid rgba(255, 255, 255, 0.07) !important;
	border-radius: 0 !important;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important;
	color: #fff !important;
	text-align: left !important;
	padding: 44px 44px 36px !important;
	position: relative !important;
}
body.ks-v2 .ks-v2-login-close {
	position: absolute !important;
	top: 18px !important;
	right: 18px !important;
	width: 30px !important; height: 30px !important;
	padding: 6px !important;
	background: transparent !important;
	border: 0 !important;
	color: rgba(255, 255, 255, 0.62) !important;
	opacity: 1 !important;
	cursor: pointer;
	transition: color 0.2s;
	text-shadow: none !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}
body.ks-v2 .ks-v2-login-close:hover { color: #fff !important; }
body.ks-v2 .ks-v2-login-close svg { width: 18px; height: 18px; }

body.ks-v2 .ks-v2-login-modal .modal-body { padding: 0 !important; }

body.ks-v2 .ks-v2-login-kicker {
	font-family: var(--ksv2-font);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.42);
	margin: 0 0 14px;
}
body.ks-v2 h2.ks-v2-login-title {
	font-family: var(--ksv2-font) !important;
	font-size: 26px !important;
	font-weight: 300 !important;
	letter-spacing: -0.01em !important;
	line-height: 1.15 !important;
	color: #fff !important;
	margin: 0 0 28px !important;
}

/* Field rows. wp_login_form emits <p class="login-username|password|remember|submit">.
 * The design uses gap:16 between the email and password fields, then 14
 * before the remember row. We approximate by zeroing p margins and using
 * margin-bottom on each field p. */
body.ks-v2 .ks-v2-login-modal #loginform p {
	margin: 0 0 16px !important;
	text-align: left !important;
}
body.ks-v2 .ks-v2-login-modal #loginform p.login-password { margin-bottom: 14px !important; }

body.ks-v2 .ks-v2-login-modal #loginform label {
	display: block !important;
	font-family: var(--ksv2-font) !important;
	font-size: 10.5px !important;
	font-weight: 500 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.62) !important;
	margin: 0 0 10px !important;
	float: none !important;
}
body.ks-v2 .ks-v2-login-modal #loginform input[type="text"],
body.ks-v2 .ks-v2-login-modal #loginform input[type="password"] {
	width: 100% !important;
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 0 !important;
	color: #fff !important;
	font-family: var(--ksv2-font) !important;
	font-size: 14px !important;
	font-weight: 300 !important;
	letter-spacing: 0.01em !important;
	height: 40px !important;
	padding: 0 16px !important;
	line-height: 1 !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	transition: border-color 0.15s;
}
body.ks-v2 .ks-v2-login-modal #loginform input[type="text"]:focus,
body.ks-v2 .ks-v2-login-modal #loginform input[type="password"]:focus {
	outline: none !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
}
body.ks-v2 .ks-v2-login-modal #loginform input::placeholder {
	color: rgba(255, 255, 255, 0.42) !important;
	font-weight: 300 !important;
}

/* Password eye: input is wrapped in its own .ks-v2-login-pw-wrap (via JS)
 * so the eye can center on the input alone (top:50% + translateY). */
body.ks-v2 .ks-v2-login-pw-wrap { position: relative; }
body.ks-v2 .ks-v2-login-pw-toggle {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, 0.42);
	padding: 0;
	margin: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	line-height: 1;
}
body.ks-v2 .ks-v2-login-pw-toggle svg { width: 16px; height: 16px; }
body.ks-v2 .ks-v2-login-pw-toggle:hover { color: #fff; }

/* Remember-me row: spec puts marginTop:14 above + marginBottom:24 below. */
body.ks-v2 .ks-v2-login-modal #loginform .login-remember {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	margin: 14px 0 24px !important;
}
body.ks-v2 .ks-v2-login-modal #loginform .login-remember label {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	font-family: var(--ksv2-font) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: rgba(255, 255, 255, 0.62) !important;
	margin: 0 !important;
	cursor: pointer;
}
body.ks-v2 .ks-v2-login-modal #loginform input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 14px; height: 14px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
	position: relative;
	margin: 0;
}
body.ks-v2 .ks-v2-login-modal #loginform input[type="checkbox"]:checked { background: #fff; }
body.ks-v2 .ks-v2-login-modal #loginform input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 3px; top: 0;
	width: 4px; height: 8px;
	border: solid #000;
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}

/* The parent theme auto-injects an extra "Lost your password" link
 * inside the password <p> (sometimes nested inside our pw-wrap div);
 * hide any anchor in .login-password except ours. */
body.ks-v2 .ks-v2-login-modal #loginform .login-password a:not(.ks-v2-login-lost) {
	display: none !important;
}

body.ks-v2 .ks-v2-login-modal .ks-v2-login-lost {
	font-family: var(--ksv2-font);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.62);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	padding-bottom: 2px;
	white-space: nowrap;
	transition: color 0.2s, border-color 0.2s;
}
body.ks-v2 .ks-v2-login-modal .ks-v2-login-lost:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.6);
}

/* Submit (amPrimary): pad 15 18, font 11.5/500/0.22em, full width. */
body.ks-v2 .ks-v2-login-modal #loginform .login-submit { margin: 0 !important; }
body.ks-v2 .ks-v2-login-modal #loginform .login-submit input[type="submit"] {
	width: 100% !important;
	background: #fff !important;
	color: #000 !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-family: var(--ksv2-font) !important;
	font-size: 11.5px !important;
	font-weight: 500 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	height: 40px !important;
	padding: 0 18px !important;
	line-height: 1 !important;
	min-height: 0 !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
	transition: background 0.2s;
}
body.ks-v2 .ks-v2-login-modal #loginform .login-submit input[type="submit"]:hover {
	background: rgba(255, 255, 255, 0.92) !important;
}

/* AuthFootnote: marginTop:24, paddingTop:22, borderTop AM_DIV_SOFT,
 * centered, 12.5/300/AM_INK_DIM. */
body.ks-v2 .ks-v2-login-footer {
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	text-align: center;
	font-family: var(--ksv2-font);
	font-size: 12.5px;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.62);
}
body.ks-v2 .ks-v2-login-footer-text { margin-right: 6px; }
body.ks-v2 .ks-v2-login-trial {
	font-family: var(--ksv2-font);
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	padding-bottom: 2px;
	transition: opacity 0.2s, border-color 0.2s;
}
body.ks-v2 .ks-v2-login-trial:hover { border-bottom-color: #fff; }

/* ===========================================================================
 * HOMEPAGE — single container axis
 *
 * The legacy theme used Bootstrap nesting (.container > .row > .col-*) with
 * inconsistent gutter math, so section titles landed at x=135 in some
 * sections and x=155 in others. We pin every .container to the same axis
 * the header uses (max-width 1350, 20px padding → content edge at
 * calc((100vw - 1350px)/2 + 20px) — at 1440vw that's x=45), and zero out
 * the Bootstrap .row negative-margin / .col padding pair so content sits
 * flush at the container's padded edge regardless of nesting depth.
 *
 * Multi-column grids that previously relied on the Bootstrap gutter get a
 * CSS gap to replace it (so cards don't sit flush against each other).
 *
 * Slider Revolution: the hero slider's text/button layers happen to align
 * at x=155 by their existing layer-config; other sliders are left untouched
 * here. If specific sliders end up visually misaligned, add a targeted
 * `.tp-caption` left override per-slider.
 * ============================================================================= */
/* Neutralize the negative-margin Bootstrap row pattern on <section#main>,
 * so its descendants inherit the body's true left edge (not viewport-5px).
 * That lines the body's content axis up with the header's (max-width 1350 +
 * 20 padding + auto-center). */
body.ks-v2 section#main.row {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* Single-video page: <section id="main"> wraps the Related films partial.
 * Its 15px horizontal padding (from vendor-videotouch/css/style.css:264)
 * was offsetting the related section's left edge ~15px right of the
 * info section above. Zero it so both inners (max-width 1350, auto-margin)
 * sit on the same axis at every viewport. */
body.ks-v2.single-video section#main {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.ks-v2 .container {
	max-width: 1350px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
}
/* Match the header's narrow-viewport padding bump so the body content axis
 * stays aligned with the logo's. */
@media (max-width: 1150px) {
	body.ks-v2 .container {
		padding-left: 22px !important;
		padding-right: 22px !important;
	}
}

/* Above 768px (tablet landscape and up), bump the minimum side padding by
 * +20px so the site content has more breathing room from the viewport
 * edges. Applies to header, body container, and the SR slider title/CTA
 * axis so they all stay aligned with each other. Phones (≤768) keep the
 * tighter 22px padding so we don't waste precious horizontal space.
 *
 * Math:
 *  - Base padding goes 20 → 40 (or 22 → 42 if you prefer; we use 40 across
 *    the board above 768 for a single clean axis).
 *  - Slider-title calc() shifts from `50vw - 655` to `50vw - 635`
 *    (1350/2 = 675; minus the new 40 padding = 635), so glyphs still land
 *    at the page's content axis at every wide viewport. */
@media (min-width: 769px) {
	body.ks-v2 .ks-v2-header-inner {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
	body.ks-v2 .container {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
	/* Slider-title axis is set in the section below — kept there so it
	 * sits next to the related rules. */
}
body.ks-v2 .container .row {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
body.ks-v2 .container [class*="col-"] {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* Re-establish gutters lost when we zeroed .col padding. Multiple layout
 * modes need their own re-flex:
 *
 *  - .ts-grid-view: cards (.col-lg-N.item) are DIRECT children of the
 *    grid section, not inside an inner .row. Flex the section.
 *  - .ts-big-posts article .row: image + text 2-col (col-lg-8 / col-lg-4)
 *    were flush with no gap — flex the article's row.
 *  - .mosaic-view: isotope-driven layout, handled separately later.
 *
 * 30px gap matches the parent theme's pre-existing 30px Bootstrap gutter
 * (15px col-padding on each side). Flex + wrap also yields row-gap so
 * stacked rows of cards space out vertically. */
body.ks-v2 .ts-grid-view {
	display: flex !important;
	flex-wrap: wrap;
	gap: 30px;
}
body.ks-v2 .ts-grid-view.cols-by-3 > [class*="col-"] {
	flex: 0 0 calc((100% - 60px) / 3);
	max-width: calc((100% - 60px) / 3);
}
body.ks-v2 .ts-grid-view.cols-by-2 > [class*="col-"] {
	flex: 0 0 calc((100% - 30px) / 2);
	max-width: calc((100% - 30px) / 2);
}
body.ks-v2 .ts-grid-view.cols-by-4 > [class*="col-"] {
	flex: 0 0 calc((100% - 90px) / 4);
	max-width: calc((100% - 90px) / 4);
}

/* Big-post: image col (col-lg-8) + content col (col-lg-4) inside the
 * article's .row. They previously summed to 100% with no gap; grid is
 * used over flex here so fractional widths line up cleanly with the
 * 30px gap (flex with calc(% - px) sub-pixel-rounded into wrapping). */
body.ks-v2 .ts-big-posts article > .row {
	display: grid !important;
	grid-template-columns: 8fr 4fr;
	gap: 30px;
	align-items: start;
}
body.ks-v2 .ts-big-posts article > .row > [class*="col-"] {
	width: auto !important;
	max-width: 100% !important;
	min-width: 0;
	margin: 0 !important;
}
/* Parent theme reorders the big-post children (probably a float:right on
 * <header>); pin them explicitly to grid columns so image lands left and
 * text lands right regardless. */
body.ks-v2 .ts-big-posts article > .row > header { grid-column: 1 !important; }
body.ks-v2 .ts-big-posts article > .row > div    { grid-column: 2 !important; }
/* Vertical breathing room between successive big-post articles in the
 * same wrapper (Bootstrap's row gutter handled this before). */
body.ks-v2 .ts-big-posts > [class*="col-"] + [class*="col-"] {
	margin-top: 40px;
}

/* Mosaic: switch from floated Bootstrap cols to CSS grid so row and
 * column gaps are uniform regardless of per-cell aspect-ratio height
 * differences (the parent theme's article heights vary by ~10px
 * between col-lg-6 and col-lg-3 which produced uneven vertical gaps).
 * Bootstrap col widths are mapped to grid spans:
 *   col-lg-12 → 4 spans (100%)
 *   col-lg-6  → 2 spans (50%)
 *   col-lg-4  → 1.33 → fallback span 2 (treated as wide)
 *   col-lg-3  → 1 span (25%)
 * Items stretch to row height by default → no empty vertical air below
 * shorter cells. */
body.ks-v2 .mosaic-view {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 30px !important;
	padding: 0 !important;
	margin: 0 !important;
}
body.ks-v2 .mosaic-view > [class*="col-"] {
	padding: 0 !important;
	margin: 0 !important;
	width: auto !important;
	float: none !important;
}
body.ks-v2 .mosaic-view > .col-lg-12 { grid-column: span 4; }
body.ks-v2 .mosaic-view > .col-lg-6  { grid-column: span 2; }
body.ks-v2 .mosaic-view > .col-lg-4  { grid-column: span 2; }
body.ks-v2 .mosaic-view > .col-lg-3  { grid-column: span 1; }
body.ks-v2 .mosaic-view article {
	margin: 0 !important;
	height: 100%;
}
body.ks-v2 .mosaic-view article .image-holder,
body.ks-v2 .mosaic-view article a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Slider Revolution layer shift — align hero text/button layers with
 * the body container's left edge. Slider JS sets `left: NNpx` inline
 * on each `rs-layer-wrap.rs-parallax-wrap` (the actual positioning
 * element — the rs-mask-wrap / rs-layer beneath it sit at left:0).
 * We target `rs-layer-wrap.rs-parallax-wrap` and apply transform —
 * inline left/transform on inner elements doesn't conflict. The
 * parallax-wrap class identifies text/button layers in this set of
 * sliders; full-width background layers don't carry it, so they
 * stay full-bleed. */
@media (min-width: 1350px) {
	body.ks-v2 rs-layer-wrap.rs-parallax-wrap { transform: translateX(-90px) !important; }
}
@media (min-width: 1240px) and (max-width: 1349.98px) {
	body.ks-v2 rs-layer-wrap.rs-parallax-wrap { transform: translateX(-55px) !important; }
}
@media (min-width: 1100px) and (max-width: 1239.98px) {
	body.ks-v2 rs-layer-wrap.rs-parallax-wrap { transform: translateX(-30px) !important; }
}
@media (max-width: 1099.98px) {
	body.ks-v2 rs-layer-wrap.rs-parallax-wrap { transform: translateX(-25px) !important; }
}

/* ===========================================================================
 * ARCHIVE / TAXONOMY PAGE (image 24)
 * ============================================================================= */

/* New layout per mockup: kicker + big title + blurb header, filter+sort
 * toolbar, 3-up film card grid, Load more button. Replaces the previous
 * 1:2 split list layout. Lives inside <section.ks-v2-archive>. */
body.ks-v2 section.ks-v2-archive {
	max-width: 1350px !important;
	margin: 0 auto !important;
	padding: 0 20px !important;
}
body.ks-v2 .ks-v2-archive-head {
	padding: 64px 0 40px;
	border-bottom: 1px solid var(--ksv2-divider);
	margin-bottom: 56px;
}
body.ks-v2 .ks-v2-archive-kicker {
	font-family: var(--ksv2-font);
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ksv2-text-dimmer);
	font-weight: 500;
	margin-bottom: 14px;
}
body.ks-v2 h1.ks-v2-archive-title {
	font-family: var(--ksv2-font) !important;
	font-size: clamp(40px, 6vw, 88px) !important;
	font-weight: 300 !important;
	letter-spacing: -0.02em !important;
	line-height: 1 !important;
	color: var(--ksv2-text) !important;
	margin: 0 0 24px !important;
}
body.ks-v2 .ks-v2-archive-blurb {
	font-family: var(--ksv2-font);
	font-size: 18px;
	font-weight: 300;
	color: var(--ksv2-text-dim);
	line-height: 1.55;
	letter-spacing: 0.07em;
	max-width: none;
	margin: 0;
}

/* Toolbar: filter pills on the left, sort dropdown on the right. */
body.ks-v2 .ks-v2-archive-body { padding-bottom: 80px; }
body.ks-v2 .ks-v2-archive-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 36px;
}
body.ks-v2 .ks-v2-archive-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
body.ks-v2 .ks-v2-filter {
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: transparent;
	color: var(--ksv2-text);
	font-family: var(--ksv2-font);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: border-color 0.2s, background 0.2s, color 0.2s;
}
body.ks-v2 .ks-v2-filter:hover { border-color: rgba(255, 255, 255, 0.4); }
body.ks-v2 .ks-v2-filter.is-active {
	background: #fff;
	color: #000;
	border-color: rgba(255, 255, 255, 0.6);
}
body.ks-v2 .ks-v2-filter-count {
	opacity: 0.55;
	font-variant-numeric: tabular-nums;
}
body.ks-v2 .ks-v2-archive-sort {
	display: flex;
	align-items: center;
	gap: 12px;
}
body.ks-v2 .ks-v2-archive-sort-label {
	font-family: var(--ksv2-font);
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ksv2-text-dim);
	font-weight: 500;
}
body.ks-v2 .ks-v2-archive-sort-trigger {
	background: transparent;
	border: none;
	color: var(--ksv2-text);
	font-family: var(--ksv2-font);
	font-size: 13px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
}
body.ks-v2 .ks-v2-caret { display: inline-block; vertical-align: middle; }

/* Film card grid: 3-up at desktop, fluid at narrower widths. */
body.ks-v2 ul.ks-v2-archive-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
	gap: 36px !important;
	margin: 0;
	padding: 0;
	list-style: none;
}
body.ks-v2 .ks-v2-film-card { margin: 0; padding: 0; list-style: none; transition: opacity 500ms ease-out, transform 500ms ease-out; }
/* Fade-in for cards appended via the Load more AJAX. JS toggles the
 * class off on the next frame so the transition runs from this state
 * to the resting (opacity:1, no transform) state. */
body.ks-v2 .ks-v2-film-card.is-fading-in { opacity: 0; transform: translateY(8px); }
body.ks-v2 a.ks-v2-film-link {
	display: block;
	color: var(--ksv2-text);
	text-decoration: none !important;
}
body.ks-v2 .ks-v2-film-thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #1a1a1a;
	overflow: hidden;
	margin-bottom: 14px;
}
body.ks-v2 .ks-v2-film-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
}
body.ks-v2 .ks-v2-film-link:hover .ks-v2-film-thumb img { transform: scale(1.06); }
body.ks-v2 .ks-v2-film-title {
	font-family: var(--ksv2-font);
	font-size: 16px;
	font-weight: 300;
	letter-spacing: -0.005em;
	color: var(--ksv2-text);
	margin-bottom: 4px;
}
body.ks-v2 .ks-v2-film-meta {
	font-family: var(--ksv2-font);
	font-size: 12px;
	color: var(--ksv2-text-dim);
}

/* Load more — centered ghost button. */
body.ks-v2 .ks-v2-loadmore {
	display: flex;
	justify-content: center;
	margin-top: 56px;
}
/* Bordered LOAD MORE button per mockup — wide, generous padding,
 * uppercase Raleway with wide tracking. Same treatment whether the
 * markup is <a> (initial render) or <button> (after AJAX wiring). */
body.ks-v2 .ks-v2-loadmore-btn {
	display: inline-block;
	padding: 22px 60px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	background: transparent;
	color: var(--ksv2-text) !important;
	font-family: "Raleway", "Helvetica Neue", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s, color 0.2s;
}
body.ks-v2 .ks-v2-loadmore-btn:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.06);
}
body.ks-v2 .ks-v2-loadmore-btn:disabled {
	opacity: 0.6;
	cursor: progress;
}

/* Same Load More button look on the homepage. The parent theme renders
 * a <div class="ts-pagination-more"> with explicit height:50 + line-
 * height:50, which combined with our padding shoved the text to the
 * bottom of the box. Use flex centering with line-height:1 + height:auto
 * so the text sits in the actual visual center of the padded box. */
body.ks-v2 .ts-pagination-more {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 10px auto 0 !important;
	padding: 22px 60px !important;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
	background: transparent !important;
	color: var(--ksv2-text) !important;
	font-family: "Raleway", "Helvetica Neue", system-ui, sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.24em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	transition: border-color 0.2s, background 0.2s !important;
	float: none !important;
	text-align: center !important;
	height: auto !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
}
/* inline-flex sits inline so we need a wrapper trick to center it.
 * Use a ::before on the row to push it center via a flex auto-margin
 * shortcut — simpler: make the row a flex container that centers. */
body.ks-v2 .row > .ts-pagination-more,
body.ks-v2 .content-block > .ts-pagination-more {
	display: flex !important;
	align-self: center;
}
body.ks-v2 .ts-pagination-more {
	margin-left: auto !important;
	margin-right: auto !important;
	width: fit-content !important;
}
body.ks-v2 .ts-pagination-more:hover {
	border-color: #fff !important;
	background: rgba(255, 255, 255, 0.06) !important;
}
body.ks-v2 .ts-pagination-more input { display: none !important; }

/* Mobile only: extra breathing room BELOW the Load More button so it
 * doesn't crash into the next channel-section heading. Desktop is
 * fine because section spacing already covers it there. */
@media (max-width: 768px) {
	body.ks-v2 .ts-pagination-more {
		margin-bottom: 30px !important;
	}
}

/* Force slide backgrounds to cover their full stage so secondary
 * sliders don't show empty bands when the source image's aspect ratio
 * doesn't match the stage. */
body.ks-v2 rs-slide rs-sbg,
body.ks-v2 rs-slide rs-sbg-px,
body.ks-v2 rs-slide rs-sbg img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	background-size: cover !important;
	background-position: center !important;
}

/* ===========================================================================
 * START FREE TRIAL — WC Quick Checkout iframe styling
 *
 * The WC Quick Checkout plugin opens /checkout/?qc_loader=true in an
 * iframe. The iframe is same-origin and inherits body.ks-v2 from the
 * functions.php class filter, so styles below ALSO apply inside.
 *
 * Visual target: auth-modals.jsx SignupModal — dark editorial sheet,
 * uppercase dim labels, dark inputs with subtle border, white block
 * submit. Functional checkout flow stays exactly as WC renders it.
 * ============================================================================= */

/* Outer iframe chrome (rendered in parent doc, not the iframe). */
body.ks-v2 .qc-clearfix {
	background: rgba(0, 0, 0, 0.62) !important;
}
/* Hide Magnific Popup's 'Loading…' preloader entirely — we use the
 * iframe-load JS hook (kinoscope_v2_qc_loading_script) to gate when
 * the modal becomes visible at all. */
body.ks-v2 .mfp-preloader,
.mfp-preloader { display: none !important; }
/* While the iframe is still loading, hide ALL modal chrome (the
 * backdrop, the empty collapsed wrapper, the close X). User sees
 * nothing flash before the modal — just the page they were on. */
html.ks-v2-qc-loading .mfp-bg,
html.ks-v2-qc-loading .mfp-wrap,
html.ks-v2-qc-loading .mfp-content,
html.ks-v2-qc-loading .qc-clearfix { visibility: hidden !important; }
/* Magnific Popup outer container — constrain the whole quick-checkout
 * shell (the iframe wrapper) so the modal doesn't span the full vw. */
body.ks-v2 .mfp-content div[id^="quick-checkout-"] {
	max-width: 500px !important;
	margin: 20px auto !important;
	background: transparent !important;
}
body.ks-v2 .qc-clearfix {
	background: transparent !important;
}
body.ks-v2 .qc-clearfix iframe.qc-frame {
	background: #0d0d0d !important;
	border: 1px solid rgba(255, 255, 255, 0.07) !important;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important;
}
/* Close X — replace the plugin's glyph with the same SVG-style stroke
 * used by the login modal (.ks-v2-login-close). Both Magnific Popup's
 * .mfp-close (text '×' at color #333 by default) AND Quick Checkout's
 * .qc-close share this treatment: hide native glyph, draw our own
 * via two rotated pseudo-elements. */
body.ks-v2 .mfp-close,
body.ks-v2 .qc-close {
	position: absolute !important;
	top: 18px !important;
	right: 18px !important;
	width: 30px !important;
	height: 30px !important;
	padding: 6px !important;
	background: transparent !important;
	border: 0 !important;
	color: rgba(255, 255, 255, 0.62) !important;
	font-size: 0 !important; /* hide any inherited text/glyph */
	cursor: pointer !important;
	opacity: 1 !important;
	text-shadow: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: color 0.2s !important;
}
body.ks-v2 .mfp-close::before,
body.ks-v2 .mfp-close::after,
body.ks-v2 .qc-close::before,
body.ks-v2 .qc-close::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 22px;
	height: 1.4px;
	background: currentColor;
	transform-origin: center;
}
body.ks-v2 .mfp-close::before,
body.ks-v2 .qc-close::before { transform: translate(-50%, -50%) rotate( 45deg); }
body.ks-v2 .mfp-close::after,
body.ks-v2 .qc-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
body.ks-v2 .mfp-close:hover,
body.ks-v2 .qc-close:hover { color: #fff !important; }

/* Inside the iframe (same body.ks-v2 class). Loader/preloader chrome
 * the parent theme renders is already hidden by the rules at the top of
 * this file. Below we restyle the actual WooCommerce checkout form. */
/* Match login modal's #0d0d0d so the same rgba(255,255,255,0.04)
 * input fill reads with the same contrast in both modals. */
body.ks-v2.quick-checkout-frame,
body.ks-v2.woocommerce-checkout:not(.ks-v2-order-received) {
	background: #0d0d0d !important;
}
body.ks-v2.quick-checkout-frame div.woocommerce {
	background: #0d0d0d !important;
	padding: 44px !important;
}
/* Iframe-width breakpoint at 450: matches when the iframe shrinks
 * below 450 (= parent viewport got narrow enough to squeeze the
 * 500-cap iframe down). Stays at 44 on desktop, drops to 15 on
 * phones. No JS needed — leverages the natural parent ↔ iframe
 * width correlation. */
@media (max-width: 450px) {
	body.ks-v2.quick-checkout-frame div.woocommerce {
		padding: 15px !important;
	}
}
/* Sub-768 parent viewport: drop modal padding to 15px on phones.
 * The :not(.quick-checkout-frame) guard skips the rule inside the
 * signup iframe (which has its own viewport that's always narrow,
 * so this @media would otherwise fire on every parent size). */
@media (max-width: 767px) {
	body.ks-v2:not(.quick-checkout-frame) .ks-v2-login-modal .modal-content,
	body.ks-v2:not(.quick-checkout-frame) div.woocommerce {
		padding: 15px !important;
	}
}
/* The 640px content cage is for the focused checkout FORM only. Excluding the
 * order-received endpoint lets that page use the full-width layout like the
 * rest of the site, so the header/menu lay out normally instead of being
 * squeezed (which pushed the nav + account actions off-screen). */
body.ks-v2.woocommerce-checkout:not(.ks-v2-order-received) #wrapper {
	max-width: 640px !important;
	margin: 0 auto !important;
	padding: 40px 36px 36px !important;
}

/* WooCommerce notices — by default light theme (white bg, black text,
 * stark black close X). Restyle to dark editorial. */
/* Empty notices wrapper takes up 22px of vertical space for no reason
 * when no notices exist. Collapse it; let it expand back to a real
 * block when content arrives (so error messages still show). */
body.ks-v2.quick-checkout-frame .woocommerce-notices-wrapper:empty,
body.ks-v2.woocommerce-checkout .woocommerce-notices-wrapper:empty,
body.ks-v2.woocommerce-account .woocommerce-notices-wrapper:empty {
	display: none !important;
	margin: 0 !important;
}
body.ks-v2.woocommerce-checkout .woocommerce-notices-wrapper,
body.ks-v2.quick-checkout-frame .woocommerce-notices-wrapper,
body.ks-v2.woocommerce-account .woocommerce-notices-wrapper {
	margin: 0 0 22px !important;
	/* Ensure the notice container is a real block in flow — the parent
	 * theme has loose float/clearfix rules elsewhere that have caused
	 * notices to overlap surrounding content. */
	display: block !important;
	float: none !important;
	clear: both !important;
	position: static !important;
	width: 100% !important;
}
body.ks-v2.woocommerce-checkout .woocommerce-message,
body.ks-v2.woocommerce-checkout .woocommerce-info,
body.ks-v2.woocommerce-checkout .woocommerce-error,
body.ks-v2.woocommerce-checkout .woocommerce-notice,
body.ks-v2.quick-checkout-frame .woocommerce-message,
body.ks-v2.quick-checkout-frame .woocommerce-info,
body.ks-v2.quick-checkout-frame .woocommerce-error,
body.ks-v2.quick-checkout-frame .woocommerce-notice,
body.ks-v2.woocommerce-account .woocommerce-message,
body.ks-v2.woocommerce-account .woocommerce-info,
body.ks-v2.woocommerce-account .woocommerce-error,
body.ks-v2.woocommerce-account .woocommerce-notice {
	background: #111 !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-left: 3px solid rgba(255, 255, 255, 0.55) !important;
	color: #fff !important;
	font-family: var(--ksv2-font) !important;
	font-size: 13px !important;
	font-weight: 300 !important;
	line-height: 1.5 !important;
	padding: 14px 44px 14px 18px !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	position: relative !important;
}
body.ks-v2.woocommerce-checkout .woocommerce-error,
body.ks-v2.quick-checkout-frame .woocommerce-error,
body.ks-v2.woocommerce-account .woocommerce-error {
	border-left-color: oklch(0.65 0.18 25) !important; /* a desaturated red for errors */
}
/* The WC notice "X" dismiss is rendered by WC's notice JS as an <a class="woocommerce-message-close"> or button — hide and restyle so it's a clean white X. */
body.ks-v2 .woocommerce-message::before,
body.ks-v2 .woocommerce-info::before,
body.ks-v2 .woocommerce-error::before { display: none !important; }
body.ks-v2 .woocommerce-message a.button,
body.ks-v2 .woocommerce-info a.button {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
	color: #fff !important;
	font-size: 11px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	padding: 8px 14px !important;
	margin-left: 12px !important;
}
body.ks-v2 .woocommerce-message .close,
body.ks-v2 .woocommerce-info .close,
body.ks-v2 .woocommerce-error .close,
body.ks-v2 .qc-close-notice,
body.ks-v2 .woocommerce-NoticeGroup .close {
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	width: 22px !important;
	height: 22px !important;
	background: transparent !important;
	border: 0 !important;
	color: rgba(255, 255, 255, 0.62) !important;
	font-size: 0 !important; /* hide any inherited text */
	cursor: pointer !important;
	opacity: 1 !important;
	text-shadow: none !important;
}
body.ks-v2 .woocommerce-message .close::before,
body.ks-v2 .woocommerce-info .close::before,
body.ks-v2 .woocommerce-error .close::before,
body.ks-v2 .qc-close-notice::before {
	content: '×';
	font-size: 22px !important;
	line-height: 1;
	display: block;
	color: rgba(255, 255, 255, 0.62) !important;
}
body.ks-v2 .woocommerce-message .close:hover,
body.ks-v2 .woocommerce-info .close:hover,
body.ks-v2 .woocommerce-error .close:hover { color: #fff !important; }
/* Hide the site chrome for the focused checkout FORM only. The order-received
 * (thank-you) endpoint shares the .woocommerce-checkout body class, so exclude
 * it (.ks-v2-order-received, added in functions.php) to keep the normal header/
 * footer there. */
body.ks-v2.woocommerce-checkout:not(.ks-v2-order-received) .ks-v2-header,
body.ks-v2.woocommerce-checkout:not(.ks-v2-order-received) .ks-v2-mobile-cta,
body.ks-v2.woocommerce-checkout:not(.ks-v2-order-received) footer { display: none !important; }
body.ks-v2.woocommerce-checkout h1,
body.ks-v2.woocommerce-checkout h2,
body.ks-v2.woocommerce-checkout h3 {
	font-family: var(--ksv2-font) !important;
	font-weight: 300 !important;
	color: #fff !important;
}
/* WC's default "Billing details" h1 — hide; we inject our own
 * kicker + title via woocommerce_before_checkout_form. */
body.ks-v2.woocommerce-checkout h1 { display: none !important; }
body.ks-v2.woocommerce-checkout h3#order_review_heading { display: none !important; }

/* Login-modal-style kicker + title for the signup. */
body.ks-v2.woocommerce-checkout .ks-v2-checkout-kicker {
	font-family: var(--ksv2-font) !important;
	font-size: 10.5px !important;
	font-weight: 500 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.42) !important;
	margin: 0 0 14px !important;
}
body.ks-v2.woocommerce-checkout h2.ks-v2-checkout-title {
	font-family: var(--ksv2-font) !important;
	font-size: 26px !important;
	font-weight: 300 !important;
	letter-spacing: -0.01em !important;
	line-height: 1.15 !important;
	color: #fff !important;
	margin: 0 0 28px !important;
}
body.ks-v2.woocommerce-checkout h3 {
	font-size: 15px !important;
	font-weight: 500 !important;
	letter-spacing: -0.005em !important;
}
/* Form labels — uppercase 10.5/0.18em/dim above each input. */
body.ks-v2.woocommerce-checkout form .form-row label,
body.ks-v2.woocommerce-checkout label {
	display: block !important;
	font-family: var(--ksv2-font) !important;
	font-size: 10.5px !important;
	font-weight: 500 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.62) !important;
	margin: 0 0 10px !important;
	float: none !important;
	line-height: 1.2 !important;
}
/* Inputs — dark sheet bg, subtle border, 40px tall. */
body.ks-v2.woocommerce-checkout input[type="text"],
body.ks-v2.woocommerce-checkout input[type="email"],
body.ks-v2.woocommerce-checkout input[type="tel"],
body.ks-v2.woocommerce-checkout input[type="password"],
body.ks-v2.woocommerce-checkout input[type="number"],
body.ks-v2.woocommerce-checkout select,
body.ks-v2.woocommerce-checkout textarea {
	width: 100% !important;
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 0 !important;
	color: #fff !important;
	font-family: var(--ksv2-font) !important;
	font-size: 14px !important;
	font-weight: 300 !important;
	letter-spacing: 0.01em !important;
	height: 40px !important;
	padding: 0 16px !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
}
body.ks-v2.woocommerce-checkout textarea { height: auto !important; min-height: 80px !important; padding: 12px 16px !important; line-height: 1.5 !important; }
body.ks-v2.woocommerce-checkout input:focus,
body.ks-v2.woocommerce-checkout select:focus,
body.ks-v2.woocommerce-checkout textarea:focus {
	outline: none !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
}
body.ks-v2.woocommerce-checkout input::placeholder { color: rgba(255, 255, 255, 0.42) !important; font-weight: 300 !important; }

/* Place order / login / register submit — white block button. */
body.ks-v2.woocommerce-checkout #place_order,
body.ks-v2.woocommerce-checkout button.woocommerce-button,
body.ks-v2.woocommerce-checkout button[type="submit"],
body.ks-v2.woocommerce-checkout input[type="submit"] {
	width: 100% !important;
	background: #fff !important;
	color: #000 !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-family: var(--ksv2-font) !important;
	font-size: 11.5px !important;
	font-weight: 500 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	height: 40px !important;
	padding: 0 18px !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
	box-shadow: none !important;
}
body.ks-v2.woocommerce-checkout #place_order:hover,
body.ks-v2.woocommerce-checkout button[type="submit"]:hover { background: rgba(255, 255, 255, 0.92) !important; }

/* Section kicker — emulate SignupModal SectionHeader (n + title + note). */
body.ks-v2.woocommerce-checkout .woocommerce-billing-fields h3,
body.ks-v2.woocommerce-checkout .woocommerce-account-fields h3,
body.ks-v2.woocommerce-checkout #order_review_heading {
	padding-bottom: 14px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
	margin: 28px 0 18px !important;
}

/* Order review table on the right side — pure black to avoid the
 * subtle off-black tone the design called out as 'shouldn't be there'. */
body.ks-v2.woocommerce-checkout .woocommerce-checkout-review-order,
body.ks-v2.woocommerce-checkout #order_review {
	background: #000 !important;
	padding: 24px !important;
	border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* Kill the bluish-grey background on #payment itself. WooCommerce (or
 * a parent theme rule) sets `background: rgba(129, 110, 153, .14)` +
 * `border-radius: 5px` on #payment in the checkout / add-payment /
 * cart flows. That tint is what showed through behind the payment
 * method picker even after we styled .payment_box. */
body.ks-v2 #add_payment_method #payment,
body.ks-v2 .woocommerce-cart #payment,
body.ks-v2 .woocommerce-checkout #payment {
	background: none !important;
	border-radius: 0 !important;
}

/* Payment method box (the white container WC draws around the Stripe
 * Elements iframe + Link Express Checkout). Kill its white bg so only
 * the Stripe-themed inner UI shows through. */
body.ks-v2.woocommerce-checkout .payment_box,
body.ks-v2.woocommerce-checkout div.payment_box.payment_method_stripe,
body.ks-v2.quick-checkout-frame .payment_box {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* The little speech-bubble arrow WC puts above payment_box. */
body.ks-v2.woocommerce-checkout .payment_box::before,
body.ks-v2.woocommerce-checkout .payment_box::after { display: none !important; }

/* Payment method labels — hide the bundled Stripe brand-card SVG
 * (Visa/MC/Amex glyphs drawn on a white pill). They clash with the
 * dark sheet and aren't load-bearing for the form. */
body.ks-v2.woocommerce-checkout .wc_payment_method label img,
body.ks-v2.quick-checkout-frame .wc_payment_method label img {
	display: none !important;
}
/* Lift the payment-method list itself to the dark sheet (UL is sometimes
 * white-ish from WC default styles). */
body.ks-v2.woocommerce-checkout ul.wc_payment_methods,
body.ks-v2.woocommerce-checkout .wc_payment_method {
	background: transparent !important;
	border: 0 !important;
}
body.ks-v2.woocommerce-checkout .wc_payment_method + .wc_payment_method {
	border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}
body.ks-v2.woocommerce-checkout .shop_table,
body.ks-v2.woocommerce-checkout .shop_table th,
body.ks-v2.woocommerce-checkout .shop_table td {
	background: transparent !important;
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.07) !important;
	font-family: var(--ksv2-font) !important;
}
body.ks-v2.woocommerce-checkout .shop_table th { font-size: 10.5px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.62) !important; font-weight: 500 !important; }

/* Quick-checkout modal: clean up payment UI.
 *
 * 1. Only Stripe is enabled, so WC's stock radio + "Credit / Debit
 *    Card" label (per templates/checkout/payment-method.php) are
 *    redundant. Hide both. The .payment_box (Stripe UPE card form)
 *    is a sibling, already styled above, stays visible.
 *
 * 2. Drop the #order_review border so we don't have three visual
 *    frames stacked (modal outer + #order_review + shop_table cells).
 *    The modal's outer border + the shop_table's own dividers are
 *    enough; the inner wrapper just becomes layout. */
body.ks-v2.quick-checkout-frame .wc_payment_methods input[type="radio"],
body.ks-v2.quick-checkout-frame .wc_payment_methods .wc_payment_method > label {
	display: none !important;
}
body.ks-v2.quick-checkout-frame #order_review {
	border: 0 !important;
	padding: 0 !important;
	margin-top: 16px !important;
	background: transparent !important;
}
body.ks-v2.quick-checkout-frame .woocommerce-billing-fields h3 {
	margin-top: 8px !important;
}
body.ks-v2.quick-checkout-frame ul.wc_payment_methods {
	padding: 0 !important;
}
body.ks-v2.quick-checkout-frame .create-account {
	padding-top: 0 !important;
}
/* First Name / Last Name row: WC defaults to 48%+48% (float) which
 * leaves a ~34px gap. Match the tighter ~24px Stripe row by sizing
 * each field to calc(50% - 12px). */
body.ks-v2.quick-checkout-frame .woocommerce-billing-fields p.form-row-first,
body.ks-v2.quick-checkout-frame .woocommerce-billing-fields p.form-row-last {
	width: calc(50% - 12px) !important;
}
/* Vertical spacing between fields: match the login modal's per-row
 * gap, with a touch more breathing room. WC's default is 6px. */
body.ks-v2.quick-checkout-frame form .form-row {
	margin: 0 0 17px !important;
	padding: 0 !important;
}
/* SIGN UP NOW button: WC defaults shrink it inside its parent
 * .form-row.place-order (14px inset each side); force the button
 * to fill the row so its edges align with the order summary +
 * payment box + first/last name row. */
body.ks-v2.quick-checkout-frame .form-row.place-order {
	padding: 0 !important;
	margin-top: 20px !important;
	clear: both !important;
}
/* Stripe Elements wrapper.
 *
 * Two things going on:
 *
 *  1. Stripe sets an inline `height: 2000px` on the outer
 *     .__PrivateStripeElement (its accordion sizing — Card + Bank +
 *     all the card fields stacked). That's correct.
 *
 *  2. A legacy `@media (max-width: 467px) { iframe { max-height: 420px }}`
 *     rule (from one of the parent theme's stylesheets) caps EVERY
 *     iframe on narrow viewports at 420px. Combined with #1, the
 *     Stripe iframe gets clipped to 420px tall — Country + privacy
 *     text fall off the bottom and the SIGN UP NOW button visually
 *     overlays the inputs above it.
 *
 * Override the max-height ONLY for the payment-area iframes inside
 * the QC modal, leaving the legacy rule intact for whatever it was
 * originally protecting (mobile-embedded videos, probably). */
body.ks-v2.quick-checkout-frame .__PrivateStripeElement,
body.ks-v2.quick-checkout-frame .__PrivateStripeElement iframe,
body.ks-v2.quick-checkout-frame .payment_box iframe,
body.ks-v2.quick-checkout-frame .StripeElement,
body.ks-v2.quick-checkout-frame .StripeElement iframe {
	max-height: none !important;
}
body.ks-v2.quick-checkout-frame #place_order {
	width: 100% !important;
	margin: 0 !important;
	display: block !important;
	position: relative !important;
	overflow: hidden !important;
	isolation: isolate;
	background: #fff !important;
	color: #000 !important;
	transition: color 0.25s ease !important;
}
/* Diagonal black sweep — same pattern as .ks-v2-cta in the header.
 * ::before starts off-screen left, skewed; on hover translates into
 * place behind the text. z-index: -1 keeps the text legible above it.
 * Text color inverts from black → white as the sweep arrives. */
body.ks-v2.quick-checkout-frame #place_order::before {
	content: '';
	position: absolute;
	top: -10%;
	bottom: -10%;
	left: 0;
	width: 130%;
	background: #000;
	transform: translateX(-110%) skewX(-18deg);
	transform-origin: top left;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: -1;
}
body.ks-v2.quick-checkout-frame #place_order:hover {
	background: #fff !important;
	color: #fff !important;
}
body.ks-v2.quick-checkout-frame #place_order:hover::before {
	transform: translateX(-15%) skewX(-18deg);
}
/* 1px white border via pinned ::after. Sits above the sweep
 * (z-index:2) so the outline stays visible at every point of the
 * animation. Invisible at rest (white-on-white) — only reveals
 * itself as the black wedge arrives. pointer-events:none keeps
 * the button clickable. */
body.ks-v2.quick-checkout-frame #place_order::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid #fff;
	pointer-events: none;
	z-index: 2;
}

/* ===========================================================================
 * SEARCH MODAL — S3 · Full-screen editorial takeover
 * Matches search-modals.jsx::SearchS3. Full-viewport black panel:
 *   top bar: KINOSCOPE logo (left) + CLOSE × (right)
 *   kicker SEARCH KINOSCOPE → giant search input → 1fr/2fr body:
 *     TRY suggestion list (left) · OR BROWSE BY COLLECTION grid (right)
 * Bootstrap .modal shell stays for open/close JS; everything else
 * is overridden.
 * ============================================================================= */
body.ks-v2 .ks-v2-search-modal.modal {
	background: rgba(0, 0, 0, 0.96) !important;
	padding: 0 !important;
}
body.ks-v2 .ks-v2-search-dialog {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	height: 100vh;
}
body.ks-v2 .ks-v2-search-content {
	background: #000 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #fff !important;
	position: relative !important;
	min-height: 100vh;
	padding: 0 !important;
	text-align: left !important;
}
/* Top bar */
body.ks-v2 .ks-v2-search-bar {
	position: absolute;
	top: 0; left: 0; right: 0;
	padding: 28px clamp(20px, 4vw, 56px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 2;
}
body.ks-v2 .ks-v2-search-logo { display: flex; align-items: center; text-decoration: none; }
body.ks-v2 .ks-v2-search-logo img { width: 90px !important; height: auto !important; display: block; }
body.ks-v2 .ks-v2-search-close {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: transparent;
	border: 0;
	color: rgba(255,255,255,0.62);
	cursor: pointer;
	padding: 6px;
	opacity: 1;
	text-shadow: none;
	transition: color 0.2s;
}
body.ks-v2 .ks-v2-search-close:hover { color: #fff; }
body.ks-v2 .ks-v2-search-close svg { width: 22px; height: 22px; }

/* Content */
body.ks-v2 .ks-v2-search-form {
	padding: 120px clamp(20px, 4vw, 56px) 0;
	display: flex;
	flex-direction: column;
	max-width: 1350px;
	margin: 0 auto;
}
body.ks-v2 .ks-v2-search-kicker {
	font-family: var(--ksv2-font);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.45);
	margin-bottom: 18px;
}
body.ks-v2 .ks-v2-search-input-row {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	margin-bottom: 32px;
}
body.ks-v2 .ks-v2-search-input {
	flex: 1;
	background: transparent !important;
	border: 0 !important;
	outline: none !important;
	color: #fff !important;
	font-family: var(--ksv2-font) !important;
	font-size: 52px !important;
	font-weight: 300 !important;
	letter-spacing: -0.015em !important;
	line-height: 1.2 !important;
	padding: 0 !important;
	height: auto !important;
	box-shadow: none !important;
}
body.ks-v2 .ks-v2-search-input::placeholder { color: rgba(255,255,255,0.3); }
body.ks-v2 .ks-v2-search-submit {
	background: transparent;
	border: 0;
	color: rgba(255,255,255,0.7);
	cursor: pointer;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}
body.ks-v2 .ks-v2-search-submit svg { width: 28px; height: 28px; }
body.ks-v2 .ks-v2-search-submit:hover { color: #fff; }

body.ks-v2 .ks-v2-search-body {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 64px;
}
body.ks-v2 .ks-v2-search-section-kicker {
	font-family: var(--ksv2-font);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.45);
	margin-bottom: 16px;
}
body.ks-v2 ul.ks-v2-search-try-list {
	display: flex !important;
	flex-direction: column;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}
body.ks-v2 .ks-v2-search-try-list li { margin: 0; }
body.ks-v2 .ks-v2-search-try-list a {
	display: inline-block;
	font-family: var(--ksv2-font);
	font-size: 18px;
	font-weight: 300;
	color: rgba(255,255,255,0.85);
	text-decoration: none;
	transition: color 0.2s;
}
body.ks-v2 .ks-v2-search-try-list a:hover { color: #fff; }

body.ks-v2 ul.ks-v2-search-collection-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px !important;
	list-style: none;
	margin: 0;
	padding: 0;
}
body.ks-v2 .ks-v2-search-collection-cell { margin: 0; }
body.ks-v2 .ks-v2-search-collection-cell a {
	display: block;
	text-decoration: none !important;
	color: #fff;
}
body.ks-v2 .ks-v2-search-collection-thumb {
	width: 100%;
	height: 86px;
	background-color: #1a1a1a;
	background-size: cover;
	background-position: center;
	margin-bottom: 10px;
	transition: opacity 0.2s;
}
body.ks-v2 .ks-v2-search-collection-cell a:hover .ks-v2-search-collection-thumb { opacity: 0.78; }
body.ks-v2 .ks-v2-search-collection-title {
	font-family: var(--ksv2-font);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.85);
}

/* Mobile: stack the body single-column, smaller search type. */
@media (max-width: 800px) {
	body.ks-v2 .ks-v2-search-input { font-size: 32px !important; }
	body.ks-v2 .ks-v2-search-body { grid-template-columns: 1fr; gap: 40px; }
	body.ks-v2 ul.ks-v2-search-collection-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===========================================================================
 * LOST PASSWORD page (/my-account/lost-password/)
 * Form-only page — cap content width tightly so it reads as a centred
 * form rather than a single field stretched across 1350px.
 * ============================================================================= */
body.ks-v2.woocommerce-lost-password #content {
	max-width: 600px !important;
	margin: 0 auto !important;
}
body.ks-v2.woocommerce-lost-password form.lost_reset_password {
	max-width: 100% !important;
}

/* ===========================================================================
 * MY ACCOUNT pages (Dashboard, Orders, Subscriptions, Downloads, …)
 * Side-nav + content table layout needs room. 600px was a regression
 * from the lost-password rule and made the orders table sit alone in
 * a 600px column. 1200px gives nav + table both breathe.
 * ============================================================================= */
body.ks-v2.woocommerce-page.woocommerce-account:not(.woocommerce-lost-password) #content {
	max-width: 1200px !important;
	margin: 0 auto !important;
}
/* Reset Password button — parent CSS sets line-height:40 on top of
 * padding:12 22, which pushed the text out of the visual center.
 * Use flex centering + line-height:1 like the other v2 buttons. */
body.ks-v2.woocommerce-lost-password .woocommerce-Button,
body.ks-v2.woocommerce-lost-password button[type="submit"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 12px 22px !important;
}

/* ===========================================================================
 * HOMEPAGE Load More preloader — hide the parent theme's #ts-loading-preload
 * spinner overlay. The AJAX action loads fast enough that the spinner just
 * flashes awkwardly. Items appear when the response renders; that's enough.
 * ============================================================================= */
body.ks-v2 #ts-loading-preload,
body.ks-v2 #ts-loading-preload * { display: none !important; }

/* ===========================================================================
 * PLYR PLAYER — Plyr 3.7.8 with targeted overrides
 *
 * Keep Plyr's layout + spacing defaults. Override only:
 *   1. black video bg + Inter font (site context)
 *   2. white accent instead of Plyr's brand blue
 *   3. transparent control-bar backdrop (Plyr's default dark gradient
 *      reads as a grey haze over the video at the bottom)
 *   4. white range thumb + fill to match the white accent
 * ============================================================================= */
body.ks-v2 .plyr {
	--plyr-video-background:          #000000;
	--plyr-font-family:               var(--ksv2-font);
	--plyr-color-main:                #ffffff;
	--plyr-video-controls-background: transparent;
	--plyr-range-thumb-background:    #ffffff;
	--plyr-range-fill-background:     #ffffff;
}
/* Play overlay button (the big center play circle) — Plyr fills it
 * with --plyr-color-main (solid white) and uses the same on hover,
 * which obscures the video frame underneath. Drop to 20% / 35% white
 * so the frame remains visible while the button stays legible. */
body.ks-v2 .plyr__control--overlaid {
	background: rgba(255, 255, 255, 0.2) !important;
	color: #ffffff !important;
}
body.ks-v2 .plyr__control--overlaid:hover,
body.ks-v2 .plyr__control--overlaid:focus {
	background: rgba(255, 255, 255, 0.35) !important;
}
/* Control bar buttons (play, mute, settings, etc.) — also avoid the
 * pure-white hover/focus fill that hides the icon glyph. */
body.ks-v2 .plyr--video .plyr__control:hover,
body.ks-v2 .plyr--video .plyr__control[aria-expanded="true"],
body.ks-v2 .plyr--video .plyr__control.plyr__tab-focus {
	background: rgba(255, 255, 255, 0.2) !important;
	color: #ffffff !important;
}
/* Lift the control bar 20px off the slot's bottom edge so the
 * scrubber + buttons aren't flush against the viewport bottom.
 * The <video> itself still fills the full slot (object-fit: contain
 * already letterboxes); only the control bar's `bottom` origin
 * shifts up. */
body.ks-v2.single-video .plyr--video .plyr__controls {
	bottom: 20px !important;
}

/* ===========================================================================
 * WOOCOMMERCE ACCOUNT (image 26 inspiration — CSS only)
 * Light touches to the my-account dashboard, not a markup rewrite.
 * ============================================================================= */

body.ks-v2.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
}
body.ks-v2.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 14px 18px;
	font-size: 14px;
	color: var(--ksv2-text-dim);
	text-decoration: none;
	border-left: 2px solid transparent;
}
body.ks-v2.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
body.ks-v2.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	color: var(--ksv2-text);
	border-left-color: var(--ksv2-text);
	background: rgba(255,255,255,0.03);
}
body.ks-v2.woocommerce-account .woocommerce-MyAccount-content h2,
body.ks-v2.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-size: 28px;
	font-weight: 300;
	letter-spacing: -0.01em;
	margin: 0 0 20px;
}
body.ks-v2.woocommerce-account .button {
	padding: 12px 22px !important;
	font-size: 11px !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
}

/* Hide any link that points at the WooCommerce shop page. The shop is
 * not part of the public site, so any /shop/ link is a dead-end. WC
 * surfaces them in several empty states:
 *   - Orders / Downloads:    .woocommerce-info .button.wc-forward → /shop/
 *   - Subscriptions:         .woocommerce-Message .button.wc-forward → /shop/
 * Catch them all by href. Scoped to .woocommerce-account so we don't
 * also kill any legitimate /shop/ link elsewhere in the theme. */
body.ks-v2.woocommerce-account a[href$="/shop/"],
body.ks-v2.woocommerce-account a[href$="/shop"],
body.ks-v2.woocommerce-account a[href*="/shop/?"],
body.ks-v2.woocommerce-account .button.wc-forward {
	display: none !important;
}

/* Addresses page (/my-account/edit-address/) — each address column has
 * <header.woocommerce-Address-title> with an <h3> heading and an <a>
 * "Edit / Add" link. The parent theme renders these as stacked blocks
 * with the link floated right, so the link ends up on its own line far
 * from the heading. Switch the header to a flex row so heading + link
 * sit on the same baseline. */
body.ks-v2.woocommerce-account .woocommerce-Address-title {
	display: flex !important;
	flex-direction: row !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: 16px !important;
	margin-bottom: 16px !important;
}
body.ks-v2.woocommerce-account .woocommerce-Address-title > a {
	float: none !important;
	font-size: 11px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--ksv2-text) !important;
	text-decoration: underline !important;
	text-underline-offset: 4px !important;
	white-space: nowrap !important;
}

/* Orders table — Actions cell: the WC "View" button used to render
 * right-aligned and at a low-contrast grey. Center it within its cell
 * and bring the contrast up so it reads as a real button. */
body.ks-v2.woocommerce-account .woocommerce-orders-table th.woocommerce-orders-table__header-order-actions,
body.ks-v2.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
	text-align: center !important;
}
body.ks-v2.woocommerce-account .woocommerce-orders-table .button,
body.ks-v2.woocommerce-account .woocommerce-orders-table .woocommerce-button {
	color: #fff !important;
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
}
body.ks-v2.woocommerce-account .woocommerce-orders-table .button:hover,
body.ks-v2.woocommerce-account .woocommerce-orders-table .woocommerce-button:hover {
	background: #fff !important;
	color: #000 !important;
}

/* ===========================================================================
 * SR PARALLAX OFFSET — Slider Revolution wraps every layer in
 * <rs-layer-wrap class="rs-parallax-wrap">, and that wrapper carries a CSS
 * `transform: matrix(…, -25, 0)` (or -55 at desktop) so SR has room to
 * animate the layer horizontally during scroll-parallax. The same negative
 * X-shift is what causes the darkening overlay to fall short of the slider's
 * right edge AND the slider title's visible glyphs to land off the section
 * heading axis on the left.
 *
 * Disabling parallax on these sliders is the cleanest fix: there's no
 * meaningful parallax content here (single bg image per slide, no depth),
 * and the side effects are far worse than the (absent) animation benefit.
 * ============================================================================= */
body.ks-v2 rs-module-wrap rs-layer-wrap.rs-parallax-wrap {
	transform: none !important;
	/* SR sets a CSS `left` on the parallax-wrap derived from each layer's
	 * data-xy "xo" value (e.g. left: 75px at desktop, 24px at mobile). We
	 * zero it here for ALL wraps so the layer position is fully controlled
	 * by the per-layer-type overrides below. Without this, our overrides
	 * stack on top of SR's offset and push the glyphs too far right. */
	left: 0 !important;
}

/* SR also positions text/button layer-wraps via a CSS `left: 55–75px` derived
 * from each layer's data-xy "xo" value. That pushes the visible glyphs off
 * the page's content axis. Pull text/button wraps to the same 15px axis as
 * the body's .container indent, so slider titles + section headings sit on
 * the same vertical line. (Shape/overlay wraps are excluded via :has() so
 * the overlay-edge fix above isn't disturbed.) */
/* Target the text/button LAYERS directly (not the wrap), so we don't need
 * :has() — which still isn't supported in older mobile Safari. SR sets
 * each layer's `left` inline from its data-xy "xo" value; we override that
 * to the page's content axis (same max-width 1350 + 20 padding + center
 * math as .ks-v2-header-inner, so glyphs sit under the logo). The shape
 * (overlay) layer is excluded by the data-type filter. */
body.ks-v2 rs-module-wrap rs-slide rs-layer[data-type="text"],
body.ks-v2 rs-module-wrap rs-slide a.rs-layer {
	/* Default for wide viewports: page content axis is at
	 * max(40px, (vw-1350)/2 + 40) = max(40px, calc(50vw - 635px)).
	 * (40px is the side padding bumped to give the site more
	 * breathing room above the 768 breakpoint.) */
	left: max(40px, calc(50vw - 635px)) !important;
}

/* Phones (≤768) use a tighter 22px padding so we don't waste space. */
@media (max-width: 768px) {
	body.ks-v2 rs-module-wrap rs-slide rs-layer[data-type="text"],
	body.ks-v2 rs-module-wrap rs-slide a.rs-layer {
		left: 22px !important;
	}
}

/* btldff (SR slider id 12) is configured `layouttype: auto` not `fullwidth`,
 * so its slide already sits inside the body .container — slide.left is
 * already on the content axis. Zero out the layer-left so its glyphs
 * aren't double-indented. */
body.ks-v2 rs-module-wrap[id^="rev_slider_12_"] rs-slide rs-layer[data-type="text"],
body.ks-v2 rs-module-wrap[id^="rev_slider_12_"] rs-slide a.rs-layer {
	left: 0 !important;
}

/* CTA button: keep its natural size (text + padding + border). The
 * surrounding rs-mask-wrap is 100vw wide so the button can slide in
 * from x:-175% with room to land, but the BUTTON ITSELF must size to
 * its content — otherwise it stretches across the full viewport. */
body.ks-v2 rs-module-wrap rs-slide a.rs-layer {
	width: max-content !important;
	max-width: 100vw;
}

/* SR wraps each text layer in <rs-mask-wrap overflow: hidden> for the
 * slide-in reveal animation. The wrap is sized to the layer's design-time
 * width via inline style — fine for short titles but clips longer ones
 * mid-character on subsequent slides.
 *
 * Insight from spec: the title + subtitle masks are *vertical-only*
 * reveals (layer translates from y:-100% into view, mask clips
 * everything above its top edge). The horizontal extent of the mask
 * is irrelevant to the animation — we just need it wider than the
 * widest possible title. Force `width: 100vw` so any title length
 * fits, and also blow out the parent .rs-loop-wrap / .rs-parallax-wrap
 * `overflow` so they don't re-clip what mask-wrap deliberately doesn't.
 *
 * The CTA button mask is *horizontal-only* (button translates from
 * x:-175% rightward into view). Same trick — make the mask 100vw so
 * its right edge is well past the button's resting position; the
 * left edge of the mask is what clips during the animation, and
 * that's anchored by SR via the wrap's `left` position.
 *
 * Scoped via :has() to mask-wraps that contain a TEXT or BUTTON layer
 * only. Shape (overlay) layers' mask-wraps keep their full-slide width
 * so the dark overlay continues to span edge-to-edge. */
body.ks-v2 rs-module-wrap rs-mask-wrap:has(rs-layer[data-type="text"]),
body.ks-v2 rs-module-wrap rs-mask-wrap:has(a.rs-layer) {
	width: 100vw !important;
	max-width: 100vw !important;
	min-width: 0 !important;
}
/* Don't let ancestors visually re-clip the mask-wrap. SR's loop-wrap and
 * parallax-wrap default to overflow:visible already, but force it here
 * just so any inline `overflow:hidden` SR's runtime might add can't
 * cut off our newly-widened masks. (Slide itself keeps overflow:hidden
 * — that's how the title still clips at the slide's right edge.) */
body.ks-v2 rs-module-wrap rs-loop-wrap,
body.ks-v2 rs-module-wrap rs-layer-wrap.rs-parallax-wrap {
	overflow: visible !important;
}

/* ===========================================================================
 * Smooth scroll-parallax on slider bg images.
 *
 * SR converts each slide's bg image to a <canvas> wrapped in <rs-sbg-px>,
 * then sets `style="transform: translate(0px, Npx)"` on that wrapper on
 * every scroll event with no frame batching — producing visible jitter.
 * Lock that wrapper's transform to none so SR's writes have no effect.
 *
 * Smooth replacement is applied to <rs-sbg-wrap> by slider-parallax.js
 * through requestAnimationFrame. CSS here pre-applies scale(1.1) so the
 * bg has 5% breathing room on every edge — the ±30px translate the JS
 * applies never exposes the slide's bg color.
 * ============================================================================= */
body.ks-v2 rs-module-wrap rs-slide rs-sbg-px {
	transform: none !important;
}
body.ks-v2 rs-module-wrap rs-slide rs-sbg-wrap {
	transform: scale(1.1);
	transform-origin: center;
	will-change: transform;
}

/* ===========================================================================
 * MOBILE/TABLET STACKING — at < 1200px every multi-column videos-section row
 * collapses to a single column. The legacy theme's grid emits either explicit
 * `col-xs-6` (mosaic) or only `col-sm-*`/`col-md-*` with no col-xs-* fallback
 * (ts-big-posts, ts-grid-view), and at tablet widths the resulting 2-column
 * layout becomes cramped — image takes 60%+, text wraps line-by-line. We pull
 * the stacking threshold up to Bootstrap-3's lg breakpoint so portrait
 * tablets (768) and small laptops (1024) stack the same as phones. Full
 * desktop (≥1200) keeps the original multi-column layout intact.
 * ============================================================================= */
@media (max-width: 1199px) {
	body.ks-v2 .mosaic-view > [class*="col-"],
	body.ks-v2 .ts-big-posts article > .row > [class*="col-"],
	body.ks-v2 .ts-grid-view > [class*="col-"] {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	/* Override the parent grid-template-columns (which lives on the same
	 * row with display:grid) so single-column stacking actually takes
	 * effect — width:100% alone has no effect inside a multi-column grid. */
	body.ks-v2 .ts-big-posts article > .row,
	body.ks-v2 .ts-grid-view {
		grid-template-columns: 1fr !important;
	}
	/* The grid-column pinning above (header→1, div→2) needs to be reset
	 * to auto, otherwise the second child still lives in a phantom 2nd
	 * column slot and ends up below the first regardless of order. */
	body.ks-v2 .ts-big-posts article > .row > header,
	body.ks-v2 .ts-big-posts article > .row > div {
		grid-column: auto !important;
	}

	/* Mosaic mixes col-lg-6 and col-lg-3 children, each with their own
	 * `grid-column: span N` rule. Setting `grid-template-columns: 1fr`
	 * doesn't help because the spans force implicit columns. Drop the
	 * grid layout entirely below desktop and let children flow as plain
	 * block elements at 100% width with a vertical gap between them. */
	body.ks-v2 .mosaic-view {
		display: block !important;
	}
	body.ks-v2 .mosaic-view > [class*="col-"] {
		display: block !important;
		grid-column: auto !important;
		margin-bottom: 30px !important;
	}
	body.ks-v2 .mosaic-view > [class*="col-"]:last-child {
		margin-bottom: 0 !important;
	}
}

/* ===========================================================================
 * SINGLE-VIDEO BELOW-PLAYER INFO (redesign-v2)
 *
 * Renders to the structure in partials/single-video-info-v2.php:
 *
 *   .ks-v2-video-info
 *     .ks-v2-video-info-inner            (max-width 1350 + side padding)
 *       .ks-v2-video-breadcrumbs         (HOME / channel / title)
 *       .ks-v2-video-info-grid           (2fr / 1fr grid)
 *         .ks-v2-video-info-main         (title, meta-line, synopsis, CTA)
 *         .ks-v2-video-info-side         (meta rows + channels pills)
 *
 * Also hides the legacy <div class="container singular-container"> that
 * lives inside <section id="main"> on single-video pages, so we don't
 * double-render the post header / content. The .ts-related-video-container
 * sibling is left alone.
 * ============================================================================= */
body.ks-v2.single-video #main > .container.singular-container {
	display: none !important;
}

.ks-v2-video-info {
	background: var(--ksv2-bg);
	color: var(--ksv2-text);
}
.ks-v2-video-info-inner {
	max-width: 1350px;
	margin: 0 auto;
	/* Top: 36 (was 56) — tighter gap between the player and the breadcrumb. */
	padding: 36px clamp(20px, 4vw, 56px) 80px;
}

/* Breadcrumb */
.ks-v2-video-breadcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ksv2-text-dimmer);
	margin-bottom: 28px;
}
.ks-v2-video-breadcrumbs a {
	color: var(--ksv2-text-dimmer);
	text-decoration: none;
}
.ks-v2-video-breadcrumbs a:hover { color: var(--ksv2-text); }
.ks-v2-video-breadcrumbs__sep { color: rgba(255,255,255,0.25); }
.ks-v2-video-breadcrumbs__current { color: var(--ksv2-text); }

/* Grid */
.ks-v2-video-info-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: clamp(28px, 5vw, 80px);
	align-items: start;
}

/* Main column */
.ks-v2-video-title {
	margin: 0 0 18px;
	font-family: var(--ksv2-font);
	font-size: clamp(40px, 5vw, 64px);
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.02;
	color: var(--ksv2-text);
}
.ks-v2-video-metaline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ksv2-text-dim);
	margin-bottom: 36px;
}
.ks-v2-video-metaline__sep { color: rgba(255,255,255,0.2); }
.ks-v2-video-synopsis {
	font-size: 17px;
	font-weight: 300;
	line-height: 1.65;
	color: rgba(255,255,255,0.88);
	margin: 0 0 36px;
	max-width: 720px;
	text-wrap: pretty;
}
.ks-v2-video-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}
.ks-v2-video-cta {
	display: inline-block;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: 14px 28px;
	font-family: var(--ksv2-font);
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	color: #000 !important;          /* beat theme-styles.css `a:hover { color: #FFF }` global */
	background: #fff !important;     /* beat .quick-checkout-button base styling */
	border: none;
	text-align: center;
	text-indent: 0.18em;
	text-decoration: none;
	cursor: pointer;
	margin: 0 !important;            /* beat the legacy 15px top/bottom margin */
	transition: color 0.25s ease;
}
/* Same diagonal black-sweep hover as the header `.ks-v2-cta`. The
 * !important on the color flip beats the theme-wide `a:hover { color:
 * #FFF }` rule that was making the text invisible against the white bg. */
.ks-v2-video-cta::before {
	content: '';
	position: absolute;
	top: -10%;
	bottom: -10%;
	left: 0;
	width: 130%;
	background: #000;
	transform: translateX(-110%) skewX(-18deg);
	transform-origin: top left;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: -1;
}
.ks-v2-video-cta:hover::before { transform: translateX(-15%) skewX(-18deg); }
.ks-v2-video-cta:hover { color: #fff !important; }
/* 1px white border pinned above the sweep — invisible against the white
 * button at rest, becomes the visible button outline once the black sweep
 * wipes in on hover (same trick as the header `.ks-v2-cta`). */
.ks-v2-video-cta::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid #fff;
	pointer-events: none;
	z-index: 2;
}
.ks-v2-video-cta-note {
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ksv2-text-dimmer);
	font-weight: 500;
}

/* Sidebar */
.ks-v2-video-info-side {
	font-family: var(--ksv2-font);
}
.ks-v2-video-meta-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--ksv2-divider-soft);
	font-size: 13.5px;
}
.ks-v2-video-meta-label {
	color: var(--ksv2-text-dim);
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.ks-v2-video-meta-value {
	color: var(--ksv2-text);
	font-weight: 400;
	text-align: right;
}
.ks-v2-video-channels {
	margin-top: 28px;
}
.ks-v2-video-channels__label {
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ksv2-text-dim);
	margin-bottom: 12px;
	font-weight: 500;
}
.ks-v2-video-channels__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.ks-v2-video-channel-pill {
	display: inline-block;
	/* Horizontal padding is 16px (11 + 5) so longer channel names breathe
	 * inside the rounded border instead of crowding the edges. */
	padding: 6px 16px;
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 999px;
	font-size: 11.5px;
	color: rgba(255,255,255,0.85);
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.ks-v2-video-channel-pill:hover {
	border-color: rgba(255,255,255,0.45);
	color: var(--ksv2-text);
}

/* Stack the 2-col grid below 768. */
@media (max-width: 767px) {
	.ks-v2-video-info-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* ---------------------------------------------------------------------------
 * Mobile paywall fallback
 *
 * The overlay paywall card (locked-content.php / .locked-paywall) is
 * absolute-positioned inside the player frame and can't fit on phone
 * widths — the player area is short, the card is tall, and the message
 * gets clipped or cropped. On mobile we hide that overlay and render a
 * plain text version inline below the player (.ks-v2-video-paywall-mobile,
 * emitted by single-video-info-v2.php). The "Start Free Trial" button
 * + "Already a subscriber? Log in" link already live in the info section
 * around it.
 * ------------------------------------------------------------------------- */
.ks-v2-video-paywall-mobile,
.ks-v2-video-paywall-mobile__foot {
	display: none;
}
/* Hide the mobile-only "Members only" pill on every breakpoint by default;
 * the media query below switches it on at phone widths. Note: the pill is
 * a sibling of .locked-paywall inside .locked-wrap, both classed
 * .locked-div, so locked-content.php's appendTo('#videoframe .overimg')
 * relocates both into the player frame at runtime. */
body.ks-v2 .ks-v2-locked-pill {
	display: none;
}
@media (max-width: 767px) {
	body.ks-v2.single-video .locked-paywall {
		display: none !important;
	}
	/* The locked-wrap itself must stay rendered so its .locked-div children
	 * (including the pill) get appended into the player frame by
	 * locked-content.php's jQuery. Only the card inside is hidden. */
	body.ks-v2 a.ks-v2-locked-pill,
	body.ks-v2 .ks-v2-locked-pill {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		position: absolute;
		top: 50% !important;
		left: 50% !important;
		/* width/margin overrides beat child-style.css's
		 * `.locked-div { width:300px; margin-left:-150px; margin-top:60px }`
		 * which would otherwise stretch the pill to 300px and offset it. */
		width: auto !important;
		margin: 0 !important;
		transform: translate(-50%, -50%);
		padding: 10px 16px;
		background: rgba(0, 0, 0, 0.45);
		border: 1px solid rgba(255, 255, 255, 0.22);
		color: #fff !important;
		font-family: var(--ksv2-font);
		font-size: 10.5px;
		font-weight: 400;
		letter-spacing: 2.31px;
		text-transform: uppercase;
		line-height: 1;
		white-space: nowrap;
		text-decoration: none;
		cursor: pointer;
		z-index: 5;
		transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	}
	body.ks-v2 a.ks-v2-locked-pill:hover,
	body.ks-v2 a.ks-v2-locked-pill:focus-visible {
		background: rgba(255, 255, 255, 0.92);
		border-color: rgba(255, 255, 255, 0.92);
		color: #000 !important;
		outline: none;
	}
	body.ks-v2 .ks-v2-locked-pill svg {
		width: 13px;
		height: 13px;
		flex: 0 0 auto;
	}
	/* Anchor target for the pill tap-to-scroll. The sticky header is ~74px
	 * tall, so push the section below it. */
	#ks-v2-paywall-anchor {
		scroll-margin-top: 90px;
	}
	.ks-v2-video-paywall-mobile {
		display: block;
		margin: 8px 0 24px;
	}
	.ks-v2-video-paywall-mobile__title {
		margin: 0 0 12px;
		font-family: var(--ksv2-font);
		font-size: 26px;
		font-weight: 300;
		letter-spacing: -0.01em;
		line-height: 1.15;
		color: var(--ksv2-text);
	}
	.ks-v2-video-paywall-mobile__body {
		font-size: 15px;
		font-weight: 300;
		line-height: 1.55;
		color: var(--ksv2-text-dim);
		margin: 0;
	}
	.ks-v2-video-paywall-mobile__foot {
		display: block;
		margin-top: 16px;
		font-size: 13px;
		color: var(--ksv2-text-dimmer);
	}
	.ks-v2-video-paywall-mobile__foot a {
		color: var(--ksv2-text);
		text-decoration: underline;
		text-underline-offset: 2px;
	}
	/* CTA goes full width on mobile so it doesn't look orphaned. */
	body.ks-v2.single-video .ks-v2-video-cta-row {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	body.ks-v2.single-video .ks-v2-video-cta {
		text-align: center;
		width: 100%;
		box-sizing: border-box;
	}
	body.ks-v2.single-video .ks-v2-video-cta-note {
		text-align: center;
	}
}

/* ===========================================================================
 * RELATED FILMS section (redesign-v2). Hides the legacy tabbed
 * .ts-related-video-container in favor of a clean grid pulled from the same
 * primary channel — see partials/single-video-related-v2.php.
 * ============================================================================= */
body.ks-v2.single-video .ts-related-video-container {
	display: none !important;
}

.ks-v2-related-films {
	background: var(--ksv2-bg);
	color: var(--ksv2-text);
	/* No bottom padding — the footer's own padding-top + margin provides
	 * the breathing room above the footer, consistent with other pages. */
	padding-bottom: 0;
}
.ks-v2-related-films-inner {
	max-width: 1350px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 56px);
}
.ks-v2-related-films-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	/* Space around the divider line bumped +20% on both sides:
	 *   above (padding-bottom): 22 → 26
	 *   below (margin-bottom):  28 → 34 */
	padding-bottom: 26px;
	border-bottom: 1px solid var(--ksv2-divider);
	margin-bottom: 34px;
}
.ks-v2-related-films-title {
	margin: 0;
	font-family: var(--ksv2-font);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 300;
	letter-spacing: -0.005em;
	color: var(--ksv2-text);
}
.ks-v2-related-films-kicker {
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ksv2-text-dim);
	font-weight: 500;
}
.ks-v2-related-films-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 28px;
}
.ks-v2-related-film-card {
	margin: 0;
	padding: 0;
}
.ks-v2-related-film-link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.ks-v2-related-film-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #111;
	overflow: hidden;
	margin-bottom: 12px;
}
.ks-v2-related-film-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}
.ks-v2-related-film-link:hover .ks-v2-related-film-thumb img {
	transform: scale(1.03);
}
.ks-v2-related-film-title {
	font-family: var(--ksv2-font);
	font-size: 17px;
	font-weight: 400;
	color: var(--ksv2-text);
	margin-bottom: 4px;
	line-height: 1.3;
}
.ks-v2-related-film-meta {
	font-family: var(--ksv2-font);
	font-size: 13px;
	color: var(--ksv2-text-dim);
	line-height: 1.4;
}

/* ===========================================================================
 * FOOTER — restore the standard Bootstrap col gutter on the three footer
 * columns so they don't crowd each other.
 *
 * The blanket `body.ks-v2 .container [class*="col-"] { padding: 0 }` rule
 * upstream zeroes col padding for the body container's grid (which doesn't
 * need gutters there). That same rule was stripping the gap between the
 * "Kinoscope" / "Find us here" / "Submit Your Film" footer columns. Put
 * the 15px-per-side padding back specifically for the footer's top-level
 * row, and re-offset the row with -15px margins so the outer content
 * still aligns flush with the container edges (Bootstrap's standard
 * negative-margin row pattern).
 * ============================================================================= */
body.ks-v2 footer .site-section > .container > .row > [class*="col-"] {
	padding-left: 15px !important;
	padding-right: 15px !important;
}
body.ks-v2 footer .site-section > .container > .row {
	margin-left: -15px !important;
	margin-right: -15px !important;
}

/* === Single blog post layout (e.g. /breanna-box/) =======================
 *  1. Title left-aligned, no extra leading space (the singular template
 *     already clears the sticky header via its top section).
 *  2. Hide the post-title-meta (date + author byline) — not wanted in
 *     editorial post layout.
 *  3. Add breathing room below featured image / first wp-block-columns
 *     so the bio doesn't sit flush against the photo.
 *  4. Episode videos render single-column (the multi-column grid was
 *     fighting with the Gutenberg column widths and looked off). */
body.ks-v2.single-post .post-header {
	text-align: left !important;
	padding-top: 40px !important;
	margin-top: 0 !important;
}
body.ks-v2.single-post .post-header .page-title {
	text-align: left !important;
	margin-left: 0 !important;
}
body.ks-v2.single-post .post-header .post-title-meta {
	display: none !important;
}
/* Featured image / first columns row → bottom spacing before bio text. */
body.ks-v2.single-post .post-content > .wp-block-columns:first-child,
body.ks-v2.single-post .post-content .wp-block-image {
	margin-bottom: 32px !important;
}
/* Episode video rows: phone = 1 col, tablet+ = 2 col.
 *
 * Targeting `.wp-block-columns:has(.kino-video)` to use it as a
 * grid container. The earlier display:block + width:100% on its
 * .wp-block-column children "freed" any nested episode rows from
 * being squeezed by an enclosing bio column (some episode rows
 * are top-level, some are nested inside the bio's text column);
 * here we keep that liberation but switch the children back to
 * grid cells so they tile instead of stacking. */
body.ks-v2.single-post .post-content .wp-block-columns:has(.kino-video) {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-bottom: 24px !important;
}
@media (min-width: 768px) {
	body.ks-v2.single-post .post-content .wp-block-columns:has(.kino-video) {
		grid-template-columns: 1fr 1fr;
	}
}
body.ks-v2.single-post .post-content .wp-block-columns:has(.kino-video) .wp-block-column {
	flex: unset !important;
	width: auto !important;
	margin: 0 !important;
	min-width: 0 !important;
}
body.ks-v2.single-post .post-content .kino-video {
	width: 100% !important;
	height: auto !important;
	display: block !important;
}
/* Comments unused on editorial single-post layout. */
body.ks-v2.single-post .single-post-comments {
	display: none !important;
}

/* ===========================================================================
 * SEARCH RESULTS page — heading typography
 * Parent theme renders the result count as <h3 class="archive-title
 * searchcount"> with mixed bold/regular runs in <span> + <b>. Normalize
 * font + weight so it reads in the v2 editorial style.
 * ============================================================================= */
body.ks-v2 h3.archive-title.searchcount {
	font-family: var(--ksv2-font) !important;
	font-size: 22px !important;
	font-weight: 300 !important;
	text-transform: none !important;
	letter-spacing: -0.005em !important;
	color: var(--ksv2-text) !important;
	margin: 24px 0 32px !important;
}
body.ks-v2 h3.archive-title.searchcount span {
	display: inline !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	color: inherit !important;
}
body.ks-v2 h3.archive-title.searchcount b {
	font-weight: 600 !important;
	text-decoration: none !important;
	border-bottom: 0 !important;
}