/*
Theme Name: King Child
Theme URI: http://kingthemes.net
Template: king
Author: RedKings
Author URI: http://themeforest.net/user/RedKings
Description: Description
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, featured-images, microformats, post-formats, sticky-post, threaded-comments, translation-ready
Text Domain: king
*/

/*************** Add your custom css here  ***************/

/* --- Top Nav: consolidate the double header bar into a single row ---------
   The bar is a plain, non-wrapping flex row: logo | nav | (auto) | right
   cluster. Nothing is absolutely positioned and no width is reserved with a
   magic padding value, so no region can ever be painted on top of another -
   they push each other instead. When the total genuinely exceeds the bar,
   assets/js/topnav-fit.js degrades it by measurement (search collapses to
   its icon, then nav items spill into an overflow menu). See that file. */
#masthead.site-header {
	position: relative;
	/* Height is a variable so the Customizer can drive it; every rule that
	   used to hardcode 70px now reads this, including the hero stamp offset
	   and the top-mounted film strip's clearance. */
	height: var( --topnav-h, 70px );
	overflow: visible;
	background: #101014;
}
.king-header.lr-padding {
	position: relative;
	height: var( --topnav-h, 70px );
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: clamp( 6px, 0.9vw, 18px );
	background: transparent !important;
	box-shadow: none !important;
	/* Top Nav > Logo > "Logo left padding". The parent theme's base gap is 2%;
	   the offset var (Customizer, default 0) is layered on so 0 is unchanged and
	   the slider moves the logo - and the mobile menu button - in from or closer
	   to the viewport's left edge. max() floors it at 0 so it can never clip. */
	padding-left: max( 0px, calc( 2% + var( --topnav-logo-offset, 0px ) ) );
}
@media screen and ( max-width: 961px ) {
	/* Below 961px the parent forces padding-left:10px with !important, so the
	   override has to match that weight. Same formula, 10px base. */
	.king-header.lr-padding {
		padding-left: max( 0px, calc( 10px + var( --topnav-logo-offset, 0px ) ) ) !important;
	}
}

/* Every region keeps its natural width. Without this, flex would shrink the
   nav to fit and the item labels would collide with each other instead of
   overflowing - and the fit engine measures overflow to decide what to do. */
.king-header.lr-padding > * {
	flex: 0 0 auto;
}

/* Defensive: if a header template ever emits a bare <li> straight into
   .king-header (outside .king-head-nav's <ul>) it would otherwise render a
   stray bullet and ignore the row's alignment. */
.king-header.lr-padding > li {
	list-style: none;
	display: flex;
	align-items: center;
	margin: 0;
}

.king-head-nav > ul {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* margin-left:auto is what pins the cluster to the right edge while leaving
   it in normal flow, so it participates in the overflow measurement. */
.king-header-right {
	position: static;
	height: var( --topnav-h, 70px );
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	margin: 0 0 0 auto;
	z-index: 13;
}

/* --- Logo: still or animated --------------------------------------------
   A video logo has to obey exactly the same box as an <img> one, otherwise
   swapping a still logo for an animated one changes the bar's height. Both
   are capped by the Top Nav > Logo height setting. */
.site-branding .king-logo,
.site-branding .king-logo-night,
.site-branding .mobile-king-logo,
.site-branding .mobile-king-logo-night {
	display: flex;
	align-items: center;
	max-width: 100%;
	/* Top Nav > Logo > "Logo opacity". Set on the link wrapper so an <img> and
	   a video logo fade identically. Default 1 keeps the rule inert until the
	   slider is actually moved. */
	opacity: var( --topnav-logo-opacity, 1 );
}
/* Selectors are deliberately as specific as the parent theme's own
   ".king-night .site-branding .king-logo-night img { max-height:60px }",
   otherwise that rule outranks the Logo height setting and the control
   silently does nothing. */
.site-branding .king-logo img,
.site-branding .king-logo-night img,
.site-branding .mobile-king-logo img,
.site-branding .mobile-king-logo-night img,
.king-night .site-branding .king-logo-night img,
.king-night .site-branding .mobile-king-logo-night img,
.site-branding .topnav-logo-video {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var( --topnav-logo-height, 46px );
	object-fit: contain;
}
/* An autoplaying loop is decorative motion; honour the OS setting. The video
   is also paused via JS (assets/js/topnav-fit.js) since CSS alone cannot
   stop playback - this just removes any transition on top of it. */
@media ( prefers-reduced-motion: reduce ) {
	.site-branding .topnav-logo-video {
		animation: none !important;
		transition: none !important;
	}
}

/* --- Mobile logo fallback ------------------------------------------------
   Below 500px the parent theme hides .king-logo / .king-logo-night and shows
   .mobile-king-logo / .mobile-king-logo-night instead. Those elements only
   exist once a mobile logo has been uploaded in the theme options - until
   then the branding slot collapses to an empty ~10px gap and the bar looks
   broken. The :has() guard means these rules switch themselves off the
   moment a real mobile logo is set, so uploading one is still the better
   fix; this just keeps the bar sane in the meantime. */
@media screen and ( max-width: 500px ) {
	.site-branding:not( :has( .mobile-king-logo ) ) .king-logo {
		display: block !important;
	}
	.king-night .site-branding:not( :has( .mobile-king-logo-night ) ) .king-logo {
		display: none !important;
	}
	.site-branding:not( :has( .mobile-king-logo ) ) .king-logo img,
	.king-night .site-branding:not( :has( .mobile-king-logo-night ) ) .king-logo-night img {
		display: block;
		width: auto;
		max-width: 100%;
	}
	.site-branding .king-logo img,
	.site-branding .king-logo-night img,
	.site-branding .mobile-king-logo img,
	.site-branding .mobile-king-logo-night img,
	.king-night .site-branding .king-logo-night img,
	.king-night .site-branding .mobile-king-logo-night img,
	.site-branding .topnav-logo-video {
		max-height: var( --topnav-logo-height-mobile, 42px );
	}
	/* The branding slot is the only thing in the mobile bar that can safely
	   give up space - the hamburger and the account icons are fixed-size hit
	   targets - so it is the one region allowed to shrink.
	   The basis must be a definite length, not auto: with an auto basis the
	   slot sizes to its content while the logo's max-width:100% sizes to the
	   slot, and that circular dependency resolves to zero width. */
	.king-header.lr-padding > .site-branding {
		flex: 0 1 120px;
		min-width: 0;
	}
	.site-branding .king-logo,
	.site-branding .king-logo-night {
		max-width: 100%;
	}
}

/* --- One logo at a time ---------------------------------------------------
   The display:flex on all four logo links above (needed for the video logo)
   outranks the parent theme's own switching, so the mobile logo showed next
   to the night logo on desktop (owner, 2026-10-19: "the logo is showing
   double"). This puts the switching back: day / night logo by mode, mobile
   logos at 500px and under - each only when that logo actually exists. */
.site-branding .king-logo-night,
.site-branding .mobile-king-logo,
.site-branding .mobile-king-logo-night {
	display: none;
}
.king-night .site-branding:has( .king-logo-night ) .king-logo {
	display: none;
}
.king-night .site-branding .king-logo-night {
	display: flex;
}
@media screen and ( max-width: 500px ) {
	.site-branding:has( .mobile-king-logo ) .king-logo,
	.site-branding:has( .mobile-king-logo ) .king-logo-night {
		display: none;
	}
	.site-branding .mobile-king-logo {
		display: flex;
	}
	.king-night .site-branding:has( .mobile-king-logo-night ) .mobile-king-logo {
		display: none;
	}
	.king-night .site-branding .mobile-king-logo-night {
		display: flex;
	}
	/* No night mobile logo uploaded: the parent hides the day one at night,
	   which left phones in night mode with no logo at all. */
	.king-night .site-branding:not( :has( .mobile-king-logo-night ) ) .mobile-king-logo img {
		display: block;
	}
}

/* --- Fit engine, step 2: collapsible search ------------------------------
   The search field is the single biggest discretionary consumer in the bar
   (216px). Under width pressure topnav-fit.js collapses it to just its
   magnifier; clicking that re-opens it as an overlay across the bar. The
   input stays in the DOM throughout so the theme's live-results JS keeps
   working - it is only ever collapsed visually. */
.king-search-top,
.king-search-top .king-search,
.king-search-top .header-search-form,
.king-search-top .header-search-field {
	transition: width 0.18s ease, opacity 0.18s ease;
}
.king-header.topnav-search-collapsed .king-search-top {
	width: 56px !important;
}
.king-header.topnav-search-collapsed .king-search,
.king-header.topnav-search-collapsed .header-search-form {
	width: 40px !important;
}
.king-header.topnav-search-collapsed .header-search-field {
	width: 0 !important;
	min-width: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	opacity: 0;
	pointer-events: none;
}
.king-header.topnav-search-collapsed .header-search-submit {
	cursor: pointer;
}

/* Open state: .king-search is lifted out of flow and anchored to the right of
   its own slot, so it grows leftward over the nav items (which is fine - you
   are searching) but never covers the submit / account / notification icons
   sitting to its right. .king-search-top keeps its 56px slot in flow, so the
   rest of the bar does not jump when the overlay appears. */
.king-header.topnav-search-open .king-search-top {
	position: relative;
}
.king-header.topnav-search-open .king-search {
	position: absolute;
	right: 8px;
	left: auto;
	top: 50%;
	transform: translateY( -50% );
	width: min( 420px, 58vw ) !important;
	margin: 0;
	z-index: 60;
}
.king-header.topnav-search-open .header-search-form {
	width: 100% !important;
	box-shadow: 0 6px 28px rgba( 0, 0, 0, 0.55 );
}
.king-header.topnav-search-open .header-search-field {
	width: 100% !important;
	opacity: 1;
	pointer-events: auto;
	padding-left: 6px !important;
}

/* --- Fit engine, step 3: nav overflow menu -------------------------------
   Nav items that do not fit are moved in here rather than being hidden, so
   nothing ever becomes unreachable at any width. */
.topnav-more {
	position: relative;
	display: flex;
	align-items: center;
}
.topnav-more[hidden] {
	display: none !important;
}
.topnav-more .topnav-more-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	cursor: pointer;
	color: inherit;
	opacity: 0.85;
	transition: background 0.15s ease, opacity 0.15s ease;
}
.topnav-more .topnav-more-btn:hover,
.topnav-more.is-open .topnav-more-btn {
	background: rgba( 128, 128, 128, 0.22 );
	opacity: 1;
}
.topnav-more.is-open .topnav-more-btn i {
	transform: rotate( 180deg );
}
.topnav-more .topnav-more-btn i {
	transition: transform 0.18s ease;
}
.topnav-more .topnav-more-list {
	display: none;
	position: absolute;
	top: calc( 100% + 6px );
	left: 50%;
	transform: translateX( -50% );
	min-width: 190px;
	max-height: 70vh;
	overflow-y: auto;
	padding: 6px 0;
	border-radius: 12px;
	/* Matches the palette the parent theme gives its own dropdowns
	   (.king-cat-list / .king-nav-dropdown) in each mode. Deliberately NOT
	   --topnav-drawer-bg: that token carries the user's slide-out drawer
	   opacity, and a see-through dropdown over arbitrary page content is
	   unreadable. This one is always opaque. */
	background: #ffffff;
	color: #101014;
	box-shadow: rgba( 0, 0, 0, 0.04 ) 0 1px 0, rgba( 0, 0, 0, 0.05 ) 0 2px 7px, rgba( 0, 0, 0, 0.16 ) 0 12px 22px;
	z-index: 70;
}
.king-night .topnav-more .topnav-more-list {
	background: #0b0b0c;
	color: #ffffff;
	box-shadow: 0 10px 34px rgba( 0, 0, 0, 0.6 );
}
.king-night .topnav-more .topnav-more-list li > a {
	color: #ffffff;
}
.topnav-more.is-open .topnav-more-list {
	display: block;
}
.topnav-more .topnav-more-list ul {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}
.topnav-more .topnav-more-list li {
	display: block;
	width: 100%;
	margin: 0;
}
.topnav-more .topnav-more-list li > a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	white-space: nowrap;
}
.topnav-more .topnav-more-list li > a:hover {
	background: rgba( 128, 128, 128, 0.16 );
}
/* An item's mega menu / dropdown is built for a full-width bar and cannot
   render inside a 190px panel - in here the item is just its link. */
