/*
 * No One Movies - Frontend Styles
 * Version: 1.0.13
 *
 * Palette: deep void background, blood-red accent.
 * Fonts: Bebas Neue (display, condensed all-caps for titles), Inter (body and UI).
 */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
	--nom-void:          #06060C;
	--nom-deep:          #0B0B14;
	--nom-surface:       #111119;
	--nom-card:          #16161F;
	--nom-elevated:      #1C1C28;
	--nom-border:        #252535;
	--nom-border-light:  #2E2E42;
	--nom-accent:        #DC2626;
	--nom-accent-bright: #EF4444;
	--nom-accent-dim:    rgba(220, 38, 38, 0.12);
	--nom-accent-glow:   rgba(220, 38, 38, 0.25);
	--nom-fg:            #EAEAF0;
	--nom-fg-dim:        #9494AC;
	--nom-fg-mute:       #5E5E76;
	--nom-blue:          #4A8FE7;
	--nom-green:         #3DD68C;
	--nom-radius:        12px;
	--nom-radius-sm:     8px;
	--nom-font-display:  'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
	--nom-font-body:     'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--nom-font-mono:     ui-monospace, SFMono-Regular, Menlo, monospace;
	--nom-container:     1400px;
}

* { box-sizing: border-box; }

/* Force the HTML hidden attribute to always work, regardless of later display rules.
 * Fixes click-blocking by inactive overlays in 1.0.6/1.0.7. */
[hidden] { display: none !important; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--nom-void);
	color: var(--nom-fg);
	font-family: var(--nom-font-body);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* (Film grain overlay removed in 1.0.7 - was causing click-blocking issues on some browsers.) */

a {
	color: var(--nom-fg);
	text-decoration: none;
	transition: color 140ms ease;
}
a:hover { color: var(--nom-accent); }

img { max-width: 100%; display: block; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--nom-void); }
::-webkit-scrollbar-thumb { background: var(--nom-border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--nom-accent); }

.nom-sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

.nom-accent { color: var(--nom-accent); }

/* === Site shell rules live in the v1.0.6 section near the end of this file. === */

.nom-site-main, .nom-home {
	min-height: 60vh;
}

/* === Homepage Hero === */

.nom-hero {
	position: relative;
	width: 100%;
	min-height: 500px;
	overflow: hidden;
	user-select: none;
}

@media (min-width: 640px)  { .nom-hero { min-height: 550px; } }
@media (min-width: 1024px) { .nom-hero { min-height: 650px; } }

.nom-hero-slides { position: absolute; inset: 0; }

.nom-hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1200ms linear;
	pointer-events: none;
}
.nom-hero-slide.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 2;
}

.nom-hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: brightness(0.45) saturate(1.2);
}

.nom-hero-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, var(--nom-void) 0%, rgba(6,6,12,0.5) 50%, transparent 100%),
		linear-gradient(90deg, rgba(6,6,12,0.8) 0%, transparent 60%, rgba(6,6,12,0.7) 100%);
}

.nom-hero-content {
	position: absolute;
	bottom: 48px;
	left: 0;
	right: 0;
	padding: 0 16px;
	z-index: 2;
	max-width: 700px;
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nom-hero-slide.is-active .nom-hero-content {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 100ms;
}

@media (min-width: 768px) {
	.nom-hero-content { bottom: 80px; padding: 0 32px; }
}
@media (min-width: 1280px) {
	.nom-hero-content { bottom: 96px; padding: 0 60px; }
}

.nom-hero-badges {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.nom-hero-pill {
	background: var(--nom-accent);
	color: #fff;
	font-weight: 900;
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 3px;
	box-shadow: 0 4px 16px var(--nom-accent-glow);
}

.nom-hero-meta-pill {
	color: rgba(255,255,255,0.6);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.nom-hero-title {
	font-family: var(--nom-font-display);
	font-weight: 400;
	font-size: 44px;
	line-height: 0.92;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	margin: 0 0 12px;
	color: #fff;
	text-shadow: 0 8px 32px rgba(0,0,0,0.6);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (min-width: 768px)  { .nom-hero-title { font-size: 72px; } }
@media (min-width: 1280px) { .nom-hero-title { font-size: 100px; } }

.nom-hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	font-size: 13px;
	color: var(--nom-fg-dim);
}

.nom-hero-rating {
	color: var(--nom-accent);
	font-weight: 700;
}

.nom-hero-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--nom-fg-mute);
}

.nom-hero-type {
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.1em;
}

.nom-hero-overview {
	display: none;
	color: var(--nom-fg-dim);
	max-width: 560px;
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 20px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (min-width: 768px) { .nom-hero-overview { display: -webkit-box; font-size: 15px; } }

.nom-hero-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.nom-hero-watch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 28px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--nom-accent) 0%, #B91C1C 100%);
	color: #fff;
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 0.05em;
	box-shadow: 0 8px 32px var(--nom-accent-glow);
	transition: transform 200ms ease, box-shadow 200ms ease;
}
.nom-hero-watch:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 40px var(--nom-accent-glow);
}
.nom-hero-play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	color: #fff;
}
.nom-hero-play svg {
	width: 14px;
	height: 14px;
}

.nom-hero-thumb-wrap { display: none; }

.nom-hero-indicators {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	gap: 8px;
}

.nom-hero-indicator {
	background: rgba(255,255,255,0.2);
	border: 0;
	border-radius: 999px;
	height: 4px;
	width: 16px;
	cursor: pointer;
	transition: all 350ms ease;
	padding: 0;
}
.nom-hero-indicator:hover { background: rgba(255,255,255,0.5); }
.nom-hero-indicator.is-active {
	background: var(--nom-accent);
	width: 44px;
}

.nom-hero-thumbs {
	display: none;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	flex-direction: column;
	gap: 10px;
}

@media (min-width: 1024px) {
	.nom-hero-thumbs { display: flex; }
}

.nom-hero-thumb {
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	width: 48px;
	height: 72px;
	opacity: 0.4;
	transition: all 280ms ease;
	cursor: pointer;
	padding: 0;
	background: none;
}
.nom-hero-thumb:hover { opacity: 1; }
.nom-hero-thumb.is-active {
	border-color: var(--nom-accent);
	opacity: 1;
	transform: scale(1.1);
	box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.nom-hero-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* === Generic Section === */

.nom-section {
	max-width: var(--nom-container);
	margin: 0 auto;
	padding: 40px 16px;
}

@media (min-width: 768px)  { .nom-section { padding: 56px 32px; } }
@media (min-width: 1024px) { .nom-section { padding: 64px 60px; } }

.nom-section-head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 24px;
}
@media (min-width: 640px) {
	.nom-section-head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 0;
		margin-bottom: 32px;
	}
}

.nom-section-title {
	font-family: var(--nom-font-display);
	font-weight: 400;
	font-size: 34px;
	letter-spacing: 0.01em;
	margin: 0;
	color: var(--nom-fg);
	text-transform: uppercase;
	line-height: 1;
}

@media (min-width: 640px) { .nom-section-title { font-size: 44px; } }

.nom-section-emoji { margin-right: 6px; }

.nom-section-desc {
	font-size: 13px;
	color: var(--nom-fg-mute);
	margin: 6px 0 0;
}

.nom-section-viewall {
	color: var(--nom-accent);
	font-weight: 600;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: gap 200ms ease;
}
.nom-section-viewall:hover { gap: 12px; color: var(--nom-accent-bright); }

/* === Carousel === */

/* (Carousel structure is defined in the v1.0.21 section near the end of this file.) */

/* === Cards === */

.nom-card {
	flex-shrink: 0;
	width: 150px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	border-radius: var(--nom-radius);
	overflow: hidden;
	background: var(--nom-card);
	border: 1px solid var(--nom-border);
	transition: all 400ms cubic-bezier(0.22, 1, 0.36, 1);
	text-decoration: none;
	color: var(--nom-fg);
}

@media (min-width: 640px)  { .nom-card { width: 170px; } }
@media (min-width: 1024px) { .nom-card { width: 200px; } }

@media (hover: hover) {
	.nom-card:hover {
		transform: scale(1.03);
		border-color: var(--nom-border-light);
		box-shadow: 0 16px 48px rgba(0,0,0,0.4);
	}
	.nom-card:hover .nom-card-poster img { transform: scale(1.05); }
	.nom-card:hover .nom-card-hover { opacity: 1; }
	.nom-card:hover .nom-card-play { transform: scale(1); opacity: 1; }
}

.nom-card-poster {
	position: relative;
	width: 100%;
	aspect-ratio: 2 / 3;
	background: var(--nom-elevated);
	overflow: hidden;
}

.nom-card-poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nom-card-noimage {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--nom-fg-mute);
	font-size: 11px;
}

.nom-card-rating {
	position: absolute;
	top: 8px;
	right: 8px;
	background: rgba(0,0,0,0.75);
	backdrop-filter: blur(8px);
	padding: 4px 8px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--nom-accent);
	font-weight: 700;
	font-size: 11px;
	z-index: 2;
}

.nom-star { font-size: 10px; }

.nom-card-hover {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--nom-card), transparent);
	opacity: 0;
	transition: opacity 300ms ease;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.nom-card-play {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--nom-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: scale(0.5);
	opacity: 0;
	transition: all 400ms cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 8px 24px var(--nom-accent-glow);
}

.nom-card-play svg {
	width: 22px;
	height: 22px;
	margin-left: 3px; /* optical centering for triangle */
}

.nom-card-info {
	padding: 12px;
}

.nom-card-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--nom-fg);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 6px;
}

.nom-card-sub {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var(--nom-fg-mute);
	text-transform: capitalize;
}

.nom-card-dot { color: var(--nom-fg-mute); }

.nom-card-hd {
	margin-left: auto;
	background: var(--nom-accent-dim);
	color: var(--nom-accent);
	font-weight: 700;
	font-size: 9px;
	letter-spacing: 0.1em;
	padding: 2px 5px;
	border-radius: 3px;
}

/* === Top Rated === */

.nom-toprated-section { background: var(--nom-deep); }

.nom-toprated {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

@media (min-width: 1024px) {
	.nom-toprated { grid-template-columns: 1fr 1fr; gap: 12px; }
}

.nom-toprated-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	background: var(--nom-surface);
	border: 1px solid var(--nom-border);
	border-radius: var(--nom-radius);
	transition: all 300ms ease;
	height: 80px;
}

@media (hover: hover) {
	.nom-toprated-item:hover {
		border-color: var(--nom-accent);
		background: var(--nom-card);
		transform: translateX(6px);
	}
	.nom-toprated-item:hover .nom-toprated-num { opacity: 1; }
}

.nom-toprated-num {
	font-family: var(--nom-font-display);
	font-weight: 400;
	font-size: 40px;
	line-height: 1;
	color: var(--nom-accent);
	opacity: 0.4;
	min-width: 44px;
	text-align: center;
	transition: opacity 300ms ease;
}

.nom-toprated-poster {
	width: 50px;
	height: 75px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
	background: var(--nom-elevated);
}
.nom-toprated-poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nom-toprated-meta {
	flex: 1;
	min-width: 0;
}

.nom-toprated-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--nom-fg);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nom-toprated-sub {
	font-size: 11px;
	color: var(--nom-fg-mute);
	margin-top: 2px;
}

.nom-toprated-rating {
	font-family: var(--nom-font-mono);
	font-weight: 700;
	color: var(--nom-accent);
	font-size: 15px;
}

/* === Coming Soon === */

.nom-comingsoon-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 640px)  { .nom-comingsoon-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .nom-comingsoon-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 1280px) { .nom-comingsoon-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }

.nom-cs-card {
	display: flex;
	gap: 14px;
	padding: 16px;
	background: var(--nom-card);
	border: 1px solid var(--nom-border);
	border-radius: var(--nom-radius);
	transition: all 400ms ease;
}

