/*
Theme Name: Starwide Encore
Theme URI: https://starwide.co
Author: Starwide Multimedia Solutions
Author URI: https://starwide.co
Description: Front-end presentation theme for the Starwide Encore platform — a social, media-hosting and content-showcase experience. Renders content, feeds, uploads and profiles supplied by the companion "Starwide Encore Core" plugin. Compatible with BuddyPress, bbPress and WooCommerce.
Version: 0.7.2
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: starwide-encore
Tags: social, video, media, dark-mode, buddypress, bbpress, woocommerce
*/

/* =========================================================
   1. COLOR SYSTEM
   All color decisions live here as CSS custom properties so the
   Customizer (inc/customizer.php) can override them per-site and
   per-profile with a single inline <style> block. Never hardcode
   a color inside a template — reference a var() instead.
   ========================================================= */

:root {
	/* Brand palette */
	--sw-tumblr-blue: #001935;      /* default LIGHT-mode background (tumblr.com blue, not white) */
	--sw-charcoal: #1a1a1a;         /* default DARK-mode background */
	--sw-velvet-red: #7b0d2e;       /* primary button / pill color */
	--sw-velvet-red-hover: #99123a;
	--sw-link-yellow: #f5d547;      /* clickable-link highlight, outside the menu */
	--sw-gray: #8a8f98;
	--sw-white: #ffffff;
	--sw-black: #000000;

	/* NSFW state */
	--sw-nsfw-violet: #5b2a86;
	--sw-nsfw-text: #c9a6ff;

	/* Semantic tokens — templates and components use ONLY these */
	--sw-bg: var(--sw-tumblr-blue);
	--sw-bg-elevated: rgba(255, 255, 255, 0.06);
	--sw-text: var(--sw-white);           /* text is ALWAYS white, light or dark mode */
	--sw-text-muted: rgba(255, 255, 255, 0.72);
	--sw-link: var(--sw-link-yellow);
	--sw-button-bg: var(--sw-velvet-red);
	--sw-button-bg-hover: var(--sw-velvet-red-hover);
	--sw-button-text: var(--sw-white);
	--sw-border: rgba(255, 255, 255, 0.14);
	--sw-profile-field-bg: #4a7fc9;        /* light blue, per spec, for DM/custom form fields */
	--sw-profile-field-text: var(--sw-white);
	--sw-highlight: var(--sw-link-yellow); /* hover/tap highlight on post headlines */

	/* Spacing / radii reused across components */
	--sw-radius-pill: 999px;
	--sw-radius-card: 10px;
	--sw-gap: 1rem;

	/* Rating-tier colors (MPAA-style: G / PG / PG-13 / R / NC-17), plus
	   the real Project Encore tiers for image (3+.../18+) and audio
	   (standard/explicit) content, and a catch-all for anything else. */
	--sw-rating-g: #3f9142;
	--sw-rating-pg: #3f7f9e;
	--sw-rating-pg13: #c98a2e;
	--sw-rating-r: #b23a3a;
	--sw-rating-nc17: #6e1b1b;
	--sw-rating-nsfw: #7a1f3d;
	--sw-rating-3: #3f9142;
	--sw-rating-7: #3f8e6f;
	--sw-rating-12: #3f7f9e;
	--sw-rating-15: #c98a2e;
	--sw-rating-18: #b23a3a;
	--sw-rating-explicit: #7a1f3d;
	--sw-rating-other: #55607a;

	/* Per-content-type accent colors, used on card type badges / the
	   header ticker row so video/image/audio read apart at a glance. */
	--sw-type-video: #e0485a;
	--sw-type-image: #2fa3c4;
	--sw-type-audio: #8a5fd1;
	--sw-type-post: #55607a;

	--sw-star: #f3b63f;
	--sw-ribbon-new: #e0485a;

	/* Brand accent (logo mark, avatar fallback, active-nav underline,
	   search focus ring) — the bright blue from the Starwide branding. */
	--sw-brand-accent: #2f6fed;
}

[data-theme="dark"] {
	--sw-bg: var(--sw-charcoal);
	--sw-bg-elevated: rgba(255, 255, 255, 0.08);
	--sw-border: rgba(255, 255, 255, 0.18);
}

/*
 * Project Encore's own front-end stylesheet (assets/css/encore.css,
 * loaded by the plugin itself whenever a shortcode like [encore_upload]
 * or [encore_media] renders) is deliberately built on CSS custom
 * properties — its own header comment says "colours are overridable
 * via the custom properties below." Redeclaring them here is the
 * supported way to reskin it, rather than overriding dozens of
 * .encore-* classes one by one.
 *
 * Scoped to .sw-site (present on every page) rather than :root: a
 * descendant's own declared custom property always wins over an
 * ancestor's through normal CSS inheritance, so this is correct
 * regardless of whether style.css or encore.css happens to load
 * first — no specificity fight with the plugin's own :root block.
 */
.sw-site {
	--encore-accent: var(--sw-velvet-red);
	--encore-accent-ink: var(--sw-button-text);
	--encore-muted: var(--sw-text-muted);
	--encore-surface: var(--sw-bg-elevated);
	--encore-border: var(--sw-border);
	--encore-stage: #0d0d0d;
	--encore-radius: var(--sw-radius-card);
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	background-color: var(--sw-bg);
	color: var(--sw-text);
	font-family: Arial, Helvetica, sans-serif; /* body text: safe, legible default */
	margin: 0;
	min-height: 100vh;
	transition: background-color 0.25s ease;
}

/* Spec: posts/content copy defaults to an "aerial" font — mapped to the
   closest real, widely-available family: Arial/Helvetica. Swap the
   font-family below if a licensed "Arial"-alike webfont is added later. */
.sw-post-body,
.sw-content-title {
	font-family: Arial, Helvetica, sans-serif;
}

a {
	color: var(--sw-link);
	text-decoration: none;
}

a:hover,
a:focus {
	text-decoration: underline;
}

/* Menu links are explicitly excluded from the yellow highlight rule */
.sw-menu a,
.sw-menu a:hover {
	color: var(--sw-text);
	text-decoration: none;
}

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

button { font-family: inherit; cursor: pointer; }

/* =========================================================
   3. BUTTONS
   All buttons: round pill, velvet red, white text — upload button
   is the one circular exception (plus-sign FAB).
   ========================================================= */

.sw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	background-color: var(--sw-button-bg);
	color: var(--sw-button-text);
	border: none;
	border-radius: var(--sw-radius-pill);
	padding: 0.55em 1.4em;
	font-weight: bold;
	font-size: 0.95rem;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.sw-btn:hover,
.sw-btn:focus-visible {
	background-color: var(--sw-button-bg-hover);
	text-decoration: none;
}

.sw-btn:active { transform: scale(0.97); }

.sw-icon-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--sw-border);
	background: transparent;
	color: var(--sw-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sw-icon-btn:hover { background-color: var(--sw-bg-elevated); }
.sw-icon-btn svg { width: 18px; height: 18px; }

.sw-btn-upload {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	padding: 0;
	font-size: 1.4rem;
	line-height: 1;
}

/* =========================================================
   4. LAYOUT SHELL
   ========================================================= */

.sw-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.sw-body-flex {
	display: flex;
	flex: 1;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
}

.sw-main {
	flex: 1;
	min-width: 0; /* allow grid children to shrink instead of overflowing the flex row */
	padding: 0 1rem;
}

/* =========================================================
   5. HEADER
   ========================================================= */

.sw-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: var(--sw-bg);
	border-bottom: 1px solid var(--sw-border);
}

.sw-header__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	padding: 0.65rem 1rem;
	max-width: 1440px;
	margin: 0 auto;
}

.sw-header__brand {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex-shrink: 0;
}