.topnav-more .topnav-more-list .king-nav-dropdown,
.topnav-more .topnav-more-list .king-mega-menu,
.topnav-more .topnav-more-list .king-cat-list,
.topnav-more .topnav-more-list .king-megamenu {
	display: none !important;
}

/* --- Secondary icons relocated into the hamburger drawer (phones) --------
   assets/js/topnav-fit.js moves .king-rlater / .king-notify in here below the
   theme's own mobile breakpoint. In the bar they are bare 40px icons; in the
   drawer they become full-width labelled rows, so they read as menu items
   rather than stray glyphs. */
.topnav-drawer-icons {
	display: block;
	padding: 6px 0;
	margin: 0 0 6px;
	border-bottom: 1px solid rgba( 128, 128, 128, 0.22 );
}
.topnav-drawer-icons > * {
	display: block;
	width: 100%;
	margin: 0 !important;
	float: none !important;
}
.topnav-drawer-icons .king-notify-box {
	display: block;
	width: 100%;
}
/* The tap target becomes the whole row. */
.topnav-drawer-icons .king-rlater,
.topnav-drawer-icons .head-icons {
	display: flex !important;
	align-items: center;
	gap: 14px;
	width: 100%;
	height: auto !important;
	padding: 11px 4px;
	background: none !important;
	border-radius: 8px;
}
.topnav-drawer-icons .king-rlater:hover,
.topnav-drawer-icons .head-icons:hover {
	background: rgba( 128, 128, 128, 0.14 ) !important;
}
/* The label is appended after the widget's existing children, so without an
   explicit order it lands after the count bubble. Order the row explicitly:
   icon | label | (free space) | count. */
.topnav-drawer-icons .topnav-drawer-label {
	order: 1;
	margin-right: auto;
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
}
/* The unread-count bubbles are absolutely positioned for a 40px icon button;
   in a wide row they would float off in the middle of nowhere. */
.topnav-drawer-icons .king-bmcount,
.topnav-drawer-icons .king-notify-num {
	order: 2;
	position: static !important;
	margin: 0 0 0 8px;
	flex: 0 0 auto;
}

/* The theme's dropdown panels are position:absolute and sized for the header
   bar. Inside the drawer (which scrolls and is only ~280px wide) they would
   be clipped, so they expand inline as an accordion instead. The theme still
   owns the open/closed state via .open on the .king-dropdownup wrapper. */
.topnav-drawer-icons .king-dropdown {
	display: none !important;
}
.topnav-drawer-icons .open .king-dropdown {
	display: block !important;
	position: static !important;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	max-height: 46vh;
	overflow-y: auto;
	margin: 4px 0 8px;
	box-shadow: none !important;
	background: rgba( 128, 128, 128, 0.10 ) !important;
}
/* The little caret that pointed at the icon in the bar makes no sense here. */
.topnav-drawer-icons .king-dropdown:before,
.topnav-drawer-icons .king-dropdown:after {
	display: none !important;
}

/* With the icons gone the homepage rail would still paint its empty box. */
.topnav-hero-rail:empty {
	display: none;
}

/* Fold the legacy announcement strip away so only one bar remains.
   !important because the parent theme's JS (hs-cookie.js) sets an inline
   display style at runtime, which would otherwise win over this rule. */
body.topnav-strip-hidden .king-headerstrip {
	display: none !important;
}

/* Homepage hero overlay: float the header over the featured video instead
   of pushing it down. Removing it from flow lets .featured-video start at
   the very top of #content. */
body.home #masthead.site-header {
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 30;
}
body.home .featured-video-content {
	padding-top: var( --topnav-h, 70px );
}

/* Hero icon rail (homepage): bookmarks / flag / notifications are lifted out
   of the header row by assets/js/topnav.js and stacked vertically over the
   hero's right edge, freeing the horizontal space the nav items needed. */
body.home .topnav-hero-rail {
	position: absolute;
	top: 88px;
	right: clamp( 10px, 1.1vw, 15px );
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	z-index: 31;
}
body.home .topnav-hero-rail > * {
	margin: 0 !important;
	float: none !important;
}
/* Legible against arbitrary video frames without hiding the hero. */
body.home .topnav-hero-rail .head-icons {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 0, 0, 0, 0.45 );
	border-radius: 50%;
	backdrop-filter: blur( 4px );
}
/* These dropdowns open upward by default, which off the hero would fly up
   over the header. Drop them downward and anchor to the rail's right edge. */
body.home .topnav-hero-rail .king-dropdownup {
	bottom: auto;
}

