/*
 * YourShoppy SEO -- AEO storefront styles.
 *
 * YSS-VERSION-MARKER: 1.72.4 (Premium navy-banner style + polished card accordion -- default for new installs)
 *
 * Conservative defaults; theme overrides win. Tested against WoodMart,
 * Storefront, Astra, GeneratePress.
 */

/* ============================================================
   Quick-answer callout (TL;DR + snippet)
   ============================================================ */
.yss-aeo-direct-answer {
	position: relative;
	margin: 16px 0 22px;
	padding: 14px 16px 14px 20px;
	background: linear-gradient(135deg, #f0f7ff 0%, #fdf9ff 100%);
	border: 1px solid #d4e3f5;
	border-left: 4px solid #2271b1;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
	font-size: 0.97em;
	line-height: 1.55;
}
.yss-aeo-direct-answer__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	padding: 0 0 8px;
	border-bottom: 1px dashed rgba(34, 113, 177, 0.25);
}
.yss-aeo-direct-answer__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: #2271b1;
	color: #fff;
	border-radius: 50%;
	font-size: 12px;
	flex-shrink: 0;
}
.yss-aeo-direct-answer__title {
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #1d4ed8;
}
.yss-aeo-direct-answer__body p {
	margin: 0 0 6px;
}
.yss-aeo-direct-answer__body p:last-child {
	margin-bottom: 0;
}
.yss-aeo-direct-answer .yss-aeo-tldr {
	font-weight: 500;
	color: #1f2937;
}
.yss-aeo-direct-answer .yss-aeo-snippet {
	color: #4b5563;
}
.yss-aeo-direct-answer .yss-aeo-label {
	display: inline-block;
	margin-right: 6px;
	padding: 2px 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: #2271b1;
	color: #fff;
	border-radius: 10px;
	vertical-align: middle;
	line-height: 1.4;
}

/* ============================================================
   FAQ accordion
   ----------
   v1.50.2: the styling block below is SCOPED to .yss-aeo-faq--card. Sites
   that pick "theme" mode in Settings get clean markup with theme-native
   classes (.wd-accordion-*) and our custom rules don\'t apply -- the
   active theme\'s accordion CSS takes over instead. Universal sectioning
   rules (margin / title) stay un-scoped.
   ============================================================ */
.yss-aeo-faq {
	margin: 36px 0;
	padding: 0;
}
.yss-aeo-faq__title {
	margin: 0 0 14px;
	font-size: 1.5em;
	font-weight: 700;
	color: #1f2937;
}

.yss-aeo-faq--card .yss-aeo-faq-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.yss-aeo-faq--card .yss-aeo-faq-item {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
	transition: box-shadow 0.18s ease, border-color 0.18s ease;
	overflow: hidden;
}
.yss-aeo-faq--card .yss-aeo-faq-item:hover {
	border-color: #c7d2fe;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.yss-aeo-faq--card .yss-aeo-faq-item[open] {
	border-color: #93c5fd;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.10);
}

.yss-aeo-faq--card .yss-aeo-faq-item__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	cursor: pointer;
	padding: 14px 18px;
	font-size: 1.02em;
	font-weight: 600;
	color: #111827;
	list-style: none;
	user-select: none;
	transition: background 0.15s ease;
}
.yss-aeo-faq--card .yss-aeo-faq-item__summary:hover {
	background: #f9fafb;
}
.yss-aeo-faq--card .yss-aeo-faq-item[open] > .yss-aeo-faq-item__summary {
	background: #eff6ff;
	color: #1d4ed8;
}
/* Hide the native disclosure triangle in Chrome / Safari / Firefox. */
.yss-aeo-faq--card .yss-aeo-faq-item__summary::-webkit-details-marker { display: none; }
.yss-aeo-faq--card .yss-aeo-faq-item__summary::marker { content: ""; }

.yss-aeo-faq--card .yss-aeo-faq-item__q {
	flex: 1;
	line-height: 1.4;
}

