/**
 * Frontend article + widgets. Scoped to plugin classes.
 * --wwsf-primary / --wwsf-accent come from the settings palette.
 * Fonts and text color inherit from the theme.
 */
.ww-sf-article,
.ww-sf-stars,
.ww-sf-cta,
.ww-sf-amazon-slider,
.ww-sf-lead-popup,
.ww-sf-disp-notice {
	--wwsf-primary: #5b21b6;
	--wwsf-accent: #5b21b6;
	--wwsf-primary-soft: #f5f3ff;
	--wwsf-accent-soft: #f5f3ff;
	--wwsf-accent-ink: #fff;
	--wwsf-surface: #f7f6fa;
	--wwsf-text: #101828;
	--wwsf-border: #e4e0f0;
	--ww-sf-fe-line: var(--wwsf-border);
	--ww-sf-fe-gap: 16px;
	--ww-sf-fe-gap-lg: 24px;
	--ww-sf-fe-radius: 14px;
	box-sizing: border-box;
	max-width: 46rem;
	color: var(--wwsf-text);
}

.ww-sf-article *,
.ww-sf-stars *,
.ww-sf-cta *,
.ww-sf-amazon-slider *,
.ww-sf-lead-popup * {
	box-sizing: border-box;
}

.ww-sf-article h1,
.ww-sf-article h2,
.ww-sf-article h3 {
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.ww-sf-article h2,
.ww-sf-article h3 {
	border-left: 3px solid var(--wwsf-primary);
	padding-left: 12px;
}

.ww-sf-article a:not(.ww-sf-cta__button) {
	color: var(--wwsf-primary);
}

.ww-sf-article .ww-sf-subhead,
.ww-sf-article .ww-sf-lead,
.ww-sf-article .ww-sf-lead-headline {
	margin: 0 0 var(--ww-sf-fe-gap);
	line-height: 1.6;
}

.ww-sf-article .ww-sf-lead-headline {
	font-weight: 650;
}

.ww-sf-disp-notice {
	margin: 0 0 var(--ww-sf-fe-gap-lg, 24px);
	padding: 14px 16px;
	border: 1px solid var(--ww-sf-fe-line, #e4e0f0);
	border-radius: var(--ww-sf-fe-radius, 14px);
	background: var(--wwsf-accent-soft);
}

.ww-sf-disp-notice p {
	margin: 0;
	line-height: 1.55;
}

.ww-sf-disp-notice strong {
	color: var(--wwsf-accent);
}

.ww-sf-article .ww-sf-proscons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 0 0 var(--ww-sf-fe-gap-lg);
}

.ww-sf-article .ww-sf-glance,
.ww-sf-article .ww-sf-toc,
.ww-sf-article .ww-sf-pros,
.ww-sf-article .ww-sf-cons,
.ww-sf-article .ww-sf-faq {
	margin: 0 0 var(--ww-sf-fe-gap-lg);
	padding: 16px 18px;
	border: 1px solid var(--ww-sf-fe-line);
	border-radius: var(--ww-sf-fe-radius);
	background: var(--wwsf-surface);
}

.ww-sf-article .ww-sf-glance h2,
.ww-sf-article .ww-sf-toc h2,
.ww-sf-article .ww-sf-pros h2,
.ww-sf-article .ww-sf-cons h2,
.ww-sf-article .ww-sf-faq h2 {
	margin: 0 0 12px;
}

.ww-sf-article .ww-sf-glance ul,
.ww-sf-article .ww-sf-toc ol,
.ww-sf-article .ww-sf-pros ul,
.ww-sf-article .ww-sf-cons ul,
.ww-sf-article ul,
.ww-sf-article ol,
.entry-content .ww-sf-article ul,
.entry-content .ww-sf-article ol {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ww-sf-article .ww-sf-glance li,
.ww-sf-article .ww-sf-toc li,
.ww-sf-article .ww-sf-pros li,
.ww-sf-article .ww-sf-cons li,
.ww-sf-article li {
	position: relative;
	display: block;
	margin: 0 0 10px;
	padding: 0 0 0 1.2em;
	line-height: 1.55;
}

.ww-sf-article li:last-child {
	margin-bottom: 0;
}

.ww-sf-article .ww-sf-glance li::before,
.ww-sf-article .ww-sf-pros li::before,
.ww-sf-article ul > li::before {
	content: "";
	position: absolute;
	top: 0.55em;
	left: 0.1em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wwsf-primary);
}

.ww-sf-article .ww-sf-cons li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: 0;
	width: 10px;
	height: 2px;
	border-radius: 1px;
	background: var(--wwsf-primary);
}