/* --- Mobile overlay mode (opt-in: Top Nav > Mobile Overlay) ---------------
   Pins the hero as a full-viewport 9:16 backdrop and lets the stories /
   Pick Hits / feed sections scroll up over it as a translucent sheet, so
   the video stays visible behind the content instead of scrolling away.
   The sheet's colour, opacity and reveal height come from the Customizer
   (emitted by topnav_inline_styles() in functions.php); only the structural
   rules live here. !important is needed because the hero-height setting
   writes its own !important height for the desktop layout. */
@media screen and ( max-width: 769px ) {
	body.home.topnav-mobile-overlay .featured-video {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100dvh !important;
		margin: 0;
		z-index: 0;
	}
	body.home.topnav-mobile-overlay .featured-video video {
		width: 100%;
		height: 100% !important;
		max-height: none !important;
		min-height: 0 !important;
		object-fit: cover;
	}
	/* Keep the hero's own caption pinned with the video, not the sheet. */
	body.home.topnav-mobile-overlay .featured-video-content {
		z-index: 2;
	}
	/* Every post-hero section becomes part of the scrolling sheet. Colour and
	   opacity come from the Customizer as --topnav-mobile-sheet-bg (see
	   topnav_inline_styles() in functions.php); the fallback matches the
	   control's own default so the sheet is never invisible pre-save. */
	body.home.topnav-mobile-overlay #content > *:not( .featured-video ):not( .is-immersive ) {
		position: relative;
		z-index: 1;
		background: var( --topnav-mobile-sheet-bg, rgba( 16, 16, 20, 0.85 ) );
	}
	body.home.topnav-mobile-overlay #content > .featured-video + * {
		margin-top: var( --topnav-mobile-hero-reveal, 85vh );
	}
	/* The header already floats over the hero; keep it on top of the sheet. */
	body.home.topnav-mobile-overlay #masthead.site-header {
		z-index: 40;
	}
}

/* Mobile menu drawer (the hamburger slide-out panel, .king-leftmenu).
   Colour/opacity/width come from the Customizer as CSS vars (see
   topnav_inline_styles() in functions.php). !important overrides the parent
   theme's own solid background-color and fixed width on this class. Width
   stays clamped inside the parent's own min-width:280px/max-width:500px
   band via the Customizer control's 200-450 range plus this clamp() floor. */
.king-leftmenu {
	background: var( --topnav-drawer-bg, rgba( 16, 16, 20, 1 ) ) !important;
	width: var( --topnav-drawer-width, 280px ) !important;
	max-width: 92vw !important;
}

/* --- Stories rail: fixed 9:16 card ratio + mobile "peek" ------------------
   .editorschoice-story only has a fixed height:230px in the parent theme,
   with width left to whatever Owl Carousel computes per breakpoint (see
   assets/js/stories.js, which also sets a fractional 2.3-item mobile
   breakpoint so a third card visibly peeks in as a swipe hint). Forcing
   height:auto + aspect-ratio here means the card ratio holds no matter what
   width Owl assigns it, at any viewport. */
.editorschoice-story {
	height: auto !important;
	aspect-ratio: 9 / 16;
}

/* Idle-fade behavior (logged-in users only, see assets/js/topnav.js). */
#masthead.site-header {
	transition: opacity 0.4s ease;
}
#masthead.site-header.topnav-faded {
	opacity: var( --topnav-fade-opacity, 0.15 );
}
/* opacity applies to the whole subtree, so a fading header would take an
   open dropdown / search overlay down with it mid-interaction. topnav-fit.js
   sets .topnav-hold while either is open. */
#masthead.site-header.topnav-faded.topnav-hold {
	opacity: 1;
}
/* --- Suno embeds ---------------------------------------------------------
   Songs render as Suno's own 140px player iframe. Hooks have no oEmbed and no
   embed route on Suno's side (verified), so they render as a link card built
   from the page's Open Graph tags - see inc/suno.php. */
.wwp-suno {
	margin: 18px 0;
	max-width: 100%;
}
.wwp-suno-song iframe {
	display: block;
	width: 100%;
	border: 0;
}

.wwp-suno-hook {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px;
	border-radius: 14px;
	text-decoration: none;
	background: rgba( 128, 128, 128, 0.10 );
	border: 1px solid rgba( 128, 128, 128, 0.22 );
	transition: background 0.15s ease, transform 0.15s ease;
}
.wwp-suno-hook:hover {
	background: rgba( 128, 128, 128, 0.18 );
	transform: translateY( -1px );
}
.wwp-suno-art {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}
.wwp-suno-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.wwp-suno-kicker {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.65;
}
.wwp-suno-title {
	font-weight: 600;
	line-height: 1.25;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
@media ( max-width: 480px ) {
	.wwp-suno-art {
		width: 68px;
		height: 68px;
	}
}

/* Suno hooks are native 9:16 video (measured 720x1280), so they get a real
   player rather than the link card. */
.wwp-suno-hook-video {
	margin: 18px 0;
}
.wwp-suno-hook-video video {
	display: block;
	width: 100%;
	max-width: 360px;
	aspect-ratio: 9 / 16;
	height: auto;
	background: #000;
	border-radius: 14px;
	object-fit: cover;
}
.wwp-suno-hook-video figcaption {
	margin-top: 8px;
	font-size: 13px;
	opacity: 0.8;
}
.wwp-suno-hook-video figcaption a {
	text-decoration: none;
}

/* "Create Story" card: keep the + and label legible over a busy background. */
.editorschoice-story.story-addnew {
	position: relative;
	overflow: hidden;
}
.editorschoice-story.story-addnew::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.62 ), rgba( 0, 0, 0, 0.15 ) );
	pointer-events: none;
}
.editorschoice-story.story-addnew > i,
.editorschoice-story.story-addnew > span {
	position: relative;
	z-index: 1;
}

/* "Create Story" label: single line, pinned to the bottom of the card.
   The parent theme lets it wrap to two lines ("Create" / "Story"), which makes
   this card the odd one out in a rail of single-line titles. */
.editorschoice-story.story-addnew {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.editorschoice-story.story-addnew > span {
	position: absolute;
	left: 6px;
	right: 6px;
	bottom: 12px;
	z-index: 1;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	line-height: 1.2;
	/* Shrink to fit rather than wrap, so it stays one line on narrow cards. */
	font-size: clamp( 11px, 1.05vw, 15px );
}
.editorschoice-story.story-addnew > i {
	position: relative;
	z-index: 1;
	margin-bottom: 0;
}

/* The parent theme positions the "+" glyph with its own offsets, which leaves
   it high and right of centre. Pin it to the true centre of the card instead;
   the label is absolutely positioned at the bottom, so the "+" owns the middle
   and a background logo will sit squarely behind it. */
.editorschoice-story.story-addnew > i,
.editorschoice-story.story-addnew > i.fas,
.editorschoice-story.story-addnew > i.fa-plus {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	transform: translate( -50%, -50% ) !important;
	margin: 0 !important;
	z-index: 1;
}

/* --- Glassmorphism -------------------------------------------------------
   backdrop-filter only reads as glass where the surface is translucent, so
   each of these pairs with its own opacity control. A 0px blur is a no-op, so
   the default costs nothing. */
#masthead.site-header {
	backdrop-filter: blur( var( --topnav-bg-blur, 0px ) );
	-webkit-backdrop-filter: blur( var( --topnav-bg-blur, 0px ) );
}
.king-leftmenu {
	backdrop-filter: blur( var( --topnav-drawer-blur, 0px ) );
	-webkit-backdrop-filter: blur( var( --topnav-drawer-blur, 0px ) );
}
@media screen and ( max-width: 769px ) {
	body.home.topnav-mobile-overlay #content > *:not( .featured-video ):not( .is-immersive ) {
		backdrop-filter: blur( var( --topnav-sheet-blur, 0px ) );
		-webkit-backdrop-filter: blur( var( --topnav-sheet-blur, 0px ) );
	}
}
/* The header's own overflow menu should match the megamenu treatment. */
.topnav-more .topnav-more-list {
	backdrop-filter: blur( var( --topnav-dropdown-blur, 0px ) );
	-webkit-backdrop-filter: blur( var( --topnav-dropdown-blur, 0px ) );
}

/* --- Login modal: tint + glassmorphism ------------------------------------
   Scoped to #myModal on purpose. The parent theme reuses .king-modal-login for
   the Bookmarks (#rlatermodal) and Add-link (#addlink) pop-overs as well, so
   styling that class alone would silently restyle three unrelated modals.

   Two surfaces: #myModal itself is the full-screen backdrop (the theme ships
   it as rgba(30,30,30,.6) + blur(5px)), and .king-modal-content is the card
   holding the form, painted a flat #fff in light mode and #0b0b0c in night.
   Both are driven from Customizer -> Login Modal, whose defaults reproduce the
   theme's own appearance, so nothing changes until a slider is moved.

   !important and the .king-night duplicate are both needed: the parent sets
   these colours in two separate stylesheets and the night rule is the more
   specific of the two. */