@media (hover: hover) {
	.nom-cs-card:hover {
		border-color: var(--nom-accent);
		transform: translateY(-4px);
		box-shadow: 0 16px 48px rgba(0,0,0,0.4);
	}
}

.nom-cs-poster {
	width: 70px;
	height: 105px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
	background: var(--nom-elevated);
	position: relative;
}
.nom-cs-poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nom-cs-typebadge {
	position: absolute;
	top: 4px;
	left: 4px;
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.nom-cs-typebadge-movie { background: var(--nom-accent); color: #fff; }
.nom-cs-typebadge-tv { background: var(--nom-blue); color: #fff; }

.nom-cs-meta {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.nom-cs-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--nom-fg);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 4px;
}

.nom-cs-date {
	font-size: 11px;
	color: var(--nom-fg-mute);
	margin-bottom: 10px;
}

.nom-cs-status {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--nom-green);
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.nom-cs-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--nom-green);
	position: relative;
}
.nom-cs-dot::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--nom-green);
	animation: nom-pulse 1.5s ease-in-out infinite;
}

@keyframes nom-pulse {
	0%, 100% { opacity: 0; transform: scale(2.5); }
	50%      { opacity: 0.5; transform: scale(1); }
}

.nom-cs-countdown {
	display: flex;
	gap: 8px;
}

.nom-cs-cd-box {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 6px;
	background: var(--nom-void);
	border: 1px solid var(--nom-border);
	border-radius: var(--nom-radius-sm);
	min-width: 48px;
}

.nom-cs-cd-num {
	font-family: var(--nom-font-mono);
	font-weight: 700;
	font-size: 17px;
	color: var(--nom-accent);
}

.nom-cs-cd-label {
	font-size: 9px;
	color: var(--nom-fg-mute);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin-top: 2px;
}

.nom-cs-released {
	color: var(--nom-green);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* === Genre grid === */

.nom-genres-section { background: var(--nom-deep); border-top: 1px solid var(--nom-border); border-bottom: 1px solid var(--nom-border); }

.nom-genre-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

@media (min-width: 640px)  { .nom-genre-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .nom-genre-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .nom-genre-grid { grid-template-columns: repeat(6, 1fr); } }

.nom-genre-tile {
	position: relative;
	height: 120px;
	border: 1px solid var(--nom-border);
	border-radius: var(--nom-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: all 400ms ease;
}

.nom-genre-tile::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(6,6,12,0.85), rgba(6,6,12,0.5));
	transition: background 300ms ease;
}

@media (hover: hover) {
	.nom-genre-tile:hover {
		border-color: var(--nom-accent);
		transform: translateY(-4px);
		box-shadow: 0 16px 48px rgba(0,0,0,0.4);
	}
	.nom-genre-tile:hover::before {
		background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(6,6,12,0.6));
	}
	.nom-genre-tile:hover .nom-genre-emoji { transform: scale(1.15); }
}

.nom-genre-emoji {
	position: absolute;
	font-size: 48px;
	z-index: 1;
	opacity: 0.6;
	transition: transform 500ms ease;
}

.nom-genre-name {
	position: relative;
	z-index: 2;
	font-family: var(--nom-font-display);
	font-weight: 400;
	font-size: 26px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 4px 16px rgba(0,0,0,0.6);
}

/* === SEO blocks === */

.nom-seo-block {
	max-width: 800px;
	margin: 0 auto;
	padding: 40px 24px 50px;
	text-align: center;
	border-top: 1px solid rgba(37, 37, 53, 0.5);
}

.nom-seo-divider {
	width: 40px;
	height: 2px;
	background: var(--nom-accent);
	opacity: 0.4;
	border-radius: 1px;
	margin: 0 auto 16px;
}

.nom-seo-title {
	font-family: var(--nom-font-display);
	font-weight: 400;
	font-size: 32px;
	color: var(--nom-accent);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1;
	margin: 0 0 16px;
}

.nom-seo-content {
	color: var(--nom-fg-dim);
	font-size: 15px;
	line-height: 1.7;
}

.nom-seo-content p { margin: 0; }

/* === Single Movie / TV pages (carry over from 1.0.3 with updated palette) === */

.nom-single {
	background: var(--nom-void);
}

.nom-backdrop {
	position: relative;
	width: 100%;
	min-height: 480px;
	background-size: cover;
	background-position: center 20%;
}

.nom-backdrop-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(6,6,12,0.4) 0%, rgba(6,6,12,0.7) 60%, var(--nom-void) 100%),
		linear-gradient(90deg, rgba(6,6,12,0.7) 0%, rgba(6,6,12,0.2) 60%, rgba(6,6,12,0.6) 100%);
}

.nom-single-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
	position: relative;
}

.nom-backdrop + .nom-single-inner {
	margin-top: -240px;
	z-index: 2;
}

.nom-single-header {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 36px;
	align-items: end;
	padding-bottom: 36px;
	border-bottom: 1px solid var(--nom-border);
}

.nom-single-poster img {
	border-radius: var(--nom-radius);
	box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px var(--nom-border-light);
}

.nom-single-title {
	font-family: var(--nom-font-display);
	font-weight: 400;
	font-size: 58px;
	line-height: 1;
	letter-spacing: 0.005em;
	margin: 0 0 14px;
	color: var(--nom-fg);
	text-transform: uppercase;
}
.nom-single-title .nom-year {
	font-family: var(--nom-font-body);
	font-weight: 500;
	font-style: italic;
	color: var(--nom-fg-dim);
	font-size: 0.45em;
	margin-left: 10px;
	text-transform: none;
	letter-spacing: 0;
}

.nom-tagline {
	font-family: var(--nom-font-body);
	font-style: italic;
	font-weight: 400;
	font-size: 17px;
	color: var(--nom-fg-dim);
	margin: 0 0 16px;
}

.nom-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	margin-bottom: 16px;
	font-size: 14px;
	color: var(--nom-fg-dim);
}

.nom-rating {
	color: var(--nom-accent);
	font-weight: 600;
}
.nom-rating small {
	color: var(--nom-fg-mute);
	font-weight: 400;
	margin-left: 4px;
}

.nom-year-pill {
	padding: 3px 10px;
	border: 1px solid var(--nom-border-light);
	border-radius: 999px;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.nom-genres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.nom-genre-pill {
	padding: 4px 12px;
	background: var(--nom-card);
	border: 1px solid var(--nom-border);
	border-radius: 999px;
	font-size: 12px;
	color: var(--nom-fg-dim);
}

.nom-overview {
	max-width: 720px;
	color: var(--nom-fg-dim);
	font-size: 15px;
	line-height: 1.7;
	margin: 0;
}

.nom-single .nom-section {
	max-width: none;
	padding: 56px 0;
}

.nom-section-title {
	position: relative;
}

.nom-single .nom-section-title {
	padding-left: 16px;
	position: relative;
}
.nom-single .nom-section-title::before {
	content: '';
	position: absolute;
	left: 0;
	/* v1.0.41: red bar matches full text height instead of being indented
	 * by 8px top/bottom. Uses 0.85em from top and bottom of the line-height
	 * to approximate the cap height of Bebas Neue, which has no descenders. */
	top: 0.12em;
	bottom: 0.12em;
	width: 4px;
	background: var(--nom-accent);
	border-radius: 2px;
}

/* === Player (v1.0.23 redesign) === */

/* Top-level container - no longer a card with border around everything,
 * since the iframe and selector are now two separate visual blocks. */
.nom-player {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.nom-player-empty {
	background: var(--nom-card);
	border: 1px solid var(--nom-border);
	border-radius: var(--nom-radius);
	padding: 40px;
	text-align: center;
	color: var(--nom-fg-mute);
}

/* The iframe sits in its own rounded container. */
.nom-player-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--nom-border);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.nom-player-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* The provider selector is its own rounded panel below the iframe. */
.nom-player-selector {
	background: var(--nom-surface);
	border: 1px solid var(--nom-border);
	border-radius: 12px;
	padding: 16px;
}

@media (min-width: 640px) {
	.nom-player-selector { padding: 20px; }
}

.nom-player-selector-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-family: var(--nom-font-body);
	font-size: 13px;
	font-weight: 700;
	color: var(--nom-fg);
	letter-spacing: 0.02em;
}

/* Pulsing green dot before "Select Player" */
.nom-player-selector-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--nom-green);
	box-shadow: 0 0 0 0 var(--nom-green);
	animation: nom-player-pulse 2s ease-in-out infinite;
}

@keyframes nom-player-pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(61, 214, 140, 0.5);
	}
	50% {
		box-shadow: 0 0 0 6px rgba(61, 214, 140, 0);
	}
}

/* Buttons grid: responsive 3 / 4 / 5 / 6 columns */
.nom-player-tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

@media (min-width: 640px) {
	.nom-player-tabs {
		grid-template-columns: repeat(4, 1fr);
		gap: 10px;
	}
}

@media (min-width: 768px) {
	.nom-player-tabs {
		grid-template-columns: repeat(5, 1fr);
	}
}

@media (min-width: 1024px) {
	.nom-player-tabs {
		grid-template-columns: repeat(6, 1fr);
	}
}

.nom-player-tab {
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	background: var(--nom-elevated);
	border: 0;
	border-radius: 8px;
	color: var(--nom-fg-dim);
	font-family: var(--nom-font-body);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 180ms ease;
	white-space: nowrap;
}

@media (min-width: 640px) {
	.nom-player-tab {
		height: 48px;
		font-size: 14px;
	}
}

.nom-player-tab:hover {
	background: var(--nom-border);
	color: var(--nom-fg);
}

.nom-player-tab.is-active {
	background: var(--nom-accent);
	color: #fff;
	box-shadow: 0 0 15px rgba(220, 38, 38, 0.3);
}

.nom-player-tab.is-active:hover {
	background: var(--nom-accent-bright);
}

/* === TV controls === */

.nom-tv-controls {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	padding: 12px 14px;
	background: var(--nom-card);
	border: 1px solid var(--nom-border);
	border-radius: var(--nom-radius);
	font-size: 14px;
}

.nom-tv-controls label {
	color: var(--nom-fg-dim);
	font-weight: 700;
	letter-spacing: 0.04em;
	font-size: 12px;
	text-transform: uppercase;
}

.nom-season-select {
	flex: 1;
	max-width: 320px;
	padding: 10px 14px;
	background: var(--nom-void);
	border: 1px solid var(--nom-border-light);
	border-radius: 6px;
	color: var(--nom-fg);
	font-family: var(--nom-font-body);
	font-size: 14px;
}

/* === Episode grid === */

.nom-episode-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
	margin-top: 20px;
}

.nom-episode-card {
	background: var(--nom-card);
	border: 1px solid var(--nom-border);
	border-radius: var(--nom-radius);
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	text-align: left;
	color: var(--nom-fg);
	font-family: var(--nom-font-body);
	transition: all 250ms ease;
}

.nom-episode-card:hover {
	transform: translateY(-2px);
	border-color: var(--nom-border-light);
	box-shadow: 0 10px 24px rgba(0,0,0,0.4);
}

.nom-episode-card.is-active {
	border-color: var(--nom-accent);
	box-shadow: 0 0 0 2px var(--nom-accent-dim);
}

.nom-episode-card img,
.nom-episode-placeholder {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--nom-elevated);
}

.nom-episode-meta { padding: 12px; }

.nom-episode-num {
	font-size: 10px;
	color: var(--nom-accent);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.nom-episode-name {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 4px;
}

.nom-episode-air {
	font-size: 12px;
	color: var(--nom-fg-mute);
}

/* === Cast === */

.nom-cast-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 18px;
}

.nom-cast-item { text-align: center; }

.nom-cast-item img,
.nom-cast-placeholder {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: var(--nom-radius-sm);
	background: var(--nom-elevated);
	margin-bottom: 8px;
}

.nom-cast-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--nom-fg);
	line-height: 1.3;
}

.nom-cast-char {
	font-size: 12px;
	color: var(--nom-fg-mute);
	margin-top: 2px;
	font-style: italic;
}

