.rox-ms {
	--rox-ms-accent: #56211d;
	--rox-ms-accent-soft: #fef7e6;
	--rox-ms-on-accent: #fef7e6;
	--rox-ms-text: #2e2a28;
	--rox-ms-radius: 4px;
	--rox-ms-max: 720px;
	--rox-ms-dish-max: 58ch;
	--rox-ms-ratio: 16 / 9;
	--rox-ms-align: center;
	--rox-ms-serif: Georgia, "Times New Roman", serif;

	/* Type: overridable per element from Rox Widgets → Menu Switcher. */
	--rox-ms-tab-font: var(--rox-ms-serif);
	--rox-ms-tab-size: 18px;
	--rox-ms-tab-weight: 400;
	--rox-ms-caption-font: inherit;
	--rox-ms-caption-size: 16px;
	--rox-ms-caption-weight: 400;
	--rox-ms-course-title-font: var(--rox-ms-serif);
	--rox-ms-course-title-size: 18px;
	--rox-ms-course-title-weight: 400;
	--rox-ms-dish-font: inherit;
	--rox-ms-dish-size: 16px;
	--rox-ms-dish-weight: 400;

	box-sizing: border-box;
	max-width: var(--rox-ms-max);
	margin-inline: auto;
	color: var(--rox-ms-text);
}

.rox-ms *,
.rox-ms *::before,
.rox-ms *::after {
	box-sizing: inherit;
}

/* Image beside the menu instead of above it. */
.rox-ms--split {
	display: grid;
	align-items: stretch;
	gap: clamp(24px, 4vw, 48px);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Fills the column like a stretched Avada half-column instead of holding a ratio. */
.rox-ms--split .rox-ms-media {
	aspect-ratio: auto;
	height: 100%;
	min-height: var(--rox-ms-min-height, 420px);
}

.rox-ms--split.rox-ms--keep-ratio {
	align-items: start;
}

.rox-ms--split.rox-ms--keep-ratio .rox-ms-media {
	aspect-ratio: var(--rox-ms-ratio);
	height: auto;
	min-height: 0;
}

.rox-ms--split .rox-ms-media {
	grid-column: 1;
}

.rox-ms--split .rox-ms-content {
	grid-column: 2;
}

.rox-ms--image-right .rox-ms-media {
	grid-column: 2;
}

.rox-ms--image-right .rox-ms-content {
	grid-column: 1;
}

@media (max-width: 860px) {
	.rox-ms--split {
		grid-template-columns: minmax(0, 1fr);
	}

	.rox-ms--split .rox-ms-media,
	.rox-ms--split .rox-ms-content {
		grid-column: 1;
	}

	/* Stacked: the ratio takes over again. */
	.rox-ms--split .rox-ms-media {
		aspect-ratio: var(--rox-ms-ratio);
		height: auto;
		min-height: 0;
	}

	/* Stacked: the image is above the column again, so the column takes the gap. */
	.rox-ms--split .rox-ms-content {
		margin-top: 26px;
	}
}

.rox-ms-media {
	position: relative;
	aspect-ratio: var(--rox-ms-ratio);
	overflow: hidden;
	border-radius: var(--rox-ms-radius);
	background: var(--rox-ms-accent-soft);
	box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.1);
}

.rox-ms-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.03);
	transition: opacity 0.55s ease-out, transform 0.9s ease-out;
}

.rox-ms-img.is-active {
	opacity: 1;
	transform: scale(1);
}

/* The gap under the image belongs to the column, not to whatever happens to be first in it. */
.rox-ms--stacked .rox-ms-content {
	margin-top: 26px;
}

.rox-ms-content > :first-child {
	margin-top: 0;
}

.rox-ms-switch {
	position: relative;
	display: flex;
	width: max-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 4px;
	background: var(--rox-ms-accent-soft);
	border-radius: 999px;
}

