/* =============================================================================
   Stack Accordion — Frontend Styles
   All 25 styles — borders are explicit and clear on every design.
   ============================================================================= */

/* Custom properties are scoped to the widget wrapper, never :root, so they
   cannot collide with other WPStack widgets or with the theme. */
.stka-wrap {
	--stk-primary:     #0e0e0e;
	--stk-secondary:   #444444;
	--stk-accent:      #4f46e5;
	--stk-accent-rgb:  79, 70, 229;
	--stk-muted:       #888888;
	--stk-border:      #d8d8d8;
	--stk-border-lt:   #ebebeb;
	--stk-white:       #ffffff;
	--stk-shadow:      rgba(0, 0, 0, 0.08);
	--stk-shadow-md:   rgba(0, 0, 0, 0.14);
	--stk-elev:        0 1px 2px rgba(16,24,40,.06), 0 8px 24px -8px rgba(16,24,40,.12);
	--stka-indicator:        #4f46e5;
	--stka-indicator-active: #4f46e5;
}

/* ── Wrapper ──────────────────────────────────────────────────────────────── */

.stka-wrap {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ── Expand / collapse all toolbar ────────────────────────────────────────── */

.stka-toolbar {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}
.stka-toolbar button {
	min-height: 36px;
	padding: 8px 14px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--stka-indicator-active);
	background: rgba( var(--stk-accent-rgb), 0.08 );
	border: 1px solid rgba( var(--stk-accent-rgb), 0.22 );
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.stka-toolbar button:hover {
	background: rgba( var(--stk-accent-rgb), 0.16 );
}

/* ── Item ─────────────────────────────────────────────────────────────────── */

.stka-item {
	position: relative;
	overflow: hidden;
}

/* ── Header (button) ──────────────────────────────────────────────────────── */

.stka-header {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 16px 20px;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	color: var(--stk-primary);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	transition: color 0.2s ease, background-color 0.2s ease;
	outline: none;
}
.stka-header:focus-visible {
	outline: 2px solid var(--stka-indicator-active);
	outline-offset: -2px;
}
.stka-header:hover {
	color: var(--stka-indicator-active);
}

/* ── Title wrap ───────────────────────────────────────────────────────────── */

.stka-title-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.stka-title {
	display: block;
	font-weight: 600;
	line-height: 1.4;
}
.stka-subtitle {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: var(--stk-muted);
	line-height: 1.3;
}

/* ── Badge ────────────────────────────────────────────────────────────────── */

.stka-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 100px;
	background-color: rgba( var(--stk-accent-rgb), 0.1 );
	border: 1px solid rgba( var(--stk-accent-rgb), 0.25 );
	color: var(--stka-indicator-active);
	white-space: nowrap;
	flex-shrink: 0;
}

/* ── Number ───────────────────────────────────────────────────────────────── */

.stka-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid var(--stk-border);
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
	color: var(--stk-muted);
	transition: all 0.2s ease;
}
.stka-item.stka-active .stka-num {
	background-color: var(--stka-indicator-active);
	border-color: var(--stka-indicator-active);
	color: var(--stk-white);
}

/* ── Icon wrap ────────────────────────────────────────────────────────────── */

.stka-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--stka-indicator-active);
}
.stka-icon-wrap i,
.stka-icon-wrap svg {
	font-size: 18px;
	width: 18px;
	height: auto;
	fill: currentColor;
}

/* ── Body / Panel ─────────────────────────────────────────────────────────── */

.stka-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s cubic-bezier( 0.4, 0, 0.2, 1 );
}
/* CSS baseline open state. Without this the panel of a default-open item is
   invisible until the script measures it, and stays invisible forever when
   JavaScript is unavailable. The script refines this to the exact
   scrollHeight so the collapse animation still runs from a real value. */
.stka-item.stka-active > .stka-body {
	max-height: 6000px;
}
/* Suppress the transition for the first paint so the default-open panel does
   not visibly slide open on every page load. */
.stka-wrap:not([data-stka-init]) .stka-body {
	transition: none;
}
.stka-content {
	padding: 4px 20px 20px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--stk-secondary);
}

/* ── Indicator — base (shared across all styles) ─────────────────────────── */

.stka-indicator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-left: auto;
	color: var(--stka-indicator);
	transition: transform 0.3s ease, color 0.2s ease;
}
.stka-item.stka-active .stka-indicator {
	color: var(--stka-indicator-active);
}

/* ── Indicator: Chevron ───────────────────────────────────────────────────── */

.stka-ind-chevron .stka-indicator::before {
	content: '';
	display: block;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-top: -4px;
	transition: border-color 0.2s ease;
}
.stka-ind-chevron .stka-item.stka-active .stka-indicator {
	transform: rotate(180deg);
}

/* ── Indicator: Plus / Minus ──────────────────────────────────────────────── */

.stka-ind-plus .stka-indicator {
	position: relative;
}
.stka-ind-plus .stka-indicator::before,
.stka-ind-plus .stka-indicator::after {
	content: '';
	position: absolute;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}
.stka-ind-plus .stka-indicator::before {
	width: 12px;
	height: 2px;
}
.stka-ind-plus .stka-indicator::after {
	width: 2px;
	height: 12px;
}
.stka-ind-plus .stka-item.stka-active .stka-indicator::after {
	transform: rotate(90deg);
	opacity: 0;
}

/* ── Indicator: Arrow ─────────────────────────────────────────────────────── */

.stka-ind-arrow .stka-indicator::before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	margin-left: -4px;
	transition: transform 0.3s ease, border-color 0.2s ease;
}
.stka-ind-arrow .stka-item.stka-active .stka-indicator::before {
	transform: rotate(45deg);
	margin-top: -4px;
	margin-left: 0;
}