/* Card grid used by single pages (recommendations) */

.nom-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 18px;
}

/* === Responsive single-page tweaks === */

@media (max-width: 860px) {

	.nom-backdrop { min-height: 320px; }
	.nom-backdrop + .nom-single-inner { margin-top: -120px; }
	.nom-single-header { grid-template-columns: 1fr; gap: 20px; }
	.nom-single-poster { max-width: 200px; }
	.nom-single-title { font-size: 40px; }
	.nom-episode-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
	.nom-card-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
	.nom-cast-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* === Browse pages (v1.0.5) === */

.nom-browse-inner {
	max-width: var(--nom-container);
	margin: 0 auto;
	padding: 32px 16px 64px;
}

@media (min-width: 768px)  { .nom-browse-inner { padding: 48px 32px 80px; } }
@media (min-width: 1024px) { .nom-browse-inner { padding: 56px 60px 96px; } }

.nom-browse-header {
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--nom-border);
}

.nom-browse-title {
	font-family: var(--nom-font-display);
	font-weight: 400;
	font-size: 44px;
	line-height: 1;
	letter-spacing: 0.01em;
	margin: 0 0 8px;
	color: var(--nom-fg);
	text-transform: uppercase;
}

@media (min-width: 768px) { .nom-browse-title { font-size: 60px; } }

.nom-browse-desc {
	color: var(--nom-fg-dim);
	font-size: 15px;
	margin: 0;
}

.nom-browse-empty {
	text-align: center;
	color: var(--nom-fg-mute);
	padding: 48px 0;
	font-size: 16px;
}

/* Sort bar */

.nom-sort-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-bottom: 24px;
	padding: 12px 16px;
	background: var(--nom-card);
	border: 1px solid var(--nom-border);
	border-radius: var(--nom-radius);
	font-size: 13px;
}

.nom-sort-label {
	color: var(--nom-fg-mute);
	font-weight: 700;
	letter-spacing: 0.04em;
	font-size: 11px;
	text-transform: uppercase;
	margin-right: 4px;
}

.nom-sort-link {
	padding: 6px 14px;
	border-radius: 999px;
	color: var(--nom-fg-dim);
	background: transparent;
	border: 1px solid transparent;
	font-weight: 600;
	font-size: 13px;
	transition: all 180ms ease;
}

.nom-sort-link:hover {
	color: var(--nom-fg);
	background: var(--nom-surface);
}

.nom-sort-link.is-active {
	color: var(--nom-accent);
	background: var(--nom-accent-dim);
	border-color: var(--nom-accent);
}

/* Browse grid */

.nom-browse-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin-bottom: 32px;
}

@media (min-width: 480px)  { .nom-browse-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 768px)  { .nom-browse-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
@media (min-width: 1024px) { .nom-browse-grid { grid-template-columns: repeat(5, 1fr); gap: 20px; } }
@media (min-width: 1280px) { .nom-browse-grid { grid-template-columns: repeat(5, 1fr); gap: 24px; } }

.nom-browse-grid .nom-card {
	width: 100%;
	flex: none;
}

/* Pagination */

.nom-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	align-items: center;
	margin: 32px 0 0;
}

.nom-page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--nom-radius-sm);
	background: var(--nom-card);
	border: 1px solid var(--nom-border);
	color: var(--nom-fg-dim);
	font-weight: 600;
	font-size: 14px;
	transition: all 180ms ease;
}

.nom-page-link:hover {
	color: var(--nom-fg);
	background: var(--nom-surface);
	border-color: var(--nom-border-light);
}

.nom-page-link.is-current {
	color: #fff;
	background: var(--nom-accent);
	border-color: var(--nom-accent);
	box-shadow: 0 6px 20px var(--nom-accent-glow);
}

.nom-page-link.is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.nom-page-prev, .nom-page-next {
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

.nom-page-ellipsis {
	color: var(--nom-fg-mute);
	padding: 0 6px;
}

/* v1.0.46: Mobile pagination - keep on one line.
 * Desktop shows: ‹ 1 ... 4 5 [6] 7 8 ... 500 ›
 * Mobile shows:  ‹ 1 ... 5 [6] 7 ... 500 ›   (current +/- 1, no +/- 2)
 *
 * The items at distance 2 from current get a nom-page-mid-outer class
 * (added by PHP). We hide those, keeping the current page and the two
 * immediate neighbors as one-tap "previous" / "next" targets.
 *
 * Button size shrinks slightly so 9 visible elements still fit comfortably
 * on a 360px phone with tap targets above the 44px height minimum. */
@media (max-width: 640px) {
	.nom-page-link.nom-page-mid-outer {
		display: none;
	}
	.nom-pagination {
		flex-wrap: nowrap;
		gap: 4px;
	}
	.nom-page-link {
		min-width: 36px;
		height: 36px;
		padding: 0 8px;
		font-size: 13px;
	}
	.nom-page-ellipsis {
		padding: 0 2px;
	}
}

/* Genre browse hero */

.nom-genre-browse .nom-browse-header {
	position: relative;
	overflow: hidden;
	border-radius: var(--nom-radius);
	padding: 32px;
	margin-bottom: 32px;
	border-bottom: 0;
	min-height: 160px;
}

.nom-genre-browse .nom-browse-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(6,6,12,0.5), rgba(6,6,12,0.8));
}

.nom-genre-browse .nom-browse-header-inner {
	position: relative;
	z-index: 2;
}

.nom-browse-emoji {
	font-size: 48px;
	margin-bottom: 8px;
	opacity: 0.9;
}

.nom-browse-switch {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 12px;
	color: var(--nom-accent);
	font-weight: 600;
	font-size: 14px;
	transition: gap 200ms ease;
}
.nom-browse-switch:hover {
	gap: 10px;
	color: var(--nom-accent-bright);
}

/* Genre index grid */

.nom-genre-index-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

@media (min-width: 640px)  { .nom-genre-index-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .nom-genre-index-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
@media (min-width: 1280px) { .nom-genre-index-grid { grid-template-columns: repeat(6, 1fr); } }

.nom-genre-index-tile {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--nom-border);
	border-radius: var(--nom-radius);
	padding: 24px 16px;
	min-height: 160px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	transition: all 300ms ease;
}

.nom-genre-index-tile::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(6,6,12,0.7), rgba(6,6,12,0.85));
	transition: background 300ms ease;
}

@media (hover: hover) {
	.nom-genre-index-tile:hover {
		transform: translateY(-4px);
		border-color: var(--nom-accent);
		box-shadow: 0 12px 32px rgba(0,0,0,0.4);
	}
	.nom-genre-index-tile:hover::before {
		background: linear-gradient(135deg, rgba(220, 38, 38, 0.15), rgba(6,6,12,0.7));
	}
}

.nom-genre-index-emoji {
	position: relative;
	z-index: 1;
	font-size: 40px;
	opacity: 0.6;
	margin-bottom: 8px;
}

.nom-genre-index-name {
	position: relative;
	z-index: 1;
	font-family: var(--nom-font-display);
	font-weight: 400;
	font-size: 26px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 12px;
	text-shadow: 0 4px 16px rgba(0,0,0,0.6);
}

.nom-genre-index-links {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 8px;
}

.nom-genre-index-link {
	padding: 4px 10px;
	border-radius: 4px;
	background: rgba(0,0,0,0.4);
	border: 1px solid rgba(255,255,255,0.15);
	color: var(--nom-fg);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: all 180ms ease;
	backdrop-filter: blur(4px);
}

.nom-genre-index-link:hover {
	background: var(--nom-accent);
	border-color: var(--nom-accent);
	color: #fff;
}

/* =================================================================
 * v1.0.6 - Header / Footer / Search / Mobile menu
 * ================================================================= */

/* Override the v1.0.4 simple header */

.nom-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
	height: 64px;
	background: var(--nom-void);
	border-bottom: 1px solid transparent;
	transition: background 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.nom-site-header.is-scrolled {
	background: rgba(6, 6, 12, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom-color: var(--nom-border);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.nom-site-header-inner {
	max-width: var(--nom-container);
	margin: 0 auto;
	padding: 0 16px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

@media (min-width: 768px) {
	.nom-site-header-inner { padding: 0 32px; }
}

@media (min-width: 1024px) {
	.nom-site-header-inner { padding: 0 60px; }
}

/* Override the v1.0.4 logo */
.nom-site-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--nom-fg);
	font-family: var(--nom-font-display);
	font-weight: 400;
	font-size: 24px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	flex-shrink: 0;
	transition: color 200ms ease;
}

.nom-site-logo:hover {
	color: var(--nom-accent);
}

.nom-site-logo-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--nom-accent);
	color: #fff;
	transition: transform 300ms ease;
}

.nom-site-logo-icon svg {
	width: 14px;
	height: 14px;
	margin-left: 2px; /* optical centering */
}

.nom-site-logo:hover .nom-site-logo-icon {
	transform: rotate(12deg) scale(1.1);
}

.nom-site-logo-text {
	font-size: 22px;
	line-height: 1;
}

/* Override v1.0.4 .nom-site-branding which is no longer rendered */
.nom-site-header .nom-site-branding { display: none; }

/* Nav */

.nom-nav {
	display: none;
	flex: 1;
	justify-content: center;
	align-items: center;
	gap: 24px;
}

@media (min-width: 1024px) {
	.nom-nav { display: flex; }
}

.nom-nav-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--nom-fg-dim);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 22px 0;
	transition: color 200ms ease;
}

.nom-nav-link:hover {
	color: var(--nom-fg);
}

.nom-nav-link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	height: 2px;
	background: var(--nom-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nom-nav-link:hover::after,
.nom-nav-link.is-active::after {
	transform: scaleX(1);
}

.nom-nav-link.is-active {
	color: var(--nom-accent);
}

.nom-nav-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--nom-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.nom-nav-link.is-active .nom-nav-badge {
	background: #fff;
	color: var(--nom-accent);
}

/* Header actions */

.nom-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.nom-search-inline {
	display: none;
	align-items: center;
	background: var(--nom-card);
	border: 1px solid var(--nom-border);
	border-radius: 999px;
	padding: 0 6px 0 14px;
	height: 38px;
	transition: border-color 200ms ease, background 200ms ease;
}

@media (min-width: 1024px) {
	.nom-search-inline { display: inline-flex; }
}

.nom-search-inline:focus-within {
	border-color: var(--nom-accent);
	background: var(--nom-surface);
}

.nom-search-inline input {
	background: transparent;
	border: 0;
	color: var(--nom-fg);
	font-family: var(--nom-font-body);
	font-size: 13px;
	width: 200px;
	outline: none;
	padding: 0;
}

.nom-search-inline input::placeholder { color: var(--nom-fg-mute); }

.nom-search-inline button {
	background: transparent;
	border: 0;
	color: var(--nom-fg-dim);
	cursor: pointer;
	padding: 6px 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color 200ms ease;
}

.nom-search-inline button:hover { color: var(--nom-accent); }

.nom-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--nom-card);
	border: 1px solid var(--nom-border);
	color: var(--nom-fg-dim);
	cursor: pointer;
	transition: all 200ms ease;
}

@media (min-width: 1024px) {
	.nom-search-toggle { display: none; }
}

.nom-search-toggle:hover {
	color: var(--nom-fg);
	border-color: var(--nom-border-light);
}

.nom-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--nom-card);
	border: 1px solid var(--nom-border);
	cursor: pointer;
	padding: 0;
	transition: all 200ms ease;
}

@media (min-width: 1024px) {
	.nom-burger { display: none; }
}

.nom-burger span {
	display: block;
	width: 16px;
	height: 2px;
	background: var(--nom-fg);
	border-radius: 1px;
}

.nom-burger:hover {
	border-color: var(--nom-accent);
}

/* Search overlay (mobile) */