#myModal.king-modal-login,
.king-night #myModal.king-modal-login {
	background-color: var( --login-modal-scrim-bg, rgba( 30, 30, 30, 0.6 ) ) !important;
	backdrop-filter: blur( var( --login-modal-scrim-blur, 5px ) );
	-webkit-backdrop-filter: blur( var( --login-modal-scrim-blur, 5px ) );
}

#myModal .king-modal-content,
.king-night #myModal .king-modal-content {
	background-color: var( --login-modal-card-bg, #0b0b0c ) !important;
	backdrop-filter: blur( var( --login-modal-card-blur, 0px ) );
	-webkit-backdrop-filter: blur( var( --login-modal-card-blur, 0px ) );
	/* The card is rounded; without this the translucent fill and the blur
	   square off at the corners over the backdrop. */
	overflow: hidden;
}

/* These two never carried a background of their own, but pin them transparent
   so they cannot reintroduce one over the glass. .king-modal-form is the one
   that does, and it is neutralised from PHP - only when the card is actually
   translucent, so the default look is untouched. */
#myModal .king-modal-header,
#myModal .king-modal-footer {
	background-color: transparent;
}

/* --- The "+" submit button and its pop-over -------------------------------
   Both sit over the hero video on the front page. The theme paints the disc a
   solid #e60023 and the panel a flat near-black, which read as stickers laid
   on the picture rather than part of it. Driven from Customizer -> Submit
   Button ( + ); the defaults reproduce the theme's own look apart from the
   pop-over, which starts frosted because that is the point of the control.

   The glow the theme puts behind the disc is a solid ring, so it has to go
   translucent alongside the fill or it outlines a button that is no longer
   there. */
.king-submit-open,
.king-night .king-submit-open,
/* The theme raises the glow's specificity to three classes while the menu is
   open (.king-submit.open .king-submit-open), so a single-class rule loses
   exactly when the button is being looked at. Match it. */
.king-submit.open .king-submit-open,
.king-night .king-submit.open .king-submit-open {
	/* Size, from Customizer -> Top Nav -> Submit Button. The theme's own 40px
	   sits noticeably larger than the 40px account avatar beside it, because
	   the avatar is an image inset in its box while this is a filled disc.
	   line-height has to track width/height or the "+" glyph stops being
	   centred - the theme centres it by line-height, not by flexbox. */
	width: var( --topnav-submit-size, 32px );
	height: var( --topnav-submit-size, 32px );
	line-height: var( --topnav-submit-size, 32px );
	background-color: var( --topnav-submit-bg, #e60023 ) !important;
	backdrop-filter: blur( var( --topnav-submit-blur, 0px ) );
	-webkit-backdrop-filter: blur( var( --topnav-submit-blur, 0px ) );
	box-shadow: 0 0 2px 5px var( --topnav-submit-glow, rgba( 253, 43, 85, 0.35 ) );
}

/* The parent theme pins .king-submit to 40px. Left alone, shrinking the disc
   inside it leaves the button sitting high in a 40px slot rather than centred
   in the header row. */
.king-submit {
	height: var( --topnav-submit-size, 32px );
}

.king-submit-drop,
.king-night .king-submit-drop {
	background-color: var( --topnav-submit-menu-bg, rgba( 28, 28, 31, 0.72 ) ) !important;
	backdrop-filter: blur( var( --topnav-submit-menu-blur, 18px ) );
	-webkit-backdrop-filter: blur( var( --topnav-submit-menu-blur, 18px ) );
	/* The panel is rounded; without this the frosting squares off at the
	   corners over whatever is behind it. */
	overflow: hidden;
}
/* The little caret that points at the button is a solid triangle in the
   theme's own colour - match it to the panel or it floats detached. */
.king-submit-drop:before,
.king-night .king-submit-drop:before {
	border-bottom-color: var( --topnav-submit-menu-bg, rgba( 28, 28, 31, 0.72 ) ) !important;
}
/* Inner rows must not reintroduce an opaque fill over the glass. */
.king-submit-drop .king-submit-list,
.king-submit-drop ul,
.king-submit-drop li {
	background-color: transparent !important;
}

/* --- Header height and pinning -------------------------------------------
   --topnav-h is emitted per breakpoint from functions.php. Pinning switches
   the header from floating over the top of the hero (absolute, scrolls away)
   to fixed at the top of the window (stays put) - the latter is what makes it
   feel like an app bar on a phone. */
body.topnav-pinned #masthead.site-header,
body.home.topnav-pinned #masthead.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 60;
}
/* The admin bar owns the top of the window when it is present, so a pinned
   header has to start below it rather than underneath it. */
body.admin-bar.topnav-pinned #masthead.site-header { top: 32px; }
@media screen and ( max-width: 782px ) {
	body.admin-bar.topnav-pinned #masthead.site-header { top: 46px; }
}

/* Pinned, the header no longer floats over the hero, so the page needs the
   space back - except on the homepage, where the hero is meant to sit under
   it. */
body.topnav-pinned:not( .home ) #page { padding-top: var( --topnav-h, 70px ); }

/* --- Category bar --------------------------------------------------------
   #site-navigation > .main-navigation is the HOT / TREND / CATEGORIES row.
   Scoped to the direct child on purpose: the theme paints submenus with the
   same class, and a translucent dropdown floating over page content is
   unreadable. Driven from Customizer -> Category Bar, with its own mobile
   values, since on a phone the row collapses to a hamburger and a cart icon
   in a full-width slab of grey sitting on the hero backdrop. */
#site-navigation.king-npup > .main-navigation,
.king-night #site-navigation.king-npup > .main-navigation {
	background-color: var( --topnav-catbar-bg, #202024 ) !important;
	/* Emitted as a whole value rather than blur( 0px ) so that a bar with no
	   blur configured carries no filter at all - blur( 0px ) still forces a
	   compositing layer and, more importantly, still creates a stacking
	   context (see below). */
	backdrop-filter: var( --topnav-catbar-filter, none );
	-webkit-backdrop-filter: var( --topnav-catbar-filter, none );
	/* backdrop-filter creates a stacking context, which traps everything
	   inside this bar - including the WooCommerce cart popover, which sets
	   z-index:19 and cannot escape to use it. The stories rail below is
	   z-index:1 but comes later in the DOM, so it painted over the popover.
	   Lifting the bar itself above the rail lets its popovers out; it stays
	   under #masthead (z-index:30) so the header still wins. */
	position: relative;
	z-index: 20;
}

/* Content rails are backdrop, never foreground: any popover, dropdown or
   modal must sit above them. The stories carousel arrives with z-index:1 of
   its own, which is what put it over the cart. */
.king-stories-top,
.king-stories-owl {
	z-index: 0;
}

/* The drawer gets the same frosting treatment as everything else. Its colour
   and width already live in the Mobile Sidebar Menu panel; this is the blur
   that makes those values read as glass rather than as flat tint. */
.king-leftmenu {
	backdrop-filter: blur( var( --topnav-drawer-blur, 0px ) );
	-webkit-backdrop-filter: blur( var( --topnav-drawer-blur, 0px ) );
}
/* With the ambient backdrop running, the drawer sits above it - let the blur
   pick the backdrop up instead of covering it. */
body.has-wwp-ambient .king-leftmenu { z-index: 70; }

/* --- Stories rail: less dead space (owner, 2026-10-17) ----------------------
   Measured before: on a 375px phone 16px sat above the cards and 38px below
   them before the Hot 20 box (the theme's 10px owl-stage padding top and
   bottom plus the chart's own 24px margin); on desktop 29px above and 34px
   below, plus a 20px rail padding. Now about half of that on every screen.
   The cards keep a little room for their hover lift. */
.king-editorschoice.king-stories-top .owl-stage {
	padding: 6px 0;
}
@media screen and ( min-width: 770px ) {
	body.home .king-editorschoice.king-stories-top {
		padding-top: 8px;
	}
}
.king-stories-top + .wwp-chart-rail-slot > .wwp-chart {
	margin-top: 10px;
}
/* The theme reserves 200px for the rail before the carousel loads (no jump
   while it builds). Phone cards are about 188px with their padding, which left
   12px of extra space; once loaded, the rail is as tall as its cards. */