.sw-header__brand-mark {
	width: 28px;
	height: 28px;
	border-radius: 7px;
	background-color: var(--sw-brand-accent);
	color: var(--sw-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.sw-header__brand-mark svg { width: 16px; height: 16px; }

.sw-header__logo {
	display: block;
	height: auto;
	max-height: 40px;
	width: auto;
	max-width: 220px;
}

.sw-header__brand-text {
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sw-text);
}

.sw-header__hamburger {
	display: none;
	background: none;
	border: none;
	color: var(--sw-text);
	font-size: 1.5rem;
}

.sw-header__media-nav {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.1rem;
	flex-shrink: 0;
}

.sw-navlink {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	color: var(--sw-text);
	font-weight: 600;
	font-size: 0.9rem;
	padding: 0.3em 0.1em;
	border-bottom: 2px solid transparent;
}

.sw-navlink:hover,
.sw-navlink:focus-visible,
.sw-navlink.is-active {
	color: var(--sw-text);
	text-decoration: none;
	border-bottom-color: var(--sw-brand-accent);
}

.sw-navlink__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
}

.sw-header__downarrow {
	background: none;
	border: none;
	color: var(--sw-text-muted);
	font-size: 1.1rem;
	line-height: 1;
	padding: 0.4em;
}

.sw-header__downarrow:hover { color: var(--sw-text); }

/* Search sits inline in the header row on wide screens (compact pill,
   grows to fill remaining space) and wraps to its own full-width line
   on narrow ones, since .sw-header__row is flex-wrap. */
#sw-searchbar-row {
	flex: 1 1 220px;
	min-width: 160px;
	max-width: 420px;
}

.sw-header__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
	margin-left: auto;
}

.sw-icon-btn--notify { position: relative; }

.sw-icon-btn__dot {
	position: absolute;
	top: 6px;
	right: 7px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--sw-ribbon-new);
	border: 1.5px solid var(--sw-bg);
}

.sw-icon-btn--muted { border-color: transparent; color: var(--sw-text-muted); }

.sw-header__avatar {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--sw-brand-accent);
	color: var(--sw-white);
	flex-shrink: 0;
}

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

.sw-header__avatar svg { width: 16px; height: 16px; }

/* Extended "down arrow" menu (ebooks/comics, games, posts, activity, + custom links) */
.sw-downmenu {
	position: absolute;
	left: auto;
	right: 0;
	top: calc(100% + 0.4rem);
	background-color: var(--sw-bg-elevated);
	backdrop-filter: blur(6px);
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius-card);
	min-width: 220px;
	padding: 0.5rem;
	display: none;
	flex-direction: column;
	z-index: 60;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.sw-downmenu.is-open { display: flex; }

.sw-downmenu a {
	color: var(--sw-text);
	padding: 0.5em 0.75em;
	border-radius: 6px;
}

.sw-downmenu a:hover {
	background-color: var(--sw-bg-elevated);
	color: var(--sw-link);
	text-decoration: none;
}

/* Ticker row: thin horizontally-scrolling strip of the most recent
   uploads, directly under the header (front page by default — see
   sw_encore_core_show_header_ticker). */
.sw-ticker {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 1rem;
	border-top: 1px solid var(--sw-border);
	background-color: var(--sw-bg-elevated);
	overflow: hidden;
}

.sw-ticker__label {
	flex-shrink: 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sw-ribbon-new);
	border: 1px solid var(--sw-ribbon-new);
	border-radius: var(--sw-radius-pill);
	padding: 0.15em 0.6em;
}

.sw-ticker__track {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.sw-ticker__track::-webkit-scrollbar { display: none; }

.sw-ticker__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex-shrink: 0;
	color: var(--sw-text);
	font-size: 0.85rem;
	white-space: nowrap;
}

.sw-ticker__item:hover { color: var(--sw-link); text-decoration: none; }

.sw-ticker__item .sw-badge {
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	padding: 0;
	flex-shrink: 0;
}

.sw-ticker__item .sw-badge svg { width: 11px; height: 11px; }

.sw-ticker__title {
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sw-ticker__time {
	color: var(--sw-text-muted);
	font-size: 0.75rem;
	flex-shrink: 0;
}

@media (max-width: 640px) {
	.sw-ticker__label { display: none; }
	.sw-ticker__title { max-width: 140px; }
}

/* Search: a compact inline pill living inside .sw-header__row (see
   #sw-searchbar-row above) on wide screens; .initStickySearch() still
   pins it + the back button full-width when the user is on a search
   results page and scrolls, overriding this with position:fixed. */
.sw-searchbar-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.sw-searchbar-row.is-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 0.65rem 1rem;
	background-color: var(--sw-bg);
	box-shadow: 0 4px 10px rgba(0,0,0,0.25);
	z-index: 60;
}

.sw-back-btn {
	background: none;
	border: none;
	color: var(--sw-text);
	font-size: 1.3rem;
	flex-shrink: 0;
}

.sw-search-form {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.sw-search-input-wrap {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.55em;
	background-color: var(--sw-bg-elevated);
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius-pill);
	padding: 0.45em 1em;
}

.sw-search-input-wrap:focus-within { border-color: var(--sw-brand-accent); }

.sw-search-input-wrap__icon { width: 16px; height: 16px; color: var(--sw-text-muted); flex-shrink: 0; }

.sw-search-input-wrap input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	color: var(--sw-text);
	font-size: 0.88rem;
	outline: none;
}

.sw-search-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0 1rem 0.75rem;
}

.sw-search-filters .sw-chip {
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius-pill);
	padding: 0.3em 0.9em;
	font-size: 0.85rem;
	color: var(--sw-text-muted);
}

.sw-search-filters .sw-chip.is-active {
	background-color: var(--sw-velvet-red);
	color: var(--sw-white);
	border-color: transparent;
}

/* =========================================================
   6. SIDE MENU
   Desktop/tablet: a narrow icon-only rail (icons centered, labels
   hidden) — matches the compact reference layout. Mobile: the same
   links slide out as a labeled drawer, triggered by the hamburger.
   ========================================================= */

.sw-sidemenu {
	width: 72px;
	flex-shrink: 0;
	border-right: 1px solid var(--sw-border);
	padding: 1rem 0.25rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.sw-rail-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.sw-rail-list--static {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--sw-border);
}

.sw-rail-link,
.sw-rail-list--static a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 0.6em 0.25em;
	border-radius: 10px;
	color: var(--sw-text-muted);
}

.sw-rail-link svg,
.sw-rail-list--static svg { width: 22px; height: 22px; }

.sw-rail-link:hover,
.sw-rail-link:focus-visible,
.sw-rail-link.is-active,
.sw-rail-list--static a:hover,
.sw-rail-list--static a:focus-visible {
	background-color: var(--sw-bg-elevated);
	color: var(--sw-text);
	text-decoration: none;
}

.sw-rail-link.is-active { color: var(--sw-link); }

/* Labels are hidden at rail width — re-shown in the mobile drawer below */
.sw-rail-text {
	font-size: 0.6rem;
	display: none;
}

@media (max-width: 1024px) {
	.sw-header__hamburger { display: inline-flex; }
	.sw-header__media-nav { display: none; }

	.sw-sidemenu {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		max-width: 78vw;
		width: 260px;
		background-color: var(--sw-bg);
		transform: translateX(-100%);
		transition: transform 0.25s ease;
		z-index: 80;
		overflow-y: auto;
		box-shadow: 4px 0 16px rgba(0,0,0,0.3);
		padding: 1rem;
	}

	.sw-sidemenu.is-open { transform: translateX(0); }

	.sw-rail-link,
	.sw-rail-list--static a {
		flex-direction: row;
		justify-content: flex-start;
		gap: 0.75rem;
		font-weight: normal;
	}

	/* Spec: on mobile, Video/Photos/Audio stay bold+highlighted; the
	   rest of the (desktop down-arrow) items render as plain listings. */
	.sw-rail-link--primary { font-weight: bold; }

	.sw-rail-text { display: inline; font-size: 0.95rem; }

	.sw-sidemenu-scrim {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.5);
		z-index: 75;
	}

	.sw-sidemenu-scrim.is-open { display: block; }
}