.ww-sf-article .ww-sf-toc ol,
.ww-sf-article ol {
	counter-reset: ww-sf-article-ol;
}

.ww-sf-article .ww-sf-toc li,
.ww-sf-article ol > li {
	counter-increment: ww-sf-article-ol;
}

.ww-sf-article .ww-sf-toc li::before,
.ww-sf-article ol > li::before {
	content: counter(ww-sf-article-ol);
	position: absolute;
	top: 0.05em;
	left: 0;
	color: var(--wwsf-primary);
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1.6;
	background: none;
}

.ww-sf-article .ww-sf-toc__box {
	margin: 0;
}

.ww-sf-article .ww-sf-toc__title {
	display: block;
	margin: 0 0 10px;
	cursor: pointer;
	font-weight: 700;
	list-style: none;
}

.ww-sf-article .ww-sf-toc__title::-webkit-details-marker {
	display: none;
}

.ww-sf-article .ww-sf-toc a {
	color: inherit;
	text-decoration: none;
}

.ww-sf-article .ww-sf-toc a.is-current {
	color: var(--wwsf-primary);
	font-weight: 700;
}

.ww-sf-article blockquote,
.entry-content .ww-sf-article blockquote,
.elementor-widget-theme-post-content .ww-sf-article blockquote {
	margin: 0 0 var(--ww-sf-fe-gap-lg);
	padding: 12px 16px 12px 18px;
	border: 0;
	border-left: 3px solid var(--wwsf-primary);
	background: var(--wwsf-primary-soft);
	border-radius: 0 var(--ww-sf-fe-radius) var(--ww-sf-fe-radius) 0;
	font-family: inherit;
	font-style: italic;
	font-size: inherit;
	font-weight: 400;
}

.ww-sf-table-scroll {
	margin: 0 0 var(--ww-sf-fe-gap-lg);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ww-sf-article table,
.entry-content .ww-sf-article table,
.elementor-widget-theme-post-content .ww-sf-article table {
	width: 100%;
	min-width: 28rem;
	margin: 0;
	border: 1px solid var(--ww-sf-fe-line);
	border-collapse: collapse;
}

.ww-sf-article th,
.ww-sf-article td,
.entry-content .ww-sf-article th,
.entry-content .ww-sf-article td {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--ww-sf-fe-line);
	text-align: left;
	vertical-align: top;
}

.ww-sf-article th {
	background: var(--wwsf-primary-soft);
	color: inherit;
	font-weight: 700;
}

.ww-sf-article tbody tr:nth-child(even) td {
	background: var(--wwsf-primary-soft);
}

.ww-sf-article .ww-sf-faq-item {
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--ww-sf-fe-line);
}

.ww-sf-article .ww-sf-faq-item:last-child {
	margin-bottom: 0;
	border-bottom: 0;
}

.ww-sf-article .ww-sf-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	cursor: pointer;
	font-weight: 700;
	list-style: none;
}

.ww-sf-article .ww-sf-faq-item summary::-webkit-details-marker {
	display: none;
}

.ww-sf-article .ww-sf-faq-item summary::after {
	content: "+";
	color: var(--wwsf-primary);
	font-size: 1.2em;
	font-weight: 650;
}

.ww-sf-article .ww-sf-faq-item[open] summary::after {
	content: "–";
}

.ww-sf-article .ww-sf-faq-item p {
	margin: 0 0 12px;
}

.ww-sf-article .ww-sf-byline,
.ww-sf-article .ww-sf-author {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 14px;
	margin: var(--ww-sf-fe-gap-lg) 0;
	padding: 16px;
	border: 1px solid var(--ww-sf-fe-line);
	border-radius: var(--ww-sf-fe-radius);
	background: var(--wwsf-surface);
}

.ww-sf-author__media {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 0 0 64px;
}