.yss-aeo-faq--card .yss-aeo-faq-item__chevron {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	position: relative;
	transition: transform 0.2s ease;
}
.yss-aeo-faq--card .yss-aeo-faq-item__chevron::before,
.yss-aeo-faq--card .yss-aeo-faq-item__chevron::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 9px;
	height: 2px;
	background: #2271b1;
	border-radius: 1px;
	transition: transform 0.2s ease;
}
.yss-aeo-faq--card .yss-aeo-faq-item__chevron::before {
	left: 1px;
	transform: translateY(-50%) rotate(45deg);
}
.yss-aeo-faq--card .yss-aeo-faq-item__chevron::after {
	right: 1px;
	transform: translateY(-50%) rotate(-45deg);
}
.yss-aeo-faq--card .yss-aeo-faq-item[open] > .yss-aeo-faq-item__summary .yss-aeo-faq-item__chevron::before {
	transform: translateY(-50%) rotate(-45deg);
}
.yss-aeo-faq--card .yss-aeo-faq-item[open] > .yss-aeo-faq-item__summary .yss-aeo-faq-item__chevron::after {
	transform: translateY(-50%) rotate(45deg);
}

/* v1.50.2: minimal helpers for theme mode -- only what's strictly needed to
   make native <details> behave properly inside WoodMart's accordion markup
   without fighting its styling. */
.yss-aeo-faq--theme .yss-aeo-faq-item__summary {
	cursor: pointer;
	list-style: none;
}
.yss-aeo-faq--theme .yss-aeo-faq-item__summary::-webkit-details-marker { display: none; }
.yss-aeo-faq--theme .yss-aeo-faq-item__summary::marker { content: ""; }

.yss-aeo-faq--card .yss-aeo-faq-answer {
	padding: 0 18px 16px;
	color: #374151;
	line-height: 1.65;
	font-size: 0.97em;
	animation: yssAeoFadeIn 0.22s ease;
}
.yss-aeo-faq-answer p {
	margin: 0 0 8px;
}
.yss-aeo-faq-answer p:last-child {
	margin-bottom: 0;
}