/* =========================================================
   7. POST GRID / CAROUSEL (front page)
   ========================================================= */

.sw-section-title {
	font-size: 1.1rem;
	font-weight: bold;
	margin: 1.5rem 0 0.75rem;
}

/* Small red accent under a section title — used sparingly, only where
   the reference layout calls for it (e.g. "Top Playlists"), not as a
   default title treatment across the theme. */
.sw-section-title--accent {
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--sw-velvet-red);
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.sw-category-row { margin-top: 1rem; }

.sw-category-row__heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.sw-category-row__heading .sw-section-title--accent { margin: 0; }

.sw-view-more {
	flex-shrink: 0;
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius-pill);
	padding: 0.4em 1.1em;
	font-size: 0.8rem;
	font-weight: bold;
	color: var(--sw-text);
}

.sw-view-more:hover { background-color: var(--sw-bg-elevated); text-decoration: none; }

/* ---------------------------------------------------------
   Hero spotlight grid (front page "Presented" section):
   one large tile + one wide tile + two small tiles, bento-style.
   --------------------------------------------------------- */

.sw-hero-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: var(--sw-gap);
	height: 560px;
}

.sw-spotlight {
	position: relative;
	display: block;
	border-radius: var(--sw-radius-card);
	overflow: hidden;
	background-color: #0d0d0d;
}

.sw-spotlight--main { grid-area: 1 / 1 / 3 / 2; }
.sw-spotlight--top { grid-area: 1 / 2 / 2 / 4; }
.sw-spotlight--bl { grid-area: 2 / 2 / 3 / 3; }
.sw-spotlight--br { grid-area: 2 / 3 / 3 / 4; }

.sw-spotlight .sw-card__thumb-wrap {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	height: 100%;
}

.sw-spotlight__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 45%, transparent 70%);
	pointer-events: none;
}

.sw-spotlight__duration {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	background-color: rgba(0,0,0,0.75);
	color: var(--sw-white);
	font-size: 0.8rem;
	font-weight: bold;
	padding: 0.25em 0.6em;
	border-radius: 6px;
}

.sw-spotlight__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.sw-spotlight__badge {
	width: fit-content;
	background-color: rgba(0,0,0,0.75);
	color: var(--sw-text);
	font-size: 0.7rem;
	font-weight: bold;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.3em 0.7em;
	border-radius: 4px;
}

.sw-spotlight__title {
	color: var(--sw-white);
	font-weight: bold;
	font-size: 1.3rem;
	line-height: 1.25;
}

.sw-spotlight--top .sw-spotlight__title,
.sw-spotlight--bl .sw-spotlight__title,
.sw-spotlight--br .sw-spotlight__title {
	font-size: 1rem;
}

.sw-spotlight__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem;
	font-size: 0.8rem;
	color: var(--sw-text-muted);
}

.sw-spotlight__meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
}

.sw-spotlight__meta svg { width: 14px; height: 14px; }

.sw-spotlight__live {
	position: absolute;
	right: 0.9rem;
	bottom: 0.9rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.75rem;
	font-weight: bold;
	color: var(--sw-white);
}

.sw-live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #e23b3b;
	box-shadow: 0 0 0 0 rgba(226,59,59,0.6);
	animation: sw-live-pulse 1.8s infinite;
}

@keyframes sw-live-pulse {
	0% { box-shadow: 0 0 0 0 rgba(226,59,59,0.55); }
	70% { box-shadow: 0 0 0 8px rgba(226,59,59,0); }
	100% { box-shadow: 0 0 0 0 rgba(226,59,59,0); }
}

@media (max-width: 1024px) {
	.sw-hero-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 280px 160px 160px;
		height: auto;
	}
	.sw-spotlight--main { grid-area: 1 / 1 / 2 / 3; }
	.sw-spotlight--top { grid-area: 2 / 1 / 3 / 3; }
	.sw-spotlight--bl { grid-area: 3 / 1 / 4 / 2; }
	.sw-spotlight--br { grid-area: 3 / 2 / 4 / 3; }
}

@media (max-width: 640px) {
	.sw-hero-grid {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(4, 220px);
	}
	.sw-spotlight--main,
	.sw-spotlight--top,
	.sw-spotlight--bl,
	.sw-spotlight--br {
		grid-area: auto;
	}
}

/* ---------------------------------------------------------
   Top playlists row — count + "Play all" + title label
   --------------------------------------------------------- */

.sw-playlist-row {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--sw-gap);
}

.sw-playlist-card {
	position: relative;
	display: block;
	border-radius: var(--sw-radius-card);
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.sw-playlist-card .sw-card__thumb-wrap {
	height: 100%;
	aspect-ratio: auto;
}

.sw-playlist-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 55%), linear-gradient(to right, rgba(0,0,0,0.35) 0%, transparent 40%);
	pointer-events: none;
}

.sw-playlist-card__count {
	position: absolute;
	top: 0.6rem;
	right: 0.7rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--sw-white);
	font-size: 1.15rem;
	font-weight: bold;
	line-height: 1.1;
}

.sw-playlist-card__count svg { width: 16px; height: 16px; margin-top: 0.2em; }

.sw-playlist-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.9);
	background-color: rgba(0,0,0,0.65);
	color: var(--sw-white);
	font-size: 0.8rem;
	font-weight: bold;
	padding: 0.5em 1.1em;
	border-radius: var(--sw-radius-pill);
	opacity: 0;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.sw-playlist-card:hover .sw-playlist-card__play {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.sw-playlist-card__label {
	position: absolute;
	left: 0.7rem;
	bottom: 0.6rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--sw-white);
	font-weight: bold;
	font-size: 0.9rem;
}

.sw-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sw-gap);
}

@media (max-width: 1024px) {
	.sw-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.sw-grid { grid-template-columns: 1fr; }
}

.sw-card {
	position: relative;
	border-radius: var(--sw-radius-card);
	overflow: hidden;
	background-color: var(--sw-bg-elevated);
}

.sw-card__thumb-link {
	position: relative;
	display: block;
}

.sw-card__thumb-wrap {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: #0d0d0d;
	overflow: hidden;
}

.sw-card__duration {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	background-color: rgba(0,0,0,0.75);
	color: var(--sw-white);
	font-size: 0.75rem;
	font-weight: bold;
	padding: 0.2em 0.5em;
	border-radius: 5px;
}

.sw-card__live {
	position: absolute;
	bottom: 0.5rem;
	right: 0.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	background-color: rgba(0,0,0,0.75);
	color: var(--sw-white);
	font-size: 0.7rem;
	font-weight: bold;
	padding: 0.25em 0.6em;
	border-radius: var(--sw-radius-pill);
}

.sw-card__thumb-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Missing/errored thumbnail: star-in-a-circle-with-cross stand-in */
.sw-card__thumb-fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #0d0d0d;
}

.sw-card__thumb-fallback svg { width: 42%; height: 42%; opacity: 0.6; }

/* Per-content-type icon shown bottom-right of every thumbnail */
.sw-card__type-icon {
	position: absolute;
	bottom: 0.4rem;
	right: 0.4rem;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: rgba(0,0,0,0.65);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sw-card__type-icon svg { width: 60%; height: 60%; fill: var(--sw-white); }

/* NSFW override thumbnail: bright violet with purple "NSFW" text */
.sw-card--nsfw .sw-card__thumb-wrap,
.sw-card__thumb-fallback.is-nsfw {
	background-color: var(--sw-nsfw-violet);
}

.sw-card__nsfw-label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sw-nsfw-text);
	font-weight: bold;
	letter-spacing: 0.08em;
	background-color: var(--sw-nsfw-violet);
}