.king-editorschoice.king-stories-top:has( .owl-loaded ) {
	min-height: 0;
}

/* --- Category bar height on desktop ----------------------------------------
   The menu row is inline-block on a 50px line, so its baseline gap stacked
   under the labels: an 85px grey bar for 50px of HOT / TREND / CATEGORIES
   (owner, 2026-10-17: "way too much blank space under the category labels").
   Top-aligned, with the items in a centred flex row, the bar fits its labels. */
@media screen and ( min-width: 770px ) {
	#site-navigation.king-npup > .main-navigation > .header-nav {
		vertical-align: top;
	}
	#site-navigation.king-npup > .main-navigation > .header-nav ul.menu {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
}

/* --- Category bar spacing on mobile --------------------------------------
   Measured before changing anything: the bar was 54px tall to hold a 40px
   cart icon, with 20px of margin above it and 20px of padding below from the
   stories rail - 94px of vertical space between the video title and the first
   story, for a row that is two icons.

   Height is now driven by the icons themselves (auto, with the gap as
   padding) rather than a fixed 54px, so it can never be taller than what it
   contains. The gap above and below is one Customizer value, applied
   symmetrically so the bar sits evenly between the two blocks. */
@media screen and ( max-width: 769px ) {
	#site-navigation.king-npup {
		margin-top: var( --topnav-catbar-gap, 8px ) !important;
		margin-bottom: 0 !important;
	}
	#site-navigation.king-npup > .main-navigation {
		height: auto !important;
		min-height: 0 !important;
		padding-top: var( --topnav-catbar-gap, 8px ) !important;
		padding-bottom: var( --topnav-catbar-gap, 8px ) !important;
	}
	/* The rail's own top padding stacks on top of the bar's margin, which is
	   where most of the remaining gap was hiding. */
	body.home .king-stories-top,
	body.home .king-editorschoice.king-stories-top {
		padding-top: var( --topnav-catbar-gap, 8px ) !important;
	}
}

/* --- Promo Rail ------------------------------------------------------------
   Lives in the middle of the category bar, between the floated hamburger and
   the floated cart. That bar is display:block with floats, not flex, so the
   rail stays a normal block and just keeps clear of the floats with margins
   rather than converting the row to flex and rearranging the theme's layout.

   All slides are stacked on top of each other and cross-faded, so the rail's
   height never changes with the length of the message it happens to be on. */
.wwp-rail {
	position: relative;
	height: 34px;
	margin: 8px 56px 0 48px;
	border-radius: var( --wwp-rail-radius, 999px );
	background: var( --wwp-rail-bg, rgba( 255, 255, 255, .08 ) );
	backdrop-filter: blur( var( --wwp-rail-blur, 8px ) );
	-webkit-backdrop-filter: blur( var( --wwp-rail-blur, 8px ) );
	overflow: hidden;
}

.wwp-rail-track {
	position: relative;
	height: 100%;
}

.wwp-rail-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 12px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s ease;
	color: var( --wwp-rail-color, #fff );
	font-size: var( --wwp-rail-size, 13px );
	line-height: 1.2;
	text-decoration: none;
}

.wwp-rail-slide.is-on {
	opacity: 1;
	visibility: visible;
}

/* Under prefers-reduced-motion the rail still rotates - the information is
   the point - but it cuts rather than fades. */
.wwp-rail-instant .wwp-rail-slide {
	transition: none;
}

a.wwp-rail-slide:hover,
a.wwp-rail-slide:focus {
	color: var( --wwp-rail-color, #fff );
	text-decoration: underline;
}

/* One line, always. A long message truncates instead of wrapping and
   changing the bar's height mid-rotation. */
.wwp-rail-text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.wwp-rail-img {
	max-height: 26px;
	width: auto;
	flex: 0 0 auto;
}

.wwp-rail-tag {
	flex: 0 0 auto;
	padding: 1px 6px;
	border-radius: 3px;
	background: rgba( 255, 255, 255, .18 );
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .85;
}

.wwp-rail-tag-now {
	background: var( --wwp-accent, #da1b1b );
	opacity: 1;
}

/* Live sources get a pulsing badge so a stream reads differently from a
   catalogue track at a glance. The pulse is dropped under reduced motion. */
.wwp-rail-slide.is-live .wwp-rail-tag-now {
	animation: wwp-rail-live 2s ease-in-out infinite;
}

@keyframes wwp-rail-live {
	0%, 100% { opacity: 1; }
	50%      { opacity: .45; }
}

@media ( prefers-reduced-motion: reduce ) {
	.wwp-rail-slide.is-live .wwp-rail-tag-now {
		animation: none;
	}
}

/* A network tag sizes itself; the rail only guarantees it a clipped, centred
   box so a mis-sized creative cannot stretch the bar. */
.wwp-rail-codebox {
	display: flex;
	align-items: center;
	max-height: 100%;
	overflow: hidden;
}

.wwp-rail-codebox img,
.wwp-rail-codebox iframe {
	max-height: 30px;
	max-width: 100%;
}

/* Viewport gating. The bar means different things at each size, so each has
   its own switch in the Customizer rather than one shared "enabled". */
@media screen and ( max-width: 769px ) {
	.wwp-rail-nomobile {
		display: none;
	}
	/* Share the icon row instead of stacking under it. As a normal block the
	   rail added its own 42px band to a bar that was already the tallest thing
	   between the hero title and the stories - which is the space this was
	   meant to reclaim, not enlarge. The bar is position:relative already, so
	   pinning the rail inside it costs no height at all: the hamburger keeps
	   the left, the cart keeps the right, the rail takes the middle. */
	#site-navigation.king-npup > .main-navigation .wwp-rail {
		position: absolute;
		top: 50%;
		left: var( --wwp-rail-inset-left, 46px );
		right: var( --wwp-rail-inset-right, 56px );
		margin: 0;
		transform: translateY( -50% );
	}
	/*
	 * The bar's height was being set by an empty box. .header-nav holds the
	 * category menu, which on a phone is a dropdown - closed it still occupies
	 * 50px (from the theme's `.header-nav a { height: 50px }`) with nothing
	 * visible in it, and that was what made the bar 66px tall to hold a 34px
	 * rail.
	 *
	 * Taken out of flow rather than collapsed: `height: 0; overflow: hidden`
	 * gave it a block formatting context, so instead of overlapping the
	 * floated hamburger it dropped below it and made the bar TALLER (116px).
	 * Absolute positioning contributes no height and cannot interact with the
	 * floats at all. visibility:hidden so an invisible box cannot take taps.
	 *
	 * :not(.open) leaves the expanded menu - all 2,246px of it - untouched.
	 */
	#site-navigation.king-npup > .main-navigation > .header-nav:not( .open ) {
		position: absolute;
		visibility: hidden;
	}

	/* Push the two icons out to the bar's own edges. They were sitting a
	   further 18px in from a row that is already lr-padded, which cost the
	   rail ~36px of the little width it has. */
	#site-navigation.king-npup > .main-navigation {
		padding-left: 4px !important;
		padding-right: 4px !important;
		/* flow-root contains the floated icons so the bar has a height again
		   once .header-nav leaves the flow - without overflow:hidden, which
		   would clip the cart panel hanging below the bar. */
		display: flow-root;
	}

	/* With the empty menu box gone, these margins are what is left padding the
	   bar out. The icons keep their own 30/40px hit areas. */
	#site-navigation.king-npup > .main-navigation > .king-menu-toggle {
		margin-top: 0;
		margin-bottom: 0;
	}
	#site-navigation.king-npup > .main-navigation .king-cart-toggle {
		margin-top: 0;
		margin-bottom: 0;
	}
	#site-navigation.king-npup > .main-navigation > .king-menu-toggle {
		margin-left: 0;
	}
	#site-navigation.king-npup > .main-navigation > .king-cart {
		margin-right: 0;
	}
}

@media screen and ( min-width: 770px ) {
	.wwp-rail-nodesktop {
		display: none;
	}
	/* On desktop the row already carries the category menu, so the rail takes
	   a bounded slice on the right instead of a full-width band. */
	.wwp-rail {
		float: right;
		width: 260px;
		max-width: 30%;
		margin: 8px 60px 0 0;
	}
}

/* --- Story cards at phone size ---------------------------------------------
   The rail now shows 3.5 cards instead of 2.3, so a card went from 146px wide
   to 111px - but the type and the avatar were still sized for the big card.
   A 19px title on a 111px card wraps to three lines and clips.

   Card size itself is not set here: the Customizer's "Cards visible on mobile"
   count is what divides the rail, so these rules only bring the contents back
   into proportion with whatever that count produces. */