.nom-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(6, 6, 12, 0.95);
	backdrop-filter: blur(20px);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 80px 20px 40px;
	opacity: 0;
	transition: opacity 250ms ease;
}

.nom-search-overlay.is-open {
	opacity: 1;
}

.nom-search-overlay-close {
	position: absolute;
	top: 16px;
	right: 20px;
	background: transparent;
	border: 0;
	color: var(--nom-fg);
	font-size: 36px;
	line-height: 1;
	cursor: pointer;
	width: 44px;
	height: 44px;
}

.nom-search-overlay-form {
	width: 100%;
	max-width: 600px;
	display: flex;
	gap: 8px;
}

.nom-search-overlay-form input {
	flex: 1;
	background: var(--nom-card);
	border: 1px solid var(--nom-border-light);
	border-radius: 8px;
	padding: 14px 16px;
	color: var(--nom-fg);
	font-family: var(--nom-font-body);
	font-size: 16px;
	outline: none;
}

.nom-search-overlay-form input:focus {
	border-color: var(--nom-accent);
}

.nom-search-overlay-form button {
	padding: 14px 22px;
	background: var(--nom-accent);
	border: 0;
	border-radius: 8px;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	transition: background 200ms ease;
}

.nom-search-overlay-form button:hover {
	background: var(--nom-accent-bright);
}

/* Mobile menu */

.nom-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--nom-void);
	display: flex;
	flex-direction: column;
	opacity: 0;
	transition: opacity 250ms ease;
}

.nom-mobile-menu.is-open {
	opacity: 1;
}

.nom-mobile-menu-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	padding: 0 16px;
	border-bottom: 1px solid var(--nom-border);
}

.nom-mobile-menu-close {
	background: transparent;
	border: 0;
	color: var(--nom-fg);
	font-size: 36px;
	line-height: 1;
	cursor: pointer;
	width: 44px;
	height: 44px;
}

.nom-mobile-nav {
	display: flex;
	flex-direction: column;
	padding: 24px 16px;
}

.nom-mobile-nav-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 12px;
	color: var(--nom-fg);
	font-family: var(--nom-font-display);
	font-size: 28px;
	font-weight: 400;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--nom-border);
	transition: color 200ms ease, padding-left 200ms ease;
}

.nom-mobile-nav-link:hover {
	color: var(--nom-accent);
	padding-left: 20px;
}

/* Footer */

.nom-site-footer {
	background: var(--nom-deep);
	border-top: 1px solid var(--nom-border);
	margin-top: 80px;
	padding: 60px 0 0;
	color: var(--nom-fg-dim);
}

.nom-site-footer-inner {
	max-width: var(--nom-container);
	margin: 0 auto;
	padding: 0 16px;
}

@media (min-width: 768px) {
	.nom-site-footer-inner { padding: 0 32px; }
}

@media (min-width: 1024px) {
	.nom-site-footer-inner { padding: 0 60px; }
}

.nom-footer-cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	padding-bottom: 40px;
}

@media (min-width: 640px) {
	.nom-footer-cols {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.nom-footer-cols {
		grid-template-columns: 2fr 1fr 1fr 1fr;
		gap: 40px;
	}
}

.nom-footer-col-brand .nom-site-logo {
	margin-bottom: 16px;
}

.nom-footer-tagline {
	font-size: 13px;
	line-height: 1.6;
	color: var(--nom-fg-dim);
	margin: 0;
	max-width: 380px;
}

.nom-footer-heading {
	font-family: var(--nom-font-display);
	font-weight: 400;
	font-size: 20px;
	color: var(--nom-fg);
	margin: 0 0 16px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.nom-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nom-footer-list a {
	color: var(--nom-fg-dim);
	font-size: 13px;
	transition: color 200ms ease, padding-left 200ms ease;
}

.nom-footer-list a:hover {
	color: var(--nom-accent);
	padding-left: 4px;
}

.nom-footer-bottom {
	border-top: 1px solid var(--nom-border);
	padding: 24px 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 12px;
	color: var(--nom-fg-mute);
	text-align: center;
}

@media (min-width: 768px) {
	.nom-footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}

.nom-footer-dmca {
	max-width: 600px;
}

/* Search page */

.nom-search-page-form {
	display: flex;
	gap: 8px;
	margin: 20px 0 24px;
}

.nom-search-page-form input {
	flex: 1;
	background: var(--nom-card);
	border: 1px solid var(--nom-border);
	border-radius: 8px;
	padding: 12px 16px;
	color: var(--nom-fg);
	font-family: var(--nom-font-body);
	font-size: 15px;
	outline: none;
	transition: border-color 200ms ease;
}

.nom-search-page-form input:focus {
	border-color: var(--nom-accent);
}

.nom-search-page-form button {
	padding: 12px 20px;
	background: var(--nom-accent);
	border: 0;
	border-radius: 8px;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	transition: background 200ms ease;
}

.nom-search-page-form button:hover {
	background: var(--nom-accent-bright);
}

.nom-search-tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--nom-border);
}

.nom-search-tab {
	padding: 12px 18px;
	color: var(--nom-fg-dim);
	font-weight: 600;
	font-size: 14px;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: all 200ms ease;
}

.nom-search-tab:hover {
	color: var(--nom-fg);
}

.nom-search-tab.is-active {
	color: var(--nom-accent);
	border-bottom-color: var(--nom-accent);
}

.nom-search-count {
	font-size: 13px;
	color: var(--nom-fg-mute);
	margin: 16px 0;
}

/* Watchlist placeholder */

.nom-watchlist-empty {
	text-align: center;
	padding: 60px 20px;
}

.nom-watchlist-icon {
	font-size: 64px;
	margin-bottom: 16px;
	opacity: 0.5;
}

.nom-watchlist-empty h2 {
	font-family: var(--nom-font-display);
	font-weight: 400;
	font-size: 36px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--nom-fg);
	margin: 0 0 12px;
}

.nom-watchlist-empty p {
	color: var(--nom-fg-dim);
	margin: 0 auto 24px;
	max-width: 500px;
}

.nom-watchlist-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.nom-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 22px;
	background: var(--nom-accent);
	color: #fff;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: all 200ms ease;
}

.nom-button:hover {
	background: var(--nom-accent-bright);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px var(--nom-accent-glow);
}

.nom-button-outline {
	background: transparent;
	border: 1px solid var(--nom-border-light);
	color: var(--nom-fg);
}

.nom-button-outline:hover {
	background: var(--nom-card);
	border-color: var(--nom-accent);
}

/* =================================================================
 * v1.0.9 - Watchlist
 * ================================================================= */

/* Card now needs position context for the watchlist button */
.nom-card { position: relative; }

/* The card link wraps poster + info (parent .nom-card holds the button outside the link
 * so the button click doesn't bubble into the link navigation) */
.nom-card-link {
	display: flex;
	flex-direction: column;
	color: var(--nom-fg);
	text-decoration: none;
}

/* Icon-variant watchlist button on cards */
.nom-wl-btn-icon {
	position: absolute;
	top: 8px;
	left: 8px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	z-index: 3;
	transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nom-wl-btn-icon:hover {
	background: var(--nom-accent);
	border-color: var(--nom-accent);
	transform: scale(1.1);
}

.nom-wl-btn-icon .nom-wl-btn-heart svg {
	display: block;
	fill: none;
	transition: fill 180ms ease;
}

.nom-wl-btn-icon.is-in {
	background: var(--nom-accent);
	border-color: var(--nom-accent);
	box-shadow: 0 4px 16px var(--nom-accent-glow);
}

.nom-wl-btn-icon.is-in .nom-wl-btn-heart svg {
	fill: #fff;
}

/* Pill-variant watchlist button on single pages */
.nom-single-actions {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-top: 18px;
	flex-wrap: wrap;
}

.nom-wl-btn-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--nom-card);
	border: 1px solid var(--nom-border-light);
	color: var(--nom-fg);
	font-family: var(--nom-font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 200ms ease;
}

.nom-wl-btn-pill:hover {
	background: var(--nom-surface);
	border-color: var(--nom-accent);
}

.nom-wl-btn-pill.is-in {
	background: var(--nom-accent-dim);
	border-color: var(--nom-accent);
	color: var(--nom-accent);
}

.nom-wl-btn-pill.is-in:hover {
	background: rgba(220, 38, 38, 0.2);
}

.nom-wl-btn-pill .nom-wl-btn-heart svg {
	fill: none;
	transition: fill 180ms ease;
}

.nom-wl-btn-pill.is-in .nom-wl-btn-heart svg {
	fill: var(--nom-accent);
}

/* Toast */
.nom-toast {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 9000;
	background: var(--nom-card);
	border: 1px solid var(--nom-border-light);
	color: var(--nom-fg);
	padding: 14px 22px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--nom-accent-dim);
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
	transition: opacity 240ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nom-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 640px) {
	.nom-toast {
		bottom: 16px;
		right: 16px;
		left: 16px;
		text-align: center;
		font-size: 13px;
	}
}

/* Watchlist page */
.nom-watchlist-page .nom-browse-title {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.nom-watchlist-counter {
	font-family: var(--nom-font-body);
	font-weight: 600;
	font-size: 18px;
	color: var(--nom-fg-mute);
	letter-spacing: 0;
}

.nom-watchlist-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
	padding: 14px 16px;
	background: var(--nom-card);
	border: 1px solid var(--nom-border);
	border-radius: var(--nom-radius);
}

.nom-watchlist-toolbar-left {
	display: flex;
	align-items: center;
	gap: 10px;
}

.nom-watchlist-sort-label {
	color: var(--nom-fg-mute);
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 700;
}

.nom-watchlist-sort {
	background: var(--nom-void);
	border: 1px solid var(--nom-border-light);
	border-radius: 6px;
	color: var(--nom-fg);
	padding: 8px 12px;
	font-family: var(--nom-font-body);
	font-size: 14px;
	cursor: pointer;
}

.nom-watchlist-sort:focus {
	outline: none;
	border-color: var(--nom-accent);
}

.nom-watchlist-clear {
	font-size: 12px;
	padding: 10px 18px;
}

/* Watchlist card-specific styles (remove button) */
.nom-wl-card {
	position: relative;
}

.nom-wl-remove {
	position: absolute;
	top: 8px;
	left: 8px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 180ms ease;
	backdrop-filter: blur(8px);
}

.nom-wl-remove:hover {
	background: var(--nom-accent);
	border-color: var(--nom-accent);
	transform: scale(1.1);
}

/* On watchlist cards we don't need the regular wl-btn-icon */
.nom-wl-card .nom-wl-btn { display: none; }

/* =================================================================
 * v1.0.12 - Ad zones
 * ================================================================= */

.nom-ad {
	margin: 24px auto;
	max-width: var(--nom-container);
	padding: 0 16px;
	text-align: center;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.nom-ad:empty { display: none; }

@media (min-width: 768px) {
	.nom-ad { padding: 0 32px; }
}

@media (min-width: 1024px) {
	.nom-ad { padding: 0 60px; }
}

/* Header banner sits tight against the header */
.nom-ad-header_banner {
	margin-top: 0;
}

/* Footer banner sits tight against the footer */
.nom-ad-footer_banner {
	margin-bottom: 0;
}

/* Inside single pages, ads use the narrower container */
.nom-single ~ .nom-ad,
.nom-single .nom-ad,
.nom-browse .nom-ad {
	max-width: 1180px;
}

/* Allow ad iframes to be responsive */
.nom-ad iframe,
.nom-ad ins {
	max-width: 100%;
}

/* =================================================================
 * v1.0.14 - Person pages
 * ================================================================= */

.nom-person {
	background: var(--nom-void);
	min-height: calc(100vh - 200px);
}

.nom-person-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 32px 16px 80px;
}

@media (min-width: 768px) {
	.nom-person-inner { padding: 48px 32px 100px; }
}

@media (min-width: 1024px) {
	.nom-person-inner { padding: 56px 60px 120px; }
}