/* ── Indicator: Dot ───────────────────────────────────────────────────────── */

.stka-ind-dot .stka-indicator::before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	transition: transform 0.3s ease;
}
.stka-ind-dot .stka-item.stka-active .stka-indicator::before {
	transform: scale(1.5);
}

/* ── Indicator: None ──────────────────────────────────────────────────────── */

.stka-ind-none .stka-indicator {
	display: none;
}

/* =============================================================================
   STYLE 1 — Classic (Bottom Border)
   ============================================================================= */

.stka-classic {
	border: 1px solid var(--stk-border);
	border-radius: 8px;
	overflow: hidden;
}
.stka-classic .stka-item {
	border-bottom: 1px solid var(--stk-border);
}
.stka-classic .stka-item:last-child {
	border-bottom: none;
}
.stka-classic .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
	border-bottom: 1px solid var(--stk-border-lt);
}
.stka-classic .stka-content {
	padding: 8px 20px 20px;
}

/* =============================================================================
   STYLE 2 — Bordered Items
   ============================================================================= */

.stka-bordered {
	gap: 8px;
}
.stka-bordered .stka-item {
	border: 1px solid var(--stk-border);
	border-radius: 8px;
	overflow: hidden;
}
.stka-bordered .stka-item.stka-active {
	border-color: var(--stka-indicator-active);
	border-top-width: 2px;
}
.stka-bordered .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
	border-bottom: 1px solid var(--stk-border-lt);
}

/* =============================================================================
   STYLE 3 — Card (Shadow + Border)
   ============================================================================= */

.stka-card {
	gap: 10px;
}
.stka-card .stka-item {
	border: 1px solid var(--stk-border);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 10px var(--stk-shadow);
	transition: box-shadow 0.2s ease;
}
.stka-card .stka-item.stka-active {
	border-color: var(--stka-indicator-active);
	border-left-width: 3px;
	box-shadow: 0 4px 20px var(--stk-shadow-md);
}
.stka-card .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
	border-bottom: 1px solid var(--stk-border-lt);
}

/* =============================================================================
   STYLE 4 — Flush (Connected Block)
   ============================================================================= */

.stka-flush {
	border: 2px solid var(--stk-border);
	border-radius: 8px;
	overflow: hidden;
}
.stka-flush .stka-item {
	border-bottom: 1px solid var(--stk-border);
}
.stka-flush .stka-item:last-child {
	border-bottom: none;
}
.stka-flush .stka-item.stka-active .stka-header {
	background-color: rgba( var(--stk-accent-rgb), 0.06 );
	color: var(--stka-indicator-active);
	border-bottom: 1px solid var(--stk-border);
}

/* =============================================================================
   STYLE 5 — Pills (Rounded)
   ============================================================================= */

.stka-pills {
	gap: 8px;
}
.stka-pills .stka-item {
	border: 1px solid var(--stk-border);
	border-radius: 100px;
	overflow: visible;
	transition: border-color 0.2s ease;
}
.stka-pills .stka-header {
	border-radius: 100px;
	padding: 12px 24px;
}
.stka-pills .stka-item.stka-active {
	border-color: var(--stka-indicator-active);
	border-radius: 16px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.stka-pills .stka-item.stka-active .stka-header {
	background-color: var(--stka-indicator-active);
	color: var(--stk-white);
	border-radius: 14px 14px 0 0;
}
.stka-pills .stka-item.stka-active .stka-header .stka-indicator {
	color: var(--stk-white);
}
.stka-pills .stka-body {
	border: 1px solid var(--stka-indicator-active);
	border-top: none;
	border-radius: 0 0 16px 16px;
}
.stka-pills .stka-content {
	padding: 16px 24px 20px;
}

/* =============================================================================
   STYLE 6 — Minimal (Lines Only)
   ============================================================================= */

.stka-minimal {
	border-top: 1px solid var(--stk-border);
}
.stka-minimal .stka-item {
	border-bottom: 1px solid var(--stk-border);
}
.stka-minimal .stka-header {
	padding: 14px 4px;
	font-weight: 500;
	color: var(--stk-secondary);
}
.stka-minimal .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
	font-weight: 700;
}
.stka-minimal .stka-item.stka-active {
	border-bottom-color: var(--stka-indicator-active);
	border-bottom-width: 2px;
}
.stka-minimal .stka-content {
	padding: 4px 4px 18px;
}

/* =============================================================================
   STYLE 7 — Docs (Two-Column)
   Documentation layout: the question stays in a narrow left measure and the
   answer is indented into a second column behind a hairline gutter rule.
   ============================================================================= */

.stka-boxed {
	gap: 0;
	border-top: 1px solid var(--stk-border);
}
.stka-boxed .stka-item {
	border-bottom: 1px solid var(--stk-border);
	overflow: visible;
}
.stka-boxed .stka-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 24px;
	align-items: start;
	gap: 16px;
	padding: 22px 0 22px 4px;
	font-size: 16px;
}
.stka-boxed .stka-header .stka-indicator {
	margin-left: 0;
	margin-top: 2px;
}
.stka-boxed .stka-content {
	position: relative;
	max-width: 62ch;
	margin-left: 34%;
	padding: 0 0 26px;
	border-left: 1px solid var(--stk-border-lt);
	padding-left: 24px;
}
.stka-boxed .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
}
.stka-boxed .stka-item.stka-active .stka-content {
	border-left-color: var(--stka-indicator-active);
}
@media ( max-width: 767px ) {
	.stka-boxed .stka-content {
		margin-left: 0;
		padding-left: 16px;
	}
}