@keyframes yssAeoFadeIn {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   HowTo accordion section (v1.63.0 -- was numbered-list in v1.56.0)
   ============================================================ */
.yss-aeo-howto {
	margin: 36px 0;
	padding: 0;
}
.yss-aeo-howto__title {
	margin: 0 0 6px;
	font-size: 1.5em;
	font-weight: 700;
	color: #1f2937;
}
.yss-aeo-howto__meta {
	margin: 0 0 16px;
	font-size: 13px;
	color: #6b7280;
}
.yss-aeo-howto__meta-label {
	font-weight: 600;
	color: #374151;
	margin-right: 4px;
}
.yss-aeo-howto-list {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.yss-aeo-howto-item__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding: 0 6px;
	background: linear-gradient(135deg, #2271b1 0%, #1d4ed8 100%);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	border-radius: 13px;
	flex-shrink: 0;
	margin-right: 12px;
}
/* HowTo card variant -- inherits the FAQ card visuals + adds gap between items. */
.yss-aeo-howto--card .yss-aeo-howto-list {
	gap: 8px;
}
.yss-aeo-howto--card .yss-aeo-howto-item {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
	overflow: hidden;
}
.yss-aeo-howto--card .yss-aeo-howto-item__summary {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	padding: 14px 18px;
	font-size: 1.02em;
	font-weight: 600;
	color: #111827;
	list-style: none;
	user-select: none;
	transition: background 0.15s ease;
}
.yss-aeo-howto--card .yss-aeo-howto-item__summary:hover {
	background: #f9fafb;
}
.yss-aeo-howto--card .yss-aeo-howto-item[open] > .yss-aeo-howto-item__summary {
	background: #eff6ff;
}
.yss-aeo-howto--card .yss-aeo-howto-item__summary::-webkit-details-marker { display: none; }
.yss-aeo-howto--card .yss-aeo-howto-item__summary::marker { content: ""; }
.yss-aeo-howto--card .yss-aeo-howto-item__q {
	flex: 1;
	line-height: 1.4;
}
.yss-aeo-howto--card .yss-aeo-howto-item__chevron {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	position: relative;
	transition: transform 0.2s ease;
}
.yss-aeo-howto--card .yss-aeo-howto-item__chevron::before,
.yss-aeo-howto--card .yss-aeo-howto-item__chevron::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 9px;
	height: 2px;
	background: #2271b1;
	border-radius: 1px;
	transition: transform 0.2s ease;
}
.yss-aeo-howto--card .yss-aeo-howto-item__chevron::before { left: 1px;  transform: translateY(-50%) rotate( 45deg); }
.yss-aeo-howto--card .yss-aeo-howto-item__chevron::after  { right: 1px; transform: translateY(-50%) rotate(-45deg); }
.yss-aeo-howto--card .yss-aeo-howto-item[open] .yss-aeo-howto-item__chevron::before { transform: translateY(-50%) rotate(-45deg); }
.yss-aeo-howto--card .yss-aeo-howto-item[open] .yss-aeo-howto-item__chevron::after  { transform: translateY(-50%) rotate( 45deg); }
.yss-aeo-howto--card .yss-aeo-howto-answer {
	padding: 0 18px 16px 56px;
	color: #374151;
	line-height: 1.65;
	font-size: 0.97em;
}
/* Theme variant -- minimal helpers, theme controls visuals. */
.yss-aeo-howto--theme .yss-aeo-howto-item__summary { cursor: pointer; list-style: none; }
.yss-aeo-howto--theme .yss-aeo-howto-item__summary::-webkit-details-marker { display: none; }
.yss-aeo-howto--theme .yss-aeo-howto-item__summary::marker { content: ""; }

/* ============================================================
   v1.63.0: "Clean" style -- Box.co.uk-style flat accordion
   Applies to BOTH .yss-aeo-faq--clean AND .yss-aeo-howto--clean so
   the FAQ block + HowTo block stay visually consistent.
   ============================================================ */
.yss-aeo-faq--clean .yss-aeo-faq-list,
.yss-aeo-howto--clean .yss-aeo-howto-list {
	border-top: 1px solid #e5e7eb;
	gap: 0;
}
.yss-aeo-faq--clean .yss-aeo-faq-item,
.yss-aeo-howto--clean .yss-aeo-howto-item {
	background: transparent;
	border: 0;
	border-bottom: 1px solid #e5e7eb;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}
.yss-aeo-faq--clean .yss-aeo-faq-item__summary,
.yss-aeo-howto--clean .yss-aeo-howto-item__summary {
	display: flex;
	align-items: center;
	gap: 14px;
	cursor: pointer;
	padding: 20px 56px 20px 4px;
	font-size: 1.05em;
	font-weight: 600;
	color: #111827;
	list-style: none;
	user-select: none;
	position: relative;
	transition: background 0.12s ease;
}
.yss-aeo-faq--clean .yss-aeo-faq-item__summary:hover,
.yss-aeo-howto--clean .yss-aeo-howto-item__summary:hover {
	background: #f9fafb;
}
.yss-aeo-faq--clean .yss-aeo-faq-item[open] > .yss-aeo-faq-item__summary,
.yss-aeo-howto--clean .yss-aeo-howto-item[open] > .yss-aeo-howto-item__summary {
	color: #111827;
}
.yss-aeo-faq--clean .yss-aeo-faq-item__summary::-webkit-details-marker,
.yss-aeo-howto--clean .yss-aeo-howto-item__summary::-webkit-details-marker { display: none; }
.yss-aeo-faq--clean .yss-aeo-faq-item__summary::marker,
.yss-aeo-howto--clean .yss-aeo-howto-item__summary::marker { content: ""; }
.yss-aeo-faq--clean .yss-aeo-faq-item__q,
.yss-aeo-howto--clean .yss-aeo-howto-item__q {
	flex: 1;
	line-height: 1.45;
}
/* Big + / − toggle on the right -- the Box.co.uk hallmark. */
.yss-aeo-faq--clean .yss-aeo-faq-item__chevron,
.yss-aeo-howto--clean .yss-aeo-howto-item__chevron {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}
.yss-aeo-faq--clean .yss-aeo-faq-item__chevron::before,
.yss-aeo-faq--clean .yss-aeo-faq-item__chevron::after,
.yss-aeo-howto--clean .yss-aeo-howto-item__chevron::before,
.yss-aeo-howto--clean .yss-aeo-howto-item__chevron::after {
	content: "";
	position: absolute;
	background: #6b7280;
	border-radius: 1px;
	transition: transform 0.22s ease, opacity 0.22s ease;
}
/* Horizontal bar (always visible) */
.yss-aeo-faq--clean .yss-aeo-faq-item__chevron::before,
.yss-aeo-howto--clean .yss-aeo-howto-item__chevron::before {
	top: 50%;
	left: 0;
	width: 22px;
	height: 2px;
	transform: translateY(-50%);
}
/* Vertical bar (rotates / shrinks to make a minus) */
.yss-aeo-faq--clean .yss-aeo-faq-item__chevron::after,
.yss-aeo-howto--clean .yss-aeo-howto-item__chevron::after {
	top: 0;
	left: 50%;
	width: 2px;
	height: 22px;
	transform: translateX(-50%) scaleY(1);
}
.yss-aeo-faq--clean .yss-aeo-faq-item[open] .yss-aeo-faq-item__chevron::after,
.yss-aeo-howto--clean .yss-aeo-howto-item[open] .yss-aeo-howto-item__chevron::after {
	transform: translateX(-50%) scaleY(0);
}
.yss-aeo-faq--clean .yss-aeo-faq-item[open] .yss-aeo-faq-item__chevron::before,
.yss-aeo-howto--clean .yss-aeo-howto-item[open] .yss-aeo-howto-item__chevron::before {
	background: #2271b1;
}
/* HowTo number badge in clean style -- compact, no gradient, theme-neutral */
.yss-aeo-howto--clean .yss-aeo-howto-item__num {
	background: #f3f4f6;
	color: #2271b1;
	font-size: 12px;
	box-shadow: none;
}
.yss-aeo-faq--clean .yss-aeo-faq-answer,
.yss-aeo-howto--clean .yss-aeo-howto-answer {
	padding: 0 56px 22px 4px;
	color: #4b5563;
	font-size: 0.97em;
	line-height: 1.7;
}
.yss-aeo-howto--clean .yss-aeo-howto-answer {
	padding-left: 42px; /* indent to align with question text past the number badge */
}

/* ============================================================
   Mobile tweaks
   ============================================================ */
@media (max-width: 600px) {
	.yss-aeo-direct-answer { padding: 12px 14px 12px 16px; }
	.yss-aeo-faq__title    { font-size: 1.3em; }
	.yss-aeo-faq-item__summary { padding: 12px 14px; font-size: 0.97em; }
	.yss-aeo-faq-answer    { padding: 0 14px 14px; }
	.yss-aeo-howto__title  { font-size: 1.3em; }
	.yss-aeo-howto--card .yss-aeo-howto-item__summary { padding: 12px 14px; }
	.yss-aeo-howto--card .yss-aeo-howto-answer        { padding: 0 14px 14px 52px; }
	.yss-aeo-faq--clean .yss-aeo-faq-item__summary,
	.yss-aeo-howto--clean .yss-aeo-howto-item__summary { padding: 16px 44px 16px 2px; font-size: 0.99em; }
	.yss-aeo-faq--clean .yss-aeo-faq-answer,
	.yss-aeo-howto--clean .yss-aeo-howto-answer { padding: 0 44px 18px 2px; }
	.yss-aeo-howto--clean .yss-aeo-howto-answer { padding-left: 38px; }
	.yss-aeo-faq--clean .yss-aeo-faq-item__chevron,
	.yss-aeo-howto--clean .yss-aeo-howto-item__chevron { width: 18px; height: 18px; right: 4px; }
	.yss-aeo-faq--clean .yss-aeo-faq-item__chevron::before,
	.yss-aeo-howto--clean .yss-aeo-howto-item__chevron::before { width: 18px; }
	.yss-aeo-faq--clean .yss-aeo-faq-item__chevron::after,
	.yss-aeo-howto--clean .yss-aeo-howto-item__chevron::after { height: 18px; }
}

/* ============================================================
   v1.72.4: PREMIUM style -- navy gradient banner + polished card accordion.
   Default for new installs. Designed to look great on WoodMart, Astra,
   Storefront, GeneratePress without theme tweaks.

   High-specificity selectors (.yss-aeo-faq.yss-aeo-faq--premium) survive
   most theme overrides without using !important.
   ============================================================ */
.yss-aeo-faq.yss-aeo-faq--premium,
.yss-aeo-howto.yss-aeo-howto--premium {
	margin: 40px 0;
	padding: 0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
	background: #ffffff;
}

/* --- Navy gradient banner header --- */
.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq__title,
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto__title {
	margin: 0;
	padding: 18px 24px;
	background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
	color: #ffffff;
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.2px;
	border: 0;
	border-radius: 0;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto__meta {
	margin: 0;
	padding: 10px 24px;
	background: #f0f6fc;
	border-bottom: 1px solid #dbeafe;
	font-size: 13px;
	color: #1e40af;
	font-weight: 500;
}
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto__meta-label {
	font-weight: 700;
	color: #1e3a8a;
	margin-right: 6px;
}

/* --- List wrapper --- */
.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq-list,
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	background: #ffffff;
}

/* --- Each item --- */
.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq-item,
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-item {
	background: #ffffff;
	border: 0;
	border-bottom: 1px solid #e5e7eb;
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
	transition: background 0.15s ease;
}
.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq-item:last-child,
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-item:last-child {
	border-bottom: 0;
}
.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq-item[open],
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-item[open] {
	background: #f8fafc;
}

/* --- Summary (question / step title) --- */
.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq-item__summary,
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-item__summary {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	cursor: pointer;
	padding: 18px 24px;
	font-size: 1.04em;
	font-weight: 600;
	color: #0f172a;
	list-style: none;
	user-select: none;
	transition: background 0.15s ease, color 0.15s ease;
	line-height: 1.4;
}
.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq-item__summary:hover,
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-item__summary:hover {
	background: #eff6ff;
	color: #1e40af;
}
.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq-item[open] > .yss-aeo-faq-item__summary,
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-item[open] > .yss-aeo-howto-item__summary {
	background: #dbeafe;
	color: #1e3a8a;
}
.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq-item__summary::-webkit-details-marker,
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-item__summary::-webkit-details-marker { display: none; }
.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq-item__summary::marker,
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-item__summary::marker { content: ""; }

.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq-item__q,
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-item__q {
	flex: 1 1 auto;
	min-width: 0;
}

/* --- Number badge (HowTo) -- circular, prominent, separated --- */
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-item__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	min-width: 32px;
	padding: 0;
	margin-right: 4px;
	background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
	color: #ffffff;
	font-weight: 700;
	font-size: 14px;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(30, 58, 138, 0.20);
}

/* --- Plus/minus toggle (animated) --- */
.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq-item__chevron,
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-item__chevron {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	position: relative;
	border-radius: 50%;
	background: #e0e7ff;
	transition: background 0.2s ease, transform 0.25s ease;
	margin-left: auto;
}
.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq-item__chevron::before,
.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq-item__chevron::after,
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-item__chevron::before,
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-item__chevron::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	background: #1e3a8a;
	border-radius: 1px;
	transform: translate(-50%, -50%);
	transition: transform 0.25s ease;
}
.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq-item__chevron::after,
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-item__chevron::after {
	transform: translate(-50%, -50%) rotate(90deg);
}
.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq-item[open] .yss-aeo-faq-item__chevron,
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-item[open] .yss-aeo-howto-item__chevron {
	background: #1e3a8a;
}
.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq-item[open] .yss-aeo-faq-item__chevron::before,
.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq-item[open] .yss-aeo-faq-item__chevron::after,
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-item[open] .yss-aeo-howto-item__chevron::before,
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-item[open] .yss-aeo-howto-item__chevron::after {
	background: #ffffff;
}
.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq-item[open] .yss-aeo-faq-item__chevron::after,
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-item[open] .yss-aeo-howto-item__chevron::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