/* Header layout: stacked on mobile, side-by-side on desktop */
.nom-person-header {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-bottom: 48px;
}

@media (min-width: 768px) {
	.nom-person-header {
		grid-template-columns: 280px 1fr;
		gap: 40px;
		align-items: start;
	}
}

@media (min-width: 1024px) {
	.nom-person-header {
		grid-template-columns: 320px 1fr;
		gap: 56px;
	}
}

.nom-person-photo {
	max-width: 240px;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.nom-person-photo {
		max-width: 100%;
		margin: 0;
	}
}

.nom-person-photo img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--nom-radius);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--nom-border);
}

.nom-person-photo-placeholder {
	aspect-ratio: 2 / 3;
	background: var(--nom-card);
	border: 1px solid var(--nom-border);
	border-radius: var(--nom-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 80px;
	color: var(--nom-fg-mute);
}

.nom-person-info {
	color: var(--nom-fg);
}

.nom-person-name {
	font-family: var(--nom-font-display);
	font-weight: 400;
	font-size: 44px;
	line-height: 0.95;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--nom-fg);
	margin: 0 0 8px;
}

@media (min-width: 768px) { .nom-person-name { font-size: 58px; } }
@media (min-width: 1024px) { .nom-person-name { font-size: 72px; } }

.nom-person-dept {
	display: inline-block;
	padding: 4px 12px;
	background: var(--nom-accent-dim);
	color: var(--nom-accent);
	border: 1px solid var(--nom-accent);
	border-radius: 999px;
	font-family: var(--nom-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.nom-person-facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0 0 24px;
	padding: 16px 18px;
	background: var(--nom-card);
	border: 1px solid var(--nom-border);
	border-radius: var(--nom-radius);
}

@media (min-width: 640px) {
	.nom-person-facts {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 16px 28px;
	}
}

.nom-person-fact dt {
	font-family: var(--nom-font-body);
	font-size: 10px;
	font-weight: 800;
	color: var(--nom-fg-mute);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.nom-person-fact dd {
	margin: 0;
	font-size: 14px;
	color: var(--nom-fg);
	line-height: 1.4;
}

.nom-person-fact-extra {
	display: block;
	color: var(--nom-fg-dim);
	font-size: 13px;
	margin-top: 2px;
}

.nom-person-ext {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 28px;
}

.nom-person-ext-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: var(--nom-card);
	border: 1px solid var(--nom-border);
	border-radius: 8px;
	color: var(--nom-fg-dim);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: all 180ms ease;
}

.nom-person-ext-link:hover {
	color: var(--nom-accent);
	border-color: var(--nom-accent);
	background: var(--nom-accent-dim);
}

.nom-person-bio {
	margin-top: 8px;
}

.nom-person-bio-title {
	font-family: var(--nom-font-display);
	font-weight: 400;
	font-size: 22px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nom-fg);
	margin: 0 0 12px;
}

.nom-person-bio-content {
	color: var(--nom-fg-dim);
	font-size: 15px;
	line-height: 1.7;
	max-height: 160px;
	overflow: hidden;
	position: relative;
	transition: max-height 400ms ease;
}

.nom-person-bio-content::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;
	background: linear-gradient(to bottom, transparent, var(--nom-void) 90%);
	pointer-events: none;
	transition: opacity 200ms ease;
}

.nom-person-bio.is-expanded .nom-person-bio-content {
	max-height: 4000px;
}

.nom-person-bio.is-expanded .nom-person-bio-content::after {
	opacity: 0;
}

.nom-person-bio-content p {
	margin: 0 0 12px;
}

.nom-person-bio-content p:last-child {
	margin-bottom: 0;
}

.nom-person-bio-toggle {
	margin-top: 12px;
	background: none;
	border: none;
	color: var(--nom-accent);
	cursor: pointer;
	font-family: var(--nom-font-body);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 6px 0;
	transition: color 180ms ease;
}

.nom-person-bio-toggle:hover {
	color: var(--nom-accent-bright);
}

.nom-person-bio-toggle-less {
	display: none;
}

.nom-person-bio.is-expanded .nom-person-bio-toggle-more {
	display: none;
}

.nom-person-bio.is-expanded .nom-person-bio-toggle-less {
	display: inline;
}

/* Cast items are now anchor tags - add hover affordance */
.nom-cast-item {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: transform 200ms ease;
}

.nom-cast-item:hover {
	transform: translateY(-3px);
}

.nom-cast-item:hover .nom-cast-name {
	color: var(--nom-accent);
}

.nom-cast-name {
	transition: color 180ms ease;
}

/* =================================================================
 * v1.0.16 - Filter bar
 * ================================================================= */

.nom-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	margin: 20px 0;
	padding: 16px;
	background: var(--nom-card);
	border: 1px solid var(--nom-border);
	border-radius: var(--nom-radius);
}

.nom-filter-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 160px;
	min-width: 0;
}

.nom-filter-label {
	font-family: var(--nom-font-body);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nom-fg-mute);
}

.nom-filter-select {
	height: 38px;
	padding: 0 32px 0 12px;
	background: var(--nom-void);
	border: 1px solid var(--nom-border-light);
	border-radius: 6px;
	color: var(--nom-fg);
	font-family: var(--nom-font-body);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239494AC' stroke-width='2.5'><polyline points='6 9 12 15 18 9'></polyline></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
	transition: border-color 180ms ease;
}

.nom-filter-select:hover {
	border-color: var(--nom-accent);
}

.nom-filter-select:focus {
	outline: none;
	border-color: var(--nom-accent);
	box-shadow: 0 0 0 3px var(--nom-accent-dim);
}

.nom-filter-apply {
	height: 38px;
	padding: 0 22px;
	background: var(--nom-accent);
	border: 1px solid var(--nom-accent);
	border-radius: 6px;
	color: #fff;
	font-family: var(--nom-font-body);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 180ms ease, transform 120ms ease;
	flex-shrink: 0;
}

.nom-filter-apply:hover {
	background: var(--nom-accent-bright);
	border-color: var(--nom-accent-bright);
}

.nom-filter-apply:active {
	transform: scale(0.97);
}

.nom-filter-clear {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 14px;
	color: var(--nom-fg-dim);
	font-family: var(--nom-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--nom-border-light);
	border-radius: 6px;
	transition: color 180ms ease, border-color 180ms ease;
	flex-shrink: 0;
}

.nom-filter-clear:hover {
	color: var(--nom-accent);
	border-color: var(--nom-accent);
}

@media (max-width: 640px) {
	.nom-filter-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.nom-filter-field {
		flex: 1 1 100%;
	}

	.nom-filter-apply,
	.nom-filter-clear {
		width: 100%;
		justify-content: center;
	}
}

/* =================================================================
 * v1.0.17 - Performance polish
 * ================================================================= */

/* All images render with subtle background while loading to prevent flash */
.nom-card-poster img,
.nom-toprated-poster img,
.nom-cs-poster img,
.nom-hero-thumb-wrap img,
.nom-hero-thumb img {
	background-color: var(--nom-elevated);
}

/* Hero thumb wrap reserves space */
.nom-hero-thumb-wrap {
	aspect-ratio: 2 / 3;
	overflow: hidden;
}

/* Top rated mini poster reserves space */
.nom-toprated-poster {
	flex-shrink: 0;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: var(--nom-elevated);
}

/* Coming soon poster reserves space */
.nom-cs-poster {
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: var(--nom-elevated);
}

/* When images are still loading, prevent layout shift in the thumbs strip */
.nom-hero-thumb {
	width: 80px;
	height: 120px;
	flex-shrink: 0;
	overflow: hidden;
}

/* =================================================================
 * v1.0.18 - Full-bleed homepage layout (matches yuppow original)
 * =================================================================
 *
 * The technique: most sections stay in a contained max-width, but specific
 * sections "break out" to full viewport width. For carousels, the section
 * head stays inside a contained inner div but the scrollable track goes
 * edge-to-edge with the first card aligned to the contained left edge.
 *
 * Container left edge is positioned using:
 *   --nom-gutter: half the difference between viewport width and container width.
 * The first card has padding-left: var(--nom-gutter) and the last card has
 * padding-right: var(--nom-gutter) so they breathe at the viewport edges.
 */

:root {
	/* Default container value - matches existing --nom-container */
	--nom-gutter: 16px;
}

@media (min-width: 768px)  { :root { --nom-gutter: 32px; } }
@media (min-width: 1024px) { :root { --nom-gutter: 60px; } }

/* Allow .nom-home to span full viewport width (override WP content wrapping). */
.nom-home {
	width: 100%;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Override the global .nom-section to allow full-bleed children.
 * Sections that should stay contained use .nom-section--contained. */
.nom-section.nom-carousel-section,
.nom-section.nom-toprated-section,
.nom-section.nom-comingsoon-section,
.nom-section.nom-genres-section {
	max-width: none;
	padding: 48px 0;
}

@media (min-width: 768px)  {
	.nom-section.nom-carousel-section,
	.nom-section.nom-toprated-section,
	.nom-section.nom-comingsoon-section,
	.nom-section.nom-genres-section {
		padding: 64px 0;
	}
}

/* Section heads go full-bleed to match the full-width carousels and cards
 * below them. Title sits at the left gutter, "View All" sits at the right
 * gutter, both aligned with the first/last visible card. */
.nom-carousel-section .nom-section-head,
.nom-toprated-section .nom-section-head,
.nom-comingsoon-section .nom-section-head,
.nom-genres-section .nom-section-head {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: var(--nom-gutter);
	padding-right: var(--nom-gutter);
}

/* Carousel goes full-bleed */
.nom-carousel {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
}

/* Carousel container - on desktop, becomes a flex row with reserved
 * arrow columns on the left and right. The track sits in the middle
 * and physically takes LESS width than the viewport, so cards cannot
 * overlap with the arrow columns.
 *
 * On mobile/tablet, the carousel is just a single full-width track
 * (arrows hidden, touch users swipe).
 */
.nom-carousel {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
}

@media (min-width: 1024px) {
	.nom-carousel {
		display: flex;
		align-items: stretch;
	}
}

/* Reserved arrow columns - 60px each side on desktop. Hidden on mobile/tablet. */
.nom-carousel-arrow {
	width: 60px;
	flex-shrink: 0;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	display: none !important;
}

.nom-carousel-arrow svg {
	width: 22px;
	height: 22px;
	color: #fff;
	display: block;
}

/* Inner red circle wrapping the SVG (created via a pseudo-element so we don't
 * need to change PHP further). The flex container centers the SVG; the circle
 * background is applied to the BUTTON inner area using a fixed-size box. */
.nom-carousel-arrow {
	position: relative;
}

.nom-carousel-arrow::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--nom-accent);
	box-shadow: 0 4px 16px var(--nom-accent-glow);
	transition: transform 200ms ease, background 200ms ease;
	z-index: 0;
}

.nom-carousel-arrow svg {
	position: relative;
	z-index: 1;
}

.nom-carousel-arrow:hover::before {
	transform: translate(-50%, -50%) scale(1.1);
	background: var(--nom-accent-bright);
}

.nom-carousel-arrow.is-hidden {
	opacity: 0.3;
	pointer-events: none;
}

@media (min-width: 1024px) {
	.nom-carousel-arrow {
		display: flex !important;
	}
}

/* Track: takes remaining horizontal space inside the flex carousel.
 * On mobile (carousel is block, not flex), track is full width with gutter padding.
 * On desktop (carousel is flex), track flexes to fill the middle, with no extra padding
 * needed since the arrow columns provide the visual breathing room.
 */
.nom-carousel-track {
	flex: 1;
	min-width: 0; /* required so flex child can shrink and overflow-x:auto works */
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 16px var(--nom-gutter);
	scroll-padding-left: var(--nom-gutter);
}

.nom-carousel-track::-webkit-scrollbar { display: none; }

/* On desktop the arrow columns ARE the breathing room, so the track
 * uses smaller horizontal padding (just 4px for the snap edge offset). */