/* =============================================================================
   STYLE 8 — Dark
   ============================================================================= */

.stka-dark {
	gap: 6px;
}
.stka-dark .stka-item {
	background-color: #1a1a2e;
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 8px;
	overflow: hidden;
}
.stka-dark .stka-header {
	color: rgba(255,255,255,0.75);
}
.stka-dark .stka-header:hover {
	color: var(--stk-white);
	background-color: rgba(255,255,255,0.05);
}
.stka-dark .stka-item.stka-active {
	border-color: var(--stka-indicator-active);
}
.stka-dark .stka-item.stka-active .stka-header {
	color: var(--stk-white);
	border-bottom: 1px solid rgba(255,255,255,0.12);
}
.stka-dark .stka-content {
	color: rgba(255,255,255,0.65);
}
.stka-dark .stka-subtitle {
	color: rgba(255,255,255,0.4);
}

/* =============================================================================
   STYLE 9 — Accent Header (Filled Active)
   ============================================================================= */

.stka-accent-header {
	gap: 6px;
}
.stka-accent-header .stka-item {
	border: 1px solid var(--stk-border);
	border-radius: 8px;
	overflow: hidden;
}
.stka-accent-header .stka-item.stka-active {
	border-color: var(--stka-indicator-active);
}
.stka-accent-header .stka-item.stka-active .stka-header {
	background-color: var(--stka-indicator-active);
	color: var(--stk-white);
	border-bottom: 1px solid rgba(255,255,255,0.2);
}
.stka-accent-header .stka-item.stka-active .stka-indicator {
	color: var(--stk-white);
}
.stka-accent-header .stka-item.stka-active .stka-num {
	border-color: rgba(255,255,255,0.5);
	background-color: rgba(255,255,255,0.15);
	color: var(--stk-white);
}

/* =============================================================================
   STYLE 10 — Sidebar Bar (Left Accent)
   ============================================================================= */

.stka-sidebar {
	gap: 6px;
}
.stka-sidebar .stka-item {
	border: 1px solid var(--stk-border);
	border-left: 4px solid var(--stk-border);
	border-radius: 0 8px 8px 0;
	overflow: hidden;
	transition: border-left-color 0.2s ease;
}
.stka-sidebar .stka-item:hover {
	border-left-color: rgba( var(--stk-accent-rgb), 0.4 );
}
.stka-sidebar .stka-item.stka-active {
	border-left-color: var(--stka-indicator-active);
	border-left-width: 5px;
}
.stka-sidebar .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
	border-bottom: 1px solid var(--stk-border-lt);
}

/* =============================================================================
   STYLE 11 — Index Rail
   A borderless list with a fixed numbered rail on the left and a continuous
   hairline running the whole height. Header and body share the rail offset.
   ============================================================================= */

.stka-arrow-right {
	gap: 0;
	position: relative;
	counter-reset: stka-rail;
	padding-left: 60px;
}
.stka-arrow-right::before {
	content: '';
	position: absolute;
	left: 22px;
	top: 6px;
	bottom: 6px;
	width: 1px;
	background: var(--stk-border);
}
.stka-arrow-right .stka-item {
	overflow: visible;
	border-bottom: 1px solid var(--stk-border-lt);
}
.stka-arrow-right .stka-item:last-child {
	border-bottom: none;
}
.stka-arrow-right .stka-header {
	padding: 18px 4px;
}
.stka-arrow-right .stka-header::before {
	counter-increment: stka-rail;
	content: counter(stka-rail, decimal-leading-zero);
	position: absolute;
	left: -60px;
	top: 16px;
	width: 44px;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--stk-muted);
	background: var(--stk-white);
	padding: 4px 0;
	transition: color 0.2s ease;
}
.stka-arrow-right .stka-item.stka-active .stka-header::before {
	color: var(--stka-indicator-active);
}
.stka-arrow-right .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
}
.stka-arrow-right .stka-content {
	padding: 0 4px 22px;
	max-width: 64ch;
}
@media ( max-width: 767px ) {
	.stka-arrow-right {
		padding-left: 44px;
	}
	.stka-arrow-right::before {
		left: 14px;
	}
	.stka-arrow-right .stka-header::before {
		left: -44px;
		width: 30px;
	}
}

/* =============================================================================
   STYLE 12 — Plus / Minus Circle
   ============================================================================= */

.stka-plus-circle {
	gap: 6px;
}
.stka-plus-circle .stka-item {
	border: 1px solid var(--stk-border);
	border-radius: 8px;
	overflow: hidden;
}
.stka-plus-circle .stka-item.stka-active {
	border-color: var(--stka-indicator-active);
}
.stka-plus-circle .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
	border-bottom: 1px solid var(--stk-border-lt);
}
.stka-plus-circle .stka-indicator {
	width: 26px;
	height: 26px;
	border: 2px solid var(--stk-border);
	border-radius: 50%;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.stka-plus-circle .stka-item.stka-active .stka-indicator {
	border-color: var(--stka-indicator-active);
	background-color: rgba( var(--stk-accent-rgb), 0.08 );
}
/* Override default chevron to look like plus/minus */
.stka-plus-circle.stka-ind-chevron .stka-indicator::before {
	border: none;
	width: 10px;
	height: 2px;
	background: currentColor;
	transform: none;
	margin: 0;
}
.stka-plus-circle.stka-ind-chevron .stka-indicator::after {
	content: '';
	position: absolute;
	width: 2px;
	height: 10px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}
.stka-plus-circle.stka-ind-chevron .stka-item.stka-active .stka-indicator {
	transform: none;
}
.stka-plus-circle.stka-ind-chevron .stka-item.stka-active .stka-indicator::after {
	transform: rotate(90deg);
	opacity: 0;
}

/* =============================================================================
   STYLE 13 — Numbered
   ============================================================================= */

.stka-numbered {
	gap: 6px;
}
.stka-numbered .stka-item {
	border: 1px solid var(--stk-border);
	border-radius: 8px;
	overflow: hidden;
}
.stka-numbered .stka-item.stka-active {
	border-color: var(--stka-indicator-active);
}
.stka-numbered .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
	border-bottom: 1px solid var(--stk-border-lt);
}

