/* SW Topic Finder. Spiritual Way palette, centred layouts. */
.swtf {
	--swtf-paper: #FAF6F1;
	--swtf-sky: #D7E6E6;
	--swtf-blush: #F1D9CE;
	--swtf-sage: #C7CDB0;
	--swtf-gold: #D9A664;
	--swtf-ink: #423244;
	color: var(--swtf-ink);
	font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	line-height: 1.6;
}
.swtf *, .swtf *::before, .swtf *::after { box-sizing: border-box; }

.swtf-page { max-width: 820px; margin: 0 auto; padding: 24px 16px 40px; }
.swtf-placeholder {
	padding: 14px;
	border: 1px dashed rgba(66, 50, 68, .35);
	border-radius: 10px;
	font-size: .9rem;
	font-style: italic;
	text-align: center;
	opacity: .8;
}
.swtf-empty { text-align: center; font-style: italic; opacity: .8; }

/* ---------- "I'm feeling..." ---------- */
.swtf-finder { text-align: center; }
.swtf-finder-heading,
.swtf-title {
	margin: 0 0 .4em;
	font-family: "Newsreader", Georgia, "Times New Roman", serif;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
}
.swtf-title-prefix { font-style: italic; opacity: .8; }
.swtf-finder-text,
.swtf-intro { max-width: 46ch; margin: 0 auto 1.4em; font-size: 1.08rem; text-align: center; }
.swtf-feelings {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.swtf-feelings li { margin: 0; }
.swtf-chip {
	display: inline-block;
	min-height: 46px;
	padding: .65em 1.4em;
	border: 2px solid var(--swtf-gold);
	border-radius: 999px;
	background: var(--swtf-paper);
	color: var(--swtf-ink);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.swtf-chip:hover,
.swtf-chip:focus-visible,
.swtf-chip.is-current { background: var(--swtf-gold); color: var(--swtf-ink); }
.swtf-chip:hover { transform: translateY(-1px); }
.swtf-chip:focus-visible { outline: 2px solid var(--swtf-ink); outline-offset: 3px; }
.swtf-page .swtf-finder { margin-top: 44px; padding-top: 32px; border-top: 1px solid rgba(66, 50, 68, .14); }
.swtf-page .swtf-finder-heading { font-size: 1.5rem; }

/* ---------- results ---------- */
/* Kept to a comfortable reading width and centred, however wide the container is. */
.swtf-results { width: 100%; max-width: 900px; margin-left: auto; margin-right: auto; }
.swtf-finder { max-width: 900px; margin-left: auto; margin-right: auto; }
.swtf-section { margin: 0 0 40px; }
.swtf-section-heading {
	margin: 0 0 1em;
	font-family: "Newsreader", Georgia, "Times New Roman", serif;
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.25;
	text-align: center;
}
.swtf-section-heading::after {
	content: "";
	display: block;
	width: 44px;
	height: 2px;
	margin: 12px auto 0;
	background: var(--swtf-gold);
}

/* Verses */
.swtf-verses { display: grid; gap: 28px; }
.swtf-verse { margin: 0; padding: 26px 22px; background: var(--swtf-paper); border-radius: 18px; text-align: center; }
.swtf-verse-text {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	quotes: none;
	font-family: "Newsreader", Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 1.3rem;
	line-height: 1.6;
	color: var(--swtf-ink);
}
.swtf-verse-text::before,
.swtf-verse-text::after { content: none; }
.swtf-verse-text p { margin: 0; font: inherit; color: inherit; }
.swtf-verse-ref {
	display: block;
	margin-top: 14px;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* Quote images: every frame is the SAME shape (the most common one among the pictures on
   show), the picture is shown whole inside it, and a soft blur of the same picture fills any
   spare space, so rows line up and nothing is ever cropped (the quote text is in the image). */
/* Centred row that wraps: one image sits in the middle, three fill the row. */
.swtf-quotes { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 16px; }
.swtf-quote { display: block; flex: 0 0 calc((100% - 32px) / 3); max-width: 280px; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(66, 50, 68, .12); transition: transform .2s ease; }
.swtf-quote:hover { transform: translateY(-2px); }
.swtf-quote:focus-visible { outline: 2px solid var(--swtf-ink); outline-offset: 3px; }
.swtf-frame { position: relative; display: block; width: 100%; line-height: 0; background: var(--swtf-paper); overflow: hidden; isolation: isolate; border-radius: 14px; }
.swtf-frame::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	border-radius: inherit;
	/* No CSS filter on purpose: the backdrop is a tiny pre-made copy of the picture, stretched, which is
	   already soft. (A blur filter inside a rounded, clipped box makes Safari on iPad lose the rounded
	   corners and shadow.) A light darkening layer sits on it. */
	background: linear-gradient(rgba(24, 18, 30, .25), rgba(24, 18, 30, .25)), var(--swtf-bg, none) center / cover no-repeat;
}
.swtf-frame::before { content: ""; display: block; padding-top: var(--swtf-ratio, 100%); }
.swtf-frame > img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	object-fit: contain;
	border-radius: inherit;
}

/* Lessons */
.swtf-lesson { margin: 0 0 20px; padding: 24px 22px; background: var(--swtf-sky); border-radius: 18px; }
.swtf-lesson-title,
.swtf-episode-title { margin: 0 0 .5em; font-family: "Newsreader", Georgia, "Times New Roman", serif; font-weight: 500; font-size: 1.3rem; line-height: 1.3; text-align: center; }
.swtf-lesson-short { max-width: 62ch; margin: 0 auto .8em; text-align: center; }
.swtf-episode-text { max-width: 62ch; margin-left: auto; margin-right: auto; }
.swtf-lesson-more summary { cursor: pointer; font-weight: 600; text-align: center; }
.swtf-lesson-body { margin-top: 1em; }
.swtf-lesson-body > :first-child { margin-top: 0; }
.swtf-lesson-body > :last-child { margin-bottom: 0; }

/* Episodes */
.swtf-episodes { display: grid; gap: 16px; }
.swtf-episode { padding: 22px; background: var(--swtf-paper); border-radius: 18px; border-top: 4px solid var(--swtf-gold); text-align: center; }
.swtf-episode-title a { color: inherit; text-decoration: none; }
.swtf-episode-title a:hover { text-decoration: underline; text-decoration-color: var(--swtf-gold); }
.swtf-episode-meta { margin: 0 0 .6em; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; opacity: .75; }
.swtf-episode-text { margin: 0 0 1em; }
.swtf-episode-action { margin: 0; }
/* Buttons: the site's gold pill with cream text, as on the podcast banner's "Listen Now". Used for
   "Listen to this episode" and the front-end manager. The ghost version is the outlined one for
   secondary actions. Selectors carry the .swtf wrapper so a theme's own button and link hover
   styles can't take over. */
.swtf {
	--swtf-btn-bg: #DDA34E;
	--swtf-btn-bg-hover: #D49A40;
	--swtf-btn-ink: #FFFDF9;
}
.swtf .swtf-button,
.swtf .swtf-button:hover,
.swtf .swtf-button:focus {
	display: inline-block;
	box-sizing: border-box;
	min-height: 44px;
	padding: .62em 1.8em;
	border: 2px solid var(--swtf-btn-bg);
	border-radius: 999px;
	background: var(--swtf-btn-bg);
	color: var(--swtf-btn-ink);
	font: inherit;
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(66, 50, 68, .12);
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.swtf .swtf-button:hover,
.swtf .swtf-button:focus-visible { background: var(--swtf-btn-bg-hover); border-color: var(--swtf-btn-bg-hover); color: var(--swtf-btn-ink); }
.swtf .swtf-button:focus-visible { outline: 2px solid var(--swtf-ink); outline-offset: 3px; }
.swtf .swtf-button--ghost,
.swtf .swtf-button--ghost:focus { background: transparent; color: var(--swtf-ink); box-shadow: none; }
.swtf .swtf-button--ghost:hover,
.swtf .swtf-button--ghost:focus-visible { background: var(--swtf-btn-bg); border-color: var(--swtf-btn-bg); color: var(--swtf-btn-ink); }
.swtf .swtf-button[disabled] { opacity: .55; cursor: default; }

.swtf-note { max-width: 52ch; margin: 34px auto 0; font-size: .9rem; text-align: center; opacity: .8; }

@media (max-width: 700px) {
	.swtf-quotes { gap: 12px; }
	.swtf-quote { flex-basis: calc((100% - 12px) / 2); }
	.swtf-verse-text { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
	.swtf-chip, .swtf-quote, .swtf-button { transition: none; }
	.swtf-chip:hover, .swtf-quote:hover { transform: none; }
}

/* ---------- front-end manager ---------- */
.swtf-manager { max-width: 860px; margin: 0 auto; }
.swtf-manager-heading { margin: 0 0 1em; font-family: "Newsreader", Georgia, "Times New Roman", serif; font-weight: 500; text-align: center; }
.swtf-manager-signin { text-align: center; }
.swtf-manager-status { min-height: 1.4em; margin: 10px 0; text-align: center; font-weight: 600; }
.swtf-m-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 0 0 18px; }
.swtf-m-input {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid rgba(66, 50, 68, .3);
	border-radius: 10px;
	background: #fff;
	color: var(--swtf-ink);
	font: inherit;
	line-height: 1.5;
}
.swtf-m-bar .swtf-m-input { width: auto; min-width: 220px; }
.swtf-m-input:focus-visible { outline: 2px solid var(--swtf-gold); outline-offset: 2px; }
textarea.swtf-m-input { resize: vertical; }
.swtf-m-field { margin: 0 0 18px; padding: 18px; background: var(--swtf-paper); border-radius: 16px; border-top: 4px solid var(--swtf-gold); }
.swtf-m-label { display: block; margin: 0 0 8px; font-weight: 600; text-align: center; }
.swtf-m-hint { margin: 8px 0 0; font-size: .88rem; text-align: center; opacity: .8; }
.swtf-m-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; }
.swtf-m-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.swtf-m-check input { width: 20px; height: 20px; margin: 0; }
.swtf-m-kind-title { margin: 0 0 4px; font-family: "Newsreader", Georgia, "Times New Roman", serif; font-weight: 500; font-size: 1.25rem; text-align: center; }
.swtf-m-items { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.swtf-m-item { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 12px; background: #fff; border: 1px solid rgba(66, 50, 68, .16); border-radius: 12px; }
.swtf-m-item.is-pinned { border-color: var(--swtf-gold); box-shadow: inset 4px 0 0 var(--swtf-gold); }
.swtf-m-item.is-hidden { opacity: .55; }
.swtf-m-item.is-below { background: transparent; border-style: dashed; }
.swtf-m-thumb { flex: none; width: 52px; height: 52px; border-radius: 8px; object-fit: cover; }
.swtf-m-text { flex: 1 1 auto; min-width: 0; }
.swtf-m-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swtf-m-tag { display: block; font-size: .8rem; opacity: .75; }
.swtf-m-actions { flex: none; display: flex; gap: 6px; }
.swtf-m-btn {
	min-height: 38px;
	padding: 6px 12px;
	border: 1px solid rgba(66, 50, 68, .3);
	border-radius: 999px;
	background: #fff;
	color: var(--swtf-ink);
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
}
.swtf-m-btn:hover, .swtf-m-btn:focus-visible { border-color: var(--swtf-ink); }
.swtf-m-btn.is-on { background: var(--swtf-gold); border-color: var(--swtf-gold); }
.swtf-m-search { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.swtf-m-search .swtf-m-input { flex: 1 1 200px; width: auto; }
.swtf-m-actions-main { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px 0 0; }
.swtf-m-save-note { margin: 14px auto 0; max-width: 520px; text-align: center; font-weight: 600; }
.swtf-m-save-note:empty { display: none; }
.swtf-m-save-note.is-ok, .swtf-m-save-note.is-error, .swtf-m-save-note.is-busy { padding: 12px 16px; border-radius: 12px; }
.swtf-m-save-note.is-busy { background: var(--swtf-sky); }
.swtf-m-save-note.is-ok { background: #E4EBD6; color: #3F5A2C; }
.swtf-m-save-note.is-error { background: #F6DEDA; color: #8A2E2E; }
.swtf-m-link { border: 0; background: none; padding: 4px 8px; color: var(--swtf-ink); font: inherit; font-size: .9rem; text-decoration: underline; cursor: pointer; }
@media (max-width: 600px) {
	.swtf-m-item { flex-wrap: wrap; }
	.swtf-m-actions { width: 100%; justify-content: flex-end; }
}

/* ---------- quote image shown large ----------
   Controls match the quote gallery's own large view: round buttons, a cross to close,
   arrows either side. !important because theme button styles otherwise take over. */
.swtf-quote { cursor: zoom-in; }
html.swtf-lightbox-lock { overflow: hidden; }
.swtf-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100050;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 64px 16px 24px;
	background: rgba(38, 28, 40, .92);
}
.swtf-lightbox.is-open { display: flex; }
.swtf-lightbox-inner { position: relative; display: inline-block; max-width: min(760px, calc(100vw - 150px)); line-height: 0; }
.swtf-lightbox-inner img { display: block; max-width: 100%; max-height: calc(100vh - 110px); width: auto; height: auto; border-radius: 10px; }
.swtf-lightbox-round {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	min-height: 0 !important;
	padding: 0 0 3px !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .14) !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 28px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	text-transform: none !important;
	cursor: pointer;
}
.swtf-lightbox-round:hover,
.swtf-lightbox-round:focus-visible { background: rgba(255, 255, 255, .3) !important; }
.swtf-lightbox-round:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.swtf-lightbox-close { top: -54px; right: 0; }
.swtf-lightbox-prev { left: -60px; top: 50%; transform: translateY(-50%); }
.swtf-lightbox-next { right: -60px; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) {
	.swtf-lightbox-inner { max-width: 100%; }
	.swtf-lightbox-prev { left: 8px; }
	.swtf-lightbox-next { right: 8px; }
}

/* ---------- Banner: tells visitors the Topic Finder exists ---------- */
/* No filters or blurs anywhere in here on purpose: Safari on iPad loses rounded corners and shadows
   when they meet a filter. Colours that Elementor controls change are set through variables
   (--swtf-promo-button-*) so the controls win without any !important fights with the theme. */
.swtf-promo {
	--swtf-accent: var(--swtf-gold);
	--swtf-accent-rgb: 217, 166, 100;
	/* The site's button: a filled gold pill with cream text, as on the podcast banner's "Listen Now".
	   (Measured from that button: #DDA34E with #FFFDF9 text.) */
	--swtf-btn-bg: #DDA34E;
	--swtf-btn-bg-hover: #D49A40;
	--swtf-btn-ink: #FFFDF9;
	--swtf-btn-rgb: 221, 163, 78;
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	max-width: 640px;
	margin: 0 auto;
	padding: 18px 22px;
	border-radius: 18px;
	background: var(--swtf-paper);
	box-shadow: 0 8px 26px rgba(66, 50, 68, .14), 0 0 0 1px rgba(66, 50, 68, .06);
	text-align: left;
	transition: transform .2s ease, box-shadow .2s ease;
}
.swtf-accent-sage { --swtf-accent: var(--swtf-sage); --swtf-accent-rgb: 199, 205, 176; }
.swtf-accent-rose { --swtf-accent: var(--swtf-blush); --swtf-accent-rgb: 241, 217, 206; }
.swtf-accent-sky  { --swtf-accent: var(--swtf-sky);   --swtf-accent-rgb: 215, 230, 230; }
/* The pale accents are too light for cream text, so their buttons keep dark text. */
.swtf-accent-sage { --swtf-btn-bg: var(--swtf-sage);  --swtf-btn-bg-hover: #B9C0A0; --swtf-btn-ink: var(--swtf-ink); --swtf-btn-rgb: 199, 205, 176; }
.swtf-accent-rose { --swtf-btn-bg: var(--swtf-blush); --swtf-btn-bg-hover: #E8C9BB; --swtf-btn-ink: var(--swtf-ink); --swtf-btn-rgb: 241, 217, 206; }
.swtf-accent-sky  { --swtf-btn-bg: var(--swtf-sky);   --swtf-btn-bg-hover: #C5DADA; --swtf-btn-ink: var(--swtf-ink); --swtf-btn-rgb: 215, 230, 230; }

/* The whole banner as one link (no button, or the slim style). !important only on the link's
   own colour and underline, which themes and Elementor kits like to restyle on hover. */
a.swtf-promo,
a.swtf-promo:hover,
a.swtf-promo:focus { color: var(--swtf-ink) !important; text-decoration: none !important; cursor: pointer; }
a.swtf-promo:focus-visible { outline: 2px solid var(--swtf-ink); outline-offset: 3px; }

.swtf-promo-img {
	display: block;
	flex: 0 0 auto;
	width: 110px;
	max-width: 100%;
	height: auto;
	border-radius: 14px;
}
.swtf-promo-img--square { aspect-ratio: 1 / 1; object-fit: cover; }
.swtf-promo-img--circle { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; }

.swtf-promo-text { flex: 1 1 auto; min-width: 0; }
.swtf-promo-title {
	display: block;
	margin: 0 0 .25em;
	color: var(--swtf-ink);
	font-family: "Newsreader", Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 1.2;
}
.swtf-promo-desc {
	margin: 0 0 .95em;
	color: var(--swtf-ink);
	font-size: .98rem;
	line-height: 1.5;
	opacity: .9;
}
.swtf-promo-title:last-child,
.swtf-promo-desc:last-child { margin-bottom: 0; }

.swtf-promo .swtf-promo-button,
.swtf-promo .swtf-promo-button:hover,
.swtf-promo .swtf-promo-button:focus {
	display: inline-block;
	box-sizing: border-box;
	min-height: 44px;
	padding: .62em 1.8em;
	border: 0;
	border-radius: 999px;
	background-color: var(--swtf-promo-button-bg, var(--swtf-btn-bg));
	color: var(--swtf-promo-button-color, var(--swtf-btn-ink));
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.3;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(66, 50, 68, .12);
}
.swtf-promo .swtf-promo-button:hover { background-color: var(--swtf-promo-button-bg, var(--swtf-btn-bg-hover)); }
.swtf-promo .swtf-promo-button:focus-visible { outline: 2px solid var(--swtf-ink); outline-offset: 3px; }
/* "Whole banner is clickable": the button's link is stretched over the whole card (still one link). */
.swtf-promo.is-clickable .swtf-promo-button::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 18px;
}
.swtf-promo.is-clickable { cursor: pointer; }

/* Stacked: picture on top, everything centred. */
.swtf-promo--stacked {
	flex-direction: column;
	gap: 14px;
	max-width: 380px;
	padding: 22px 22px 26px;
	text-align: center;
}
.swtf-promo--stacked .swtf-promo-img { width: 100%; }
/* A tall picture that keeps its own shape must not make the card enormous: show it whole, capped in height. */
.swtf-promo--stacked .swtf-promo-img--natural { width: auto; max-width: 100%; max-height: 280px; margin: 0 auto; object-fit: contain; }

/* Slim: a single pill. */
.swtf-promo--slim {
	gap: 12px;
	max-width: 520px;
	padding: 8px 10px 8px 14px;
	border-radius: 999px;
}
.swtf-promo--slim .swtf-promo-img { width: 44px; height: 44px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; }
.swtf-promo--slim .swtf-promo-title { margin: 0; font-size: 1.15rem; }
.swtf-promo--slim > .swtf-badge { top: -9px; right: 52px; }
.swtf-promo-arrow {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--swtf-promo-button-bg, var(--swtf-btn-bg));
	color: var(--swtf-promo-button-color, var(--swtf-btn-ink));
	font-size: 1.4rem;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(66, 50, 68, .12);
}

@media (hover: hover) {
	a.swtf-promo:hover,
	.swtf-promo.is-clickable:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 32px rgba(66, 50, 68, .2), 0 0 0 1px rgba(66, 50, 68, .06);
	}
}

/* Gentle glow to draw the eye: a soft pulse around the button (or the arrow, in the slim style). */
@keyframes swtf-glow {
	0%, 100% { box-shadow: 0 2px 8px rgba(66, 50, 68, .12), 0 0 0 0 rgba(var(--swtf-btn-rgb), .65); }
	50%      { box-shadow: 0 2px 8px rgba(66, 50, 68, .12), 0 0 0 11px rgba(var(--swtf-btn-rgb), 0); }
}
.swtf-promo.has-glow .swtf-promo-button,
.swtf-promo.has-glow .swtf-promo-arrow { animation: swtf-glow 2.8s ease-in-out infinite; }

@media (max-width: 520px) {
	.swtf-promo--card.has-image { flex-direction: column; text-align: center; }
	.swtf-promo--card.has-image .swtf-promo-img { margin: 0 auto; }
	.swtf-promo-title { font-size: 1.28rem; }
}
@media (prefers-reduced-motion: reduce) {
	.swtf-promo { transition: none; }
	.swtf-promo.has-glow .swtf-promo-button,
	.swtf-promo.has-glow .swtf-promo-arrow { animation: none; }
	a.swtf-promo:hover, .swtf-promo.is-clickable:hover { transform: none; }
}

/* ---------- Badges ("New", "Popular", "Latest"...) ----------
   One look for every promo-type button. Colour is chosen per badge; the words come from
   SWTF_Badge. Explicit colours so a theme's link styles (the badge sits inside links) can't touch it. */
.swtf-badge {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--swtf-ink);
	color: #fff;
	font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: .72rem;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.5;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 3px 8px rgba(66, 50, 68, .25);
}
.swtf-badge--accent { background: var(--swtf-accent, var(--swtf-gold)); color: var(--swtf-ink); box-shadow: 0 0 0 1px rgba(66, 50, 68, .18), 0 3px 8px rgba(66, 50, 68, .2); }
.swtf-badge--gold   { background: var(--swtf-gold);  color: var(--swtf-ink); box-shadow: 0 0 0 1px rgba(66, 50, 68, .18), 0 3px 8px rgba(66, 50, 68, .2); }
.swtf-badge--rose   { background: var(--swtf-blush); color: var(--swtf-ink); box-shadow: 0 0 0 1px rgba(66, 50, 68, .18), 0 3px 8px rgba(66, 50, 68, .2); }
.swtf-badge--sage   { background: var(--swtf-sage);  color: var(--swtf-ink); box-shadow: 0 0 0 1px rgba(66, 50, 68, .18), 0 3px 8px rgba(66, 50, 68, .2); }
.swtf-badge--sky    { background: var(--swtf-sky);   color: var(--swtf-ink); box-shadow: 0 0 0 1px rgba(66, 50, 68, .18), 0 3px 8px rgba(66, 50, 68, .2); }

/* On the banner: a tag sitting on the top corner. */
.swtf-promo > .swtf-badge { position: absolute; top: -11px; right: 22px; z-index: 2; }

/* On a feeling button: a smaller tag on its corner. */
.swtf-chip { position: relative; }
.swtf-badge--chip {
	position: absolute;
	top: -11px;
	right: -6px;
	padding: 2px 9px;
	font-size: .62rem;
	letter-spacing: .08em;
	pointer-events: none;
}
.swtf-feelings { padding-top: 10px; }

/* Feeling buttons keep their own colour and no underline against a theme's link styles (a pink hover colour
   was winning). Higher specificity, deliberately no !important, so the widget's own colour controls still win. */
.swtf .swtf-chip,
.swtf .swtf-chip:hover,
.swtf .swtf-chip:focus { color: var(--swtf-ink); text-decoration: none; }