.sjv2-showcase,
.sjv2-showcase * {
	box-sizing: border-box;
}

.sjv2-showcase {
	width: 100%;
	position: relative;
}

.sjv2-desktop-wrap {
	display: flex;
	width: 100%;
}

.sjv2-tabs-top .sjv2-desktop-wrap,
.sjv2-tabs-bottom .sjv2-desktop-wrap {
	flex-direction: column;
}

.sjv2-tabs-bottom .sjv2-desktop-tabs {
	order: 2;
	margin-top: var(--sjv2-tabs-gap);
}

.sjv2-tabs-top .sjv2-desktop-tabs {
	order: 0;
	margin-bottom: var(--sjv2-tabs-gap);
}

.sjv2-tabs-top .sjv2-desktop-content,
.sjv2-tabs-bottom .sjv2-desktop-content {
	order: 1;
}

.sjv2-tabs-left .sjv2-desktop-wrap,
.sjv2-tabs-right .sjv2-desktop-wrap {
	align-items: stretch;
	gap: var(--sjv2-tabs-gap);
}

.sjv2-tabs-left .sjv2-desktop-wrap {
	flex-direction: row;
}

.sjv2-tabs-right .sjv2-desktop-wrap {
	flex-direction: row-reverse;
}

.sjv2-tabs-left .sjv2-desktop-tabs,
.sjv2-tabs-right .sjv2-desktop-tabs {
	width: var(--sjv2-side-tabs-width);
	flex: 0 0 var(--sjv2-side-tabs-width);
	display: flex;
	flex-direction: column;
}

.sjv2-tabs-left .sjv2-desktop-content,
.sjv2-tabs-right .sjv2-desktop-content {
	min-width: 0;
	flex: 1 1 auto;
}

.sjv2-desktop-tabs {
	background: var(--sjv2-tabs-bg);
}

.sjv2-tabs-top .sjv2-desktop-tabs,
.sjv2-tabs-bottom .sjv2-desktop-tabs {
	display: grid;
	grid-template-columns: repeat(var(--sjv2-tab-count), minmax(0, 1fr));
}

.sjv2-tab-button {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: var(--sjv2-tab-padding);
	background-color: var(--sjv2-tab-bg) !important;
	color: var(--sjv2-tab-color) !important;
	min-height: var(--sjv2-tab-min-height);
	width: 100%;
	position: relative;
	display: flex;
	align-items: var(--sjv2-tab-align);
	justify-content: flex-start;
	text-align: start;
	cursor: pointer;
	transition: color var(--sjv2-tab-transition) ease, background-color var(--sjv2-tab-transition) ease;
	outline: none;
}

.sjv2-tab-button::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: var(--sjv2-separator-width);
	height: var(--sjv2-separator-height);
	background: var(--sjv2-separator-color);
	transform: translateY(-50%);
	transition: background-color var(--sjv2-tab-transition) ease;
}

[dir="rtl"] .sjv2-tab-button::before {
	left: auto;
	right: 0;
}

.sjv2-showcase .sjv2-tab-button:hover:not(.is-active),
.sjv2-showcase .sjv2-tab-button:focus-visible:not(.is-active) {
	color: var(--sjv2-tab-hover-color) !important;
	background-color: var(--sjv2-tab-hover-bg) !important;
}

.sjv2-showcase .sjv2-tab-button:hover:not(.is-active)::before,
.sjv2-showcase .sjv2-tab-button:focus-visible:not(.is-active)::before {
	background-color: var(--sjv2-separator-hover-color);
}

.sjv2-showcase .sjv2-tab-button.is-active,
.sjv2-showcase .sjv2-tab-button.is-active:hover,
.sjv2-showcase .sjv2-tab-button.is-active:focus-visible {
	color: var(--sjv2-tab-active-color) !important;
	background-color: var(--sjv2-tab-active-bg) !important;
}

.sjv2-showcase .sjv2-tab-button.is-active::before,
.sjv2-showcase .sjv2-tab-button.is-active:hover::before,
.sjv2-showcase .sjv2-tab-button.is-active:focus-visible::before {
	background-color: var(--sjv2-separator-active-color);
}

.sjv2-tab-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.sjv2-desktop-content {
	position: relative;
	background-color: var(--sjv2-content-bg);
	background-image: var(--sjv2-content-bg-image);
	background-repeat: no-repeat;
	background-position: center;
	background-size: var(--sjv2-content-bg-size);
	border: var(--sjv2-content-border-width) solid var(--sjv2-content-border-color);
	border-radius: var(--sjv2-content-radius);
	overflow: hidden;
}

.sjv2-panel[hidden] {
	display: none !important;
}

.sjv2-panel {
	width: 100%;
}

.sjv2-panel-inner {
	display: flex;
	width: 100%;
	min-height: var(--sjv2-content-min-height);
}

.sjv2-image-right .sjv2-panel-inner {
	flex-direction: row-reverse;
}

.sjv2-image-left .sjv2-panel-inner {
	flex-direction: row;
}