.sw-card__title {
	display: block;
	color: var(--sw-white);
	font-weight: bold;
	font-size: 1rem;
	padding: 0.6rem 0.7rem 0.3rem;
}

.sw-card__title:hover,
.sw-card__title:focus-visible,
.sw-card.is-active .sw-card__title {
	color: var(--sw-highlight);
	text-decoration: none;
}

.sw-card__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 0.7rem 0.75rem;
}

.sw-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;   /* personal profile pictures: always circular */
	object-fit: cover;
	flex-shrink: 0;
	border: 1px solid var(--sw-border);
}

.sw-avatar--brand {
	border-radius: 6px;   /* brand / sub-profile pictures: always square */
}

.sw-card__meta-name {
	font-size: 0.85rem;
	color: var(--sw-text-muted);
}

.sw-card__meta-avatar { position: relative; flex-shrink: 0; display: inline-flex; }

.sw-card__verified {
	position: absolute;
	bottom: -2px;
	right: -2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: #2fb866;
	border: 2px solid var(--sw-bg);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sw-card__verified svg { width: 9px; height: 9px; stroke-width: 3; color: var(--sw-white); }

.sw-card__commerce {
	padding: 0 0.7rem 0.4rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	font-weight: bold;
}

.sw-card__price { color: #2fb866; }
.sw-card__price--was { color: var(--sw-velvet-red); text-decoration: line-through; font-weight: normal; }

.sw-card__membership {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--sw-link);
}

.sw-card__membership svg { width: 14px; height: 14px; }

.sw-card__stats {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0 0.7rem 0.75rem;
	font-size: 0.8rem;
	color: var(--sw-text-muted);
}

.sw-card__stats span {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
}

.sw-card__stats svg { width: 14px; height: 14px; }

/* "end of posts" infinite-scroll sentinel */
.sw-feed-end {
	text-align: center;
	padding: 2rem 0;
	color: var(--sw-text-muted);
	font-weight: bold;
}

.sw-feed-loading {
	text-align: center;
	padding: 1.5rem 0;
	color: var(--sw-text-muted);
}

/* =========================================================
   8. FOOTER
   ========================================================= */

.sw-footer {
	border-top: 1px solid var(--sw-border);
	padding: 2.5rem 1rem 1.5rem;
	font-size: 0.85rem;
	color: var(--sw-text-muted);
}

.sw-footer__columns {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
	gap: 2rem;
	text-align: left;
}

@media (max-width: 1024px) {
	.sw-footer__columns { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
	.sw-footer__columns { grid-template-columns: 1fr; }
}

.sw-footer__brand {
	display: block;
	font-weight: bold;
	font-size: 1.15rem;
	color: var(--sw-text);
	margin-bottom: 0.6rem;
}

.sw-footer__brand:hover { text-decoration: none; color: var(--sw-link); }

.sw-footer__about-text { margin: 0; line-height: 1.6; }

.sw-footer__col-title {
	font-size: 0.85rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sw-text);
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--sw-velvet-red);
	margin: 0 0 0.9rem;
	display: inline-block;
}

.sw-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.sw-footer__list a { color: var(--sw-text-muted); }
.sw-footer__list a:hover { color: var(--sw-link); text-decoration: none; }

.sw-footer__post {
	display: flex;
	gap: 0.6rem;
	margin-bottom: 0.9rem;
}

.sw-footer__post-thumb {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: 6px;
	overflow: hidden;
	background-color: var(--sw-bg-elevated);
}

.sw-footer__post-thumb img { width: 100%; height: 100%; object-fit: cover; }

.sw-footer__post-body { display: flex; flex-direction: column; gap: 0.3rem; }

.sw-footer__post-title {
	color: var(--sw-text);
	font-size: 0.85rem;
	font-weight: bold;
	line-height: 1.3;
}

.sw-footer__post:hover .sw-footer__post-title { color: var(--sw-link); }

.sw-footer__post-views {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-size: 0.75rem;
	color: var(--sw-text-muted);
}

.sw-footer__post-views svg { width: 12px; height: 12px; }

.sw-footer__connect {
	max-width: 1440px;
	margin: 2rem auto 0;
	text-align: center;
}

.sw-footer__social {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 0.25rem;
}

.sw-footer__social a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--sw-bg-elevated);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sw-footer__social svg { width: 50%; height: 50%; color: var(--sw-text); }

.sw-footer__bottom {
	max-width: 1440px;
	margin: 2rem auto 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--sw-border);
	text-align: center;
}

.sw-footer__bottom p { margin: 0; }

/* =========================================================
   9. CONTENT / THEATER WINDOW
   ========================================================= */

.sw-theater {
	background-color: #000;
	border-radius: var(--sw-radius-card);
	position: relative;
	overflow: hidden;
	margin-top: 1rem;
}