@media (min-width: 1024px) {
	.nom-carousel-track {
		gap: 14px;
		padding: 16px 4px;
		scroll-padding-left: 4px;
	}
}

/* Smaller, denser cards - shrunk further in v1.0.22 */
.nom-carousel-track .nom-card {
	width: 110px;
}

@media (min-width: 480px)  { .nom-carousel-track .nom-card { width: 120px; } }
@media (min-width: 640px)  { .nom-carousel-track .nom-card { width: 130px; } }
@media (min-width: 1024px) { .nom-carousel-track .nom-card { width: 145px; } }
@media (min-width: 1400px) { .nom-carousel-track .nom-card { width: 155px; } }

/* Hero - full width within the parent. Previously used 100vw + negative
 * margin escape, but that caused horizontal overflow on mobile Safari
 * where 100vw includes the scrollbar/safe area. Since .nom-home already
 * has max-width:none, 100% is enough. */
.nom-hero {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* Hero side thumbnails - sized to match yuppow React component exactly.
 *
 * From the React code:
 *   md (768+): w-10 h-14  = 40px wide x 56px tall, gap-2 = 8px
 *   lg (1024+): w-12 h-16 = 48px wide x 64px tall, gap-3 = 12px
 *   Position: right-4 (16px) md, right-6 (24px) lg
 *   Hidden on mobile (md:block in React)
 */
.nom-hero-thumbs {
	display: none; /* hidden on mobile */
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	z-index: 5;
	/* v1.0.39: Sliding window of 5 thumbs.
	 * - Tablet (768+): 56px thumb + 8px gap = 64px per item, 5 items = 320px - 8px gap = 312px tall
	 * - Desktop (1024+): 64px thumb + 12px gap = 76px per item, 5 items = 380px - 12px gap = 368px tall
	 * v1.0.40: Added 6px vertical padding so the top/bottom thumb's 1.1x active
	 * scale doesn't get clipped at the window edges. Bumped height by 12px
	 * total to compensate so the visible thumb area stays the same. */
	height: 324px;
	padding: 6px;
	overflow: hidden;
}

/* Inner track that holds all the thumbs and slides up/down. */
.nom-hero-thumbs-track {
	display: flex;
	flex-direction: column;
	gap: 8px;
	transform: translateY(0);
	transition: transform 320ms ease;
	will-change: transform;
}

@media (min-width: 768px) {
	.nom-hero-thumbs {
		display: block;
	}
}

@media (min-width: 1024px) {
	.nom-hero-thumbs {
		right: 24px;
		/* Desktop: 64px thumb + 12px gap = 76px per item.
		 * 5 items = (5 * 64) + (4 * 12) = 320 + 48 = 368px tall,
		 * + 12px (6px top + 6px bottom) padding = 380px outer height. */
		height: 380px;
	}
	.nom-hero-thumbs-track {
		gap: 12px;
	}
}

.nom-hero-thumb {
	width: 40px;
	height: 56px;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.4;
	border: 2px solid transparent;
	transition: all 300ms ease;
	background: var(--nom-elevated);
	padding: 0;
	flex-shrink: 0;
}

@media (min-width: 1024px) {
	.nom-hero-thumb {
		width: 48px;
		height: 64px;
	}
}

.nom-hero-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nom-hero-thumb.is-active {
	opacity: 1;
	border-color: var(--nom-accent);
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.nom-hero-thumb:hover {
	opacity: 1;
}

/* Hero content padding aligned to gutter so text starts at same x as carousel cards */
@media (min-width: 768px) {
	.nom-hero-content { padding: 0 var(--nom-gutter) !important; }
}

@media (min-width: 1024px) {
	.nom-hero-content { padding: 0 var(--nom-gutter) !important; }
}

/* Top rated section - full-bleed dark band */
.nom-toprated-section {
	background: linear-gradient(180deg, transparent 0%, rgba(15, 15, 30, 0.5) 50%, transparent 100%);
}

.nom-toprated {
	max-width: var(--nom-container);
	margin: 0 auto;
	padding: 0 var(--nom-gutter);
}

/* Coming soon section - full-bleed */
.nom-comingsoon-grid {
	max-width: var(--nom-container);
	margin: 0 auto;
	padding: 0 var(--nom-gutter);
}

/* Genres section - full-bleed */
.nom-genres-grid {
	max-width: var(--nom-container);
	margin: 0 auto;
	padding: 0 var(--nom-gutter);
}

/* SEO blocks stay contained */
.nom-seo-block {
	max-width: var(--nom-container);
	margin: 0 auto;
	padding: 32px var(--nom-gutter);
}

/* Ad zones inside .nom-home should not have the contained max-width override */
.nom-home > .nom-ad {
	max-width: var(--nom-container);
	margin: 24px auto;
	padding: 0 var(--nom-gutter);
}

/* Override: site-main wrapper padding if any WP theme parent injects it */
.nom-home > .nom-section,
.nom-home > .nom-hero,
.nom-home > .nom-ad,
.nom-home > .nom-seo-block {
	box-sizing: border-box;
}

/* =================================================================
 * v1.0.25 - Instant search dropdown
 * ================================================================= */

.nom-search-wrap {
	position: relative;
}

.nom-search-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	max-height: 70vh;
	overflow-y: auto;
	background: var(--nom-card);
	border: 1px solid var(--nom-border);
	border-radius: 12px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
	z-index: 200;
	padding: 6px;
	scrollbar-width: thin;
	scrollbar-color: var(--nom-border) transparent;
}

.nom-search-dropdown[hidden] {
	display: none;
}

.nom-search-dropdown::-webkit-scrollbar {
	width: 6px;
}

.nom-search-dropdown::-webkit-scrollbar-thumb {
	background: var(--nom-border);
	border-radius: 999px;
}

.nom-search-result {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--nom-fg);
	transition: background 150ms ease;
}

.nom-search-result:hover,
.nom-search-result.is-highlighted {
	background: var(--nom-elevated);
}

.nom-search-result-poster {
	flex-shrink: 0;
	width: 40px;
	height: 60px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--nom-elevated);
}

.nom-search-result-poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nom-search-result-noimg {
	width: 100%;
	height: 100%;
	background: var(--nom-elevated);
}

.nom-search-result-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.nom-search-result-title {
	font-family: var(--nom-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--nom-fg);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nom-search-result-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var(--nom-fg-mute);
}

.nom-search-result-dot {
	font-size: 10px;
	opacity: 0.5;
}

.nom-search-result-rating {
	color: var(--nom-accent);
	font-weight: 700;
}

.nom-search-empty {
	padding: 24px 16px;
	text-align: center;
	font-size: 13px;
	color: var(--nom-fg-mute);
}

.nom-search-loading {
	padding: 20px;
	display: flex;
	justify-content: center;
}

.nom-search-spinner {
	width: 22px;
	height: 22px;
	border: 2px solid var(--nom-border);
	border-top-color: var(--nom-accent);
	border-radius: 50%;
	animation: nom-search-spin 0.8s linear infinite;
}

@keyframes nom-search-spin {
	to { transform: rotate(360deg); }
}

/* On mobile (the overlay form), make the dropdown sit nicely */
.nom-search-overlay-form .nom-search-dropdown {
	position: relative;
	top: 0;
	margin-top: 12px;
	max-height: 60vh;
}

/* =================================================================
 * v1.0.25 - Hero watchlist button (glass style)
 * ================================================================= */

.nom-wl-btn-hero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	padding: 0 24px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #fff;
	font-family: var(--nom-font-body);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 200ms ease;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.nom-wl-btn-hero {
		height: 48px;
		padding: 0 28px;
		font-size: 13px;
	}
}

@media (min-width: 1280px) {
	.nom-wl-btn-hero {
		height: 52px;
		padding: 0 32px;
		font-size: 14px;
	}
}

.nom-wl-btn-hero:hover {
	background: rgba(255, 255, 255, 0.18);
	transform: translateY(-1px);
}

.nom-wl-btn-hero:active {
	transform: scale(0.97);
}

/* Active state (item is in watchlist) - red accent border + red text */
.nom-wl-btn-hero.is-in {
	background: rgba(220, 38, 38, 0.1);
	border-color: var(--nom-accent);
	color: var(--nom-accent);
}

.nom-wl-btn-hero.is-in:hover {
	background: rgba(220, 38, 38, 0.2);
}

.nom-wl-btn-hero .nom-wl-btn-heart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.nom-wl-btn-hero .nom-wl-btn-heart svg {
	width: 14px;
	height: 14px;
	stroke-width: 3;
}

@media (min-width: 768px) {
	.nom-wl-btn-hero .nom-wl-btn-heart svg {
		width: 16px;
		height: 16px;
	}
}

/* Ensure hero actions row aligns the two buttons nicely */
.nom-hero-actions {
	flex-wrap: wrap;
}

/* =================================================================
 * v1.0.26 - TV show page: seasons grid + new episode cards
 * ================================================================= */

/* "Watch Now" header with dashed red prefix (matches yuppow style) */
.nom-section-title-dashed {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--nom-font-display);
	font-weight: 400;
	font-size: 28px;
	color: var(--nom-fg);
	text-transform: none;
	margin: 0 0 20px;
}

.nom-section-title-dashed::before {
	content: '';
	display: inline-block;
	width: 32px;
	height: 2px;
	background: var(--nom-accent);
	border-radius: 999px;
}

/* Spacing between player and seasons/episodes sections */
.nom-section-player .nom-player {
	margin-bottom: 32px;
}

/* Heading style: "Label | Watching X" used for both Seasons and Episodes.
 * v1.0.41: Added red bar prefix to match other section headings (WATCH NOW,
 * Cast, You Might Also Like). Label color flipped from red -> white. Separator
 * color flipped from muted -> red. Font upgraded to display (Bebas Neue) to
 * match the visual rhythm of other section headings. */
.nom-tv-section-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-family: var(--nom-font-display);
	font-size: 28px;
	font-weight: 400;
	letter-spacing: 0.02em;
	padding-left: 16px;
	position: relative;
}

.nom-tv-section-head::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.12em;
	bottom: 0.12em;
	width: 4px;
	background: var(--nom-accent);
	border-radius: 2px;
}

.nom-tv-section-label {
	color: var(--nom-fg);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.nom-tv-section-sep {
	color: var(--nom-accent);
	font-weight: 400;
}

.nom-tv-seasons-watching,
.nom-tv-episodes-watching {
	font-family: var(--nom-font-body);
	color: var(--nom-fg-dim);
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
}

/* --- Seasons section --- */

.nom-tv-seasons {
	margin: 32px 0;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--nom-border);
}

@media (min-width: 640px) {
	.nom-tv-seasons {
		margin: 40px 0;
		padding-bottom: 40px;
	}
}

.nom-tv-seasons-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

@media (min-width: 640px) {
	.nom-tv-seasons-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 12px;
	}
}