.ww-sf-author__avatar {
	position: relative;
	display: block;
	width: 56px;
	height: 56px;
}

.ww-sf-author__photo,
.ww-sf-author__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wwsf-primary-soft);
	color: var(--wwsf-primary);
	font-weight: 700;
	object-fit: cover;
}

.ww-sf-online-dot {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 12px;
	height: 12px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #98a2b3;
}

.ww-sf-online-dot[data-online="1"] {
	background: #067647;
}

.ww-sf-author__body {
	min-width: 0;
	flex: 1 1 auto;
}

.ww-sf-author__name,
.ww-sf-author__role,
.ww-sf-author__bio {
	margin: 0 0 4px;
}

.ww-sf-author__role {
	color: inherit;
	font-size: 0.92em;
}

.ww-sf-online {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.78em;
	font-weight: 650;
}

.ww-sf-author__media .ww-sf-online {
	justify-content: center;
}

.ww-sf-article abbr[data-glossary-id],
.ww-sf-article abbr[title] {
	text-decoration: underline dotted var(--wwsf-primary);
	text-underline-offset: 0.18em;
	cursor: help;
}

.ww-sf-stars {
	margin: var(--ww-sf-fe-gap-lg) 0;
	padding: 16px 18px;
	border: 1px solid var(--ww-sf-fe-line);
	border-radius: var(--ww-sf-fe-radius);
}

.ww-sf-cta {
	margin: var(--ww-sf-fe-gap-lg) 0;
	padding: 20px 22px;
	border: 1px solid var(--ww-sf-fe-line);
	border-radius: var(--ww-sf-fe-radius);
	background: var(--wwsf-accent-soft);
}

.ww-sf-cta__eyebrow {
	margin: 0 0 6px;
	color: var(--wwsf-accent);
	font-size: 0.85em;
	font-weight: 700;
}

.ww-sf-cta__title {
	margin: 0 0 14px;
	font-size: 1.15em;
	font-weight: 700;
}

.ww-sf-cta__button {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	margin: 0;
	padding: 0 16px;
	border-radius: 10px;
	background: var(--wwsf-accent);
	color: var(--wwsf-accent-ink);
	font-weight: 650;
}

.ww-sf-amazon-slider {
	display: flex;
	gap: var(--ww-sf-fe-gap);
	margin: var(--ww-sf-fe-gap-lg) 0;
	padding-bottom: 8px;
	overflow-x: auto;
}

.ww-sf-amazon-offer {
	flex: 0 0 220px;
	padding: 14px;
	border: 1px solid var(--ww-sf-fe-line);
	border-radius: var(--ww-sf-fe-radius);
	background: var(--wwsf-surface);
}

.ww-sf-amazon-name {
	display: block;
	margin: 0 0 8px;
	font-weight: 700;
}

.ww-sf-amazon-price {
	color: var(--wwsf-accent);
	font-weight: 650;
}

.ww-sf-amazon-health {
	display: block;
	margin: 0 0 6px;
	color: var(--ww-sf-fe-muted, #5c5770);
	font-size: 13px;
}

.ww-sf-amazon-hint {
	flex: 1 0 100%;
	margin: 8px 0 0;
	color: var(--ww-sf-fe-muted, #5c5770);
	font-size: 13px;
}

.ww-sf-lead-popup {
	margin: var(--ww-sf-fe-gap-lg) 0;
	padding: 14px 16px;
	border: 1px solid var(--ww-sf-fe-line);
	border-radius: var(--ww-sf-fe-radius);
}

@media (max-width: 720px) {
	.ww-sf-article,
	.ww-sf-stars,
	.ww-sf-cta,
	.ww-sf-amazon-slider,
	.ww-sf-lead-popup {
		max-width: 100%;
	}

	.ww-sf-article .ww-sf-proscons {
		grid-template-columns: 1fr;
	}

	.ww-sf-article .ww-sf-glance,
	.ww-sf-article .ww-sf-toc,
	.ww-sf-article .ww-sf-pros,
	.ww-sf-article .ww-sf-cons,
	.ww-sf-article .ww-sf-faq,
	.ww-sf-cta,
	.ww-sf-stars {
		padding: 14px;
	}

	.ww-sf-amazon-offer {
		flex-basis: 170px;
	}
}