.sw-theater__media {
	position: relative;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sw-theater__like {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.sw-theater__media.is-active .sw-theater__like,
.sw-theater__media.is-active .sw-theater__controls,
.sw-theater__media.is-active .sw-theater__flag {
	opacity: 1;
}

.sw-theater__controls {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: flex;
	gap: 0.5rem;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.sw-theater__flag {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.sw-theater-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.85rem 1rem;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.sw-theater-meta__left {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.sw-theater-meta__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.sw-theater-sidebadges {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.5rem 1rem;
}

.sw-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.75rem;
	padding: 0.2em 0.6em;
	border-radius: var(--sw-radius-pill);
	background-color: var(--sw-bg-elevated);
	width: fit-content;
}

.sw-badge--rating-g { background-color: var(--sw-rating-g); }
.sw-badge--rating-pg { background-color: var(--sw-rating-pg); }
.sw-badge--rating-pg13 { background-color: var(--sw-rating-pg13); }
.sw-badge--rating-r { background-color: var(--sw-rating-r); }
.sw-badge--rating-nc17 { background-color: var(--sw-rating-nc17); }
.sw-badge--rating-nsfw { background-color: var(--sw-rating-nsfw); }
.sw-badge--rating-3 { background-color: var(--sw-rating-3); }
.sw-badge--rating-7 { background-color: var(--sw-rating-7); }
.sw-badge--rating-12 { background-color: var(--sw-rating-12); }
.sw-badge--rating-15 { background-color: var(--sw-rating-15); }
.sw-badge--rating-18 { background-color: var(--sw-rating-18); }
.sw-badge--rating-explicit { background-color: var(--sw-rating-explicit); }
.sw-badge--rating-other { background-color: var(--sw-rating-other); }

/* ---- Star rating, NEW ribbon, colored type badge (bento/ticker refresh) ---- */
.sw-star-rating {
	display: inline-flex;
	align-items: center;
	gap: 1px;
}

.sw-star-rating__star {
	width: 14px;
	height: 14px;
	color: var(--sw-border);
}

.sw-star-rating__star svg { width: 100%; height: 100%; display: block; }

.sw-star-rating__star.is-filled { color: var(--sw-star); }

.sw-ribbon-new {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	background-color: var(--sw-ribbon-new);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.2em 0.55em;
	border-radius: 4px;
	z-index: 2;
}

.sw-badge--type-video { background-color: var(--sw-type-video); }
.sw-badge--type-image { background-color: var(--sw-type-image); }
.sw-badge--type-audio { background-color: var(--sw-type-audio); }
.sw-badge--type-post { background-color: var(--sw-type-post); }

/* Colored type badge on the card thumbnail — bottom-left, out of the
   way of the duration badge (top-right) and Live Chat badge (bottom-right). */
.sw-card__thumb-link > .sw-badge {
	position: absolute;
	bottom: 0.5rem;
	left: 0.5rem;
	padding: 0.3em;
	line-height: 0;
}

.sw-card__thumb-link > .sw-badge svg { width: 14px; height: 14px; display: block; }

.sw-card__relative-time {
	color: var(--sw-text-muted);
	font-size: 0.8rem;
}

/* Watch/read progress bar — shown only when sw_encore_core_watch_progress
   returns a value (e.g. from a "continue watching" integration). */
.sw-card__progress {
	height: 3px;
	background-color: var(--sw-border);
	border-radius: 2px;
	overflow: hidden;
	margin-top: 0.35rem;
}

.sw-card__progress-fill {
	height: 100%;
	background-color: var(--sw-velvet-red);
}

.sw-likebar {
	display: flex;
	height: 6px;
	border-radius: var(--sw-radius-pill);
	overflow: hidden;
	background-color: var(--sw-bg-elevated);
	width: 160px;
}

.sw-likebar__like { background-color: var(--sw-link-yellow); }
.sw-likebar__dislike { background-color: var(--sw-gray); }

/* Book / comic reader mode: taller page frame + prev/next controls */
.sw-reader {
	aspect-ratio: 8.5 / 11;
	max-width: 620px;
	margin: 0 auto;
	background-color: #0d0d0d;
	border-radius: var(--sw-radius-card);
	position: relative;
}

.sw-reader__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,0.5);
	border: none;
	color: var(--sw-white);
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.sw-reader__nav--prev { left: 0.75rem; }
.sw-reader__nav--next { right: 0.75rem; }

.sw-reader__jump--start { position: absolute; top: 0.75rem; left: 0.75rem; }
.sw-reader__jump--end { position: absolute; top: 0.75rem; right: 0.75rem; }

/* =========================================================
   10. COMMENTS
   ========================================================= */

.sw-comments { padding: 1rem 0 2rem; }

.sw-comment {
	display: flex;
	gap: 0.65rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--sw-border);
}

.sw-comment--top {
	background-color: var(--sw-bg-elevated);
	border-radius: var(--sw-radius-card);
	padding: 0.85rem;
	border-bottom: none;
	margin-bottom: 0.5rem;
}

.sw-comment__body { flex: 1; }

.sw-comment__text.is-truncated {
	display: -webkit-box;
	-webkit-line-clamp: 6; /* approximates the ~300-character cap */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sw-comment__replies {
	margin-left: 2.5rem;
	border-left: 1px solid var(--sw-border);
	padding-left: 1rem;
}

/* =========================================================
   11. CUSTOM FORM FIELDS (profile DM form)
   ========================================================= */

.sw-form-field {
	background-color: var(--sw-profile-field-bg);
	color: var(--sw-profile-field-text);
	border: none;
	border-radius: 8px;
	padding: 0.6em 0.9em;
	width: 100%;
}

/* =========================================================
   12. AD SLOTS
   ========================================================= */

.sw-ad-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 1rem auto;
	overflow: hidden;
}

.sw-ad-slot--infeed { grid-column: 1 / -1; min-height: 120px; }
.sw-ad-slot--top { margin-top: 0; margin-bottom: 1rem; }
.sw-ad-slot--interstitial {
	width: 1280px;
	max-width: 100%;
	aspect-ratio: 1280 / 720;
}

.sw-ad-skip {
	position: absolute;
	bottom: 0.75rem;
	right: 0.75rem;
	background-color: rgba(0,0,0,0.7);
	color: var(--sw-white);
	border: none;
	border-radius: var(--sw-radius-pill);
	padding: 0.4em 1em;
	font-size: 0.85rem;
}

/* Spec: NSFW content never carries ads */
.sw-card--nsfw .sw-ad-slot,
.sw-theater--nsfw .sw-ad-slot {
	display: none !important;
}

/* =========================================================
   13. AGE-GATE NOTICE
   ========================================================= */

.sw-age-gate {
	max-width: 480px;
	margin: 3rem auto;
	text-align: center;
	padding: 2rem;
	background-color: var(--sw-bg-elevated);
	border-radius: var(--sw-radius-card);
}

.sw-age-gate svg { width: 64px; height: 64px; margin-bottom: 1rem; }

/* =========================================================
   14. UPLOAD / SUBMIT PAGE
   ========================================================= */

.sw-upload-banner {
	background-color: var(--sw-bg-elevated);
	border-radius: var(--sw-radius-card);
	padding: 1.5rem;
	text-align: center;
	margin: 1.5rem 0;
}

.sw-upload-banner h1 { margin: 0; font-size: 1.4rem; }

/* Wraps whatever Encore Core's [encore_upload] shortcode renders so it
   inherits the theme's max-width/gutters instead of running edge-to-edge. */
.sw-upload-wrap {
	max-width: 860px;
	margin: 0 auto 3rem;
}

.sw-upload-wrap .encore-notice {
	background-color: var(--sw-bg-elevated);
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius-card);
	padding: 1.25rem;
	text-align: center;
}

/*
 * Project Encore's own CSS (assets/css/encore.css) reskins via the
 * --encore-* custom properties above, but never touches native form
 * controls (text/url/number inputs, <select>, checkboxes) — those were
 * rendering with the browser's bare default white-on-black-text
 * appearance, which is where most of the "doesn't look finished" read
 * comes from. Styled generically under .encore-uploader (and the
 * handful of other Encore components that use plain form fields) so
 * every shortcode gets this, not just the upload wizard.
 */
.encore-uploader input[type="text"],
.encore-uploader input[type="url"],
.encore-uploader input[type="number"],
.encore-uploader select,
.encore-uploader textarea,
.encore-dialog input:not([type="checkbox"]):not([type="radio"]),
.encore-dialog select,
.encore-age-form input,
.encore-table input[type="text"],
.encore-table input[type="number"] {
	background-color: var(--sw-bg-elevated);
	border: 1px solid var(--sw-border);
	border-radius: 6px;
	color: var(--sw-text);
	padding: 0.5em 0.75em;
	font-size: 0.9rem;
	font-family: inherit;
}

.encore-uploader input::placeholder,
.encore-uploader textarea::placeholder {
	color: var(--sw-text-muted);
}

.encore-uploader input[type="text"]:focus,
.encore-uploader input[type="url"]:focus,
.encore-uploader input[type="number"]:focus,
.encore-uploader select:focus,
.encore-uploader textarea:focus {
	outline: none;
	border-color: var(--sw-velvet-red);
}

.encore-uploader input[type="checkbox"],
.encore-dialog input[type="checkbox"] {
	accent-color: var(--sw-velvet-red);
	width: 16px;
	height: 16px;
}

/* The "Apply to all" bar and each queued file row already pick up
   --encore-surface/--encore-border/--encore-radius from the retheme
   above; this just gives the bar its own subtle fill so it reads as a
   distinct control strip rather than floating directly on the page bg. */
.encore-batch {
	background-color: var(--sw-bg-elevated);
}

.encore-batch strong { color: var(--sw-text); }

.encore-drop__lead,
.encore-drop__limits { color: var(--sw-text); }

.encore-drop__limits { color: var(--sw-text-muted); }

.encore-url-ingest summary { font-weight: 600; }

.sw-upload-gate {
	max-width: 420px;
	margin: 2rem auto 4rem;
	text-align: center;
	background-color: var(--sw-bg-elevated);
	border-radius: var(--sw-radius-card);
	padding: 2.5rem 2rem;
}

.sw-upload-gate svg { width: 40px; height: 40px; margin-bottom: 1rem; }

.sw-upload-gate p { margin: 0 0 1.5rem; }

.sw-upload-gate .sw-btn { display: block; margin: 0 0 0.75rem; }

.sw-btn--solid { background-color: var(--sw-button-bg); color: var(--sw-button-text); }
.sw-btn--solid:hover { background-color: var(--sw-button-bg-hover); }

.sw-btn--outline {
	background-color: transparent;
	border: 1px solid var(--sw-border);
	color: var(--sw-text);
}
.sw-btn--outline:hover { background-color: var(--sw-bg-elevated); }

.sw-upload-form {
	max-width: 760px;
	margin: 0 auto 4rem;
	background-color: var(--sw-bg-elevated);
	border-radius: var(--sw-radius-card);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sw-upload-label {
	display: block;
	font-size: 0.75rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sw-text-muted);
	margin: 1rem 0 0.4rem;
}

.sw-upload-input,
.sw-upload-textarea {
	width: 100%;
	background-color: var(--sw-bg);
	border: 1px solid var(--sw-border);
	border-radius: 8px;
	color: var(--sw-text);
	padding: 0.65em 0.9em;
	font-size: 0.95rem;
	font-family: inherit;
}

.sw-upload-textarea { resize: vertical; }

.sw-upload-hint {
	margin: 0.4rem 0 0;
	font-size: 0.75rem;
	color: var(--sw-text-muted);
}

.sw-upload-field-group {
	background-color: var(--sw-bg);
	border-radius: var(--sw-radius-card);
	padding: 1.1rem;
	margin-top: 1rem;
}

.sw-pill-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.6rem;
}