@media (min-width: 768px) {
	.nom-tv-seasons-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

@media (min-width: 1024px) {
	.nom-tv-seasons-grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

/* Dense layout for shows with 10+ seasons */
.nom-tv-seasons-grid--dense {
	grid-template-columns: repeat(4, 1fr);
}

@media (min-width: 640px) {
	.nom-tv-seasons-grid--dense { grid-template-columns: repeat(6, 1fr); }
}

@media (min-width: 768px) {
	.nom-tv-seasons-grid--dense { grid-template-columns: repeat(8, 1fr); }
}

@media (min-width: 1024px) {
	.nom-tv-seasons-grid--dense { grid-template-columns: repeat(10, 1fr); }
}

.nom-tv-season {
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	background: var(--nom-surface);
	border: 1px solid var(--nom-border);
	border-radius: 8px;
	color: var(--nom-fg-dim);
	font-family: var(--nom-font-body);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 180ms ease;
	white-space: nowrap;
}

@media (min-width: 640px) {
	.nom-tv-season {
		height: 48px;
		padding: 0 12px;
		font-size: 14px;
	}
}

.nom-tv-season:hover {
	border-color: var(--nom-accent);
	color: var(--nom-fg);
}

.nom-tv-season.is-active {
	background: var(--nom-accent);
	border-color: var(--nom-accent);
	color: #fff;
	font-weight: 700;
}

.nom-tv-season.is-active:hover {
	background: var(--nom-accent-bright);
	border-color: var(--nom-accent-bright);
}

/* --- Episodes section --- */

.nom-tv-episodes {
	margin: 8px 0 32px;
}

@media (min-width: 640px) {
	.nom-tv-episodes { margin: 16px 0 40px; }
}

.nom-tv-episodes-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 640px) {
	.nom-tv-episodes-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (min-width: 768px) {
	.nom-tv-episodes-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
	.nom-tv-episodes-grid { grid-template-columns: repeat(4, 1fr); }
}

.nom-tv-episodes-empty {
	grid-column: 1 / -1;
	padding: 32px;
	text-align: center;
	color: var(--nom-fg-mute);
	font-size: 14px;
	background: var(--nom-surface);
	border: 1px solid var(--nom-border);
	border-radius: 12px;
}

/* Override the old .nom-episode-card with the new design */
.nom-tv-episodes-grid .nom-episode-card {
	display: flex;
	flex-direction: column;
	background: var(--nom-surface);
	border: 1px solid var(--nom-border);
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	color: var(--nom-fg);
	transition: border-color 200ms ease, background 200ms ease;
	cursor: pointer;
	padding: 0;
	text-align: left;
}

.nom-tv-episodes-grid .nom-episode-card:hover {
	border-color: var(--nom-accent);
}

.nom-tv-episodes-grid .nom-episode-card.is-active {
	border-color: var(--nom-accent);
	background: rgba(220, 38, 38, 0.05);
}

.nom-episode-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--nom-void);
	overflow: hidden;
}

.nom-episode-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 500ms ease;
}

.nom-episode-card:hover .nom-episode-thumb img {
	transform: scale(1.05);
}

.nom-episode-thumb-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--nom-fg-mute);
	opacity: 0.2;
}

.nom-episode-thumb-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
	opacity: 0;
	transition: opacity 200ms ease;
	pointer-events: none;
}

.nom-episode-card:hover .nom-episode-thumb-overlay {
	opacity: 1;
}

.nom-episode-now-playing {
	position: absolute;
	top: 8px;
	right: 8px;
	background: var(--nom-accent);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	padding: 3px 6px;
	border-radius: 4px;
	letter-spacing: 0.04em;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	z-index: 2;
}

@media (min-width: 640px) {
	.nom-episode-now-playing {
		font-size: 10px;
		padding: 3px 8px;
	}
}

.nom-episode-body {
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.nom-episode-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.nom-episode-e-label {
	color: var(--nom-accent);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.nom-episode-runtime {
	color: var(--nom-fg-mute);
	font-size: 10px;
}

.nom-episode-title {
	margin: 0;
	font-family: var(--nom-font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--nom-fg);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	transition: color 200ms ease;
}

.nom-episode-card:hover .nom-episode-title {
	color: var(--nom-accent);
}

.nom-episode-air-date {
	color: var(--nom-fg-mute);
	font-size: 10px;
}

/* Skeleton loading state during async season switch */
.nom-episode-skeleton {
	aspect-ratio: 16 / 9;
	background: var(--nom-surface);
	border: 1px solid var(--nom-border);
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}

.nom-episode-skeleton::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.04) 50%,
		transparent 100%);
	animation: nom-skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes nom-skeleton-shimmer {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

/* Hide old controls (the <select> dropdown) if any stale CSS targets them */
.nom-tv-controls {
	display: none;
}

/* =================================================================
 * v1.0.28 - Legal page layout + Custom 404
 * ================================================================= */

/* ---- Default page template wrapper (used by index.php) ---- */

.nom-page {
	padding: 32px 0 64px;
}

.nom-page-inner {
	max-width: var(--nom-container);
	margin: 0 auto;
	padding: 0 var(--nom-gutter);
}

.nom-page-title {
	font-family: var(--nom-font-display);
	font-weight: 400;
	font-size: 40px;
	color: var(--nom-fg);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin: 0 0 32px;
	line-height: 1;
}

@media (min-width: 768px) {
	.nom-page-title { font-size: 56px; }
}

.nom-page-body {
	color: var(--nom-fg-dim);
	font-size: 15px;
	line-height: 1.7;
}

.nom-page-body h2 {
	font-family: var(--nom-font-display);
	font-weight: 400;
	font-size: 24px;
	color: var(--nom-fg);
	margin: 40px 0 16px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.nom-page-body h3 {
	font-family: var(--nom-font-body);
	font-weight: 700;
	font-size: 16px;
	color: var(--nom-fg);
	margin: 28px 0 8px;
}

.nom-page-body p {
	margin: 0 0 16px;
}

.nom-page-body ul,
.nom-page-body ol {
	margin: 0 0 20px;
	padding-left: 24px;
}

.nom-page-body li {
	margin-bottom: 8px;
}

.nom-page-body a {
	color: var(--nom-accent);
	text-decoration: none;
	transition: color 180ms ease;
}

.nom-page-body a:hover {
	color: var(--nom-accent-bright);
	text-decoration: underline;
}

.nom-page-body strong {
	color: var(--nom-fg);
}

/* ---- Legal pages: constrained reading column ---- */

.nom-legal-page .nom-page-inner {
	max-width: 760px;
}

.nom-legal-page .nom-page {
	padding: 48px 0 80px;
}

@media (min-width: 768px) {
	.nom-legal-page .nom-page {
		padding: 64px 0 96px;
	}
}

.nom-legal-page .nom-page-title {
	font-size: 36px;
	margin-bottom: 24px;
}

@media (min-width: 768px) {
	.nom-legal-page .nom-page-title {
		font-size: 44px;
	}
}

.nom-legal-page .nom-page-body {
	font-size: 16px;
}

/* ---- 404 page ---- */

.nom-404 {
	padding: 0 0 64px;
}

.nom-404-hero {
	padding: 48px 0 64px;
	border-bottom: 1px solid var(--nom-border);
	margin-bottom: 48px;
}

@media (min-width: 768px) {
	.nom-404-hero {
		padding: 80px 0 96px;
	}
}

.nom-404-inner {
	max-width: 640px;
	margin: 0 auto;
	padding: 0 var(--nom-gutter);
	text-align: center;
}

.nom-404-number {
	font-family: var(--nom-font-display);
	font-weight: 400;
	font-size: 120px;
	line-height: 1;
	color: var(--nom-accent);
	margin: 0 0 16px;
	letter-spacing: 0.02em;
	text-shadow: 0 8px 32px rgba(220, 38, 38, 0.4);
}

@media (min-width: 768px) {
	.nom-404-number { font-size: 180px; }
}

.nom-404-title {
	font-family: var(--nom-font-display);
	font-weight: 400;
	font-size: 28px;
	color: var(--nom-fg);
	text-transform: uppercase;
	margin: 0 0 16px;
	letter-spacing: 0.01em;
}

@media (min-width: 768px) {
	.nom-404-title { font-size: 40px; }
}

.nom-404-message {
	color: var(--nom-fg-dim);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 auto 32px;
	max-width: 480px;
}

@media (min-width: 768px) {
	.nom-404-message { font-size: 15px; }
}

/* Search input on 404 page */
.nom-404-search {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 480px;
	margin: 0 auto 32px;
	background: var(--nom-surface);
	border: 1px solid var(--nom-border);
	border-radius: 999px;
	padding: 4px 4px 4px 20px;
	transition: border-color 180ms ease;
}

.nom-404-search:focus-within {
	border-color: var(--nom-accent);
}

.nom-404-search-input {
	flex: 1;
	background: transparent;
	border: 0;
	color: var(--nom-fg);
	font-family: var(--nom-font-body);
	font-size: 14px;
	padding: 12px 0;
	outline: none;
	min-width: 0;
}

.nom-404-search-input::placeholder {
	color: var(--nom-fg-mute);
}

.nom-404-search-btn {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--nom-accent);
	border: 0;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 180ms ease, transform 180ms ease;
}

.nom-404-search-btn:hover {
	background: var(--nom-accent-bright);
	transform: scale(1.05);
}

/* Action buttons */
.nom-404-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.nom-404-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 24px;
	border-radius: 999px;
	font-family: var(--nom-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: all 180ms ease;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.nom-404-btn {
		height: 48px;
		padding: 0 32px;
		font-size: 13px;
	}
}

.nom-404-btn-primary {
	background: var(--nom-accent);
	color: #fff;
	border: 0;
	box-shadow: 0 4px 16px rgba(220, 38, 38, 0.3);
}

.nom-404-btn-primary:hover {
	background: var(--nom-accent-bright);
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5);
}

.nom-404-btn-secondary {
	background: rgba(255, 255, 255, 0.06);
	color: var(--nom-fg);
	border: 1px solid var(--nom-border);
}

.nom-404-btn-secondary:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--nom-fg-mute);
	transform: translateY(-1px);
}

/* =================================================================
 * v1.0.29 - Mobile overflow fixes
 * ================================================================= */

/* Safety net: prevent any rogue element from causing horizontal scroll.
 * v1.0.57: must be `clip` not `hidden` - `hidden` creates a scroll context
 * which silently breaks position:sticky on descendants (including the header).
 * `clip` clips overflow without becoming a scroll container.
 * Supported in Safari 16+, Chrome 90+, Firefox 81+.
 */
html, body {
	overflow-x: clip;
	max-width: 100%;
}

/* Ensure root containers honor the viewport width. */
.nom-site-main,
.nom-home,
.nom-page {
	max-width: 100%;
	overflow-x: clip;
}

/* Top Rated items: prevent flex content from forcing parent wider on mobile. */
.nom-toprated-item {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}

.nom-toprated-meta {
	min-width: 0;
	overflow: hidden;
}

.nom-toprated-title,
.nom-toprated-sub {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

/* Genres grid: same precaution */
.nom-genres-grid {
	max-width: 100%;
}

/* Coming soon grid: same precaution */
.nom-comingsoon-grid {
	max-width: 100%;
}

/* Hero content padding: ensure no overflow when at mobile gutter */
.nom-hero-content {
	max-width: 100%;
	box-sizing: border-box;
}

/* =================================================================
 * v1.0.30 - Mobile polish: hero buttons, search, cards, footer, genres
 * ================================================================= */

/* ---- 1. Hero buttons stretch to fill on mobile ---- */
/* On mobile (<768px): buttons share width 50/50. On tablet+: auto width side-by-side. */

@media (max-width: 767px) {
	.nom-hero-actions {
		display: flex;
		gap: 10px;
		width: 100%;
		flex-wrap: nowrap;
	}

	.nom-hero-actions .nom-hero-watch,
	.nom-hero-actions .nom-wl-btn-hero {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		padding-left: 16px;
		padding-right: 16px;
		font-size: 12px;
	}

	.nom-hero-actions .nom-hero-watch {
		white-space: nowrap;
	}
}

/* ---- 2. Mobile search overlay: instant search dropdown styling ---- */
/* The dropdown inside the overlay form needs to be positioned relative to it
 * and styled to match the overlay's larger touch-friendly layout. */

.nom-search-overlay-form .nom-search-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 8px;
	max-height: 70vh;
	z-index: 10;
}

.nom-search-overlay-form {
	position: relative;
}

/* Make overlay results slightly bigger touch targets on mobile */
.nom-search-overlay-form .nom-search-result {
	padding: 10px;
}

.nom-search-overlay-form .nom-search-result-poster {
	width: 44px;
	height: 66px;
}

.nom-search-overlay-form .nom-search-result-title {
	font-size: 14px;
}

/* ---- 3a. Bigger cards on mobile ---- */
/* v1.0.22 set 110px → 175px across breakpoints. Bump mobile up for readability. */