/* =============================================================================
   STYLE 14 — Ghost Numeral
   Oversized outline numeral sits behind each row; the header text hangs to the
   right of it, and the body keeps the same hanging indent.
   ============================================================================= */

.stka-icon-left {
	gap: 4px;
	counter-reset: stka-ghost;
}
.stka-icon-left .stka-item {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	background: #fbfbfd;
	transition: background-color 0.2s ease;
}
.stka-icon-left .stka-item::before {
	counter-increment: stka-ghost;
	content: counter(stka-ghost);
	position: absolute;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 58px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba( var(--stk-accent-rgb), 0.28 );
	pointer-events: none;
	z-index: 0;
}
.stka-icon-left .stka-header,
.stka-icon-left .stka-body {
	position: relative;
	z-index: 1;
}
.stka-icon-left .stka-header {
	padding: 20px 20px 20px 72px;
	font-size: 16px;
}
.stka-icon-left .stka-content {
	padding: 0 24px 22px 72px;
	max-width: 66ch;
}
.stka-icon-left .stka-item.stka-active {
	background: rgba( var(--stk-accent-rgb), 0.05 );
}
.stka-icon-left .stka-item.stka-active::before {
	-webkit-text-stroke-color: var(--stka-indicator-active);
}
.stka-icon-left .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
}

/* =============================================================================
   STYLE 15 — Timeline
   ============================================================================= */

.stka-timeline {
	padding-left: 36px;
	position: relative;
}
.stka-timeline::before {
	content: '';
	position: absolute;
	left: 10px;
	top: 0;
	bottom: 0;
	width: 2px;
	background-color: var(--stk-border);
}
.stka-timeline .stka-item {
	position: relative;
	border: 1px solid var(--stk-border);
	border-radius: 8px;
	margin-bottom: 12px;
	overflow: hidden;
}
.stka-timeline .stka-item::before {
	content: '';
	position: absolute;
	left: -30px;
	top: 20px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(--stk-border);
	border: 2px solid var(--stk-white);
	box-shadow: 0 0 0 2px var(--stk-border);
	z-index: 1;
	transition: all 0.2s ease;
}
.stka-timeline .stka-item.stka-active {
	border-color: var(--stka-indicator-active);
}
.stka-timeline .stka-item.stka-active::before {
	background-color: var(--stka-indicator-active);
	box-shadow: 0 0 0 3px rgba( var(--stk-accent-rgb), 0.2 );
}
.stka-timeline .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
	border-bottom: 1px solid var(--stk-border-lt);
}
.stka-timeline .stka-item:last-child {
	margin-bottom: 0;
}

/* =============================================================================
   STYLE 16 — Gradient Header
   ============================================================================= */

.stka-gradient {
	gap: 6px;
}
.stka-gradient .stka-item {
	border: 1px solid var(--stk-border);
	border-radius: 10px;
	overflow: hidden;
}
.stka-gradient .stka-item.stka-active {
	border-color: var(--stka-indicator-active);
}
.stka-gradient .stka-item.stka-active .stka-header {
	background: linear-gradient( 135deg, var(--stka-indicator-active) 0%, rgba( var(--stk-accent-rgb), 0.7 ) 100% );
	color: var(--stk-white);
	border-bottom: 1px solid rgba(255,255,255,0.15);
}
.stka-gradient .stka-item.stka-active .stka-indicator {
	color: var(--stk-white);
}
.stka-gradient .stka-item.stka-active .stka-badge {
	background-color: rgba(255,255,255,0.2);
	border-color: rgba(255,255,255,0.35);
	color: var(--stk-white);
}

/* =============================================================================
   STYLE 17 — Ledger Rows
   Full-bleed hairline rows with a small-caps eyebrow title, wide vertical
   rhythm and the answer set in a fixed reading measure.
   ============================================================================= */

.stka-outline {
	gap: 0;
	border-top: 2px solid var(--stk-primary);
	border-bottom: 2px solid var(--stk-primary);
}
.stka-outline .stka-item {
	border-bottom: 1px solid var(--stk-border-lt);
	overflow: visible;
}
.stka-outline .stka-item:last-child {
	border-bottom: none;
}
.stka-outline .stka-header {
	padding: 26px 8px 26px 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
}
.stka-outline .stka-indicator {
	color: var(--stk-primary);
}
.stka-outline .stka-content {
	padding: 0 0 30px;
	max-width: 60ch;
	font-size: 16px;
	line-height: 1.7;
}
.stka-outline .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
}
.stka-outline .stka-item.stka-active {
	background: linear-gradient( to right, rgba( var(--stk-accent-rgb), 0.05 ), transparent 60% );
}

/* =============================================================================
   STYLE 18 — Neon Glow
   ============================================================================= */