@media screen and ( max-width: 769px ) {
	.editorschoice-story .editorschoice-post-title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 13px !important;
		line-height: 1.25 !important;
	}

	.editorschoice-story .king-stories-avatar .content-author-avatar,
	.editorschoice-story .king-stories-avatar .content-author-avatar img {
		width: 26px !important;
		height: 26px !important;
	}

	.editorschoice-story .king-stories-alink {
		font-size: 11px !important;
	}

	.editorschoice-story.story-addnew span {
		font-size: 12px !important;
	}

	/* The plus badge was sized against the old card and now eats a third of
	   the new one. */
	.editorschoice-story.story-addnew i {
		width: 34px;
		height: 34px;
		line-height: 34px;
		font-size: 15px;
	}
}

/* --- Cart panel ------------------------------------------------------------
   The theme ships the cart as a 300px full-height drawer pinned to the right
   of the viewport (woocommerce/css/woocommerce.css). Two problems: it runs the
   full height of the page, so its close button lands under the floating header
   (#masthead, z-index 30) and cannot be clicked; and it has no relationship to
   the icon that opened it.

   It is now a strip that opens inside the category bar's own band, sharing the
   row with the category menu the way a mega menu does - it never covers the
   stories rail below. Width follows the number of items, so two products make
   a short strip; only a cart wide enough to reach the menu starts scrolling.

   .main-navigation is the positioned ancestor and already owns a stacking
   context at z-index 20, so this lands above the stories and below the header
   by construction rather than by picking a number.

   The icon was fa-shopping-bag, which at 40px reads as a padlock. It is a
   cart now. */
/* An item card needs a practical height, and the bar is ~50px. The cards bring
   their own containers, so the bar has no reason to grow with them - instead
   the panel hangs below the bar and the nav around it reserves the room, which
   moves the stories down without stretching the bar's painted slab.

   :has() is the switch. Without it the room is not reserved and the panel
   overlaps the stories - degraded, but not broken. */
#site-navigation.king-npup {
	transition: padding-bottom .35s cubic-bezier( .22, .61, .36, 1 );
}

#site-navigation.king-npup:has( .king-cart-content.in ) {
	padding-bottom: calc( var( --wwp-cart-h, 150px ) + 6px );
}

/* An empty cart only needs room for the status card, not for a row of product
   cards that do not exist. */
#site-navigation.king-npup:has( .king-cart-content.in ):not( :has( .cart_list li ) ) {
	padding-bottom: 58px; /* 52px panel + the 6px it sits below the bar. */
}

#site-navigation.king-npup .king-cart .king-cart-content,
.admin-bar #site-navigation.king-npup .king-cart .king-cart-content,
.king-night #site-navigation.king-npup .king-cart .king-cart-content {
	position: absolute;
	/* Hangs below the bar in the room the nav reserves for it, right-aligned
	   under the icon that opened it. */
	top: calc( 100% + 6px );
	bottom: auto;
	right: 0;
	left: auto;
	width: max-content;
	max-width: 100%;
	height: var( --wwp-cart-h, 150px );
	max-height: none;
	padding: 4px 6px 4px 10px !important;
	border-radius: 12px;
	box-shadow: 0 10px 28px rgba( 0, 0, 0, .4 );
	/* Deliberately dark in BOTH modes rather than following the theme. In light
	   mode a white panel inherited the bar's light-grey text and became
	   unreadable; and the panel's neighbours here - the hero, the film strip,
	   the story cards - are dark whatever the theme is set to, so a near-black
	   glass is the one that belongs. Text colour is set explicitly below for
	   the same reason: nothing here should inherit a light-mode colour. */
	background-color: rgba( 10, 10, 13, .82 ) !important;
	color: #fff !important;
	backdrop-filter: blur( 20px ) saturate( 140% );
	-webkit-backdrop-filter: blur( 20px ) saturate( 140% );
	border: 1px solid rgba( 255, 255, 255, .08 );
	display: flex;
	align-items: center;
	/* Drops out of the bar. */
	transform: translateY( -10px );
	overflow: hidden;
	z-index: 5;
}

/* Every descendant, since the theme colours several of these individually and
   in light mode each one lands on near-white. */
#site-navigation.king-npup .king-cart .king-cart-content,
#site-navigation.king-npup .king-cart .king-cart-content *,
.king-night #site-navigation.king-npup .king-cart .king-cart-content,
.king-night #site-navigation.king-npup .king-cart .king-cart-content * {
	color: #fff;
}

#site-navigation.king-npup .king-cart .king-cart-content.in {
	transform: translateY( 0 ) !important;
}

/* Cards on the left, then a narrow column holding the buttons with the
   subtotal tucked underneath them - the subtotal is the shortest line here, so
   putting it under the buttons costs no width, while placing it beside them
   would. Grid because the three are flat siblings in WooCommerce's markup and
   need to occupy two rows in one column. */
#site-navigation.king-npup .king-cart .widget_shopping_cart_content,
#site-navigation.king-npup .king-cart .widget_shopping_cart {
	display: grid;
	grid-template-columns: minmax( 0, auto ) auto;
	grid-template-rows: 1fr auto;
	align-items: center;
	gap: 4px 12px;
	min-width: 0;
	margin: 0;
	padding: 0;
}

#site-navigation.king-npup .king-cart .cart_list {
	grid-column: 1;
	grid-row: 1 / span 2;
}

#site-navigation.king-npup .king-cart .woocommerce-mini-cart__buttons {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
}

#site-navigation.king-npup .king-cart .woocommerce-mini-cart__total {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
	text-align: center;
}

#site-navigation.king-npup .king-cart .cart_list {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
}

#site-navigation.king-npup .king-cart .cart_list > li {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	width: 108px;
	margin: 0;
	padding: 6px;
	border: 0;
	border-radius: 10px;
	background: rgba( 255, 255, 255, .1 );
	font-size: 11px;
	line-height: 1.3;
}

/* WooCommerce's markup is <a><img>Product name</a> - the title is a bare text
   node inside the same anchor as the image, so it cannot be given its own box.
   Fixing the image height is what keeps the two apart; the card's overflow
   clips a long title. */
#site-navigation.king-npup .king-cart .cart_list > li > a:not( .remove ) {
	display: block;
	min-width: 0;
	color: inherit;
}

#site-navigation.king-npup .king-cart .cart_list > li img {
	display: block;
	width: 100%;
	height: calc( var( --wwp-cart-h, 150px ) - 78px );
	margin: 0 0 5px;
	/* The theme frames mini-cart thumbnails with a white border and shadow,
	   sized for the tall drawer; at this scale it is all frame. */
	padding: 0;
	border: 0;
	box-shadow: none;
	border-radius: 6px;
	object-fit: cover;
}

#site-navigation.king-npup .king-cart .cart_list > li .quantity,
#site-navigation.king-npup .king-cart .cart_list > li .quantity * {
	display: inline;
	color: rgba( 255, 255, 255, .72 ) !important;
}

#site-navigation.king-npup .king-cart .cart_list > li .quantity {
	display: block;
	margin-top: 2px;
}

/* The theme's remove "x" is absolutely positioned for the tall drawer; here it
   belongs in the card's own corner. */
#site-navigation.king-npup .king-cart .cart_list > li {
	position: relative;
	overflow: hidden;
}

#site-navigation.king-npup .king-cart .cart_list > li .remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 18px;
	height: 18px;
	line-height: 18px;
	border-radius: 50%;
	background: rgba( 0, 0, 0, .55 );
	color: #fff;
	font-size: 12px;
	text-align: center;
}

/* The theme paints the totals row as its own light slab, which inside a glass
   panel reads as a blank white rectangle. */
#site-navigation.king-npup .king-cart .woocommerce-mini-cart__total,
#site-navigation.king-npup .king-cart .woocommerce-mini-cart__buttons {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none !important;
	color: inherit;
	font-size: 12px;
	white-space: nowrap;
}

#site-navigation.king-npup .king-cart .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* The theme's button is solid black, which against a dark glass panel reads as
   a hole punched in it. Grey fill, white text - visible in both modes. */
#site-navigation.king-npup .king-cart .woocommerce-mini-cart__buttons .button,
.king-night #site-navigation.king-npup .king-cart .woocommerce-mini-cart__buttons .button {
	display: block;
	padding: 6px 14px;
	border: 0;
	border-radius: 7px;
	background: #45454e !important;
	color: #fff !important;
	font-size: 12px;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
	transition: background .2s ease;
}