.sjv2-panel-image {
	width: var(--sjv2-image-width);
	flex: 0 0 var(--sjv2-image-width);
	min-width: 0;
	overflow: hidden;
}

.sjv2-panel-image img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	object-fit: var(--sjv2-image-fit);
	object-position: var(--sjv2-image-position);
}

.sjv2-panel-copy {
	width: calc(100% - var(--sjv2-image-width));
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--sjv2-copy-padding);
	background: var(--sjv2-copy-bg);
	display: flex;
	flex-direction: column;
	justify-content: var(--sjv2-copy-justify);
	align-items: var(--sjv2-copy-align);
	text-align: var(--sjv2-text-align);
}


.sjv2-content-title {
	width: 100%;
	color: var(--sjv2-title-color);
	margin: 0 0 var(--sjv2-title-margin-bottom);
}

.sjv2-description {
	width: 100%;
	color: var(--sjv2-description-color);
	margin: 0 0 var(--sjv2-description-margin-bottom);
}

.sjv2-description > :first-child {
	margin-top: 0;
}

.sjv2-description > :last-child {
	margin-bottom: 0;
}

.sjv2-button {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--sjv2-button-color);
	background: var(--sjv2-button-bg);
	border: var(--sjv2-button-border-width) solid var(--sjv2-button-border-color);
	border-radius: var(--sjv2-button-radius);
	padding: var(--sjv2-button-padding);
	overflow: hidden;
	cursor: pointer;
	transition: color var(--sjv2-button-duration) ease, border-color var(--sjv2-button-duration) ease;
}

.sjv2-button-fill {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--sjv2-button-hover-fill);
	transform: scaleX(0);
	transform-origin: var(--sjv2-button-fill-origin);
	transition: transform var(--sjv2-button-duration) ease;
}

.sjv2-button:hover,
.sjv2-button:focus-visible {
	color: var(--sjv2-button-hover-color);
}

.sjv2-button:hover .sjv2-button-fill,
.sjv2-button:focus-visible .sjv2-button-fill {
	transform: scaleX(1);
}

.sjv2-button-content {
	display: inline-flex;
	align-items: center;
	gap: var(--sjv2-button-icon-gap);
}

.sjv2-button-icon,
.sjv2-button-icon svg,
.sjv2-button-icon i {
	display: inline-flex;
	line-height: 1;
	fill: currentColor;
	color: currentColor;
}

.sjv2-mobile-accordion {
	display: none;
	width: 100%;
}

.sjv2-mobile-item {
	border-bottom: 1px solid var(--sjv2-mobile-border-color);
}

.sjv2-mobile-header {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	width: 100%;
	padding: var(--sjv2-mobile-header-padding);
	background: var(--sjv2-mobile-header-bg);
	color: var(--sjv2-mobile-header-color);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	text-align: start;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}

.sjv2-mobile-item.is-open .sjv2-mobile-header {
	background: var(--sjv2-mobile-header-active-bg);
	color: var(--sjv2-mobile-header-active-color);
}

.sjv2-mobile-title {
	flex: 1 1 auto;
	min-width: 0;
}

.sjv2-mobile-icon {
	width: var(--sjv2-mobile-icon-size);
	height: var(--sjv2-mobile-icon-size);
	flex: 0 0 var(--sjv2-mobile-icon-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--sjv2-mobile-icon-bg);
	color: var(--sjv2-mobile-icon-color);
	font: 700 18px/1 Arial, sans-serif;
	transition: background-color .25s ease, color .25s ease;
}

.sjv2-mobile-item.is-open .sjv2-mobile-icon {
	background: var(--sjv2-mobile-icon-active-bg);
	color: var(--sjv2-mobile-icon-active-color);
}

.sjv2-minus {
	display: none;
}

.sjv2-mobile-item.is-open .sjv2-plus {
	display: none;
}

.sjv2-mobile-item.is-open .sjv2-minus {
	display: inline;
}

.sjv2-mobile-body {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows .35s ease, visibility .35s ease;
}

.sjv2-mobile-item.is-open .sjv2-mobile-body {
	grid-template-rows: 1fr;
	visibility: visible;
}

.sjv2-mobile-body-inner {
	min-height: 0;
	overflow: hidden;
	background: var(--sjv2-mobile-body-bg);
	border-radius: var(--sjv2-content-radius);
}

.sjv2-mobile-body .sjv2-panel-inner {
	min-height: 0;
	flex-direction: column;
}

.sjv2-mobile-body .sjv2-panel-image {
	order: 1;
	width: 100%;
	flex: 0 0 auto;
	height: var(--sjv2-mobile-image-height);
}

.sjv2-mobile-body .sjv2-panel-copy {
	order: 2;
	width: 100%;
	padding: var(--sjv2-copy-padding);
	align-items: var(--sjv2-copy-align);
}

.sjv2-hide-mobile-content-title .sjv2-mobile-body .sjv2-content-title {
	display: none;
}

@media (max-width: 1024px) {
	.sjv2-tab-button {
		padding: var(--sjv2-tab-padding);
	}
}