.stka-neon {
	gap: 8px;
	background-color: #0d0d0d;
	padding: 20px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.08);
}
.stka-neon .stka-item {
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 8px;
	overflow: hidden;
	transition: border-color 0.2s ease;
}
.stka-neon .stka-header {
	color: rgba(255,255,255,0.6);
}
.stka-neon .stka-header:hover {
	color: rgba(255,255,255,0.9);
	background-color: rgba(255,255,255,0.04);
}
.stka-neon .stka-item.stka-active {
	border-color: var(--stka-indicator-active);
	box-shadow: 0 0 12px rgba( var(--stk-accent-rgb), 0.3 ),
	            inset 0 0 12px rgba( var(--stk-accent-rgb), 0.05 );
}
.stka-neon .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
	border-bottom: 1px solid rgba( var(--stk-accent-rgb), 0.25 );
}
.stka-neon .stka-content {
	color: rgba(255,255,255,0.65);
}

/* =============================================================================
   STYLE 19 — Inset Panel
   Replaces the old glassmorphism design, which rendered invisible on the white
   backgrounds most pages use. The answer now opens inside a nested tinted
   panel that is visibly recessed from the question row.
   ============================================================================= */

.stka-glass {
	gap: 6px;
}
.stka-glass .stka-item {
	border: 1px solid var(--stk-border);
	border-radius: 12px;
	background: var(--stk-white);
	overflow: hidden;
}
.stka-glass .stka-header {
	padding: 18px 20px;
}
.stka-glass .stka-body {
	background: transparent;
}
.stka-glass .stka-content {
	margin: 0 12px 12px;
	padding: 16px 18px;
	background: #f4f5fb;
	border: 1px solid var(--stk-border-lt);
	border-radius: 8px;
	box-shadow: inset 0 1px 3px rgba(16,24,40,.05);
}
.stka-glass .stka-item.stka-active {
	border-color: var(--stka-indicator-active);
}
.stka-glass .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
}
.stka-glass .stka-item.stka-active .stka-content {
	background: rgba( var(--stk-accent-rgb), 0.06 );
	border-color: rgba( var(--stk-accent-rgb), 0.18 );
}

/* =============================================================================
   STYLE 20 — Side Label
   A fixed left label column carries the badge (or the item number when no
   badge is set); the question and the answer both align to the second column.
   ============================================================================= */

.stka-split {
	gap: 0;
	counter-reset: stka-side;
}
.stka-split .stka-item {
	border-bottom: 1px solid var(--stk-border);
	overflow: visible;
}
.stka-split .stka-item:last-child {
	border-bottom: none;
}
.stka-split .stka-header {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr) 24px;
	align-items: start;
	gap: 16px;
	padding: 20px 4px;
}
.stka-split .stka-header::before {
	counter-increment: stka-side;
	content: 'Q' counter(stka-side, decimal-leading-zero);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--stk-muted);
	padding-top: 2px;
}
.stka-split .stka-badge {
	justify-self: start;
	align-self: center;
}
.stka-split .stka-indicator {
	margin-left: 0;
	margin-top: 2px;
}
.stka-split .stka-content {
	padding: 0 24px 24px 148px;
	max-width: 70ch;
}
.stka-split .stka-item.stka-active .stka-header,
.stka-split .stka-item.stka-active .stka-header::before {
	color: var(--stka-indicator-active);
}
@media ( max-width: 767px ) {
	.stka-split .stka-header {
		grid-template-columns: minmax(0, 1fr) 24px;
	}
	.stka-split .stka-header::before {
		grid-column: 1 / -1;
	}
	.stka-split .stka-content {
		padding-left: 4px;
	}
}

/* =============================================================================
   STYLE 21 — Stacked Header
   The header stacks the title over a meta row (sub-label and badge) and the
   toggle is pinned to the top-right corner rather than sitting inline.
   ============================================================================= */

.stka-floating {
	gap: 10px;
}
.stka-floating .stka-item {
	border: 1px solid var(--stk-border);
	border-radius: 12px;
	overflow: hidden;
	background: var(--stk-white);
}
.stka-floating .stka-header {
	display: block;
	position: relative;
	padding: 18px 60px 18px 20px;
}
.stka-floating .stka-title-wrap {
	display: block;
}
.stka-floating .stka-title {
	font-size: 16px;
	margin-bottom: 6px;
}
.stka-floating .stka-subtitle {
	display: inline-block;
	margin-right: 10px;
}
.stka-floating .stka-badge {
	vertical-align: middle;
}
.stka-floating .stka-indicator {
	position: absolute;
	right: 18px;
	top: 18px;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: #f3f4f8;
	margin-left: 0;
}
.stka-floating .stka-content {
	padding-top: 0;
	border-top: 1px dashed var(--stk-border);
	margin: 0 20px;
	padding-left: 0;
	padding-right: 0;
	padding-top: 14px;
}
.stka-floating .stka-item.stka-active {
	border-color: var(--stka-indicator-active);
}
.stka-floating .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
}
.stka-floating .stka-item.stka-active .stka-indicator {
	background: rgba( var(--stk-accent-rgb), 0.12 );
}

/* =============================================================================
   STYLE 22 — Striped (Alternating Rows)
   ============================================================================= */

.stka-striped {
	border: 2px solid var(--stk-border);
	border-radius: 8px;
	overflow: hidden;
}
.stka-striped .stka-item {
	border-bottom: 1px solid var(--stk-border);
}
.stka-striped .stka-item:last-child {
	border-bottom: none;
}
.stka-striped .stka-item:nth-child(even) .stka-header {
	background-color: #f8f8fb;
}
.stka-striped .stka-item:nth-child(odd) .stka-header {
	background-color: var(--stk-white);
}
.stka-striped .stka-item:nth-child(even) .stka-content {
	background-color: #fafafe;
}
.stka-striped .stka-item.stka-active {
	border-bottom: 2px solid var(--stka-indicator-active);
}
.stka-striped .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
	background-color: rgba( var(--stk-accent-rgb), 0.05 );
	border-bottom: 1px solid var(--stk-border-lt);
}