#site-navigation.king-npup .king-cart .woocommerce-mini-cart__buttons .button:hover,
#site-navigation.king-npup .king-cart .woocommerce-mini-cart__buttons .button:focus {
	background: #56565f !important;
}

/* The checkout button is the one you actually want pressed. */
#site-navigation.king-npup .king-cart .woocommerce-mini-cart__buttons .button.checkout,
.king-night #site-navigation.king-npup .king-cart .woocommerce-mini-cart__buttons .button.checkout {
	background: var( --topnav-accent, #da1b1b ) !important;
}

/* Empty state as a status card, so an empty cart looks deliberate rather than
   looking like something failed to load - which is exactly how it looked, as
   WooCommerce fills this panel through AJAX cart fragments and renders nothing
   at all here until they run. The card is always in the markup; the rule below
   removes it as soon as there is a real line item. */
#site-navigation.king-npup .king-cart .wwp-cart-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	/* Explicit height rather than padding plus whatever line-height the theme
	   gives a <p>: the room reserved below the bar has to match this exactly,
	   and inherited leading was making the card 80px when its contents are
	   one 12px line. */
	height: 44px;
	padding: 0 22px;
	border: 1px dashed rgba( 255, 255, 255, .22 );
	border-radius: 10px;
	background: rgba( 255, 255, 255, .06 );
	color: #fff;
	font-size: 12px;
	line-height: 1;
	letter-spacing: .02em;
	white-space: nowrap;
	opacity: .85;
}

#site-navigation.king-npup .king-cart .wwp-cart-empty::before {
	content: "\f07a"; /* FontAwesome cart, matching the toggle it opened from. */
	font-family: "Font Awesome 5 Free", FontAwesome, sans-serif;
	font-weight: 900;
	font-size: 14px;
	opacity: .6;
}

/* A real item is present - stand down. WooCommerce's own empty line never
   shows, since this card covers that state better. */
#site-navigation.king-npup .king-cart .king-cart-content:has( .cart_list li ) .wwp-cart-empty,
#site-navigation.king-npup .king-cart .woocommerce-mini-cart__empty-message {
	display: none;
}

/* Nothing to scroll when empty, so the panel shrinks to the card: 44px card
   plus the panel's own 4px top and bottom padding. */
#site-navigation.king-npup .king-cart .king-cart-content:not( :has( .cart_list li ) ) {
	height: 52px;
}

#site-navigation.king-npup .king-cart .king-cart-content:not( :has( .cart_list li ) ) .widget_shopping_cart,
#site-navigation.king-npup .king-cart .king-cart-content:not( :has( .cart_list li ) ) .widget_shopping_cart_content {
	display: none;
}

/* Sits at the end of the strip rather than floating over the first item. */
#site-navigation.king-npup .king-cart .king-cart-close {
	background-color: rgba( 255, 255, 255, .1 );
	border-color: rgba( 255, 255, 255, .2 );
	color: #fff;
	position: static;
	flex: 0 0 auto;
	order: 9;
	margin-left: 8px;
	height: 26px;
	width: 26px;
	line-height: 1;
	font-size: 12px;
}

/* On a phone the bar is only wide enough for the rail and two icons, so the
   strip takes the whole row and the promo rail steps aside while it is open. */
@media screen and ( max-width: 769px ) {
	/* A phone has no width to spare, so the strip is allowed to run out past
	   the bar's padding to the screen edges. */
	#site-navigation.king-npup .king-cart .king-cart-content {
		right: -4px;
		max-width: calc( 100% + 8px );
	}

	/* Same card proportions as desktop - the phone just shows fewer of them
	   before the strip starts scrolling. */
	#site-navigation.king-npup .king-cart .cart_list > li {
		width: 96px;
	}



}

/* --- Header retreat while the hero plays -----------------------------------
   YouTube paints its own title and channel name over the top-left of the frame
   for the first few seconds of playback - exactly where the floating header
   sits. Rather than fight it, the header steps back and lets it have the room,
   keeping only the two things that anchor the page: the logo top-left and the
   account avatar top-right.

   Faded, not hidden: display:none would collapse the flex row and shuffle the
   logo and avatar out of their corners. Opacity leaves the layout exactly
   where it was, so nothing moves when the header returns.

   Selected by element rather than by position or width, so a narrower logo
   than the current placeholder needs no change here. */
#masthead .king-header > *,
#masthead .king-header-right > * {
	transition: opacity 0.35s ease;
}

body.wwp-header-retreat #masthead .king-header > *:not( .site-branding ):not( .king-header-right ),
body.wwp-header-retreat #masthead .king-header-right > *:not( .king-logged-user ) {
	opacity: 0;
	pointer-events: none;
}

/* The two that stay are pinned to their corners regardless of what fades out
   between them. */
body.wwp-header-retreat #masthead .site-branding,
body.wwp-header-retreat #masthead .king-logged-user {
	opacity: 1;
	pointer-events: auto;
}

@media ( prefers-reduced-motion: reduce ) {
	#masthead .king-header > *,
	#masthead .king-header-right > * {
		transition: none;
	}
}

/* --- Sticky hero -----------------------------------------------------------
   The header, the hero and the playlist bar under it stay on screen; stories,
   Pick Hits and the feed scroll up and pass underneath them, so the video
   keeps playing while you read.

   position:sticky rather than fixed, because sticky keeps the elements in
   normal flow. Fixed would take them out of it, and every following section
   would jump up by the hero's full height - needing a padding-top that has to
   be kept in sync with a hero whose height is a Customizer setting. Sticky
   reserves its own space and needs no compensation anywhere.

   The two sticky elements are siblings, not nested, so each needs its own
   top offset: the hero at the very top, the bar at the hero's height below it.
   That height is measured live in hero.js (--wwp-sticky-hero-h) because it
   follows a Customizer value and the viewport - the same reason --wwp-cue-h
   is measured rather than assumed.

   :not(.is-immersive) throughout: the immersive full-viewport view sets its
   own position:fixed on the same element, and would otherwise be fighting
   these rules for it. */
body.wwp-sticky-hero #content > .wwp-hero:not( .is-immersive ) {
	position: sticky;
	top: var( --wwp-sticky-top, 0px );
	/* Above the content sliding under it. */
	z-index: 20;
	/* Opaque, or the content passing underneath shows through the gaps
	   between the video and the metadata bar. The ambient backdrop
	   deliberately makes .wwp-hero transparent, which is right when nothing
	   passes behind it and wrong here. */
	background-color: #000;
}

body.wwp-sticky-hero #content > #site-navigation.king-npup {
	position: sticky;
	top: calc( var( --wwp-sticky-top, 0px ) + var( --wwp-sticky-hero-h, 0px ) );
	z-index: 21;
	/*
	 * The bar normally sits --topnav-catbar-gap below the hero. Sticky, it
	 * comes to rest flush against the hero's bottom edge, so that gap has to
	 * go - it caused two problems at once: the bar visibly snapped up by the
	 * gap's height the moment it stuck, and while it was stuck the gap was a
	 * transparent sliver with the scrolling content running through it,
	 * between two elements that are meant to read as one fixed block.
	 */
	margin-top: 0 !important;
}

/* Everything after the playlist bar is what does the scrolling. An explicit
   stacking context below the sticky pair keeps it there; without it the later
   siblings paint over the hero simply by being later in the document. */
body.wwp-sticky-hero #content > #site-navigation.king-npup ~ * {
	position: relative;
	z-index: 1;
}

/* The header floats over the hero rather than sitting above it, so it pins
   independently - sticky would leave it behind at the top of the document
   while the hero it belongs to stays put. */
body.wwp-sticky-hero #masthead.site-header,
body.home.wwp-sticky-hero #masthead.site-header {
	position: fixed;
	/*
	 * !important to beat the parent theme's own
	 * `.admin-bar .site-header { top: 32px !important; }`, which hardcodes the
	 * DESKTOP admin-bar height and never accounts for the 46px bar WordPress
	 * shows below 782px. Left alone it pins the header 14px too high on a
	 * phone, tucking it under the admin bar.
	 */
	top: var( --wwp-sticky-top, 0px ) !important;
	left: 0;
	width: 100%;
	z-index: 40;
}

/* The admin bar owns the top of the window when it is present. Matches the
   offsets the pinned-header rules above already use. */
body.admin-bar.wwp-sticky-hero { --wwp-sticky-top: 32px; }

@media screen and ( max-width: 782px ) {
	body.admin-bar.wwp-sticky-hero { --wwp-sticky-top: 46px; }
}