@media (max-width: 640px) {
	.sw-pill-grid { grid-template-columns: 1fr; }
}

.sw-pill-toggle {
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius-pill);
	background-color: transparent;
	color: var(--sw-text-muted);
	padding: 0.55em 1em;
	font-size: 0.8rem;
	font-weight: bold;
	letter-spacing: 0.02em;
}

.sw-pill-toggle.is-active,
.sw-pill-toggle[aria-pressed="true"] {
	background-color: var(--sw-velvet-red);
	border-color: transparent;
	color: var(--sw-white);
}

.sw-pill-toggle--nsfw {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: 1rem;
	width: fit-content;
}

.sw-pill-toggle--nsfw svg { width: 16px; height: 16px; }

.sw-pill-toggle--nsfw.is-active {
	background-color: var(--sw-nsfw-violet);
}

.sw-media-mode-toggle {
	display: inline-flex;
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius-pill);
	overflow: hidden;
	margin-bottom: 0.9rem;
}

.sw-media-mode-btn {
	background-color: transparent;
	border: none;
	color: var(--sw-text-muted);
	padding: 0.5em 1.2em;
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.sw-media-mode-btn svg { width: 16px; height: 16px; }

.sw-media-mode-btn.is-active {
	background-color: var(--sw-text);
	color: var(--sw-bg);
}

.sw-media-slots {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.sw-media-slot { position: relative; }

.sw-media-dropzone {
	border: 2px dashed var(--sw-border);
	border-radius: var(--sw-radius-card);
	padding: 2.5rem 1rem;
	text-align: center;
	color: var(--sw-text-muted);
	cursor: pointer;
}

.sw-media-dropzone:hover { border-color: var(--sw-velvet-red); color: var(--sw-text); }

.sw-media-add {
	margin-top: 1rem;
	width: 44px;
	height: 44px;
}

.sw-upload-actions {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.sw-upload-actions .sw-upload-submit { flex: 1; }


/* ===== Profile drawer ===== */
.sw-profile { position: relative; }

.sw-profile__drawer {
	position: absolute;
	right: 0;
	left: auto;
	top: calc(100% + 0.5rem);
	width: 260px;
	max-width: 92vw;
	display: none;
	flex-direction: column;
	gap: 0.1rem;
	padding: 0.5rem;
	background-color: var(--sw-bg-elevated);
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius-card);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
	z-index: 70;
}

.sw-profile__drawer.is-open { display: flex; }

.sw-profile__who {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.4rem 0.5rem 0.65rem;
	margin-bottom: 0.25rem;
	border-bottom: 1px solid var(--sw-border);
}

.sw-profile__who img { width: 40px; height: 40px; border-radius: 9px; }
.sw-profile__who span { display: flex; flex-direction: column; min-width: 0; }
.sw-profile__who strong { color: var(--sw-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-profile__who small { color: var(--sw-text-muted); }

.sw-profile__drawer a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5em 0.6em;
	border-radius: 6px;
	color: var(--sw-text);
}

.sw-profile__drawer a:hover { background-color: var(--sw-bg); color: var(--sw-link); text-decoration: none; }
.sw-profile__drawer a svg { width: 18px; height: 18px; flex-shrink: 0; }
.sw-profile__balance { margin-left: auto; font-size: 0.8rem; color: var(--sw-text-muted); }
.sw-profile__logout { margin-top: 0.25rem; border-top: 1px solid var(--sw-border); border-radius: 0 0 6px 6px; padding-top: 0.7em; }
.sw-profile__hello { margin: 0.25rem 0.5rem 0.5rem; color: var(--sw-text-muted); font-size: 0.9rem; }
.sw-profile__drawer a.sw-profile__cta { justify-content: center; background-color: var(--sw-velvet-red); color: var(--sw-button-text); font-weight: 700; }
.sw-profile__drawer a.sw-profile__cta:hover { color: var(--sw-button-text); filter: brightness(1.1); }

/* ===== Login / register / account / library pages ===== */
.sw-auth { max-width: 420px; margin: 2rem auto; padding: 0 1rem; }
.sw-auth--wide { max-width: 860px; }
.sw-auth__title { margin: 0 0 1rem; font-size: 1.6rem; }
.sw-auth__hint { color: var(--sw-text-muted); font-size: 0.9rem; margin: 0.25rem 0; }

.sw-auth__notice {
	margin: 0 0 1rem;
	padding: 0.7rem 0.9rem;
	border-radius: var(--sw-radius-card);
	background-color: var(--sw-bg-elevated);
	border: 1px solid var(--sw-border);
}
.sw-auth__notice--error { border-color: var(--sw-ribbon-new); color: var(--sw-ribbon-new); }

.sw-auth form p, .sw-auth__form p { margin: 0 0 0.9rem; }
.sw-auth label { display: block; margin-bottom: 0.3rem; font-weight: 600; }
.sw-auth .login-remember label { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }

.sw-auth input[type="text"],
.sw-auth input[type="password"],
.sw-auth input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6rem 0.75rem;
	background-color: var(--sw-bg-elevated);
	border: 1px solid var(--sw-border);
	border-radius: 8px;
	color: var(--sw-text);
	font: inherit;
}
.sw-auth input:focus { outline: none; border-color: var(--sw-velvet-red); }
.sw-auth input[type="checkbox"] { accent-color: var(--sw-velvet-red); }

.sw-auth input[type="submit"],
.sw-auth__submit {
	display: inline-block;
	padding: 0.65rem 1.4rem;
	background-color: var(--sw-velvet-red);
	color: var(--sw-button-text);
	border: none;
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.sw-auth input[type="submit"]:hover, .sw-auth__submit:hover { filter: brightness(1.1); text-decoration: none; color: var(--sw-button-text); }
.sw-auth__links { margin-top: 1rem; color: var(--sw-text-muted); }
.sw-auth__hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

.sw-account__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.sw-account__head img { width: 72px; height: 72px; border-radius: 14px; }
.sw-account__head .sw-auth__title { margin: 0; }

.sw-account__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sw-account__links a {
	display: flex; align-items: center; gap: 0.7rem;
	padding: 0.85rem 1rem;
	background-color: var(--sw-bg-elevated);
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius-card);
	color: var(--sw-text);
}
.sw-account__links a:hover { border-color: var(--sw-velvet-red); text-decoration: none; }
.sw-account__links svg { width: 20px; height: 20px; }
.sw-library__section { margin-top: 1.5rem; }
.sw-library__section h2 { font-size: 1.15rem; margin: 0 0 0.75rem; }

/* ===== "Made with AI" badge — top-right of the thumbnail ===== */
.sw-badge--ai {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 3;
	padding: 0.2em 0.5em;
	border-radius: 5px;
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.3;
	color: #fff;
	background: linear-gradient(135deg, #7c3aed, #2f6fed);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.sw-spotlight .sw-badge--ai { top: 0.75rem; right: 0.75rem; font-size: 0.7rem; }

/* Beat the generic ".sw-card__thumb-link > .sw-badge" (bottom-left type badge) rule. */
.sw-card__thumb-link > .sw-badge.sw-badge--ai {
	top: 0.5rem;
	right: 0.5rem;
	bottom: auto;
	left: auto;
	padding: 0.2em 0.5em;
	line-height: 1.3;
}

/* Duration chips normally sit top-right; drop below the AI badge when both show. */
.sw-has-ai .sw-card__duration { top: 2rem; }
.sw-has-ai .sw-spotlight__duration { top: 2.6rem; }

/* =========================================================
   0.7.0 FIXES (test.starwide.co review)
   ========================================================= */

/* ---- Header media-nav dots: News purple, Video red, Image yellow, Music green.
   Only the dots change; card/type badge colors keep --sw-type-*. ---- */
:root {
	--sw-dot-news: #9b5de5;
	--sw-dot-video: var(--sw-type-video);
	--sw-dot-image: #f5c518;
	--sw-dot-music: #2ecc71;
}
.sw-navlink--news .sw-navlink__dot { background-color: var(--sw-dot-news); }
.sw-navlink--video .sw-navlink__dot { background-color: var(--sw-dot-video); }
.sw-navlink--image .sw-navlink__dot { background-color: var(--sw-dot-image); }
.sw-navlink--music .sw-navlink__dot { background-color: var(--sw-dot-music); }

/* [hidden] must win over .sw-ad-slot { display: flex }. */
.sw-ad-slot[hidden] { display: none; }

/* SVGs inside pill/text buttons had no size, so icon-only buttons collapsed to empty pills. */
.sw-btn svg,
.sw-back-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
a.sw-icon-btn { color: var(--sw-text); text-decoration: none; }
.sw-icon-btn svg { overflow: visible; }

/* ---- "+" create drawer (Snips / Upload media). The plus turns 45deg into an X while open. ---- */
.sw-create { position: relative; }
.sw-create__toggle svg { width: 22px; height: 22px; }
.sw-create__icon { transition: transform 0.22s ease; }
.sw-create.is-open .sw-create__icon { transform: rotate(45deg); }

.sw-create__drawer {
	position: absolute;
	right: 0;
	top: calc(100% + 0.6rem);
	width: 290px;
	max-width: 92vw;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.5rem;
	background-color: var(--sw-bg);
	background-image: linear-gradient(var(--sw-bg-elevated), var(--sw-bg-elevated));
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius-card);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
	z-index: 70;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px) scale(0.98);
	transform-origin: top right;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.sw-create.is-open .sw-create__drawer {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
.sw-create__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem;
	border-radius: 8px;
	color: var(--sw-text);
}
.sw-create__item:hover,
.sw-create__item:focus-visible { background-color: var(--sw-bg-elevated); text-decoration: none; color: var(--sw-text); }
.sw-create__item-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
}
.sw-create__item-icon svg { width: 20px; height: 20px; }
.sw-create__item-icon--snips { background-color: var(--sw-velvet-red); }
.sw-create__item-icon--upload { background-color: var(--sw-brand-accent); }
.sw-create__item-text { display: flex; flex-direction: column; min-width: 0; }
.sw-create__item-text strong { font-size: 0.95rem; }
.sw-create__item-text small { color: var(--sw-text-muted); font-size: 0.78rem; }

/* ---- Side rail: pull-out label drawer (desktop). The tab on the rail's edge
   slides the rail open to show what every icon means. ---- */
.sw-rail-handle { display: none; }

@media (min-width: 1025px) {
	.sw-sidemenu {
		position: relative;
		transition: width 0.22s ease;
	}
	.sw-rail-handle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 1.1rem;
		right: -13px;
		width: 26px;
		height: 26px;
		padding: 0;
		border-radius: 50%;
		border: 1px solid var(--sw-border);
		background-color: var(--sw-bg);
		color: var(--sw-text-muted);
		z-index: 5;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	}
	.sw-rail-handle:hover,
	.sw-rail-handle:focus-visible { color: var(--sw-text); border-color: var(--sw-link); }
	.sw-rail-handle svg { width: 14px; height: 14px; transition: transform 0.22s ease; }

	.sw-sidemenu.is-labeled { width: 210px; }
	.sw-sidemenu.is-labeled .sw-rail-handle svg { transform: rotate(180deg); }
	.sw-sidemenu.is-labeled .sw-rail-link,
	.sw-sidemenu.is-labeled .sw-rail-list--static a {
		flex-direction: row;
		justify-content: flex-start;
		gap: 0.75rem;
		padding: 0.6em 0.75em;
	}
	.sw-sidemenu.is-labeled .sw-rail-text {
		display: inline;
		font-size: 0.9rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.sw-sidemenu.is-labeled .sw-rail-link--primary .sw-rail-text { font-weight: 700; }
}

/* ---- Theater: the player fills the whole canvas, and the item details sit
   below it instead of being covered by it. ---- */
.sw-theater__media {
	aspect-ratio: auto;
	display: block;
	min-height: 0;
}
/* Keep a 16:9 placeholder only while nothing has rendered into the canvas. */
.sw-theater__media:not(:has(.swp, .encore-player, img, video, iframe, audio)) { aspect-ratio: 16 / 9; }

/* The Starwide player and Encore's own player are display:block children of
   the canvas; give them the full width (the player shrank to a ~320px card
   before). The double :not(#_) matches the player's own specificity scheme
   (see the player's assets/css/build.py) so no !important is needed. */
#sw-theater-media > .swp:not(.swp--portrait):not(.swp--mini):not(#_):not(#_),
#sw-theater-media > .encore-player:not(#_):not(#_) {
	width: 100%;
	max-width: none;
}
#sw-theater-media > .swp:not(#_):not(#_),
#sw-theater-media > .encore-player:not(#_):not(#_) { margin: 0; }

/* Landscape video uses the full canvas width but never runs taller than the
   window (minus the header and the action bar), so the action icons stay
   on screen, just below the picture. */
#sw-theater-media .swp--landscape.swp--boxed:not(.swp--fs):not(.swp--mini) .swp-stage:not(#_):not(#_) {
	max-height: calc(100vh - 240px);
	max-height: calc(100dvh - 240px);
	border-radius: 0;
}
#sw-theater-media .swp--portrait:not(.swp--fs):not(.swp--mini):not(#_):not(#_) { margin: 0 auto; padding: 1rem 0; }