/* =============================================================================
   STYLE 23 — Q & A Markers
   The classic support-desk layout: a circular Q glyph column beside the
   question and a matching A glyph column beside the answer.
   ============================================================================= */

.stka-dot {
	gap: 8px;
}
.stka-dot .stka-item {
	border: 1px solid var(--stk-border);
	border-radius: 12px;
	overflow: hidden;
	background: var(--stk-white);
}
.stka-dot .stka-header {
	padding: 18px 20px 18px 66px;
	position: relative;
	font-size: 16px;
}
.stka-dot .stka-header::before {
	content: 'Q';
	position: absolute;
	left: 18px;
	top: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--stka-indicator-active);
	color: var(--stk-white);
	font-size: 13px;
	font-weight: 700;
}
.stka-dot .stka-content {
	position: relative;
	padding: 2px 20px 20px 66px;
	background: #fafafc;
}
.stka-dot .stka-content::before {
	content: 'A';
	position: absolute;
	left: 18px;
	top: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #e9eaf2;
	color: var(--stk-secondary);
	font-size: 13px;
	font-weight: 700;
}
.stka-dot .stka-item.stka-active {
	border-color: var(--stka-indicator-active);
}
.stka-dot .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
}

/* =============================================================================
   STYLE 24 — Badge Label
   ============================================================================= */

.stka-badge-style {
	gap: 6px;
}
.stka-badge-style .stka-item {
	border: 1px solid var(--stk-border);
	border-radius: 8px;
	overflow: hidden;
}
.stka-badge-style .stka-item.stka-active {
	border-color: var(--stka-indicator-active);
}
.stka-badge-style .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
	border-bottom: 1px solid var(--stk-border-lt);
}

/* =============================================================================
   STYLE 25 — Mega (Icon + Subtitle Header)
   ============================================================================= */

.stka-mega {
	gap: 8px;
}
.stka-mega .stka-item {
	border: 1px solid var(--stk-border);
	border-radius: 12px;
	overflow: hidden;
}
.stka-mega .stka-header {
	padding: 18px 22px;
	gap: 16px;
}
.stka-mega .stka-icon-wrap {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	background-color: rgba( var(--stk-accent-rgb), 0.1 );
	border: 1px solid rgba( var(--stk-accent-rgb), 0.2 );
	flex-shrink: 0;
}
.stka-mega .stka-icon-wrap i,
.stka-mega .stka-icon-wrap svg {
	font-size: 22px;
	width: 22px;
}
.stka-mega .stka-title {
	font-size: 16px;
	font-weight: 700;
}
.stka-mega .stka-subtitle {
	font-size: 13px;
}
.stka-mega .stka-item.stka-active {
	border-color: var(--stka-indicator-active);
	border-width: 2px;
}
.stka-mega .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
	background-color: rgba( var(--stk-accent-rgb), 0.04 );
	border-bottom: 1px solid var(--stk-border-lt);
}
.stka-mega .stka-item.stka-active .stka-icon-wrap {
	background-color: var(--stka-indicator-active);
	border-color: var(--stka-indicator-active);
	color: var(--stk-white);
}
.stka-mega .stka-item.stka-active .stka-icon-wrap i,
.stka-mega .stka-item.stka-active .stka-icon-wrap svg {
	color: var(--stk-white);
	fill: var(--stk-white);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media ( max-width: 767px ) {
	.stka-timeline {
		padding-left: 24px;
	}
	.stka-timeline::before {
		left: 6px;
	}
	.stka-timeline .stka-item::before {
		left: -22px;
		width: 10px;
		height: 10px;
	}
	.stka-neon {
		padding: 14px;
	}
	.stka-mega .stka-header {
		flex-wrap: wrap;
	}
}


/* =============================================================================
   STYLE 26 — Editorial
   Replaces the old hard-offset "retro" shadow design. Magazine rhythm: a thin
   rule per item, a serif display question, and the answer set in two text
   columns on wide screens.
   ============================================================================= */

.stka-retro {
	gap: 0;
}
.stka-retro .stka-item {
	border-top: 1px solid var(--stk-primary);
	overflow: visible;
}
.stka-retro .stka-item:last-child {
	border-bottom: 1px solid var(--stk-primary);
}
.stka-retro .stka-header {
	font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
	font-size: 21px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.01em;
	padding: 28px 8px 28px 0;
}
.stka-retro .stka-content {
	padding: 0 0 32px;
	font-size: 15px;
	line-height: 1.7;
	column-gap: 40px;
}
@media ( min-width: 900px ) {
	.stka-retro .stka-content {
		column-count: 2;
	}
}
.stka-retro .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
}

/* =============================================================================
   STYLE 27 — Right Meta Rail
   A fixed right-hand rail holds the badge and the toggle, divided from the
   question by a vertical hairline that continues down through the answer.
   ============================================================================= */