/* --- Answer body --- */
.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq-answer,
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-answer {
	padding: 4px 24px 22px;
	color: #374151;
	line-height: 1.7;
	font-size: 0.98em;
	background: transparent;
	border: 0;
	animation: yssAeoPremiumFadeIn 0.25s ease;
}
.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq-answer p,
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-answer p {
	margin: 0 0 10px;
	color: #374151;
}
.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq-answer p:last-child,
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-answer p:last-child {
	margin-bottom: 0;
}
.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-answer {
	padding-left: 70px;  /* aligns body text under the question text, past the number badge */
}

@keyframes yssAeoPremiumFadeIn {
	from { opacity: 0; transform: translateY(-3px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* --- Mobile tweaks for premium --- */
@media (max-width: 600px) {
	.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq__title,
	.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto__title {
		padding: 14px 16px;
		font-size: 1.15em;
	}
	.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto__meta { padding: 8px 16px; }
	.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq-item__summary,
	.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-item__summary {
		padding: 14px 16px;
		font-size: 0.98em;
		gap: 10px;
	}
	.yss-aeo-faq.yss-aeo-faq--premium .yss-aeo-faq-answer,
	.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-answer {
		padding: 2px 16px 16px;
		font-size: 0.95em;
	}
	.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-answer {
		padding-left: 56px;
	}
	.yss-aeo-howto.yss-aeo-howto--premium .yss-aeo-howto-item__num {
		width: 28px;
		height: 28px;
		min-width: 28px;
		font-size: 13px;
	}
}