/* Landscape action bar (like, comment, share, reblog, save): its own row
   under the video on desktop, spaced out and lower down the screen. */
#sw-theater-media .swp--landscape > .swp-actions:not(#_):not(#_) {
	padding: 0.85rem 1rem 1rem;
	gap: 0.6rem;
	color: #fff;
}
@media (min-width: 1025px) and (orientation: landscape) {
	#sw-theater-media .swp--landscape > .swp-actions:not(#_):not(#_) {
		padding-top: 1.25rem;
		padding-bottom: 1.25rem;
		justify-content: flex-start;
	}
	#sw-theater-media .swp--landscape > .swp-actions .swp-act:not(#_):not(#_) { padding: 9px 16px; }
}

/* The theme's overlay heart duplicates the player's own Like; hide it whenever the player is present. */
.sw-theater__media:has(.swp) .sw-theater__like { display: none; }

/* Item details panel */
.sw-theater-info {
	position: relative;
	z-index: 1;
	margin-top: 1rem;
	padding: 1rem 1.1rem 1.1rem;
	background-color: var(--sw-bg-elevated);
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius-card);
}
.sw-theater-info__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
}
.sw-theater-info__author {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
	color: var(--sw-text);
}
.sw-theater-info__author:hover { text-decoration: none; color: var(--sw-link); }
.sw-theater-info__author img { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
.sw-theater-info__author .sw-card__meta-name { font-weight: 700; font-size: 1rem; }
.sw-theater-info__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.sw-theater-info .sw-content-title {
	margin: 0.9rem 0 0.6rem;
	padding: 0;
	font-size: clamp(1.3rem, 2.4vw, 1.9rem);
	line-height: 1.2;
	overflow-wrap: anywhere;
}
.sw-theater-info__rating {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.sw-theater-info .sw-theater-sidebadges { flex-direction: row; flex-wrap: wrap; padding: 0.75rem 0 0; }

/* Round icon actions: Sponsor ($), Follow, Share, Reblog */
.sw-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	height: 40px;
	min-width: 40px;
	padding: 0 0.85rem;
	border-radius: var(--sw-radius-pill);
	border: none;
	background-color: var(--sw-button-bg);
	color: var(--sw-button-text);
	font: inherit;
	font-weight: 700;
	font-size: 0.85rem;
	transition: background-color 0.15s ease, transform 0.1s ease;
}
.sw-action-btn:hover,
.sw-action-btn:focus-visible { background-color: var(--sw-button-bg-hover); color: var(--sw-button-text); text-decoration: none; }
.sw-action-btn:active { transform: scale(0.96); }
.sw-action-btn svg { width: 19px; height: 19px; flex-shrink: 0; }
.sw-action-btn.is-done { background-color: var(--sw-rating-g); }
/* Labels show beside the icon on roomy screens, icon-only on phones (aria-label + tooltip keep the name). */
@media (max-width: 640px) {
	.sw-action-btn { padding: 0; width: 40px; }
	.sw-action-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.sw-theater-info__actions { width: 100%; }
}

/* Small toast for share/reblog feedback */
.sw-toast {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	transform: translate(-50%, 1rem);
	padding: 0.6rem 1.1rem;
	border-radius: var(--sw-radius-pill);
	background-color: rgba(0, 0, 0, 0.88);
	color: #fff;
	font-size: 0.9rem;
	z-index: 200;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.sw-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---- WooCommerce "My Account": vertical column of icon buttons ---- */
.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: minmax(200px, 250px) 1fr;
	gap: 1.5rem 2rem;
	align-items: start;
}
.woocommerce-account .woocommerce > * { grid-column: 1 / -1; }
.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; }
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content { grid-column: 2; }
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; min-width: 0; }
@media (max-width: 760px) {
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-content { grid-column: 1; }
}
.woocommerce-MyAccount-navigation ul,
.sw-account-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}
.woocommerce-MyAccount-navigation a,
.sw-account-nav a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.7rem 0.95rem;
	border-radius: var(--sw-radius-card);
	border: 1px solid var(--sw-border);
	background-color: var(--sw-bg-elevated);
	color: var(--sw-text);
	font-weight: 600;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation a:focus-visible,