.stka-rounded {
	gap: 0;
	border: 1px solid var(--stk-border);
	border-radius: 12px;
	overflow: hidden;
}
.stka-rounded .stka-item {
	border-bottom: 1px solid var(--stk-border-lt);
	overflow: visible;
}
.stka-rounded .stka-item:last-child {
	border-bottom: none;
}
.stka-rounded .stka-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 108px;
	align-items: center;
	gap: 0;
	padding: 18px 0 18px 20px;
}
.stka-rounded .stka-header .stka-badge,
.stka-rounded .stka-header .stka-indicator {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
	margin-left: 0;
}
.stka-rounded .stka-header .stka-badge {
	justify-self: start;
	margin-left: 16px;
}
.stka-rounded .stka-header .stka-indicator {
	justify-self: end;
	margin-right: 20px;
}
.stka-rounded .stka-item::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 108px;
	width: 1px;
	background: var(--stk-border-lt);
}
.stka-rounded .stka-content {
	padding: 0 128px 22px 20px;
}
.stka-rounded .stka-item.stka-active {
	background: rgba( var(--stk-accent-rgb), 0.04 );
}
.stka-rounded .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
}
@media ( max-width: 767px ) {
	.stka-rounded .stka-header {
		grid-template-columns: minmax(0, 1fr) 56px;
	}
	.stka-rounded .stka-header .stka-badge {
		display: none;
	}
	.stka-rounded .stka-item::after {
		right: 56px;
	}
	.stka-rounded .stka-content {
		padding-right: 76px;
	}
}

/* =============================================================================
   STYLE 28 — Stepper
   ============================================================================= */

.stka-stepper {
	gap: 8px;
	counter-reset: stka-step;
}
.stka-stepper .stka-item {
	border: 1px solid var(--stk-border);
	border-radius: 10px;
	overflow: hidden;
}
.stka-stepper .stka-header::before {
	counter-increment: stka-step;
	content: counter(stka-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--stk-border);
	color: var(--stk-muted);
	margin-right: 8px;
	flex-shrink: 0;
}
.stka-stepper .stka-item.stka-active .stka-header::before {
	border-color: var(--stka-indicator-active);
	background-color: var(--stka-indicator-active);
	color: #fff;
}

/* =============================================================================
   STYLE 29 — Contrast Block
   Replaces the old rainbow-border design. The open item inverts to a dark
   block — header and answer together — so the active row reads at a glance.
   ============================================================================= */

.stka-colorful {
	gap: 8px;
}
.stka-colorful .stka-item {
	border: 1px solid var(--stk-border);
	border-radius: 12px;
	overflow: hidden;
	background: var(--stk-white);
	transition: background-color 0.25s ease, border-color 0.25s ease;
}
.stka-colorful .stka-header {
	padding: 20px 22px;
	font-size: 16px;
}
.stka-colorful .stka-content {
	padding: 0 22px 24px;
	max-width: 68ch;
}
.stka-colorful .stka-item.stka-active {
	background: #14141c;
	border-color: #14141c;
}
.stka-colorful .stka-item.stka-active .stka-header {
	color: var(--stk-white);
}
.stka-colorful .stka-item.stka-active .stka-content {
	color: rgba(255,255,255,0.72);
}
.stka-colorful .stka-item.stka-active .stka-indicator {
	color: var(--stk-white);
}
.stka-colorful .stka-item.stka-active .stka-badge {
	background: rgba(255,255,255,0.14);
	border-color: rgba(255,255,255,0.28);
	color: var(--stk-white);
}
.stka-colorful .stka-item.stka-active .stka-subtitle {
	color: rgba(255,255,255,0.5);
}

/* =============================================================================
   STYLE 30 — Two-Up Grid
   Replaces the old "Compact" design, which only differed by padding — already
   a style control. The items now lay out as a two-column FAQ wall on desktop
   and stack on mobile.
   ============================================================================= */

.stka-compact {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	align-items: start;
}
.stka-compact .stka-item {
	border: 1px solid var(--stk-border);
	border-radius: 12px;
	overflow: hidden;
	background: var(--stk-white);
	box-shadow: var(--stk-elev);
}
.stka-compact .stka-header {
	padding: 18px 18px;
	align-items: flex-start;
}
.stka-compact .stka-content {
	padding: 0 18px 20px;
}
.stka-compact .stka-item.stka-active {
	border-color: var(--stka-indicator-active);
}
.stka-compact .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
}
@media ( min-width: 900px ) {
	.stka-compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 16px;
	}
}

/* =============================================================================
   STYLE 31 — Leading Toggle
   Replaces a straight duplicate of Style 10. The toggle moves to the front of
   the row and the answer hangs under the title with a matching indent, so the
   list reads as an outline rather than a stack of cards.
   ============================================================================= */

.stka-left-border {
	gap: 0;
}
.stka-left-border .stka-item {
	overflow: visible;
	border-bottom: 1px dotted var(--stk-border);
}
.stka-left-border .stka-item:last-child {
	border-bottom: none;
}
.stka-left-border .stka-header {
	flex-direction: row;
	padding: 16px 4px;
	gap: 14px;
}
.stka-left-border .stka-indicator {
	order: -1;
	margin-left: 0;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background: #f2f3f7;
	transition: background-color 0.2s ease;
}
.stka-left-border .stka-title-wrap {
	order: 0;
}
.stka-left-border .stka-badge {
	order: 1;
	margin-left: auto;
}
.stka-left-border .stka-content {
	padding: 0 4px 20px 42px;
	max-width: 68ch;
}
.stka-left-border .stka-item.stka-active .stka-indicator {
	background: rgba( var(--stk-accent-rgb), 0.14 );
}
.stka-left-border .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
}

/* =============================================================================
   STYLE 32 — Pop Out
   Closed rows sit flush in a hairline list; the open row physically breaks the
   list bounds, widening past both edges and lifting on a two-layer shadow.
   ============================================================================= */