.nom-carousel-track .nom-card {
	width: 140px;
}

@media (min-width: 480px)  { .nom-carousel-track .nom-card { width: 150px; } }
@media (min-width: 640px)  { .nom-carousel-track .nom-card { width: 160px; } }
@media (min-width: 1024px) { .nom-carousel-track .nom-card { width: 165px; } }
@media (min-width: 1400px) { .nom-carousel-track .nom-card { width: 175px; } }

/* ---- 3b. Section head: title left + "View All" right on mobile (always row) ---- */

.nom-section-head {
	display: flex;
	flex-direction: row !important;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.nom-section-head > div {
	min-width: 0;
	flex: 1;
}

.nom-section-head .nom-section-viewall {
	flex-shrink: 0;
	white-space: nowrap;
	align-self: center;
}

@media (max-width: 480px) {
	.nom-section-title {
		font-size: 22px !important;
	}

	.nom-section-desc {
		font-size: 11px;
	}

	.nom-section-viewall {
		font-size: 12px;
	}
}

/* ---- 4. Footer: centered with separator lines on mobile ---- */

@media (max-width: 767px) {
	.nom-footer-cols {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.nom-footer-col {
		text-align: center;
		padding: 24px 0;
		margin: 0;
		border-bottom: 1px solid var(--nom-border);
	}

	.nom-footer-col:last-child {
		border-bottom: 0;
	}

	.nom-footer-col-brand {
		padding-top: 0;
	}

	.nom-footer-heading {
		text-align: center;
	}

	.nom-footer-list {
		text-align: center;
	}

	.nom-footer-list li {
		text-align: center;
	}

	.nom-footer-tagline {
		text-align: center;
	}

	/* Also center the bottom row (copyright + DMCA) */
	.nom-footer-bottom {
		flex-direction: column;
		text-align: center;
		gap: 8px;
	}

	.nom-footer-copy,
	.nom-footer-dmca {
		text-align: center;
	}
}

/* ---- 5. Browse by Genre: ensure mobile edge padding ---- */

.nom-genres-section {
	box-sizing: border-box;
}

.nom-genres-grid {
	box-sizing: border-box;
	padding-left: var(--nom-gutter);
	padding-right: var(--nom-gutter);
	max-width: var(--nom-container);
	margin-left: auto;
	margin-right: auto;
}

/* =================================================================
 * v1.0.32 - Clear (X) button on search inputs
 * Specificity-fixed in v1.0.33: targets are now form.button to beat
 * the generic .nom-search-*-form button rules that were forcing
 * display: inline-flex (always visible) and red square styling.
 * ================================================================= */

/* Hard reset of inherited form button styles. Uses compound selectors
 * with same specificity as the rules they need to beat. */
.nom-search-inline button.nom-search-clear,
.nom-search-overlay-form button.nom-search-clear,
.nom-search-page-form button.nom-search-clear,
.nom-404-search button.nom-search-clear {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: rgba(255, 255, 255, 0.1);
	border: 0;
	border-radius: 50%;
	color: var(--nom-fg-dim);
	font-weight: normal;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease;
	z-index: 5;
	box-shadow: none;
}

.nom-search-inline button.nom-search-clear:hover,
.nom-search-overlay-form button.nom-search-clear:hover,
.nom-search-page-form button.nom-search-clear:hover,
.nom-404-search button.nom-search-clear:hover {
	background: rgba(255, 255, 255, 0.2);
	color: var(--nom-fg);
}

.nom-search-inline button.nom-search-clear:active,
.nom-search-overlay-form button.nom-search-clear:active,
.nom-search-page-form button.nom-search-clear:active,
.nom-404-search button.nom-search-clear:active {
	transform: translateY(-50%) scale(0.92);
}

/* Show only when has-text class is present */
.nom-search-inline button.nom-search-clear.is-visible,
.nom-search-overlay-form button.nom-search-clear.is-visible,
.nom-search-page-form button.nom-search-clear.is-visible,
.nom-404-search button.nom-search-clear.is-visible {
	display: flex;
}

.nom-search-clear svg {
	display: block;
	width: 14px;
	height: 14px;
	color: inherit;
}

/* --- Per-form-variant positioning --- */

.nom-search-inline button.nom-search-clear {
	right: 40px;
}

.nom-search-overlay-form button.nom-search-clear {
	right: 120px;
}

.nom-search-page-form button.nom-search-clear {
	right: 120px;
}

.nom-404-search button.nom-search-clear {
	right: 52px;
}

@media (max-width: 480px) {
	.nom-search-overlay-form button.nom-search-clear {
		right: 108px;
	}
	.nom-search-page-form button.nom-search-clear {
		right: 108px;
	}
}

/* =================================================================
 * v1.0.33 - Browse page toolbar (search box + filter bar)
 * v1.0.34 - magnifier icon moved to RIGHT side of input
 *         - native browser X cleared (was showing duplicate icon)
 *         - double border on focus fixed
 * ================================================================= */

.nom-browse-toolbar {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 16px 0 24px;
}

/* The search form on browse pages (uses .nom-search-page-form class
 * so the existing X button positioning + instant-search JS just work). */
.nom-browse-search {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--nom-surface);
	border: 1px solid var(--nom-border);
	border-radius: 12px;
	/* Padding: leave room on the right for X button (44px) and magnifier (16px). */
	padding: 0 50px 0 16px;
	transition: border-color 200ms ease;
	min-height: 44px;
}

.nom-browse-search:focus-within {
	border-color: var(--nom-accent);
}

/* Magnifier icon on the RIGHT side of the input (was left in v1.0.33). */
.nom-browse-search-icon {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--nom-fg-mute);
	pointer-events: none;
}

.nom-browse-search-input {
	flex: 1;
	width: 100%;
	background: transparent;
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	color: var(--nom-fg);
	font-family: var(--nom-font-body);
	font-size: 14px;
	padding: 10px 8px 10px 0;
	min-width: 0;
}

.nom-browse-search-input::placeholder {
	color: var(--nom-fg-mute);
}

/* Position the X clear button between the input text and the magnifier icon.
 * Form padding-right is 50px (for the magnifier at right:16px + ~16px width).
 * X sits 44px from right edge so it's clearly separated from the magnifier. */
.nom-browse-search button.nom-search-clear {
	right: 44px;
}

/* Hide any visible submit button if one ends up here (none in our markup,
 * but defensive). */
.nom-browse-search button[type="submit"]:not(.nom-search-clear) {
	display: none;
}

/* Hide native browser clear icons (Edge/IE ::-ms-clear and webkit search
 * cancel). Some browsers automatically inject an X when an input has a
 * value, which was causing a duplicate X next to ours. */
.nom-search-input::-ms-clear,
.nom-search-input::-ms-reveal {
	display: none;
	width: 0;
	height: 0;
}

.nom-search-input::-webkit-search-cancel-button,
.nom-search-input::-webkit-search-decoration {
	-webkit-appearance: none;
	display: none;
}

/* Defense: kill any inherited browser default focus rings on search inputs
 * since we already render the focus ring on the wrapper. */
.nom-search-input:focus,
.nom-search-input:focus-visible {
	outline: none;
}

/* =================================================================
 * v1.0.36 - Unified browse toolbar matching yuppow design
 *
 * One outer rounded container with:
 *   - Search input on top (own form, submits to /search)
 *   - Grid of dropdowns: Genre, Sort, Year, Rating
 *   - "Clear All" link when any filter or sort is non-default
 *   - Active dropdowns get red glow border
 *   - No Apply button - filters auto-submit on change via JS
 * ================================================================= */

.nom-toolbar {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--nom-border);
	border-radius: 16px;
	margin: 16px 0 24px;
}

@media (min-width: 1024px) {
	.nom-toolbar {
		padding: 24px;
	}
}

/* Search input row */
.nom-toolbar-search {
	position: relative;
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--nom-border);
	border-radius: 12px;
	/* Padding: room on the right for magnifier (16px from edge) + X clear button */
	padding: 0 56px 0 16px;
	transition: border-color 200ms ease;
	min-height: 48px;
	margin: 0;
}

.nom-toolbar-search:focus-within {
	border-color: var(--nom-accent);
}

/* Magnifier icon on the RIGHT side of the input (per project rule). */
.nom-toolbar-search-icon {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--nom-fg-mute);
	pointer-events: none;
}

.nom-toolbar-search-input {
	flex: 1;
	width: 100%;
	background: transparent;
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	color: var(--nom-fg);
	font-family: var(--nom-font-body);
	font-size: 15px;
	padding: 12px 8px;
	min-width: 0;
}

.nom-toolbar-search-input::placeholder {
	color: var(--nom-fg-mute);
}

/* X clear button sits BEFORE the magnifier icon (which lives at right: 16px).
 * Magnifier is ~18px wide so X goes at right: 44px (16 + 18 + 10 gap). */
.nom-toolbar-search button.nom-search-clear {
	right: 44px;
}

/* Hide the noscript Apply button when JS is enabled (it's inside a
 * <noscript> tag so this is just defensive). */
.nom-toolbar-filters .nom-toolbar-apply {
	display: none;
}
noscript .nom-toolbar-apply {
	display: inline-block;
}

/* Filters row (the dropdowns + Clear All) */
.nom-toolbar-filters {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
}

/* Grid of dropdowns: 2 cols on mobile, all-row on desktop. */
.nom-toolbar-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

@media (min-width: 768px) {
	.nom-toolbar-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 12px;
	}
}

/* Each field wrapper */
.nom-toolbar-field {
	position: relative;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--nom-border);
	border-radius: 12px;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}

.nom-toolbar-field:hover {
	border-color: rgba(255, 255, 255, 0.18);
}

/* Active state - dropdown has a non-default value */
.nom-toolbar-field.is-active {
	border-color: var(--nom-accent);
	box-shadow: 0 0 0 1px var(--nom-accent), 0 0 16px rgba(220, 38, 38, 0.25);
}

.nom-toolbar-field.is-active .nom-toolbar-select {
	color: var(--nom-accent);
}

/* The actual select */
.nom-toolbar-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 100%;
	background: transparent;
	border: 0;
	outline: none;
	color: var(--nom-fg);
	font-family: var(--nom-font-body);
	font-size: 15px;
	font-weight: 500;
	padding: 12px 40px 12px 16px;
	cursor: pointer;

	/* SVG chevron on the right */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3b3b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px 16px;
}

.nom-toolbar-field.is-active .nom-toolbar-select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

/* Style the dropdown options (limited browser support but where supported) */
.nom-toolbar-select option {
	background: var(--nom-card);
	color: var(--nom-fg);
	padding: 8px;
}

/* Clear All link */
.nom-toolbar-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 12px 20px;
	border: 1px solid var(--nom-border);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.03);
	color: var(--nom-fg-dim);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
	cursor: pointer;
}

.nom-toolbar-clear:hover {
	background: rgba(220, 38, 38, 0.08);
	color: var(--nom-accent);
	border-color: rgba(220, 38, 38, 0.4);
}

@media (min-width: 768px) {
	.nom-toolbar-clear {
		align-self: flex-end;
		width: auto;
		min-width: 140px;
	}
}

/* =================================================================
 * v1.0.38 - Hero mouse-drag support
 * ================================================================= */

/* Show grab cursor on the hero so users know it's draggable.
 * Interactive elements inside the hero (buttons, links) keep their own cursor. */
.nom-hero {
	cursor: grab;
	user-select: none;
}

.nom-hero.is-dragging {
	cursor: grabbing;
}

/* Don't apply grab cursor over interactive elements - they keep pointer/normal. */
.nom-hero a,
.nom-hero button,
.nom-hero input,
.nom-hero .nom-hero-thumb,
.nom-hero .nom-hero-indicator {
	cursor: pointer;
}

/* While dragging the hero, prevent image-drag ghost from appearing. */
.nom-hero.is-dragging img {
	pointer-events: none;
}