.sw-account-nav a:hover,
.sw-account-nav a:focus-visible { border-color: var(--sw-velvet-red); text-decoration: none; color: var(--sw-text); }
.woocommerce-MyAccount-navigation .is-active a,
.woocommerce-MyAccount-navigation a[aria-current="page"] {
	background-color: var(--sw-velvet-red);
	border-color: var(--sw-velvet-red);
	color: #fff;
}
.sw-account-nav__icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background-color: rgba(255, 255, 255, 0.08);
}
.sw-account-nav__icon svg { width: 18px; height: 18px; }
.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--sw-text-muted); }

/* ---- Account details form ---- */
.woocommerce-EditAccountForm .form-row { margin: 0 0 1rem; }
.woocommerce-EditAccountForm label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.woocommerce-EditAccountForm .optional { color: var(--sw-text-muted); font-weight: 400; font-size: 0.85em; }
.woocommerce-EditAccountForm input[type="text"],
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-EditAccountForm input[type="url"],
.woocommerce-EditAccountForm input[type="tel"],
.woocommerce-EditAccountForm input[type="password"],
.woocommerce-EditAccountForm select {
	width: 100%;
	padding: 0.65em 0.85em;
	border-radius: 8px;
	border: 1px solid var(--sw-border);
	background-color: rgba(255, 255, 255, 0.96);
	color: #10151f;
	font: inherit;
}
.woocommerce-EditAccountForm input[readonly] { background-color: rgba(255, 255, 255, 0.55); cursor: not-allowed; }
.woocommerce-EditAccountForm .sw-field-hint { display: block; margin-top: 0.3rem; color: var(--sw-text-muted); font-size: 0.82rem; }
.sw-form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.woocommerce-page form.woocommerce-EditAccountForm .form-row,
.woocommerce form.woocommerce-EditAccountForm .form-row { float: none; width: auto; }
@media (max-width: 560px) { .sw-form-pair { grid-template-columns: 1fr; } }
.sw-socials__list { display: flex; flex-direction: column; gap: 0.5rem; }
.sw-socials__row { display: flex; gap: 0.5rem; align-items: center; }
.sw-socials__row input { flex: 1; }
.sw-socials__remove,
.sw-socials__add {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--sw-border);
	background-color: var(--sw-bg-elevated);
	color: var(--sw-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.sw-socials__add { background-color: var(--sw-velvet-red); border-color: var(--sw-velvet-red); color: #fff; margin-top: 0.5rem; }
.sw-socials__remove svg,
.sw-socials__add svg { width: 18px; height: 18px; }
.woocommerce-EditAccountForm fieldset { border: 1px solid var(--sw-border); border-radius: var(--sw-radius-card); padding: 0.75rem 1rem 0.25rem; margin: 0 0 1.25rem; }
.woocommerce-EditAccountForm legend { padding: 0 0.4rem; font-weight: 700; }
.woocommerce-EditAccountForm button[type="submit"] {
	background-color: var(--sw-button-bg);
	color: var(--sw-button-text);
	border: none;
	border-radius: var(--sw-radius-pill);
	padding: 0.65em 1.6em;
	font-weight: 700;
}
.woocommerce-EditAccountForm button[type="submit"]:hover { background-color: var(--sw-button-bg-hover); }

/* ---- Library ("Your library" table): thumbnail under each title ---- */
.encore-mine__thumb {
	display: block;
	width: 120px;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	margin-top: 0.45rem;
	border-radius: 6px;
	overflow: hidden;
	background-color: #0d0d0d;
}
.encore-mine__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.encore-mine__thumb--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sw-text-muted);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ---- Dropdowns: options were white text on the browser's white option list
   (theme text is always white). Option lists are black + bold everywhere, and
   the age-rating dropdowns are white boxes with bold black text. ---- */
.sw-site select option,
.sw-site select optgroup {
	color: #000;
	background-color: #fff;
	font-weight: 700;
}
.sw-site select.encore-rating-select,
.sw-site select[aria-label="Rating"],
.sw-site select[name="rating"],
.sw-site .encore-uploader select.encore-rating-select {
	background-color: #fff;
	color: #000;
	font-weight: 700;
	border: 1px solid var(--sw-border);
	border-radius: 6px;
}

/* ---- One type badge per thumbnail: the card's colored corner badge was
   removed (post-card.php); the thumbnail's own type icon picks up the type color. ---- */
.sw-card__thumb-wrap .sw-card__type-icon { color: #fff; }
.sw-card__type-icon--video { background-color: var(--sw-type-video); }
.sw-card__type-icon--image { background-color: var(--sw-type-image); }
.sw-card__type-icon--audio { background-color: var(--sw-type-audio); }
.sw-card__type-icon--post { background-color: var(--sw-type-post); }
.sw-card__thumb-wrap .sw-card__type-icon svg { fill: none; stroke: currentColor; width: 58%; height: 58%; }