.stka-material {
	gap: 0;
	background: #f6f7fa;
	border-radius: 14px;
	padding: 8px 20px;
}
.stka-material .stka-item {
	border-bottom: 1px solid var(--stk-border-lt);
	border-radius: 12px;
	overflow: visible;
	transition: margin 0.25s ease, background-color 0.25s ease;
}
.stka-material .stka-item:last-child {
	border-bottom: none;
}
.stka-material .stka-header {
	padding: 18px 12px;
}
.stka-material .stka-content {
	padding: 0 12px 20px;
}
.stka-material .stka-item.stka-active {
	background: var(--stk-white);
	border-bottom-color: transparent;
	box-shadow: var(--stk-elev);
	margin: 10px -12px;
	padding: 4px 0;
	position: relative;
	z-index: 2;
}
.stka-material .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
	padding-left: 24px;
	padding-right: 24px;
}
.stka-material .stka-item.stka-active .stka-content {
	padding-left: 24px;
	padding-right: 24px;
}

/* =============================================================================
   STYLE 33 — Overline Label
   Replaces a design that only changed font weight — already a typography
   control. Each question now carries a numbered overline above the title and
   the row is separated by a heavy top rule.
   ============================================================================= */

.stka-bold-header {
	gap: 0;
	counter-reset: stka-over;
}
.stka-bold-header .stka-item {
	overflow: visible;
	border-top: 2px solid var(--stk-border-lt);
}
.stka-bold-header .stka-item:first-child {
	border-top: none;
}
.stka-bold-header .stka-header {
	align-items: flex-start;
	padding: 22px 4px 20px;
}
.stka-bold-header .stka-title-wrap::before {
	counter-increment: stka-over;
	content: attr(data-overline) ' ' counter(stka-over, decimal-leading-zero);
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--stka-indicator-active);
}
.stka-bold-header .stka-title {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
}
.stka-bold-header .stka-indicator {
	margin-top: 18px;
}
.stka-bold-header .stka-content {
	padding: 0 4px 24px;
	max-width: 68ch;
}
.stka-bold-header .stka-item.stka-active {
	border-top-color: var(--stka-indicator-active);
}
.stka-bold-header .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
}

/* =============================================================================
   STYLE 34 — Stepped Bar
   Replaces the old frosted-glass design, which rendered near-invisible on the
   white backgrounds most pages use. The question sits on a full-width bar and
   the answer is inset from both edges, giving the row a stepped silhouette.
   ============================================================================= */

.stka-frosted {
	gap: 8px;
}
.stka-frosted .stka-item {
	overflow: visible;
	border-radius: 10px;
}
.stka-frosted .stka-header {
	background: #f2f3f8;
	border-radius: 10px;
	padding: 18px 20px;
	transition: background-color 0.2s ease;
}
.stka-frosted .stka-header:hover {
	background: #e9ebf3;
}
.stka-frosted .stka-body {
	background: transparent;
}
.stka-frosted .stka-content {
	margin: 0 24px;
	padding: 16px 20px 18px;
	background: var(--stk-white);
	border: 1px solid var(--stk-border-lt);
	border-top: none;
	border-radius: 0 0 10px 10px;
	box-shadow: var(--stk-elev);
}
.stka-frosted .stka-item.stka-active .stka-header {
	background: var(--stka-indicator-active);
	color: var(--stk-white);
	border-radius: 10px 10px 0 0;
}
.stka-frosted .stka-item.stka-active .stka-indicator {
	color: var(--stk-white);
}
.stka-frosted .stka-item.stka-active .stka-content {
	margin: 0;
	border-radius: 0 0 10px 10px;
	border-color: rgba( var(--stk-accent-rgb), 0.25 );
}

/* =============================================================================
   STYLE 35 — Side-by-Side
   Replaces the old neumorphic design. On wide screens each row becomes a
   two-column grid: the question holds a fixed left column and the answer
   opens alongside it rather than beneath it.
   ============================================================================= */

.stka-neumorphic {
	gap: 8px;
}
.stka-neumorphic .stka-item {
	border: 1px solid var(--stk-border);
	border-radius: 12px;
	overflow: hidden;
	background: var(--stk-white);
}
.stka-neumorphic .stka-header {
	padding: 20px;
	align-items: flex-start;
}
.stka-neumorphic .stka-content {
	padding: 0 20px 20px;
}
.stka-neumorphic .stka-item.stka-active {
	border-color: var(--stka-indicator-active);
}
.stka-neumorphic .stka-item.stka-active .stka-header {
	color: var(--stka-indicator-active);
}
@media ( min-width: 900px ) {
	.stka-neumorphic .stka-item {
		display: grid;
		grid-template-columns: 300px minmax(0, 1fr);
		align-items: stretch;
	}
	.stka-neumorphic .stka-header {
		border-right: 1px solid var(--stk-border-lt);
		height: 100%;
	}
	/* The script writes an inline max-height for the vertical collapse; this
	   layout does not use it, so it has to be overridden. */
	.stka-neumorphic .stka-body {
		max-height: none !important;
		transition: opacity 0.25s ease;
		opacity: 0;
		visibility: hidden;
	}
	.stka-neumorphic .stka-item.stka-active .stka-body {
		opacity: 1;
		visibility: visible;
	}
	.stka-neumorphic .stka-content {
		padding: 20px;
		background: #fafbfd;
		height: 100%;
	}
}

/* =============================================================================
   Reduced motion
   ============================================================================= */

@media ( prefers-reduced-motion: reduce ) {
	.stka-wrap *,
	.stka-wrap *::before,
	.stka-wrap *::after {
		animation: none !important;
		transition: none !important;
	}
}