.rox-ms-thumb {
	position: absolute;
	top: 4px;
	left: 4px;
	height: calc(100% - 8px);
	width: 0;
	background: var(--rox-ms-accent);
	border-radius: 999px;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

/*
 * Themes such as Avada style every button and h3 globally, sometimes with
 * !important. The type properties below are the ones the widget owns, so they
 * claim them outright — everything else stays overridable.
 */
.rox-ms .rox-ms-tab {
	position: relative;
	z-index: 1;
	appearance: none;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	padding: 10px 26px;
	min-height: 44px;
	/* course-title face, upright */
	font-family: var(--rox-ms-tab-font) !important;
	font-style: normal !important;
	font-weight: var(--rox-ms-tab-weight) !important;
	font-size: var(--rox-ms-tab-size) !important;
	letter-spacing: 0 !important;
	line-height: 1.3;
	text-transform: none !important;
	color: var(--rox-ms-accent) !important;
	border-radius: 999px;
	transition: color 0.3s ease-out;
}

.rox-ms .rox-ms-tab.is-active {
	color: var(--rox-ms-on-accent) !important;
}

.rox-ms-tab:focus-visible {
	outline: 2px solid var(--rox-ms-accent);
	outline-offset: 3px;
}

.rox-ms-caption {
	display: grid;
	margin: 14px 0 0;
	text-align: center;
}

.rox-ms .rox-ms-caption-text {
	grid-area: 1 / 1;
	font-family: var(--rox-ms-caption-font) !important;
	font-size: var(--rox-ms-caption-size) !important;
	font-weight: var(--rox-ms-caption-weight) !important;
	line-height: 1.75;
	color: var(--rox-ms-text) !important;
	opacity: 0;
	/* visibility keeps the faded-out caption out of the accessibility tree */
	visibility: hidden;
	transition: opacity 0.35s ease-out, visibility 0s linear 0.35s;
}

.rox-ms-caption-text.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.35s ease-out, visibility 0s;
}

.rox-ms .rox-ms-price {
	display: block;
	font-size: inherit !important;
	line-height: inherit;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: inherit !important;
}

.rox-ms-stage {
	position: relative;
	display: grid;
	margin-top: 34px;
	overflow: hidden;
	transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.rox-ms-panel {
	grid-area: 1 / 1;
	text-align: var(--rox-ms-align);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.4s ease-out, transform 0.4s ease-out;
	pointer-events: none;
}

.rox-ms-panel.is-active {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* Word reveal. Only active once JS has split the text, so no-JS keeps plain visible copy. */
.rox-ms--words .rox-ms-panel {
	transform: none;
	transition: opacity 0.3s ease-out;
}

.rox-ms-w {
	display: inline-block;
}

.rox-ms--words .rox-ms-w {
	opacity: 0;
	transform: translateY(7px);
	filter: blur(3px);
}

.rox-ms--words .rox-ms-panel.is-revealed .rox-ms-w {
	opacity: 1;
	transform: none;
	filter: none;
	transition: opacity 0.42s ease-out, transform 0.42s ease-out, filter 0.42s ease-out;
	transition-delay: var(--rox-ms-delay, 0ms);
}

.rox-ms-panel[hidden] {
	display: none;
}

.rox-ms-course + .rox-ms-course {
	margin-top: 26px;
}

.rox-ms .rox-ms-course-title {
	margin: 0 0 6px;
	font-family: var(--rox-ms-course-title-font) !important;
	font-style: italic !important;
	font-weight: var(--rox-ms-course-title-weight) !important;
	font-size: var(--rox-ms-course-title-size) !important;
	line-height: 1.3;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--rox-ms-accent) !important;
}

.rox-ms .rox-ms-dish {
	margin: 0 auto;
	max-width: var(--rox-ms-dish-max);
	font-family: var(--rox-ms-dish-font) !important;
	font-size: var(--rox-ms-dish-size) !important;
	font-weight: var(--rox-ms-dish-weight) !important;
	line-height: 1.75;
	color: var(--rox-ms-text) !important;
	text-wrap: balance;
}

.rox-ms--left .rox-ms-dish {
	margin-inline: 0;
}

@media (max-width: 640px) {
	.rox-ms {
		--rox-ms-ratio: 4 / 3;

		/* Inline sizes are set on the element itself, so a chosen number still wins here. */
		--rox-ms-tab-size: 17px;
		--rox-ms-dish-size: 15px;
		--rox-ms-caption-size: 15px;
	}

	.rox-ms .rox-ms-tab {
		padding: 10px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rox-ms-img,
	.rox-ms-panel,
	.rox-ms-thumb,
	.rox-ms-stage,
	.rox-ms-caption-text {
		transition: none;
	}
}