/* --- header: slide away on a phone ---------------------------------------
   The idle fade and the hero's `wwp-header-retreat` both change OPACITY: the
   bar keeps its height, which is what you want on a desktop where the height
   costs nothing. On a phone the height IS the cost, so this moves the bar off
   the top instead — set by topnav.js on downward scroll, and removed by an
   upward scroll, any touch, or focus reaching a control inside the header.

   Scoped to narrow viewports, and topnav.js additionally refuses to run it
   unless the header is genuinely pinned — translating a header that is in
   normal flow would open a gap rather than reclaim anything. */
@media ( max-width: 782px ) {
	#masthead.site-header {
		transition: transform 0.28s ease, opacity 0.4s ease;
	}
	body.topnav-up #masthead.site-header {
		transform: translateY( -100% );
	}
	/* An open dropdown or search overlay must not be dragged off-screen with
	   the bar it belongs to — the same reason .topnav-hold exists for fade. */
	body.topnav-up #masthead.site-header.topnav-hold {
		transform: none;
	}
}

@media ( max-width: 782px ) and ( prefers-reduced-motion: reduce ) {
	#masthead.site-header {
		transition: none;
	}
}

/* --- the second hamburger, repurposed as the playlist control ---------- */
/* Rule 14a. The parent theme owns this markup, so the class is added by
   assets/js/strip-toggle.js rather than by overriding a ThemeForest template. */
.wwp-strip-toggle {
	cursor: pointer;
}
.wwp-strip-toggle.is-showing-playlists {
	color: var( --wwp-accent, #e5133b );
}
.wwp-strip-toggle-icon {
	width: 1.15em;
	height: 1.15em;
	display: block;
	object-fit: contain;
	border-radius: 50%;
}

/* --- Story card titles: match the Hot 20 ------------------------------------
   Owner, 2026-09-12: the card titles were "too large and not as refined".
   Measured rather than guessed - the Hot 20 row title (.wwp-chart-track) is
   14px/17.5px at weight 600, and the card title was 19px/26.6px at 300. At
   19px a two-word artist name wrapped to three lines on a card that is only
   ~110-160px wide, which is what made it look unconsidered.

   Matched to the chart's track line, not its artist line, because a card
   title IS the track. The weight goes up as the size comes down: 300 at 14px
   over a photograph is thin enough to lose its edges, and the Hot 20 already
   solved that with 600.

   The <=769px rule further down keeps 13px, since those cards are narrower
   again. This is the base every width above that inherits. */
.editorschoice-story .editorschoice-post-title {
	font-size: 14px !important;
	line-height: 1.25 !important;
	font-weight: 600 !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Category row alignment ------------------------------------------------
   Customizer > Top Nav > Hero Video > "Category row alignment".

   text-align, deliberately, and not flex: the row's <li> items are already
   inline-block and unfloated, so aligning the line box moves them with no
   change to their own layout. Turning the <ul> into a flex container would
   re-lay-out every item and the dropdown panels hanging off them, which is a
   large risk for a cosmetic choice. */
#site-navigation.king-npup .header-nav ul.menu {
	text-align: var( --topnav-catnav-align, left );
}
/* The panels that open under an item always read left, whatever the row does
   above them - a centred column of links is harder to scan, and these are
   lists rather than a row. */
#site-navigation.king-npup .header-nav ul.menu ul,
#site-navigation.king-npup .header-nav ul.menu .king-nav-dropdown,
#site-navigation.king-npup .header-nav ul.menu .king-cat-list,
#site-navigation.king-npup .header-nav ul.menu .mmenu-links,
#site-navigation.king-npup .header-nav ul.menu .categories-post {
	text-align: left;
}


/* ==========================================================================
   Uniform grid cards (landing grid, king-grid-01)

   King's card height is whatever its image and title happen to be, so a row
   ragged by 20px was normal, and the vinyl card (inc/vinyl-player.php) made
   it obvious. The row is already a flex row — every <li> in it is the row's
   height — so each card now fills its <li>, and the likes / date box is
   pushed to the bottom. Cards in a row line up at any width, with no fixed
   heights anywhere.
   ========================================================================== */

/*
 * Taller covers (owner: "can the cards be a bit taller?"). King pins grid-01
 * covers at 220px !important; the extra .king-posts in this selector wins
 * that. The vinyl card follows automatically: it stretches to the row, and
 * the record grows into the room (vinyl-player.css).
 */
.king-grid-01 .king-posts .entry-image,
.king-grid-01 .king-posts .entry-no-thumb {
	height: var(--wwp-card-cover-h, 300px) !important;
}

.king-grid-01 .king-posts > li.king-post-item {
	display: flex;
}

.king-grid-01 .king-posts > li.king-post-item > article {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.king-grid-01 .king-posts > li.king-post-item > article > .article-meta {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.king-grid-01 .king-posts > li.king-post-item > article > .article-meta > .entry-meta {
	margin-top: auto;
}

/*
 * Card footer contrast (owner: "the bottom widgets on all cards are hard to
 * see ... a King design flaw"). King's night mode (king-night.css) forces
 * likes / views / comments / date to rgb(57, 60, 72) !important on a
 * rgb(16, 16, 20) box - about 1.8:1. Same selectors with .king-posts added,
 * so these win on specificity and reach ~7:1. Night mode only: the day
 * theme's footer box is light, and these greys would be the wrong way round
 * there.
 */
.king-night .king-posts article.hentry .entry-meta .post-views,
.king-night .king-posts article.hentry .entry-meta .post-comments,
.king-night .king-posts article.hentry .entry-meta .post-likes,
.king-night .king-posts article.hentry .entry-meta .post-time,
.king-night .king-posts article.hentry .entry-meta .content-share-counter {
	color: #a3a6b2 !important;
}

.king-night .king-posts article.hentry .entry-meta .post-views i,
.king-night .king-posts article.hentry .entry-meta .post-comments i,
.king-night .king-posts article.hentry .entry-meta .post-likes i,
.king-night .king-posts article.hentry .entry-meta .post-time i,
.king-night .king-posts article.hentry .entry-meta .content-share-counter i {
	color: #c3c6d1 !important;
}

/*
 * The card's icon rail (inc/card-footer.php, content-meta.php). Owner,
 * 2026-10-02: avatar, icons and date sit together on the LEFT, as on the TV
 * card; the right end of the rail holds the Buy button.
 *
 *   [avatar] [likes views comments shares]          [ $0.99 ]
 *            [date, or "Top Playlist Pick"]
 */
.king-posts .entry-meta.wwp-cardrail {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 8px;
	row-gap: 1px;
	width: 100%;
	box-sizing: border-box;
}

.wwp-cardrail > .king-pmeta { grid-column: 2; grid-row: 1; min-width: 0; }
.wwp-cardrail > .post-time { grid-column: 2; grid-row: 2; justify-self: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wwp-cardrail > .king-pmeta:last-child { grid-row: 1 / span 2; }

.wwp-cardrail__avatar {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: block;
	line-height: 0;
}

.wwp-cardrail__avatar img.content-author-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* The avatar moved down to the rail, so the cover no longer carries it. */
article:has(.wwp-cardrail__avatar) .content-right-top .content-avatar { display: none; }

.wwp-cardrail > .post-time.is-slogan {
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* Buy: an outlined price pill, as on Apple's stores. */
.wwp-cardrail > .wwp-buy {
	grid-column: 3;
	grid-row: 1 / span 2;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 64px;
	height: 28px;
	padding: 0 14px;
	border: 1.5px solid var(--wwp-buy, #0071e3);
	border-radius: 999px;
	color: var(--wwp-buy, #0071e3);
	background: transparent;
	font: 600 13px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Nunito", sans-serif;
	letter-spacing: -0.01em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s, color 0.15s;
}

.wwp-cardrail > .wwp-buy:hover,
.wwp-cardrail > .wwp-buy:focus-visible {
	background: var(--wwp-buy, #0071e3);
	color: var(--wwp-buy-on, #fff);
	outline: none;
}

/* Colours: Customizer -> Cards & Store (day, night, hover text), or a post's own. */
.king-night .wwp-cardrail > .wwp-buy { border-color: var(--wwp-buy-night, #2997ff); color: var(--wwp-buy-night, #2997ff); }
.king-night .wwp-cardrail > .wwp-buy:hover,
.king-night .wwp-cardrail > .wwp-buy:focus-visible { background: var(--wwp-buy-night, #2997ff); color: var(--wwp-buy-on, #fff); }