/* @import ../../../../theme/current/style/variables.css */
:root {
	/* SimpleUpdates palette — fixed brand values, not theme-settings driven.
	   (--config-* colors from theme.conf are intentionally ignored here.) */

	/* ── Brand tokens (marketing pages) ── */
	--mk-paper: #FAFAF9;
	--mk-paper-2: #F2F2F0;
	--mk-white: #FFFFFF;
	--mk-black: #0A0A0A;
	--mk-ink: #1A1A1A;
	--mk-ink-2: #4A4A48;
	--mk-ink-3: #77776F;
	--mk-line: #E2E2DE;
	--mk-line-2: #EDEDEA;
	--mk-d-ink: #F5F5F3;
	--mk-d-ink-2: #A8A8A2;
	--mk-d-line: #262626;
	--mk-blue: #526DAB;
	--mk-blue-deep: #455C91;
	--mk-blue-wash: #EDF1F9;
	--mk-green: #6D973E;
	--mk-green-text: #51712E;
	--mk-green-wash: #F4F7F0;
	--mk-yellow: #FEBF31;
	--mk-f-ui: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--mk-f-written: "Source Serif 4", Georgia, serif;
	--mk-wrap: 1180px;
	--mk-gut: clamp(22px, 5vw, 60px);
	--mk-ease: cubic-bezier(.22, .7, .3, 1);

	/* ── Color palette (Starter names, mapped to the brand) ── */
	--primary-color: var(--mk-blue);
	--primary-light: color-mix(in srgb, var(--primary-color), white 20%);
	--primary-dark: var(--mk-blue-deep);
	--secondary-color: var(--mk-black);
	--accent-color: var(--mk-blue-deep);
	--accent-light: var(--mk-blue);
	--accent-hover: color-mix(in srgb, var(--accent-color), black 15%);
	--text-color: var(--mk-ink);
	--text-secondary: var(--mk-ink-2);
	--text-muted: var(--mk-ink-3);
	--text-inverse: var(--mk-d-ink);
	--bg-white: var(--mk-white);
	--bg-light: var(--mk-paper-2);
	--bg-warm: var(--mk-paper);
	--border-color: var(--mk-line);
	--border-light: var(--mk-line-2);
	--focus-ring: var(--mk-blue);
	--success-color: var(--mk-green-text);
	--error-color: #C03030;

	--primary-contrast: #fff;
	--secondary-contrast: #fff;
	--accent-contrast: #fff;

	/* ── Typography ── */
	--font-heading: var(--mk-f-ui);
	--font-body: var(--mk-f-ui);
	--font-ui: var(--mk-f-ui);
	--font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

	/* ── Type scale ── */
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-md: 1.0625rem;
	--text-lg: 1.1875rem;
	--text-xl: 1.375rem;
	--text-2xl: 1.75rem;
	--text-3xl: 2.25rem;
	--text-4xl: 3rem;
	--text-5xl: 3.75rem;

	/* ── Spacing ── */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	--spacing-2xl: 3rem;
	--spacing-3xl: 4.5rem;
	--spacing-4xl: 6.5rem;

	/* ── Layout ── */
	--container-max: var(--mk-wrap);
	--nav-height: 56px;
	--radius-sm: 4px;
	--radius-md: 10px;
	--radius-lg: 16px;

	/* ── Shadows ── */
	--shadow-sm: 0 1px 4px rgba(26, 26, 26, .06), 0 1px 2px rgba(26, 26, 26, .04);
	--shadow-md: 0 2px 4px rgba(26, 26, 26, .04), 0 12px 28px -14px rgba(26, 26, 26, .22);
	--shadow-lg: 0 2px 4px rgba(26, 26, 26, .04), 0 30px 60px -30px rgba(26, 26, 26, .28);

	/* ── Transitions ── */
	--transition-fast: 140ms ease;
	--transition-base: 240ms ease;
	--transition-slow: 380ms ease;

	/* ── Footer ── */
	--footer-bg: var(--mk-black);
	--footer-text: var(--mk-d-ink-2);
	--footer-link: var(--mk-d-ink-2);
}



/* @import ../../../../theme/current/style/header.css */
html.su_bootstrap_safe {
	.site-header {
		position: sticky;
		top: 0;
		z-index: 200;
		height: var(--nav-height);
		background: rgba(250, 250, 249, .82);
		-webkit-backdrop-filter: saturate(180%) blur(16px);
		backdrop-filter: saturate(180%) blur(16px);
		border-bottom: 1px solid var(--mk-line-2);
		transition: background .3s, border-color .3s;
	}

	.site-header > .su-container {
		height: 100%;
	}

	.site-header__inner {
		display: flex;
		align-items: center;
		gap: 24px;
		height: 100%;
	}

	/* Wordmark */
	.mk-logo {
		font-family: var(--mk-f-ui);
		font-size: 20px;
		letter-spacing: -.03em;
		line-height: 1;
		color: var(--mk-ink);
		text-decoration: none;
		white-space: nowrap;
		transition: color .3s;

		&:hover {
			color: var(--mk-ink);
			text-decoration: none;
		}
	}

	.mk-logo__m { font-weight: 500; }
	.mk-logo__t { font-weight: 200; }

	/* Mark + wordmark lockup. The mark is optional: without one the wordmark
	   sits exactly where it always did. */
	.mk-logo:has(.mk-logo__mark) {
		display: inline-flex;
		align-items: center;
	}

	/* Margin on the mark, not gap on the lockup: gap would also push the two
	   halves of the wordmark apart. */
	.mk-logo__mark {
		display: block;
		width: 28px;
		height: 28px;
		margin-right: 9px;
		object-fit: contain;
		flex-shrink: 0;
	}

	.site-header__logo {
		margin-right: auto;
		flex-shrink: 0;
	}

	.site-header__cta {
		flex-shrink: 0;
	}

	.site-header__login {
		flex-shrink: 0;
		font-family: var(--mk-f-ui);
		font-size: 14px;
		color: var(--mk-ink-2);
		text-decoration: none;
		transition: color .3s;

		&:hover {
			color: var(--mk-ink);
			text-decoration: none;
		}
	}

	.site-header.is-on-dark .site-header__login {
		color: var(--mk-d-ink-2);

		&:hover { color: var(--mk-d-ink); }
	}

	@media (max-width: 400px) {
		.site-header__login { display: none; }
	}

	/* Hamburger */
	.nav-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		background: none;
		border: none;
		cursor: pointer;
		padding: 8px;
		margin-right: -8px;
		color: var(--mk-ink);
		border-radius: var(--radius-sm);
	}

	.nav-toggle__bar {
		display: block;
		width: 20px;
		height: 1.5px;
		background: currentColor;
		border-radius: 2px;
		transition: transform var(--transition-base), opacity var(--transition-base);
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
		transform: translateY(6.5px) rotate(45deg);
	}
	.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
		opacity: 0;
	}
	.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
		transform: translateY(-6.5px) rotate(-45deg);
	}

	/* Inverted while the header sits over a dark band (toggled by marketing.js) */
	.site-header.is-on-dark {
		background: rgba(10, 10, 10, .72);
		border-bottom-color: #1E1E1E;

		.mk-logo { color: var(--mk-d-ink); }
		.nav-toggle { color: var(--mk-d-ink); }
	}

	/* .site-header prefix out-ranks .mk-btn's display, which loads later */
	@media (max-width: 560px) {
		.site-header .site-header__cta {
			display: none;
		}
	}
}

@media (min-width: 1080px) {
	html.su_bootstrap_safe .nav-toggle {
		display: none;
	}
}



/* @import navigation.css */
/* Mobile first: the nav is a drop-down panel under the header.
   Desktop (>=1080px): inline links with hover submenus. The breakpoint is
   wide because the sitemap has more top-level pages than the design's 3. */
html.su_bootstrap_safe {
	.site-nav {
		display: none;
		position: absolute;
		top: var(--nav-height);
		left: 0;
		right: 0;
		max-height: calc(100vh - var(--nav-height));
		overflow-y: auto;
		background: var(--mk-paper);
		border-bottom: 1px solid var(--mk-line);
		box-shadow: 0 24px 40px -24px rgba(26, 26, 26, .25);
		padding: 8px 0 16px;
		z-index: 200;

		&.is-open {
			display: block;
		}
	}

	.site-nav__list {
		list-style: none;
		margin: 0;
		padding: 0 var(--mk-gut);
	}

	.site-nav__item {
		border-bottom: 1px solid var(--mk-line-2);

		&:last-child {
			border-bottom: 0;
		}

		&.is-active > .site-nav__link {
			color: var(--mk-ink);
			font-weight: 500;
		}
	}

	.site-nav__link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 0;
		font-family: var(--mk-f-ui);
		font-size: 16px;
		font-weight: 400;
		letter-spacing: -.005em;
		color: var(--mk-ink-2);
		text-decoration: none;
		transition: color .3s;

		&:hover {
			color: var(--mk-ink);
			text-decoration: none;
		}
	}

	.site-nav__caret {
		font-size: .6em;
		margin-left: 6px;
		color: var(--mk-ink-3);
		transition: transform var(--transition-fast);
	}

	.site-nav__item.has-children.is-open .site-nav__caret {
		transform: rotate(180deg);
	}

	.site-nav__submenu {
		display: none;
		list-style: none;
		margin: 0;
		padding: 0 0 10px 14px;
	}

	.site-nav__item.has-children.is-open > .site-nav__submenu {
		display: block;
	}

	.site-nav__submenu .site-nav__link {
		padding: 8px 0;
		font-size: 15px;
	}

	/* Mobile panel follows the header when it's inverted */
	.site-header.is-on-dark .site-nav {
		background: var(--mk-black);
		border-bottom-color: var(--mk-d-line);

		.site-nav__item { border-bottom-color: var(--mk-d-line); }
		.site-nav__link { color: var(--mk-d-ink-2); }
		.site-nav__link:hover,
		.site-nav__item.is-active > .site-nav__link { color: var(--mk-d-ink); }
	}
}

@media (min-width: 1080px) {
	html.su_bootstrap_safe {
		.site-nav {
			display: flex;
			align-items: center;
			position: static;
			max-height: none;
			overflow: visible;
			background: transparent;
			border: 0;
			box-shadow: none;
			padding: 0;
		}

		.site-nav__list {
			display: flex;
			align-items: center;
			gap: 22px;
			padding: 0;
		}

		.site-nav__item {
			position: relative;
			border-bottom: 0;
		}

		.site-nav__link {
			padding: 6px 0;
			font-size: 14px;
			white-space: nowrap;
		}

		.site-nav__submenu {
			position: absolute;
			top: 100%;
			left: -16px;
			min-width: 210px;
			margin-top: 8px;
			padding: 6px;
			background: var(--mk-white);
			border: 1px solid var(--mk-line);
			border-radius: 12px;
			box-shadow: var(--shadow-lg);

			/* hover bridge across the gap */
			&::before {
				content: "";
				position: absolute;
				left: 0;
				right: 0;
				top: -10px;
				height: 10px;
			}
		}

		.site-nav__item.has-children:hover > .site-nav__submenu,
		.site-nav__item.has-children:focus-within > .site-nav__submenu {
			display: block;
		}

		.site-nav__submenu .site-nav__link {
			padding: 8px 10px;
			border-radius: 7px;
			font-size: 14px;
			color: var(--mk-ink-2);

			&:hover {
				background: var(--mk-paper-2);
				color: var(--mk-ink);
			}
		}

		.site-header.is-on-dark .site-nav {
			background: transparent;

			> .site-nav__list > .site-nav__item > .site-nav__link { color: var(--mk-d-ink-2); }
			> .site-nav__list > .site-nav__item > .site-nav__link:hover { color: var(--mk-d-ink); }
			.site-nav__submenu .site-nav__link { color: var(--mk-ink-2); }
			.site-nav__submenu .site-nav__link:hover { color: var(--mk-ink); }
		}
	}
}



/* @import ../../../../theme/current/style/hero.css */
/* Interior page title band. The homepage has its own hero in marketing.css
   (.mk-hero); a featured image still gets the dark photo treatment. */
html.su_bootstrap_safe {
	.hero {
		position: relative;
		display: flex;
		align-items: flex-end;
		min-height: 360px;
		padding: clamp(56px, 8vw, 110px) 0 clamp(40px, 6vw, 72px);
		background-size: cover;
		background-repeat: no-repeat;
		color: var(--mk-d-ink);

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(180deg, rgba(10, 10, 10, .2) 0%, rgba(10, 10, 10, .72) 100%);
		}

		&.hero--solid {
			min-height: 0;
			background: var(--mk-paper);
			color: var(--mk-ink);
			border-bottom: 1px solid var(--mk-line-2);

			&::before {
				display: none;
			}

			.hero__title { color: var(--mk-ink); text-shadow: none; }
			.hero__description { color: var(--mk-ink-2); }
			.hero__eyebrow { color: var(--mk-ink-3); }
		}
	}

	.hero__content {
		position: relative;
		z-index: 1;
		max-width: 900px;
	}

	.hero__eyebrow {
		display: block;
		margin-bottom: 20px;
		font-family: var(--mk-f-ui);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--mk-d-ink-2);
	}

	.hero__title {
		margin: 0 0 18px;
		font-family: var(--mk-f-ui);
		font-size: clamp(36px, 5.6vw, 72px);
		font-weight: 600;
		line-height: 1.03;
		letter-spacing: -.035em;
		text-wrap: balance;
		color: #fff;
	}

	.hero__description {
		max-width: 46ch;
		font-size: clamp(17px, 1.9vw, 21px);
		font-weight: 300;
		line-height: 1.5;
		letter-spacing: -.012em;
		color: rgba(255, 255, 255, .82);
	}
}



/* @import ../../../../theme/current/style/breadcrumbs.css */
html.su_bootstrap_safe {
	.breadcrumbs {
		background: var(--bg-light);
		border-bottom: 1px solid var(--border-light);
		padding: .75rem 0;
	}

	.breadcrumbs__list {
		list-style: none;
		display: flex;
		align-items: center;
		gap: var(--spacing-sm);
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
	}

	.breadcrumbs__item {
		display: flex;
		align-items: center;
		gap: var(--spacing-sm);
		color: var(--text-secondary);

		&:not(:last-child)::after {
			content: '\203A';
			color: var(--border-color);
		}
	}

	.breadcrumbs__link {
		color: var(--primary-color);
		text-decoration: none;

		&:hover {
			color: var(--accent-color);
		}
	}

	.breadcrumbs__current {
		color: var(--text-secondary);
	}
}



/* @import ../../../../theme/current/style/content.css */
/* ── Section wrappers ── */
html.su_bootstrap_safe {
	.section {
		padding: var(--spacing-3xl) 0;
	}

	.section--alt {
		background: var(--bg-light);
	}

	.section--dark {
		background: var(--primary-color);
		color: color-mix(in srgb, var(--primary-contrast) 85%, transparent);
	}

	.section--dark .section__title {
		color: var(--primary-contrast);
	}

	.section--dark .section__desc {
		color: color-mix(in srgb, var(--primary-contrast) 65%, transparent);
	}

	.section__header {
		text-align: center;
		max-width: 600px;
		margin: 0 auto var(--spacing-3xl);
	}

	.section__header--left {
		text-align: left;
		margin-left: 0;
	}

	.section__eyebrow {
		font-family: var(--font-ui);
		font-size: var(--text-xs);
		font-weight: 700;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--accent-color);
		margin-bottom: var(--spacing-sm);
	}

	.section--dark .section__eyebrow {
		color: var(--accent-light);
	}

	.section__title {
		font-family: var(--font-heading);
		font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
		line-height: 1.2;
		color: var(--primary-color);
		margin-bottom: var(--spacing-md);
	}

	.section__desc {
		font-size: var(--text-lg);
		color: var(--text-secondary);
		line-height: 1.7;
	}

	.section__footer {
		text-align: center;
		margin-top: var(--spacing-2xl);
	}
}

/* ── Page header (interior pages) ── */
html.su_bootstrap_safe {
	.page-header {
		background: var(--primary-color);
		padding: var(--spacing-3xl) 0 var(--spacing-2xl);
		position: relative;
		overflow: hidden;
	}

	.page-header::before {
		content: '';
		position: absolute;
		inset: 0;
		background:
			radial-gradient(circle at 70% 50%, rgba(196, 98, 45, .13) 0%, transparent 55%),
			radial-gradient(circle at 10% 80%, rgba(255, 255, 255, .03) 0%, transparent 40%);
	}

	.page-header__content {
		position: relative;
		z-index: 1;
	}

	.page-header__eyebrow {
		font-family: var(--font-ui);
		font-size: var(--text-xs);
		font-weight: 700;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--accent-light);
		margin-bottom: var(--spacing-sm);
	}

	.page-header__title {
		font-family: var(--font-heading);
		font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
		color: var(--primary-contrast);
		line-height: 1.15;
		margin-bottom: var(--spacing-md);
	}

	.page-header__desc {
		font-size: var(--text-xl);
		color: color-mix(in srgb, var(--primary-contrast) 70%, transparent);
		max-width: 580px;
	}
}

/* ── Content layout ── */
html.su_bootstrap_safe {
	.site-content {
		flex: 1 1 auto;
	}

	.content-layout {
		padding: var(--spacing-3xl) 0;
	}

	.content-layout__inner {
		max-width: 760px;
	}
}

/* ── Feature split ── */
html.su_bootstrap_safe {
	.feature-split {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--spacing-3xl);
		align-items: center;
	}

	.feature-split--reverse .feature-split__media {
		order: -1;
	}

	.feature-split__body .section__eyebrow {
		text-align: left;
	}

	.feature-split__body .section__title {
		text-align: left;
	}

	.feature-split__text {
		font-size: var(--text-lg);
		color: var(--text-secondary);
		line-height: 1.75;
		margin-bottom: var(--spacing-xl);
	}

	.feature-split__text p + p {
		margin-top: var(--spacing-md);
	}

	.feature-split__actions {
		display: flex;
		gap: var(--spacing-md);
		flex-wrap: wrap;
	}

	.feature-split__media {
		position: relative;
	}

	.feature-split__img {
		border-radius: var(--radius-lg);
		width: 100%;
		aspect-ratio: 4/3;
		object-fit: cover;
		box-shadow: var(--shadow-lg);
	}

	.feature-split__badge {
		position: absolute;
		bottom: -1rem;
		left: var(--spacing-lg);
		background: var(--accent-color);
		color: var(--accent-contrast);
		border-radius: var(--radius-md);
		padding: var(--spacing-md) var(--spacing-lg);
		box-shadow: var(--shadow-md);
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		font-weight: 600;
		text-align: center;
		min-width: 130px;
		line-height: 1.3;
	}

	.feature-split__badge-num {
		display: block;
		font-family: var(--font-heading);
		font-size: var(--text-3xl);
		line-height: 1;
		margin-bottom: 2px;
	}
}

@media (min-width: 768px) {
	html.su_bootstrap_safe .feature-split {
		grid-template-columns: 1fr 1fr;
	}

	html.su_bootstrap_safe .feature-split--reverse .feature-split__media {
		order: unset;
	}
}

/* ── Prose (article body / rich content) ── */
html.su_bootstrap_safe .prose h1,
html.su_bootstrap_safe .prose h2,
html.su_bootstrap_safe .prose h3,
html.su_bootstrap_safe .prose h4,
html.su_bootstrap_safe .prose h5,
html.su_bootstrap_safe .prose h6 {
	font-family: var(--font-heading);
	font-weight: 600;
	letter-spacing: -.03em;
	line-height: 1.12;
	color: var(--text-color);
	margin-top: var(--spacing-2xl);
	margin-bottom: var(--spacing-md);
}

html.su_bootstrap_safe .prose h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-4xl)); }
html.su_bootstrap_safe .prose h2 { font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl)); }
html.su_bootstrap_safe .prose h3 { font-size: var(--text-2xl); }
html.su_bootstrap_safe .prose h4 { font-size: var(--text-xl); }
html.su_bootstrap_safe .prose h5 { font-size: var(--text-lg); }
html.su_bootstrap_safe .prose h6 {
	font-family: var(--font-ui);
	font-size: var(--text-base);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--accent-color);
}

html.su_bootstrap_safe .prose p {
	margin-bottom: var(--spacing-lg);
	font-size: var(--text-md);
	line-height: 1.8;
}

html.su_bootstrap_safe .prose ul,
html.su_bootstrap_safe .prose ol {
	margin-bottom: var(--spacing-lg);
	padding-left: var(--spacing-xl);
}

html.su_bootstrap_safe .prose li {
	margin-bottom: var(--spacing-sm);
	font-size: var(--text-md);
	line-height: 1.7;
}

html.su_bootstrap_safe .prose blockquote {
	border-left: 4px solid var(--accent-color);
	background: var(--bg-light);
	padding: var(--spacing-lg) var(--spacing-xl);
	margin: var(--spacing-2xl) 0;
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

html.su_bootstrap_safe .prose blockquote p {
	font-family: var(--font-heading);
	font-style: italic;
	font-size: var(--text-xl);
	color: var(--primary-color);
	margin-bottom: 0;
	line-height: 1.45;
}

html.su_bootstrap_safe .prose blockquote cite {
	display: block;
	margin-top: var(--spacing-sm);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-style: normal;
	color: var(--text-secondary);
}

html.su_bootstrap_safe .prose a {
	color: var(--primary-color);
	text-decoration-color: var(--accent-color);
}

html.su_bootstrap_safe .prose strong {
	font-weight: 600;
}

html.su_bootstrap_safe .prose code {
	font-family: var(--font-mono);
	font-size: .875em;
	background: var(--bg-light);
	border: 1px solid var(--border-color);
	padding: .15em .4em;
	border-radius: var(--radius-sm);
	color: var(--primary-color);
}

html.su_bootstrap_safe .prose figure {
	margin: var(--spacing-2xl) 0;
}

html.su_bootstrap_safe .prose figure img {
	border-radius: var(--radius-md);
	width: 100%;
}

html.su_bootstrap_safe .prose figcaption {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--text-secondary);
	text-align: center;
	margin-top: var(--spacing-sm);
	font-style: italic;
}

/* ── Two-column article layout ── */
html.su_bootstrap_safe .two-col {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-3xl);
	padding: var(--spacing-3xl) 0;
}

/* Prevent grid children from overflowing their column */
html.su_bootstrap_safe .two-col > * {
	min-width: 0;
}

@media (min-width: 768px) {
	html.su_bootstrap_safe .two-col {
		grid-template-columns: 1fr 300px;
	}
}

/* ── Article header ── */
html.su_bootstrap_safe {
	.article-header {
		margin-bottom: var(--spacing-2xl);
	}

	.article-header__category {
		display: inline-block;
		font-family: var(--font-ui);
		font-size: var(--text-xs);
		font-weight: 700;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--accent-color);
		text-decoration: none;
		margin-bottom: .25rem;
	}

	.article-header__title {
		font-family: var(--font-heading);
		font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
		color: var(--primary-color);
		line-height: 1.1;
	}

	.prose .article-header__title {
		margin: 0 0 var(--spacing-md);
	}

	.article-header__meta {
		display: flex;
		align-items: center;
		gap: var(--spacing-md);
		flex-wrap: wrap;
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		color: var(--text-secondary);
		margin-bottom: var(--spacing-xl);
	}

	.article-header__hero-img {
		border-radius: var(--radius-lg);
		width: 100%;
		aspect-ratio: 16/8;
		object-fit: cover;
	}

	.article-header__avatar {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background: var(--primary-color);
		color: var(--primary-contrast);
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		font-weight: 700;
		flex-shrink: 0;
	}
}

/* ── Article footer (tags & share) ── */
html.su_bootstrap_safe {
	.article-tags {
		margin-top: var(--spacing-2xl);
		padding-top: var(--spacing-xl);
		border-top: 1px solid var(--border-light);
	}

	.article-share {
		margin-top: var(--spacing-xl);
		padding: var(--spacing-xl);
		background: var(--bg-light);
		border-radius: var(--radius-lg);
		border: 1px solid var(--border-light);
	}

	.article-share__buttons {
		display: flex;
		gap: var(--spacing-md);
		flex-wrap: wrap;
	}

	.tag-cloud {
		display: flex;
		flex-wrap: wrap;
		gap: var(--spacing-sm);
	}

	.tag {
		font-family: var(--font-ui);
		font-size: var(--text-xs);
		font-weight: 600;
		padding: .25rem .75rem;
		background: var(--bg-white, #fff);
		border: 1px solid var(--border-color);
		border-radius: var(--radius-sm);
		color: var(--primary-color);
		text-decoration: none;
		transition: all var(--transition-fast);
	}

	.tag:hover {
		background: var(--primary-color);
		border-color: var(--primary-color);
		color: var(--primary-contrast);
		text-decoration: none;
	}
}

/* ── Sidebar widgets ── */
html.su_bootstrap_safe {
	.sidebar-widget {
		background: var(--bg-light);
		border-radius: var(--radius-md);
		padding: var(--spacing-xl);
		margin-bottom: var(--spacing-xl);
		border: 1px solid var(--border-light);
	}

	.sidebar-widget__title {
		font-family: var(--font-heading);
		font-size: var(--text-lg);
		color: var(--primary-color);
		margin-bottom: var(--spacing-lg);
		padding-bottom: var(--spacing-md);
		border-bottom: 2px solid var(--accent-color);
	}

	.sidebar-list {
		list-style: none;
	}

	.sidebar-list__item {
		display: flex;
		gap: var(--spacing-md);
		padding: var(--spacing-md) 0;
		border-bottom: 1px solid var(--border-light);
		align-items: flex-start;
	}

	.sidebar-list__item:last-child {
		border-bottom: none;
	}

	.sidebar-list__text {
		font-family: var(--font-ui);
		font-size: var(--text-sm);
	}

	.sidebar-list__img {
		width: 58px;
		height: 58px;
		border-radius: var(--radius-sm);
		overflow: hidden;
		flex-shrink: 0;
	}

	.sidebar-list__img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.sidebar-list__title {
		font-weight: 600;
		color: var(--primary-color);
		text-decoration: none;
		display: block;
		margin-bottom: 3px;
		line-height: 1.4;
		transition: color var(--transition-fast);

		&:hover {
			color: var(--accent-color);
		}
	}

	.sidebar-list__date {
		color: var(--text-secondary);
		font-size: var(--text-sm);
	}

	.sidebar-event__date {
		width: 44px;
		flex-shrink: 0;
		text-align: center;
		background: var(--primary-color);
		color: var(--primary-contrast);
		border-radius: var(--radius-sm);
		padding: var(--spacing-xs) var(--spacing-sm);
		line-height: 1.1;
	}

	.sidebar-event__month {
		display: block;
		font-family: var(--font-ui);
		font-size: 9px;
		font-weight: 700;
		letter-spacing: .1em;
		text-transform: uppercase;
		opacity: .7;
	}

	.sidebar-event__day {
		display: block;
		font-family: var(--font-heading);
		font-size: var(--text-xl);
	}
}

/* ── Stats row ── */
html.su_bootstrap_safe .stats-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-xl);
}

@media (min-width: 768px) {
	html.su_bootstrap_safe .stats-row {
		grid-template-columns: repeat(4, 1fr);
	}
}

html.su_bootstrap_safe {
	.stat {
		text-align: center;
		padding: var(--spacing-xl);
		background: color-mix(in srgb, var(--primary-contrast) 7%, transparent);
		border-radius: var(--radius-lg);
		border: 1px solid color-mix(in srgb, var(--primary-contrast) 10%, transparent);
	}

	.stat__num {
		font-family: var(--font-heading);
		font-size: var(--text-4xl);
		color: var(--primary-contrast);
		line-height: 1;
		margin-bottom: var(--spacing-xs);
	}

	.stat__label {
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		color: color-mix(in srgb, var(--primary-contrast) 55%, transparent);
		font-weight: 500;
	}
}

/* ── CTA banner ── */
html.su_bootstrap_safe {
	.cta-banner {
		background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
		border-radius: var(--radius-lg);
		padding: var(--spacing-3xl) var(--spacing-2xl);
		text-align: center;
		position: relative;
		overflow: hidden;
	}

	.cta-banner::before {
		content: '';
		position: absolute;
		inset: 0;
		background: radial-gradient(circle at 75% 20%, rgba(196, 98, 45, .18) 0%, transparent 55%),
		            radial-gradient(circle at 25% 80%, rgba(255, 255, 255, .04) 0%, transparent 45%);
	}

	.cta-banner__inner {
		position: relative;
		z-index: 1;
		max-width: 560px;
		margin: 0 auto;
	}

	.cta-banner__title {
		font-family: var(--font-heading);
		font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
		color: var(--primary-contrast);
		line-height: 1.2;
		margin-bottom: var(--spacing-md);
	}

	.cta-banner__desc {
		font-size: var(--text-lg);
		color: color-mix(in srgb, var(--primary-contrast) 75%, transparent);
		margin-bottom: var(--spacing-2xl);
	}

	.cta-banner__actions {
		display: flex;
		gap: var(--spacing-md);
		justify-content: center;
		flex-wrap: wrap;
	}
}



/* @import ../../../../theme/current/style/footer.css */
html.su_bootstrap_safe {
	.site-footer {
		margin-top: auto;
		padding-block: clamp(48px, 6vw, 72px) 32px;
		background: var(--footer-bg);
		color: var(--footer-text);
		border-top: 1px solid var(--mk-d-line);
		font-family: var(--mk-f-ui);
		font-size: 14px;

		a {
			color: var(--footer-link);
			text-decoration: none;

			&:hover {
				color: var(--mk-d-ink);
			}
		}

		.mk-logo {
			color: var(--mk-d-ink);
		}

		ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}
	}

	.site-footer__top {
		display: grid;
		grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
		gap: 32px;
		padding-bottom: clamp(32px, 4vw, 48px);
	}

	.site-footer__tag {
		max-width: 26ch;
		margin-top: 12px;
		line-height: 1.5;
		color: var(--mk-d-ink-2);
	}

	.site-footer .site-footer__heading {
		margin: 0 0 14px;
		font-family: var(--mk-f-ui);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: #6E6E68;
	}

	.site-footer__col li + li {
		margin-top: 9px;
	}

	.site-footer__identity {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 24px;
		padding-top: 24px;
		border-top: 1px solid var(--mk-d-line);
		font-size: 13px;
		color: var(--mk-d-ink-2);
	}

	.site-footer__legal {
		margin-left: auto;
	}

	@media (max-width: 860px) {
		.site-footer__top {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.site-footer__brand {
			grid-column: 1 / -1;
		}
	}

	@media (max-width: 520px) {
		.site-footer__top {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.site-footer__legal {
			margin-left: 0;
		}
	}
}

/* ── Framework "Powered by / Sitemap / Login" line, continues the dark footer ── */
html.su_bootstrap_safe span.footer {
	display: block;
	padding: 0 var(--mk-gut) 28px;
	background: var(--footer-bg);
	font-family: var(--mk-f-ui);
	font-size: 12px;
	line-height: 1.8;
	text-align: center;
	color: #5E5E58;

	a.footer {
		color: #77776F;
		text-decoration: none;

		&:hover {
			color: var(--mk-d-ink);
		}
	}
}

/* The closed cart drawer sits just off-canvas; its shadow bled a grey strip
   down the right edge of every page. */
html.su_bootstrap_safe .cart-sidebar:not(.cart-sidebar--open) {
	box-shadow: none;
}

/* This IS SimpleUpdates — "Powered by SimpleUpdates.com © 2002–…" is redundant here
   (and its year contradicts "since 2005"). Keep the Sitemap / Login links. */
html.su_bootstrap_safe span.footer .private_label {
	display: none;
}



/* @import ../../../../theme/current/style/search.css */
html.su_bootstrap_safe {
	.footer-search {
		display: flex;
		gap: var(--spacing-sm);
	}

	.footer-search__input {
		flex: 1;
		background: color-mix(in srgb, var(--secondary-contrast) 7%, transparent);
		border: 1px solid color-mix(in srgb, var(--secondary-contrast) 14%, transparent);
		border-radius: var(--radius-sm);
		color: var(--secondary-contrast);
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		padding: .5rem var(--spacing-md);
		outline: none;
		transition: border-color var(--transition-fast);

		&::placeholder {
			color: color-mix(in srgb, var(--secondary-contrast) 30%, transparent);
		}

		&:focus {
			border-color: var(--accent-color);
		}
	}

	.footer-search__btn {
		background: var(--accent-color);
		color: var(--accent-contrast);
		border: none;
		border-radius: var(--radius-sm);
		padding: .5rem var(--spacing-md);
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		font-weight: 600;
		cursor: pointer;
		transition: background var(--transition-fast);
		white-space: nowrap;

		&:hover {
			background: var(--accent-hover);
		}
	}
}



/* @import social-icons.css */
html.su_bootstrap_safe {
	.social-icons {
		display: flex;
		gap: var(--spacing-sm);
		flex-wrap: wrap;
	}

	.social-icons__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border-radius: 50%;
		background: color-mix(in srgb, var(--secondary-contrast) 7%, transparent);
		border: 1px solid color-mix(in srgb, var(--secondary-contrast) 12%, transparent);
		color: color-mix(in srgb, var(--secondary-contrast) 65%, transparent);
		text-decoration: none;
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		font-weight: 700;
		transition: all var(--transition-fast);

		svg {
			width: 18px;
			height: 18px;
		}

		&:hover {
			background: var(--accent-color);
			border-color: var(--accent-color);
			color: var(--accent-contrast);
			transform: translateY(-2px);
			text-decoration: none;
		}
	}
}



/* @import utilities.css */
/* ── Buttons ── */
html.su_bootstrap_safe {
	.su-btn {
		display: inline-flex;
		align-items: center;
		gap: var(--spacing-sm);
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		font-weight: 500;
		letter-spacing: -.01em;
		text-decoration: none;
		border: 1.5px solid transparent;
		border-radius: 999px;
		padding: .625rem var(--spacing-xl);
		cursor: pointer;
		transition: all var(--transition-fast);
		white-space: nowrap;
		line-height: 1.4;

		&:focus-visible {
			outline: 2px solid var(--focus-ring);
			outline-offset: 2px;
		}
	}

	.su-btn--primary {
		background: var(--accent-color);
		color: var(--accent-contrast);
		border-color: var(--accent-color);

		&:hover {
			background: var(--accent-hover);
			border-color: var(--accent-hover);
			color: var(--accent-contrast);
			transform: translateY(-1px);
			box-shadow: 0 4px 14px rgba(196, 98, 45, .32);
			text-decoration: none;
		}
	}

	.su-btn--secondary {
		background: transparent;
		color: var(--primary-color);
		border-color: var(--primary-color);

		&:hover {
			background: var(--primary-color);
			color: var(--primary-contrast);
			text-decoration: none;
		}
	}

	.su-btn--outline-white {
		background: transparent;
		color: #fff;
		border-color: rgba(255, 255, 255, .5);

		&:hover {
			background: #fff;
			color: var(--primary-color);
			border-color: #fff;
			text-decoration: none;
		}
	}

	.su-btn--ghost {
		background: rgba(255, 255, 255, .12);
		color: #fff;
		border-color: rgba(255, 255, 255, .35);
		backdrop-filter: blur(4px);

		&:hover {
			background: #fff;
			color: var(--primary-color);
			border-color: #fff;
			text-decoration: none;
		}
	}

	.su-btn--sm {
		padding: .375rem var(--spacing-md);
		font-size: var(--text-xs);
	}

	.su-btn--lg {
		padding: .875rem var(--spacing-2xl);
		font-size: var(--text-base);
	}

	.su-btn--full {
		width: 100%;
		justify-content: center;
	}

}

/* ── Cards ── */
html.su_bootstrap_safe {
	.card-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--spacing-xl);
	}

	.card {
		background: var(--bg-white);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-sm);
		border: 1px solid var(--border-light);
		overflow: hidden;
		display: flex;
		flex-direction: column;
		transition: transform var(--transition-base), box-shadow var(--transition-base);

		&:hover {
			transform: translateY(-4px);
			box-shadow: var(--shadow-lg);
		}
	}

	.card__thumb {
		width: 100%;
		aspect-ratio: 16/9;
		background: linear-gradient(135deg, var(--bg-warm) 0%, var(--border-color) 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.card__body {
		padding: var(--spacing-xl);
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.card__category {
		font-family: var(--font-ui);
		font-size: var(--text-xs);
		font-weight: 700;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--accent-color);
		margin-bottom: var(--spacing-sm);
	}

	.card__title {
		font-family: var(--font-heading);
		font-size: var(--text-xl);
		color: var(--primary-color);
		line-height: 1.3;
		margin-bottom: var(--spacing-sm);
	}

	.card__title a {
		text-decoration: none;
		color: inherit;

		&:hover {
			color: var(--accent-color);
		}
	}

	.card__excerpt {
		font-size: var(--text-base);
		color: var(--text-secondary);
		line-height: 1.65;
		flex: 1;
		margin-bottom: var(--spacing-lg);
	}

	.card__meta {
		display: flex;
		align-items: center;
		gap: var(--spacing-sm);
		font-family: var(--font-ui);
		font-size: var(--text-xs);
		color: var(--text-secondary);
		padding-top: var(--spacing-md);
		border-top: 1px solid var(--border-light);
		margin-top: auto;
	}

	.card__meta-dot {
		color: var(--border-color);
	}
}

@media (min-width: 600px) {
	html.su_bootstrap_safe .card-grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	html.su_bootstrap_safe .card-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ── Program cards ── */
html.su_bootstrap_safe {
	.programs-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--spacing-xl);
	}

	.program-card {
		border-radius: var(--radius-lg);
		overflow: hidden;
		border: 1px solid var(--border-light);
		background: var(--bg-white);
		box-shadow: var(--shadow-sm);
		transition: transform var(--transition-base), box-shadow var(--transition-base);
		display: flex;
		flex-direction: column;

		&:hover {
			transform: translateY(-4px);
			box-shadow: var(--shadow-lg);
		}
	}

	.program-card__thumb {
		height: 160px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 3rem;
		position: relative;
		overflow: hidden;

		&::after {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(to top, rgba(0, 0, 0, .3), transparent);
		}
	}

	.program-card__body {
		padding: var(--spacing-lg);
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.program-card__dept {
		font-family: var(--font-ui);
		font-size: var(--text-xs);
		font-weight: 700;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--accent-color);
		margin-bottom: var(--spacing-sm);
	}

	.program-card__title {
		font-family: var(--font-heading);
		font-size: var(--text-xl);
		color: var(--primary-color);
		line-height: 1.3;
		margin-bottom: var(--spacing-sm);
	}

	.program-card__title a {
		text-decoration: none;
		color: inherit;

		&:hover {
			color: var(--accent-color);
		}
	}

	.program-card__desc {
		font-size: var(--text-sm);
		color: var(--text-secondary);
		line-height: 1.6;
		flex: 1;
		margin-bottom: var(--spacing-md);
	}

	.program-card__footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: var(--spacing-md);
		border-top: 1px solid var(--border-light);
		font-family: var(--font-ui);
		font-size: var(--text-xs);
		color: var(--text-secondary);
	}

	.program-card__ages {
		display: inline-block;
		background: var(--bg-light);
		border-radius: 100px;
		padding: 2px 10px;
		font-weight: 600;
	}
}

@media (min-width: 540px) {
	html.su_bootstrap_safe .programs-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	html.su_bootstrap_safe .programs-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ── Event list ── */
html.su_bootstrap_safe {
	.event-list {
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 1px;
	}

	.event-item {
		display: flex;
		align-items: flex-start;
		gap: var(--spacing-lg);
		background: var(--bg-white);
		padding: var(--spacing-lg) var(--spacing-xl);
		border-radius: var(--radius-md);
		border: 1px solid var(--border-light);
		transition: box-shadow var(--transition-fast);

		&:hover {
			box-shadow: var(--shadow-md);
		}
	}

	.event-item__date {
		flex-shrink: 0;
		width: 56px;
		text-align: center;
		background: var(--primary-color);
		color: var(--primary-contrast);
		border-radius: var(--radius-sm);
		padding: .5rem .25rem;
		font-family: var(--font-ui);
		line-height: 1.2;
	}

	.event-item__month {
		font-size: 9px;
		font-weight: 700;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: color-mix(in srgb, var(--primary-contrast) 60%, transparent);
	}

	.event-item__day {
		font-family: var(--font-heading);
		font-size: var(--text-2xl);
		color: var(--primary-contrast);
	}

	.event-item__body {
		flex: 1;
		min-width: 0;
	}

	.event-item__title {
		font-family: var(--font-heading);
		font-size: var(--text-xl);
		color: var(--primary-color);
		margin-bottom: 4px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.event-item__title a {
		text-decoration: none;
		color: inherit;

		&:hover {
			color: var(--accent-color);
		}
	}

	.event-item__meta {
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		color: var(--text-secondary);
		display: flex;
		gap: var(--spacing-md);
		flex-wrap: wrap;
	}

	.event-item__tag {
		background: var(--bg-light);
		border-radius: 100px;
		padding: 1px 8px;
		font-size: var(--text-xs);
		font-weight: 600;
		color: var(--accent-color);
	}
}

/* ── Department cards ── */
html.su_bootstrap_safe {
	.dept-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}

	.dept-card {
		border: 1px solid var(--border-light);
		border-radius: var(--radius-md);
		padding: var(--spacing-xl);
		background: var(--bg-white);
		transition: transform var(--transition-base), box-shadow var(--transition-base);
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);

		&:hover {
			transform: translateY(-3px);
			box-shadow: var(--shadow-md);
		}
	}

	.dept-card__icon {
		font-size: 2rem;
		width: 52px;
		height: 52px;
		background: var(--bg-light);
		border-radius: var(--radius-sm);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: var(--spacing-sm);
	}

	.dept-card__title {
		font-family: var(--font-heading);
		font-size: var(--text-xl);
		color: var(--primary-color);
		line-height: 1.25;
	}

	.dept-card__title a {
		text-decoration: none;
		color: inherit;

		&:hover {
			color: var(--accent-color);
		}
	}

	.dept-card__desc {
		font-size: var(--text-sm);
		color: var(--text-secondary);
		line-height: 1.6;
		flex: 1;
	}

	.dept-card__link {
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		font-weight: 600;
		color: var(--accent-color);
		text-decoration: none;
		display: inline-flex;
		align-items: center;
		gap: 4px;

		&:hover {
			color: var(--accent-hover);
		}
	}
}

@media (min-width: 600px) {
	html.su_bootstrap_safe .dept-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	html.su_bootstrap_safe .dept-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ── Tables ── */
html.su_bootstrap_safe {
	.su-table-wrap {
		overflow-x: auto;
		margin: var(--spacing-xl) 0;
		border-radius: var(--radius-md);
		border: 1px solid var(--border-color);
	}

	.su-table {
		width: 100%;
		border-collapse: collapse;
		font-family: var(--font-ui);
		font-size: var(--text-sm);
	}

	.su-table th {
		background: var(--primary-color);
		color: var(--primary-contrast);
		font-weight: 600;
		letter-spacing: .03em;
		text-align: left;
		padding: var(--spacing-md) var(--spacing-lg);
		white-space: nowrap;
	}

	.su-table td {
		padding: var(--spacing-md) var(--spacing-lg);
		border-bottom: 1px solid var(--border-light);
		vertical-align: top;
	}

	.su-table tr:last-child td {
		border-bottom: none;
	}

	.su-table tbody tr:nth-child(even) td {
		background: var(--bg-light);
	}

	.su-table tbody tr:hover td {
		background: rgba(30, 58, 74, .04);
	}
}

/* ── Notices ── */
html.su_bootstrap_safe {
	.su-notice {
		padding: var(--spacing-md) var(--spacing-lg);
		border-radius: var(--radius-md);
		border-left: 4px solid transparent;
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		display: flex;
		align-items: flex-start;
		gap: var(--spacing-sm);
		margin-bottom: var(--spacing-md);
	}

	.su-notice--info {
		background: #EBF4FF;
		border-color: #4A90D9;
		color: #1A3A5C;
	}

	.su-notice--success {
		background: #EDFBF2;
		border-color: var(--success-color);
		color: #1C4D2A;
	}

	.su-notice--warning {
		background: #FFF8EB;
		border-color: #D4A017;
		color: #5C3D08;
	}

	.su-notice--error {
		background: #FEF0EE;
		border-color: var(--error-color);
		color: #7A1E16;
	}
}

/* ── Forms ── */
html.su_bootstrap_safe {
	.su-form {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-lg);
	}

	.su-field {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-xs);
	}

	.su-label {
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		font-weight: 600;
		color: var(--text-color);
	}

	.su-label--required::after {
		content: ' *';
		color: var(--error-color);
	}

	.su-input,
	.su-select,
	.su-textarea {
		font-family: var(--font-ui);
		font-size: var(--text-base);
		color: var(--text-color);
		background: var(--bg-white);
		border: 1px solid var(--border-color);
		border-radius: var(--radius-sm);
		padding: .625rem var(--spacing-md);
		width: 100%;
		outline: none;
		transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
		-webkit-appearance: none;
	}

	.su-input:focus,
	.su-select:focus,
	.su-textarea:focus {
		border-color: var(--primary-color);
		box-shadow: 0 0 0 3px rgba(30, 58, 74, .1);
	}

	.su-textarea {
		resize: vertical;
		min-height: 120px;
		line-height: 1.6;
	}

	.su-hint {
		font-family: var(--font-ui);
		font-size: var(--text-xs);
		color: var(--text-secondary);
	}

	.su-form-row {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}
}

@media (min-width: 480px) {
	html.su_bootstrap_safe .su-form-row--2 {
		grid-template-columns: 1fr 1fr;
	}
}

/* ── Tags ── */
html.su_bootstrap_safe {
	.tag-cloud {
		display: flex;
		flex-wrap: wrap;
		gap: var(--spacing-sm);
	}

	.tag {
		font-family: var(--font-ui);
		font-size: var(--text-xs);
		font-weight: 600;
		padding: .25rem .75rem;
		background: var(--bg-white);
		border: 1px solid var(--border-color);
		border-radius: 100px;
		color: var(--text-secondary);
		text-decoration: none;
		transition: all var(--transition-fast);

		&:hover {
			background: var(--primary-color);
			border-color: var(--primary-color);
			color: var(--primary-contrast);
		}
	}
}

/* ── Column grids ── */
html.su_bootstrap_safe {
	.col-2 {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--spacing-xl);
	}

	.col-3 {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--spacing-xl);
	}

	.col-4 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-xl);
	}
}

@media (min-width: 640px) {
	html.su_bootstrap_safe .col-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	html.su_bootstrap_safe .col-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	html.su_bootstrap_safe .col-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ── Print ── */
@media print {
	html.su_bootstrap_safe .no-print {
		display: none !important;
	}
}



/* @import ../../../../theme/current/style/widgets.css */
/* ══════════════════════════════════════════════════
   Widgets — Styles for CMS block/widget output
   ══════════════════════════════════════════════════ */

/* ── Digest: Blog & Page collections ── */
html.su_bootstrap_safe {
	.su__digest {
		margin: var(--spacing-2xl) 0;
	}

	.su__digest__article {
		display: flex;
		gap: var(--spacing-lg);
		padding: var(--spacing-lg) 0;
		border-bottom: 1px solid var(--border-light);
		align-items: flex-start;
	}

	.su__digest__article:last-child {
		border-bottom: none;
	}

	.su__digest__image {
		flex-shrink: 0;
		width: 200px;
		border-radius: var(--radius-md);
		overflow: hidden;

		img {
			width: 100%;
			height: auto;
			display: block;
			aspect-ratio: 16/10;
			object-fit: cover;
			transition: transform var(--transition-base);
		}

		a:hover img {
			transform: scale(1.05);
		}
	}

	.su__digest__body {
		flex: 1;
		min-width: 0;
	}

	.su__digest__heading,
	.prose .su__digest__heading {
		font-family: var(--font-heading);
		font-size: var(--text-xl);
		line-height: 1.3;
		margin: 0 0 var(--spacing-sm);

		a {
			color: var(--primary-color);
			text-decoration: none;

			&:hover {
				color: var(--accent-color);
			}
		}
	}

	.su__digest__description {
		font-size: var(--text-base);
		color: var(--text-secondary);
		line-height: 1.65;
	}

	/* Medium format — smaller thumbnail */
	.su__digest--medium .su__digest__image {
		width: 120px;
	}

	.su__digest--medium .su__digest__heading {
		font-size: var(--text-lg);
	}

	/* Title-only format — no image, compact */
	.su__digest--title .su__digest__article {
		padding: var(--spacing-sm) 0;
	}

	.su__digest--title .su__digest__image {
		display: none;
	}

	.su__digest--title .su__digest__heading {
		font-size: var(--text-base);
		margin: 0;
	}

	.su__digest--title .su__digest__description {
		display: none;
	}
}

@media (max-width: 599px) {
	html.su_bootstrap_safe {
		.su__digest__article {
			flex-direction: column;
		}

		.su__digest__image {
			width: 100%;
		}
	}
}

/* ── Calendar: List view ── */
html.su_bootstrap_safe {
	.calendar_list_widget {
		margin: var(--spacing-2xl) 0;
		display: flex;
		flex-direction: column;
		gap: var(--spacing-md);
		background: var(--bg-light);
		padding: var(--spacing-2xl) var(--spacing-xl);
		border-radius: var(--radius-md);
	}

	#calendarlisttoken_wrapper div.calendar_event,
	.calendar_event {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0 var(--spacing-lg);
		width: 100%;
		padding: var(--spacing-lg) var(--spacing-xl);
		border-radius: var(--radius-md);
		border: 1px solid var(--border-light, var(--border-color));
		background: var(--bg-white, #fff);
		transition: box-shadow .2s;
		clear: none;

		&:hover {
			box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.08));
		}
	}

	#calendarlisttoken_wrapper .event_date,
	.event_date {
		grid-column: 1;
		grid-row: 1 / -1;
		align-self: center;
		width: 64px;
		text-align: center;
		background: var(--primary-color);
		color: var(--primary-contrast);
		border-radius: var(--radius-sm);
		padding: .5rem .25rem;
		line-height: 1.1;
		font-family: var(--font-ui);
		font-size: 9px;
		font-weight: 700;
		letter-spacing: .05em;
		text-transform: uppercase;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	#calendarlisttoken_wrapper .event_title,
	.event_title {
		grid-column: 2;
		grid-row: 1;
		font-family: var(--font-heading);
		font-size: var(--text-xl);
		color: var(--primary-color);
		margin: 0 0 4px;

		.event_link {
			color: inherit;
			text-decoration: none;

			&:hover {
				color: var(--accent-color);
			}
		}
	}

	#calendarlisttoken_wrapper .event_description,
	.event_description {
		grid-column: 2;
		grid-row: 2;
		font-size: var(--text-sm);
		color: var(--text-secondary);
		line-height: 1.6;
		position: static;
		overflow: visible;

		/* Reset prose paragraph margins inside events */
		p {
			margin-bottom: 0;
		}

		/* Line clamping with toggle */
		& > div {
			display: -webkit-box;
			-webkit-line-clamp: var(--clamp, 3);
			-webkit-box-orient: vertical;
			overflow: hidden;
			margin-bottom: 0;
		}

		& > input[type="checkbox"] {
			display: none;
		}

		& > input[type="checkbox"]:checked ~ div {
			-webkit-line-clamp: unset;
		}

		& .more,
		& .less {
			position: static;
			top: auto;
			display: inline-block;
			font-family: var(--font-ui);
			font-size: var(--text-sm);
			font-weight: 600;
			color: var(--accent-color);
			cursor: pointer;
			margin-top: var(--spacing-xs);

			&:hover {
				color: var(--accent-hover);
			}
		}

		& > input[type="checkbox"] ~ .more { display: inline-block; }
		& > input[type="checkbox"] ~ .less { display: none; }
		& > input[type="checkbox"]:checked ~ .more { display: none; }
		& > input[type="checkbox"]:checked ~ .less { display: inline-block; }
	}

	/* Hide toggle when description doesn't overflow */
	.event_description.no-overflow > label {
		display: none !important;
	}
}

@media (max-width: 599px) {
	html.su_bootstrap_safe .calendar_event {
		grid-template-columns: 1fr;
		gap: var(--spacing-sm);
	}

	html.su_bootstrap_safe .event_date {
		width: auto;
		display: inline-flex;
		gap: .5rem;
		padding: .375rem .75rem;
		grid-row: auto;
	}

	html.su_bootstrap_safe .event_title,
	html.su_bootstrap_safe .event_description {
		grid-column: 1;
		grid-row: auto;
	}
}

/* ── Calendar: Events Section (theme widget view) ── */

/* Default: contained within parent, rounded corners */
html.su_bootstrap_safe .calendar-section {
	background: var(--calendar-bg, var(--bg-light));
	padding: var(--spacing-3xl) var(--spacing-xl);
	border-radius: var(--radius-md);
}

/* Neutralize the inner su-container when contained — it's only needed
   for full-width bleed to constrain content back to max-width. */
html.su_bootstrap_safe .calendar-section .su-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* Full Width mode — viewport-edge bleed with inner container */
html.su_bootstrap_safe .calendar-section--full {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	padding: var(--spacing-3xl) calc(50vw - 50%);
	border-radius: 0;
}

html.su_bootstrap_safe .calendar-section--full .su-container {
	max-width: var(--container-max);
	padding-left: var(--spacing-lg);
	padding-right: var(--spacing-lg);
	margin-left: auto;
	margin-right: auto;
}

/* Disable full-width bleed inside the page editor — AlloyEditor uses inline
   editing with class ae-editable (not cke_editable). The negative margins
   extend beyond the widget mask and break click/scroll behavior. */
html.su_bootstrap_safe .ae-editable .calendar-section {
	margin-left: 0;
	margin-right: 0;
	padding: var(--spacing-3xl) var(--spacing-xl);
	border-radius: var(--radius-md);
}

html.su_bootstrap_safe .ae-editable .calendar-section .su-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* No background — remove padding and radius, just space the content */
html.su_bootstrap_safe .calendar-section--no-bg {
	padding: var(--spacing-2xl) 0;
	border-radius: 0;
}

/* Dark backgrounds — invert text colors */
html.su_bootstrap_safe .calendar-section--dark .section__header .label {
	color: var(--accent-light);
}

html.su_bootstrap_safe .calendar-section--dark .section__title {
	color: var(--primary-contrast);
}

html.su_bootstrap_safe .calendar-section--dark .event-item__meta {
	color: var(--text-secondary);
}

.calendar-section .section__header {
	text-align: center;
	margin-bottom: var(--spacing-2xl);
}

.calendar-section .section__header .label {
	margin-bottom: 0;
}

.calendar-section .section__title {
	font-family: var(--font-heading);
	font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
	color: var(--primary-color);
	margin: var(--spacing-xs) 0 0;
}

.calendar-section .event-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 0;
	margin: 0;
}

.calendar-section .event-item {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-lg);
	background: var(--bg-white, #fff);
	padding: var(--spacing-lg) var(--spacing-xl);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light, var(--border-color));
	transition: box-shadow .2s;
}

.calendar-section .event-item:hover {
	box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.08));
}

/* Date badge */
.calendar-section .event-item__date {
	flex-shrink: 0;
	width: 56px;
	text-align: center;
	background: var(--primary-color);
	color: var(--primary-contrast);
	border-radius: var(--radius-sm);
	padding: .5rem .25rem;
	line-height: 1.1;
}

.calendar-section .event-item__month {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--primary-contrast) 60%, transparent);
}

.calendar-section .event-item__day {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	color: var(--primary-contrast);
}

/* Event body */
.calendar-section .event-item__body {
	flex: 1;
	min-width: 0;
}

html.su_bootstrap_safe .prose .calendar-section .event-item__title {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	color: var(--primary-color);
	margin: 0 0 4px;
}

.calendar-section .event-item__title a {
	text-decoration: none;
	color: inherit;
}

.calendar-section .event-item__title a:hover {
	color: var(--accent-color);
}

/* Meta row */
.calendar-section .event-item__meta {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--text-secondary);
	display: flex;
	gap: var(--spacing-md);
	flex-wrap: wrap;
	align-items: center;
}

/* .event-item__tag — reserved for future tag system */

.calendar-section .event-item__desc {
	margin-top: var(--spacing-sm);
	font-size: var(--text-sm);
	color: var(--text-secondary);
	line-height: 1.6;
}

/* Section footer */
.calendar-section .section__footer {
	text-align: center;
	margin-top: var(--spacing-2xl);
}

@media (max-width: 599px) {
	.calendar-section .event-item {
		flex-direction: column;
		gap: var(--spacing-md);
	}

	.calendar-section .event-item__date {
		width: auto;
		display: inline-flex;
		gap: .5rem;
		padding: .375rem .75rem;
	}
}

/* ── Calendar: Mini/grid view ── */
html.su_bootstrap_safe {
	table[id*="calendar"] {
		width: 100%;
		border-collapse: collapse;
		font-family: var(--font-ui);
		margin: var(--spacing-2xl) 0;
		border-radius: var(--radius-md);
		overflow: hidden;
		border: 1px solid var(--border-light);

		td {
			padding: var(--spacing-sm);
			text-align: center;
			font-size: var(--text-sm);
			border: 1px solid var(--border-light);
		}

		td.month {
			background: var(--primary-color);
			color: var(--primary-contrast);
			font-weight: 700;
			font-size: var(--text-base);
			padding: var(--spacing-md);

			a {
				color: var(--primary-contrast);
				text-decoration: none;
			}
		}

		td.outer_month {
			color: var(--text-secondary);
			opacity: .4;
		}

		td.weekend {
			background: var(--bg-light);
		}

		td.has_event {
			background: color-mix(in srgb, var(--accent-color), white 85%);
			font-weight: 700;

			a {
				color: var(--accent-color);
				text-decoration: none;
				font-weight: 700;
			}
		}

		td.today {
			background: var(--primary-color);
			color: var(--primary-contrast);
			font-weight: 700;

			a {
				color: var(--primary-contrast);
			}
		}
	}
}

/* ── Blog: News Section (theme widget view) ── */

/* Default: contained within parent, rounded corners */
html.su_bootstrap_safe .blog-section {
	background: var(--blog-bg, var(--bg-light));
	padding: var(--spacing-3xl) var(--spacing-xl);
	border-radius: var(--radius-md);
}

html.su_bootstrap_safe .blog-section .su-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* Full Width mode */
html.su_bootstrap_safe .blog-section--full {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	padding: var(--spacing-3xl) calc(50vw - 50%);
	border-radius: 0;
}

html.su_bootstrap_safe .blog-section--full .su-container {
	max-width: var(--container-max);
	padding-left: var(--spacing-lg);
	padding-right: var(--spacing-lg);
	margin-left: auto;
	margin-right: auto;
}

/* Disable full-width bleed inside the page editor */
html.su_bootstrap_safe .ae-editable .blog-section {
	margin-left: 0;
	margin-right: 0;
	padding: var(--spacing-3xl) var(--spacing-xl);
	border-radius: var(--radius-md);
}

html.su_bootstrap_safe .ae-editable .blog-section .su-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* No background */
html.su_bootstrap_safe .blog-section--no-bg {
	padding: var(--spacing-2xl) 0;
	border-radius: 0;
}

/* Dark backgrounds */
html.su_bootstrap_safe .blog-section--dark .section__header .label {
	color: var(--accent-light);
}

html.su_bootstrap_safe .blog-section--dark .section__title {
	color: var(--primary-contrast);
}

html.su_bootstrap_safe .blog-section--dark .blog-card {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.1);
}

html.su_bootstrap_safe .blog-section--dark .blog-card__date {
	color: var(--accent-light, var(--accent-color));
}

html.su_bootstrap_safe .blog-section--dark .blog-card__title a {
	color: var(--primary-contrast);
}

html.su_bootstrap_safe .blog-section--dark .blog-card__desc {
	color: rgba(255, 255, 255, 0.7);
}

/* Section header — reuses .section__header / .section__title from calendar */
.blog-section .section__header {
	text-align: center;
	margin-bottom: var(--spacing-2xl);
}

.blog-section .section__header .label {
	margin-bottom: 0;
}

.blog-section .section__title {
	font-family: var(--font-heading);
	font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
	color: var(--primary-color);
	margin: var(--spacing-xs) 0 0;
}

/* Card grid */
.blog-section .blog-section__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--spacing-lg);
}

.blog-section .blog-card {
	background: var(--bg-white, #fff);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light, var(--border-color));
	overflow: hidden;
	transition: box-shadow .2s;
}

.blog-section .blog-card:hover {
	box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.08));
}

.blog-section .blog-card__image {
	display: block;
	overflow: hidden;
}

.blog-section .blog-card__image img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	transition: transform var(--transition-base);
}

.blog-section .blog-card:hover .blog-card__image img {
	transform: scale(1.05);
}

.blog-section .blog-card__body {
	padding: var(--spacing-lg);
}

.blog-section .blog-card__date {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--accent-color);
	margin-bottom: var(--spacing-xs);
}

html.su_bootstrap_safe .prose .blog-section .blog-card__title {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	color: var(--primary-color);
	margin: 0 0 var(--spacing-sm);
	line-height: 1.3;
}

.blog-section .blog-card__title a {
	text-decoration: none;
	color: inherit;
}

.blog-section .blog-card__title a:hover {
	color: var(--accent-color);
}

.blog-section .blog-card__desc {
	font-size: var(--text-sm);
	color: var(--text-secondary);
	line-height: 1.6;
	margin: 0;
}

/* Section footer */
.blog-section .section__footer {
	text-align: center;
	margin-top: var(--spacing-2xl);
}

@media (max-width: 599px) {
	.blog-section .blog-section__grid {
		grid-template-columns: 1fr;
	}
}

/* ── Gallery: Grid ── */
html.su_bootstrap_safe {
	.gallery--grid {
		display: grid;
		gap: var(--spacing-sm);
		margin: var(--spacing-2xl) 0;

		/* Override clearfix float layout with grid */
		&::after {
			display: none;
		}

		& > div:empty {
			display: none;
		}
	}

	.gallery--grid--2 { grid-template-columns: repeat(2, 1fr); }
	.gallery--grid--3 { grid-template-columns: repeat(3, 1fr); }
	.gallery--grid--4 { grid-template-columns: repeat(4, 1fr); }
	.gallery--grid--5 { grid-template-columns: repeat(5, 1fr); }
	.gallery--grid--6 { grid-template-columns: repeat(6, 1fr); }

	.gallery--grid--image {
		display: block;
		border-radius: var(--radius-md);
		overflow: hidden;
		position: relative;
		text-decoration: none;

		& > div {
			aspect-ratio: 1;
			background-size: cover;
			transition: transform var(--transition-base);
		}

		&:hover > div {
			transform: scale(1.06);
		}
	}

	.gallery--grid--caption {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: var(--spacing-md);
		background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);
		color: #fff;
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		opacity: 0;
		transition: opacity var(--transition-fast);
	}

	.gallery--grid--image:hover .gallery--grid--caption {
		opacity: 1;
	}
}

@media (max-width: 599px) {
	html.su_bootstrap_safe {
		.gallery--grid--4,
		.gallery--grid--5,
		.gallery--grid--6 {
			grid-template-columns: repeat(3, 1fr);
		}
	}
}

@media (max-width: 399px) {
	html.su_bootstrap_safe {
		.gallery--grid--3,
		.gallery--grid--4,
		.gallery--grid--5,
		.gallery--grid--6 {
			grid-template-columns: repeat(2, 1fr);
		}
	}
}

/* ── Gallery: Mosaic ── */
html.su_bootstrap_safe {
	.gallery--mosaic {
		columns: 3;
		column-gap: var(--spacing-sm);
		margin: var(--spacing-2xl) 0;
	}

	@media (max-width: 768px) {
		.gallery--mosaic { columns: 2; }
	}

	@media (max-width: 480px) {
		.gallery--mosaic { columns: 1; }
	}

	.gallery--mosaic--image {
		display: inline-block;
		width: 100%;
		break-inside: avoid;
		margin-bottom: var(--spacing-sm);
		border-radius: var(--radius-md);
		overflow: hidden;
		position: relative;
		text-decoration: none;

		& > div {
			display: block;
			width: 100%;
			border-radius: var(--radius-md);
			background-size: cover;
			background-position: center;
		}

		&:hover > div {
			filter: brightness(1.05);
		}
	}

	.gallery--mosaic--caption {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: var(--spacing-md);
		background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);
		color: #fff;
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		opacity: 0;
		transition: opacity var(--transition-fast);
	}

	.gallery--mosaic--image:hover .gallery--mosaic--caption {
		opacity: 1;
	}
}

/* ── Gallery: Slideshow ── */
html.su_bootstrap_safe {
	.gallery--slideshow--iframe {
		position: relative;
		margin: var(--spacing-2xl) 0;
		border-radius: var(--radius-lg);
		overflow: hidden;
		border: 1px solid var(--border-light);
		padding-bottom: 75%;

		&.with-thumbnails {
			padding-bottom: calc(75% + 52px);
		}

		iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: none;
			display: block;
		}
	}
}

/* ── Gallery: Carousel (filmstrip) ── */
html.su_bootstrap_safe {
	.gallery--strip {
		margin: var(--spacing-2xl) 0;
	}

	.gallery--strip .splide__slide {
		overflow: hidden;
		border-radius: 0;
	}

	.gallery--strip .splide__slide a {
		display: block;
		text-decoration: none;
	}

	.gallery--strip .splide__slide img {
		display: block;
		height: 450px;
		width: auto;
		object-fit: cover;
	}

	@media (max-width: 768px) {
		.gallery--strip .splide__slide img {
			height: 300px;
		}
	}

	.gallery--strip .splide__slide a:hover img {
		transform: scale(1.05);
	}

	.gallery--strip--caption {
		padding: var(--spacing-xs) var(--spacing-sm);
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		color: var(--text-secondary);
		text-align: center;
		background: var(--bg-light);
	}

	/* Splide arrow overrides */
	.gallery--strip .splide__arrow {
		background: rgba(255, 255, 255, 0.9);
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 50%;
		box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.12));
		opacity: 0.8;
		transition: opacity var(--transition-fast);
	}

	.gallery--strip .splide__arrow:hover {
		opacity: 1;
	}

	.gallery--strip .splide__arrow svg {
		fill: var(--primary-color);
		width: 1rem;
		height: 1rem;
	}
}

/* ── Notice/Alert ── */
html.su_bootstrap_safe {
	.su__alert {
		padding: var(--spacing-lg) var(--spacing-xl);
		border-radius: var(--radius-md);
		border-left: 4px solid transparent;
		margin: var(--spacing-xl) 0;
		font-family: var(--font-ui);

		h4 {
			font-family: var(--font-heading);
			font-size: var(--text-lg);
			margin-bottom: var(--spacing-xs);
		}

		p {
			font-size: var(--text-base);
			line-height: 1.6;
			margin: 0;
		}
	}

	.su__alert--info {
		background: #EBF4FF;
		border-color: #4A90D9;
		color: #1A3A5C;

		h4 { color: #1A3A5C; }
	}

	.su__alert--success {
		background: #EDFBF2;
		border-color: #2D8A4E;
		color: #1C4D2A;

		h4 { color: #1C4D2A; }
	}

	.su__alert--warning {
		background: #FFF8EB;
		border-color: #D4A017;
		color: #5C3D08;

		h4 { color: #5C3D08; }
	}

	.su__alert--danger {
		background: #FEF0EE;
		border-color: #C53030;
		color: #7A1E16;

		h4 { color: #7A1E16; }
	}
}

/* ── Quote ── */
html.su_bootstrap_safe {
	.su__quote {
		border-left: 4px solid var(--accent-color);
		background: var(--bg-light);
		padding: var(--spacing-xl) var(--spacing-2xl);
		margin: var(--spacing-2xl) 0;
		border-radius: 0 var(--radius-md) var(--radius-md) 0;
		position: relative;

		&::before {
			content: '\201C';
			position: absolute;
			top: var(--spacing-md);
			left: var(--spacing-lg);
			font-family: var(--font-heading);
			font-size: 3rem;
			color: var(--accent-color);
			opacity: .25;
			line-height: 1;
		}

		p {
			font-family: var(--font-heading);
			font-style: italic;
			font-size: var(--text-xl);
			color: var(--primary-color);
			line-height: 1.5;
			margin: 0;
		}

		footer {
			margin-top: var(--spacing-md);
		}

		cite {
			font-family: var(--font-ui);
			font-size: var(--text-sm);
			font-style: normal;
			color: var(--text-secondary);
			font-weight: 600;

			&::before {
				content: '\2014\00a0';
			}
		}
	}
}

/* ── Icon Block (theme colors) ���─ */
html.su_bootstrap_safe .su-icon-block {
	color: var(--primary-color);
}

html.su_bootstrap_safe .su-icon-block--bg-primary {
	background: var(--primary-color);
	color: var(--primary-contrast, #fff);
}

html.su_bootstrap_safe .su-icon-block--bg-accent {
	background: var(--accent-color);
	color: var(--accent-contrast, #fff);
}

html.su_bootstrap_safe .su-icon-block--bg-secondary {
	background: var(--secondary-color);
	color: var(--secondary-contrast, #fff);
}

html.su_bootstrap_safe .su-icon-block--bg-light {
	background: var(--bg-light);
	color: var(--primary-color);
}

html.su_bootstrap_safe .su-icon-block--bg-white {
	background: var(--bg-white, #fff);
	color: var(--primary-color);
	box-shadow: var(--shadow-box, 0 1px 3px rgba(0,0,0,.1));
}

/* ── Columns ── */
html.su_bootstrap_safe {
	.columns {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--spacing-xl);
		margin: var(--spacing-xl) 0;
		border-radius: var(--radius-md);
	}

	.columns__column {
		min-width: 0;
	}

	/* Background variants */
	.columns[data-columns-bg="white"] {
		background: #fff;
		padding: var(--spacing-3xl) var(--spacing-xl);
	}

	.columns[data-columns-bg="light"] {
		background: var(--bg-light);
		padding: var(--spacing-3xl) var(--spacing-xl);
	}

	.columns[data-columns-bg="warm"] {
		background: var(--bg-warm, var(--bg-light));
		padding: var(--spacing-3xl) var(--spacing-xl);
	}

	.columns[data-columns-bg="primary"] {
		background: var(--primary-color);
		padding: var(--spacing-3xl) var(--spacing-xl);
		color: var(--primary-contrast);

		h1, h2, h3, h4, h5, h6 { color: var(--primary-contrast); }
		a { color: var(--accent-light, var(--accent-color)); }
	}

	.columns[data-columns-bg="accent"] {
		background: color-mix(in srgb, var(--accent-color), white 85%);
		padding: var(--spacing-3xl) var(--spacing-xl);
	}
}

@media (min-width: 600px) {
	html.su_bootstrap_safe .columns {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}

	/* Ratio variants (2-column layouts) */
	html.su_bootstrap_safe .columns[data-columns-ratio="1-2"] {
		grid-template-columns: 1fr 2fr;
	}

	html.su_bootstrap_safe .columns[data-columns-ratio="2-1"] {
		grid-template-columns: 2fr 1fr;
	}

	html.su_bootstrap_safe .columns[data-columns-ratio="1-3"] {
		grid-template-columns: 1fr 3fr;
	}

	html.su_bootstrap_safe .columns[data-columns-ratio="3-1"] {
		grid-template-columns: 3fr 1fr;
	}

	/* 1-column width variants */
	html.su_bootstrap_safe .columns[data-columns-ratio="w80"] {
		grid-template-columns: 1fr;
		max-width: 80%;
		margin-left: auto;
		margin-right: auto;
	}

	html.su_bootstrap_safe .columns[data-columns-ratio="w50"] {
		grid-template-columns: 1fr;
		max-width: 50%;
		margin-left: auto;
		margin-right: auto;
	}

	/* 3-column ratio variants */
	html.su_bootstrap_safe .columns[data-columns-ratio="2-1-1"] {
		grid-template-columns: 2fr 1fr 1fr;
	}

	html.su_bootstrap_safe .columns[data-columns-ratio="1-2-1"] {
		grid-template-columns: 1fr 2fr 1fr;
	}

	html.su_bootstrap_safe .columns[data-columns-ratio="1-1-2"] {
		grid-template-columns: 1fr 1fr 2fr;
	}
}

/* Continue Section — collapse gap between adjacent columns blocks.
   .columns.columns doubles specificity to beat [data-columns-fw][data-columns-bg] rules. */
html.su_bootstrap_safe .columns.columns:has(~ .columns[data-columns-continue="1"]) {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

html.su_bootstrap_safe .columns.columns.columns[data-columns-continue="1"] {
	margin-top: 0;
	padding-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* Section header h2 — bump to h1 size when leading a combined section */
html.su_bootstrap_safe .columns:has(~ .columns[data-columns-continue="1"]) h2 {
	font-size: clamp(var(--text-3xl), 5vw, var(--text-4xl));
}

/* Stats Mode — centered text with large accent numbers */
html.su_bootstrap_safe .columns[data-columns-stats="1"] .columns__column {
	text-align: center;
	background: rgba(255, 255, 255, 0.45);
	border-radius: var(--radius-md);
	padding: var(--spacing-lg);
}

html.su_bootstrap_safe .columns[data-columns-stats="1"] .columns__column h1,
html.su_bootstrap_safe .columns[data-columns-stats="1"] .columns__column h2,
html.su_bootstrap_safe .columns[data-columns-stats="1"] .columns__column h3 {
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 700;
	color: var(--primary-color);
	line-height: 1.1;
	margin-top: 0;
	margin-bottom: var(--spacing-xs);
	letter-spacing: -0.02em;
	transition: color 0.2s;
}

html.su_bootstrap_safe .columns[data-columns-stats="1"] .columns__column:hover h1,
html.su_bootstrap_safe .columns[data-columns-stats="1"] .columns__column:hover h2,
html.su_bootstrap_safe .columns[data-columns-stats="1"] .columns__column:hover h3 {
	color: var(--accent-color);
}

html.su_bootstrap_safe .columns[data-columns-stats="1"] .columns__column p {
	font-size: 0.85rem;
	color: var(--text-secondary);
	letter-spacing: 0.02em;
	font-weight: 500;
}

/* Stats on dark background */
html.su_bootstrap_safe .columns[data-columns-stats="1"][data-columns-bg="primary"] .columns__column {
	background: rgba(255, 255, 255, 0.08);
}

html.su_bootstrap_safe .columns[data-columns-stats="1"][data-columns-bg="primary"] .columns__column h1,
html.su_bootstrap_safe .columns[data-columns-stats="1"][data-columns-bg="primary"] .columns__column h2,
html.su_bootstrap_safe .columns[data-columns-stats="1"][data-columns-bg="primary"] .columns__column h3 {
	color: var(--primary-contrast, #fff);
}

html.su_bootstrap_safe .columns[data-columns-stats="1"][data-columns-bg="primary"] .columns__column:hover h1,
html.su_bootstrap_safe .columns[data-columns-stats="1"][data-columns-bg="primary"] .columns__column:hover h2,
html.su_bootstrap_safe .columns[data-columns-stats="1"][data-columns-bg="primary"] .columns__column:hover h3 {
	color: var(--accent-light, var(--accent-color));
}

html.su_bootstrap_safe .columns[data-columns-stats="1"][data-columns-bg="primary"] .columns__column p {
	color: var(--primary-contrast);
	opacity: 0.8;
}

/* Full Width columns — viewport-edge bleed with inner constraint */
html.su_bootstrap_safe .columns[data-columns-fw="1"] {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
	border-radius: 0;
}

/* With a background color, add vertical padding too */
html.su_bootstrap_safe .columns[data-columns-fw="1"][data-columns-bg] {
	padding: var(--spacing-3xl) calc(50vw - 50%);
}

/* Disable full-width bleed inside the page editor */
html.su_bootstrap_safe .ae-editable .columns[data-columns-fw="1"] {
	margin-left: 0;
	margin-right: 0;
	padding: var(--spacing-xl);
	border-radius: var(--radius-md);
}

/* Global widget editable styling in the editor
   Idle:  no outline, no border — clean canvas
   Hover: 2px solid light blue outline outside the element
   Focus: 2px solid blue outline + blue tint background
*/
html.su_bootstrap_safe .ae-editable .cke_widget_editable {
	outline: none !important;
	border: none;
	border-radius: var(--radius-sm, 4px);
	padding: var(--spacing-sm, 8px);
	transition: background-color 0.15s;
	min-height: 40px;
}

html.su_bootstrap_safe .ae-editable .cke_widget_editable:hover {
	outline: 2px solid rgba(51, 122, 183, 0.5) !important;
	outline-offset: 0px;
}

html.su_bootstrap_safe .ae-editable .cke_widget_editable.cke_widget_editable_focused {
	outline: 2px solid var(--primary-color, #337ab7) !important;
	outline-offset: 0px;
	background-color: rgba(51, 122, 183, 0.06);
}

/* Columns: dashed borders always visible, outline on hover/focus sits outside */
html.su_bootstrap_safe .ae-editable .columns__column.cke_widget_editable {
	border: 1px dashed rgba(0, 0, 0, 0.15) !important;
	border-radius: var(--radius-sm, 4px);
}

html.su_bootstrap_safe .ae-editable .columns__column.cke_widget_editable:hover {
	outline: 2px solid rgba(51, 122, 183, 0.5) !important;
	outline-offset: 1px;
}

html.su_bootstrap_safe .ae-editable .columns__column.cke_widget_editable.cke_widget_editable_focused {
	border-color: var(--primary-color, #337ab7) !important;
	outline: 2px solid var(--primary-color, #337ab7) !important;
	outline-offset: 1px;
	background-color: rgba(51, 122, 183, 0.06);
}

/* Dark backgrounds: light dashed borders, light outline */
html.su_bootstrap_safe .ae-editable .columns[data-columns-bg="primary"] .cke_widget_editable {
	border-color: rgba(255, 255, 255, 0.25) !important;
}

html.su_bootstrap_safe .ae-editable .columns[data-columns-bg="primary"] .cke_widget_editable:hover {
	outline-color: rgba(255, 255, 255, 0.5) !important;
}

html.su_bootstrap_safe .ae-editable .columns[data-columns-bg="primary"] .cke_widget_editable.cke_widget_editable_focused {
	border-color: rgba(255, 255, 255, 0.7) !important;
	outline-color: rgba(255, 255, 255, 0.7) !important;
	background-color: rgba(255, 255, 255, 0.08);
}

/* ── Blog Cards layout ── */
html.su_bootstrap_safe #blog__posts__list.blog-cards {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: var(--spacing-xl);
}

html.su_bootstrap_safe .blog-card {
	background: var(--bg-white, #fff);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border-light);
	overflow: hidden;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

html.su_bootstrap_safe .blog-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

html.su_bootstrap_safe .blog-card__link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

html.su_bootstrap_safe .blog-card__link:hover {
	text-decoration: none;
	color: inherit;
}

html.su_bootstrap_safe .blog-card__image-wrap {
	aspect-ratio: 16/9;
	overflow: hidden;
	background: var(--bg-light);
}

html.su_bootstrap_safe .blog-card__image-wrap .blog-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}

html.su_bootstrap_safe .blog-card:hover .blog-card__image-wrap .blog-card__image {
	transform: scale(1.05);
}

html.su_bootstrap_safe .blog-card__body {
	padding: var(--spacing-lg);
	display: flex;
	flex-direction: column;
	flex: 1;
}

html.su_bootstrap_safe .blog-card__date {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	color: var(--text-secondary);
	margin-bottom: var(--spacing-sm);
}

html.su_bootstrap_safe .blog-card__title {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	color: var(--primary-color);
	line-height: 1.3;
	margin: 0 0 var(--spacing-sm);
}

html.su_bootstrap_safe .blog-card__desc {
	font-size: var(--text-sm);
	color: var(--text-secondary);
	line-height: 1.6;
	flex: 1;
}

@media (min-width: 600px) {
	html.su_bootstrap_safe #blog__posts__list.blog-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	html.su_bootstrap_safe #blog__posts__list.blog-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ── YouTube Livestream ── */
html.su_bootstrap_safe .media__livestream-yt {
	margin-bottom: var(--spacing-2xl);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

html.su_bootstrap_safe .media__livestream-yt__player {
	position: relative;
}

html.su_bootstrap_safe .media__livestream-yt__badge {
	position: absolute;
	bottom: var(--spacing-md);
	left: var(--spacing-md);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #fff;
	background: #e53e3e;
	padding: .375rem .75rem;
	border-radius: var(--radius-sm);
}

html.su_bootstrap_safe .media__livestream-yt__badge svg {
	width: 8px;
	height: 8px;
	fill: #fff;
	animation: pulse-live 1.5s infinite;
}

@keyframes pulse-live {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.3; }
}

html.su_bootstrap_safe .media__livestream-yt__viewers {
	position: absolute;
	bottom: var(--spacing-md);
	right: var(--spacing-md);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 600;
	color: #fff;
	background: rgba(0, 0, 0, .6);
	padding: .375rem .75rem;
	border-radius: var(--radius-sm);
	backdrop-filter: blur(4px);
}

html.su_bootstrap_safe .media__livestream-yt__viewers svg {
	width: 14px;
	height: 14px;
	fill: #fff;
	opacity: .8;
}

html.su_bootstrap_safe .media__livestream-yt-placeholder {
	margin-bottom: var(--spacing-2xl);
	border-radius: var(--radius-lg);
	background: var(--bg-light);
	border: 1px solid var(--border-light);
	padding: var(--spacing-3xl) var(--spacing-xl);
	text-align: center;
}

html.su_bootstrap_safe .media__livestream-yt-placeholder__content {
	color: var(--text-secondary);
}

html.su_bootstrap_safe .media__livestream-yt-placeholder__content svg {
	width: 48px;
	height: 48px;
	fill: var(--border-color);
	margin-bottom: var(--spacing-md);
}

html.su_bootstrap_safe .media__livestream-yt-placeholder__content p {
	font-family: var(--font-ui);
	font-size: var(--text-base);
	margin: 0;
}

/* ── Media List Page ── */
html.su_bootstrap_safe {
	#su_media_filters {
		border-top: none;
		padding-top: 0;
		gap: var(--spacing-lg);
		align-items: center;
		margin-bottom: var(--spacing-xl);
	}

	#su_media_filters .su_macro_search_wrapper {
		position: relative;
		width: 100%;
	}

	#su_media_filters .su_macro_search_wrapper .su__input,
	#su_media_filters .su_macro_search_wrapper input.su_macro_search {
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		border: 1px solid var(--border-color);
		border-radius: var(--radius-sm);
		padding: .625rem 2.5rem .625rem var(--spacing-md);
		width: 100%;
		outline: none;
		transition: border-color var(--transition-fast);
		background: none;
	}

	#su_media_filters .su_macro_search_wrapper input:focus {
		border-color: var(--primary-color);
		box-shadow: 0 0 0 3px rgba(30, 58, 74, .1);
	}

	#su_media_filters .su_macro_search_wrapper .su-search-icon,
	#su_media_filters .su_macro_search_wrapper .su-clear-search {
		right: 8px;
		color: var(--text-secondary);
	}

	#su_media_sortby.su__sortby {
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		display: flex;
		align-items: center;
		gap: var(--spacing-sm);
		justify-content: flex-end;
	}

	#su_media_sortby .su__sortby__label {
		color: var(--text-secondary);
		font-weight: 500;
	}

	#su_media_sortby .su__sortby__option {
		background: none;
		border: 1px solid var(--border-color);
		color: var(--text-secondary);
		padding: .375rem .75rem;
		border-radius: var(--radius-sm);
		font-family: var(--font-ui);
		font-size: var(--text-xs);
		font-weight: 600;
		cursor: pointer;
		transition: all var(--transition-fast);
	}

	#su_media_sortby .su__sortby__option:hover {
		color: var(--primary-color);
		border-color: var(--primary-color);
	}

	#su_media_sortby .su__sortby__option.su__sortby__option--asc,
	#su_media_sortby .su__sortby__option.su__sortby__option--desc {
		background: var(--accent-color);
		color: var(--accent-contrast, #fff);
		border-color: var(--accent-color);
	}

	.media__filter__wrapper {
		margin-bottom: var(--spacing-xl);
		gap: var(--spacing-md);
	}

	.media__filter__wrapper select,
	.media__filter__wrapper .form-control {
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		border: 1px solid var(--border-color);
		border-radius: var(--radius-sm);
		padding: .5rem var(--spacing-md);
	}

	/* Media item cards */
	.media__item__wrapper {
		background: var(--bg-white, #fff);
		border: 1px solid var(--border-light);
		border-radius: var(--radius-md);
		overflow: hidden;
		transition: transform var(--transition-base), box-shadow var(--transition-base);
		margin: 0 0 var(--spacing-lg);
	}

	.media__item__wrapper:hover {
		background: var(--bg-white, #fff);
		transform: translateY(-2px);
		box-shadow: var(--shadow-md);
	}

	.media__item {
		padding: 0;
		text-decoration: none;
		color: inherit;
	}

	.media__item:hover {
		text-decoration: none;
		color: inherit;
	}

	.media__item__image--wrapper {
		overflow: hidden;
		flex-shrink: 0;
	}

	.media__item__image {
		width: 100%;
		height: auto;
		aspect-ratio: 16/9;
		object-fit: cover;
		transition: transform 0.3s;
	}

	.media__item__wrapper:hover .media__item__image {
		transform: scale(1.03);
	}

	.prose .media__item__name {
		font-family: var(--font-heading);
		font-size: var(--text-lg);
		color: var(--primary-color);
		line-height: 1.3;
		margin: 0 0 var(--spacing-xs);
	}

	sub.media__item__details {
		font-family: var(--font-ui);
		font-size: var(--text-xs);
		color: var(--text-secondary);
		display: block;
		padding: var(--spacing-xs) 0 var(--spacing-sm);
		vertical-align: baseline;
	}

	.media__item__details a {
		color: var(--text-secondary);
	}

	p.media__item__description {
		font-size: var(--text-sm);
		color: var(--text-secondary);
		line-height: 1.6;
		padding: 0;
		margin: var(--spacing-sm) 0 0;
	}

	.media__item__info {
		padding: var(--spacing-md) var(--spacing-lg);
	}

	/* Media detail page */
	.media__player {
		margin-bottom: var(--spacing-xl);
		border-radius: var(--radius-lg);
		overflow: hidden;
	}

	.media__details {
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		color: var(--text-secondary);
		margin-bottom: var(--spacing-lg);
	}

	.media__details a {
		color: var(--accent-color);
	}

	/* Series/Playlist items — digest layout */
	.media__session__container {
		margin-top: var(--spacing-2xl);
		border-top: 1px solid var(--border-light);
		padding-top: var(--spacing-xl);
	}

	.media__session__name {
		font-family: var(--font-heading);
		font-size: var(--text-xl);
		color: var(--primary-color);
		margin: 0 0 var(--spacing-lg);
	}

	.media__playlist-player {
		margin-bottom: var(--spacing-xl);
		border-radius: var(--radius-lg);
		overflow: hidden;
	}

	.media__session__list {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);
	}

	.media__session__item {
		display: flex;
		align-items: center;
		gap: var(--spacing-md);
		padding: var(--spacing-sm);
		border-radius: var(--radius-sm);
		text-decoration: none;
		color: inherit;
		transition: background var(--transition-fast);
	}

	.media__session__item:hover {
		background: var(--bg-light);
		text-decoration: none;
		color: inherit;
	}

	.media__session__thumb {
		width: 120px;
		height: 68px;
		object-fit: cover;
		border-radius: var(--radius-sm);
		flex-shrink: 0;
	}

	.media__session__info {
		flex: 1;
		min-width: 0;
	}

	.prose .media__session__title {
		font-family: var(--font-heading);
		font-size: var(--text-sm);
		color: var(--primary-color);
		margin: 0;
		line-height: 1.3;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.media__session__date {
		font-family: var(--font-ui);
		font-size: var(--text-xs);
		color: var(--text-secondary);
	}

	.media__session__item:hover .media__session__title {
		color: var(--accent-color);
	}
}

@media (min-width: 600px) {
	html.su_bootstrap_safe .media__view .media__item__image--wrapper {
		width: 280px;
		min-width: 280px;
	}
}

/* ── Media Widget Cards ── */
html.su_bootstrap_safe .su__media-cards {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: var(--spacing-xl);
	margin: var(--spacing-xl) 0;
}

html.su_bootstrap_safe .su__media-card {
	background: var(--bg-white, #fff);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border-light);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

html.su_bootstrap_safe .su__media-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	text-decoration: none;
	color: inherit;
}

html.su_bootstrap_safe .su__media-card__image {
	aspect-ratio: 16/9;
	overflow: hidden;
	background: var(--bg-light);
}

html.su_bootstrap_safe .su__media-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}

html.su_bootstrap_safe .su__media-card:hover .su__media-card__image img {
	transform: scale(1.05);
}

html.su_bootstrap_safe .su__media-card__body {
	padding: var(--spacing-lg);
	flex: 1;
}

html.su_bootstrap_safe .su__media-card__date {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	color: var(--text-secondary);
	display: block;
	margin-bottom: var(--spacing-xs);
}

html.su_bootstrap_safe .su__media-card__title {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	color: var(--primary-color);
	line-height: 1.3;
	margin: 0 0 var(--spacing-sm);
}

html.su_bootstrap_safe .su__media-card__desc {
	font-size: var(--text-sm);
	color: var(--text-secondary);
	line-height: 1.6;
	margin: 0;
}

@media (min-width: 600px) {
	html.su_bootstrap_safe .su__media-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	html.su_bootstrap_safe .su__media-cards {
		grid-template-columns: repeat(3, 1fr);
	}
	html.su_bootstrap_safe .su__media-cards--2 {
		grid-template-columns: repeat(2, 1fr);
	}
	html.su_bootstrap_safe .su__media-cards--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ── Media Player Widget ── */
html.su_bootstrap_safe .su-media-player {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--border-light);
	margin: var(--spacing-xl) 0;
}

html.su_bootstrap_safe .su-media-player__video {
	background: var(--primary-color);
}

html.su_bootstrap_safe .su-media-player__controls {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) var(--spacing-md);
	background: var(--primary-color);
	color: var(--primary-contrast, #fff);
}

html.su_bootstrap_safe .su-media-player__prev,
html.su_bootstrap_safe .su-media-player__next {
	background: none;
	border: none;
	color: rgba(255, 255, 255, .7);
	cursor: pointer;
	padding: var(--spacing-xs);
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color var(--transition-fast), background var(--transition-fast);
}

html.su_bootstrap_safe .su-media-player__prev:hover,
html.su_bootstrap_safe .su-media-player__next:hover {
	color: #fff;
	background: rgba(255, 255, 255, .1);
}

html.su_bootstrap_safe .su-media-player__prev svg,
html.su_bootstrap_safe .su-media-player__next svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

html.su_bootstrap_safe .su-media-player__now-playing {
	flex: 1;
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, .85);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
}

html.su_bootstrap_safe .su-media-player__list {
	background: var(--bg-white, #fff);
	max-height: 400px;
	overflow-y: auto;
}

html.su_bootstrap_safe .su-media-player__list-inner {
	display: flex;
	flex-direction: column;
}

html.su_bootstrap_safe .su-media-player__item {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) var(--spacing-md);
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid var(--border-light);
	transition: background var(--transition-fast);
	cursor: pointer;
}

html.su_bootstrap_safe .su-media-player__item:hover {
	background: var(--bg-light);
	text-decoration: none;
	color: inherit;
}

html.su_bootstrap_safe .su-media-player__item--active {
	background: var(--bg-light);
	border-left: 3px solid var(--accent-color);
}

html.su_bootstrap_safe .su-media-player__thumb {
	width: 80px;
	height: 45px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	flex-shrink: 0;
}

html.su_bootstrap_safe .su-media-player__meta {
	flex: 1;
	min-width: 0;
}

html.su_bootstrap_safe .prose .su-media-player__title {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--primary-color);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.3;
	margin: 0;
}

html.su_bootstrap_safe .su-media-player__item--active .su-media-player__title {
	color: var(--accent-color);
}

html.su_bootstrap_safe .su-media-player__date {
	font-family: var(--font-ui);
	font-size: 10px;
	color: var(--text-secondary);
}

@media (min-width: 768px) {
	html.su_bootstrap_safe .su-media-player {
		grid-template-columns: 1fr 320px;
	}

	html.su_bootstrap_safe .su-media-player__list {
		max-height: none;
		height: 0;
		min-height: 100%;
	}
}

/* ── Media Playlist Cards ── */
html.su_bootstrap_safe .su__media-card--playlist {
	aspect-ratio: 3/4;
	position: relative;
	display: flex;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

html.su_bootstrap_safe .su__media-card--playlist .su__media-card--playlist__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.1) 60%, transparent 100%);
	display: flex;
	align-items: flex-end;
	transition: background 0.3s;
}

html.su_bootstrap_safe .su__media-card--playlist:hover .su__media-card--playlist__overlay {
	background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.25) 70%, rgba(0,0,0,.1) 100%);
}

html.su_bootstrap_safe .su__media-card--playlist__content {
	padding: var(--spacing-lg);
	width: 100%;
}

html.su_bootstrap_safe .prose .su__media-card--playlist__title,
html.su_bootstrap_safe .su__media-card--playlist__title {
	font-family: var(--font-heading);
	font-size: var(--text-base);
	color: #fff !important;
	margin: 0 0 var(--spacing-xs);
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-shadow: 0 1px 6px rgba(0,0,0,.4);
}

html.su_bootstrap_safe .su__media-card--playlist__count {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	color: rgba(255,255,255,.7);
}

html.su_bootstrap_safe .su__media-card--playlist__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .2);
	border: 2px solid rgba(255, 255, 255, .6);
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(4px);
	transition: all 0.3s;
}

html.su_bootstrap_safe .su__media-card--playlist__play svg {
	width: 18px;
	height: 18px;
	fill: #fff;
	margin-left: 3px;
}

html.su_bootstrap_safe .su__media-card--playlist:hover .su__media-card--playlist__play {
	background: var(--accent-color);
	border-color: var(--accent-color);
	transform: translate(-50%, -50%) scale(1.1);
}

/* ── Media Overlay Cards (Theme) ── */
.media-overlay {
	margin: var(--spacing-2xl) 0;
}

.media-overlay--full {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	padding: var(--spacing-3xl) calc(50vw - 50%);
	border-radius: 0;
}

.media-overlay--bg-light,
.media-overlay--bg-warm,
.media-overlay--bg-white,
.media-overlay--bg-primary,
.media-overlay--bg-accent {
	padding: var(--spacing-3xl) var(--spacing-xl);
	border-radius: var(--radius-lg);
}
.media-overlay--bg-light { background: var(--bg-light); }
.media-overlay--bg-warm { background: var(--bg-warm, var(--bg-light)); }
.media-overlay--bg-white { background: #fff; }
.media-overlay--bg-primary {
	background: var(--primary-color);
	color: var(--primary-contrast);
}
.media-overlay--bg-primary .media-overlay__title,
.media-overlay--bg-primary .media-overlay__eyebrow { color: var(--primary-contrast); }
.media-overlay--bg-accent { background: color-mix(in srgb, var(--accent-color), white 85%); }


.media-overlay__eyebrow {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent-color);
	display: block;
	margin-bottom: var(--spacing-xs);
}

html.su_bootstrap_safe .prose .media-overlay__title,
html.su_bootstrap_safe .media-overlay__title {
	font-family: var(--font-heading);
	font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
	color: var(--primary-color);
	margin: 0;
	line-height: 1.2;
}

html.su_bootstrap_safe .prose p.media-overlay__description {
	font-size: var(--text-base);
	color: var(--text-secondary);
	line-height: 1.6;
	margin: var(--spacing-sm) 0 var(--spacing-xl);
}

.media-overlay--bg-primary .media-overlay__title { color: var(--primary-contrast); }
.media-overlay--bg-primary .media-overlay__description {
	color: var(--primary-contrast);
	opacity: 0.8;
}

.media-overlay__footer {
	text-align: center;
	margin-top: var(--spacing-xl);
}

.media-overlay__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-lg);
}

.media-overlay__card {
	position: relative;
	display: block;
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	aspect-ratio: 3/4;
}

.media-overlay__card:hover {
	text-decoration: none;
	color: #fff;
}

.media-overlay__image {
	position: absolute;
	inset: 0;
}

.media-overlay__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.media-overlay__card:hover .media-overlay__image img {
	transform: scale(1.05);
}

/* Dark gradient overlay */
.media-overlay__image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, .75) 0%,
		rgba(0, 0, 0, .15) 50%,
		rgba(0, 0, 0, .05) 100%
	);
	transition: background 0.3s;
}

.media-overlay__card:hover .media-overlay__image::after {
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, .85) 0%,
		rgba(0, 0, 0, .35) 60%,
		rgba(0, 0, 0, .15) 100%
	);
}

/* Play button */
.media-overlay__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .2);
	border: 2px solid rgba(255, 255, 255, .6);
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(4px);
	transition: all 0.3s;
}

.media-overlay__play svg {
	width: 18px;
	height: 18px;
	fill: #fff;
	margin-left: 3px;
}

.media-overlay__card:hover .media-overlay__play {
	background: var(--accent-color);
	border-color: var(--accent-color);
	transform: translate(-50%, -50%) scale(1.1);
}

/* Content overlay at bottom */
.media-overlay__content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	padding: var(--spacing-lg);
}

html.su_bootstrap_safe .media-overlay__name {
	font-family: var(--font-heading);
	font-size: var(--text-base);
	color: #fff !important;
	margin: 0;
	line-height: 1.3;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.media-overlay__desc {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, .85);
	line-height: 1.5;
	margin: var(--spacing-xs) 0 0;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.3s, opacity 0.3s;
}

.media-overlay__card:hover .media-overlay__desc {
	max-height: 80px;
	opacity: 1;
}

/* Placeholder when no thumbnail */
.media-overlay__image:empty::before,
.media-overlay__card:not(:has(img)) .media-overlay__image::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--primary-color) 0%, color-mix(in srgb, var(--primary-color), black 30%) 100%);
}

@media (min-width: 600px) {
	.media-overlay__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.media-overlay__grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}
	.media-overlay__grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
	.media-overlay__grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ── Embedded media (oEmbed) ── */
html.su_bootstrap_safe {
	.block[data-ae-embed-url] {
		margin: var(--spacing-2xl) 0;
		border-radius: var(--radius-lg);
		overflow: hidden;
	}

	/* Responsive embed wrapper */
	.embed-responsive {
		position: relative;
		display: block;
		width: 100%;
		padding: 0;
		overflow: hidden;
		margin: var(--spacing-2xl) 0;
		border-radius: var(--radius-lg);

		&::before {
			content: '';
			display: block;
			padding-top: 56.25%;
		}

		iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: 0;
		}
	}

	/* Bootstrap embed-responsive aspect ratio support */
	.embed-responsive-16by9 {
		padding-bottom: 56.25%;

		&::before {
			display: none;
		}
	}

	.embed-responsive-4by3 {
		padding-bottom: 75%;

		&::before {
			display: none;
		}
	}
}

/* ── YouTube Video Modal ── */
.su-yt-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .75);
	z-index: 9998;
	backdrop-filter: blur(4px);
}

.su-yt-modal__content {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
	width: 90vw;
	max-width: 960px;
}

.su-yt-modal__close {
	position: absolute;
	top: -52px;
	right: 0;
	background: rgba(255, 255, 255, .15);
	border: none;
	color: #fff;
	cursor: pointer;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s;
	z-index: 1;
	padding: 0;
}

.su-yt-modal__close svg {
	width: 22px;
	height: 22px;
	fill: #fff;
}

.su-yt-modal__close:hover {
	background: rgba(255, 255, 255, .3);
}

.su-yt-modal__player {
	border-radius: 0;
	overflow: hidden;
}

/* ── Editor block: Image ── */
html.su_bootstrap_safe .prose {
	.block[data-type="image"] {
		margin: var(--spacing-xl) 0;

		figure {
			margin: 0;
		}

		img {
			border-radius: var(--radius-md);
		}
	}

	.block--left {
		float: left;
		margin-right: var(--spacing-xl);
		margin-bottom: var(--spacing-md);
		clear: left;
	}

	.block--right {
		float: right;
		margin-left: var(--spacing-xl);
		margin-bottom: var(--spacing-md);
		clear: right;
	}

	.block--small {
		max-width: 40%;
	}

	.block--medium {
		max-width: 60%;
	}

	.block--large,
	.block--full {
		float: none;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

/* ── Horizontal line ── */
html.su_bootstrap_safe .prose .block[data-type="hline"] {
	margin: var(--spacing-2xl) 0;

	hr {
		border: none;
		height: 2px;
		background: var(--border-color);
		border-radius: 1px;
	}
}

/* ── Editor style dropdown overrides ──
   AlloyEditor forces height:3em and display:inline on dropdown children,
   which clips button borders and collapses flex layouts. */
.ae-ui .ae-dropdown .ae-listbox .ae-toolbar-element {
	height: auto;
	min-height: 3em;
	padding: 4px 10px;
}
.ae-ui .ae-dropdown .ae-listbox .ae-toolbar-element .button,
.ae-ui .ae-dropdown .ae-listbox .ae-toolbar-element .ghost-button {
	display: inline-flex;
}
.ae-ui .ae-dropdown .ae-listbox .ae-toolbar-element .label {
	display: inline-flex;
}

/* ── Editor styles ── */
html.su_bootstrap_safe {
	/* Label — decorative pre-heading text (like hero label) */
	.label {
		display: inline-flex;
		align-items: center;
		gap: .5rem;
		font-family: var(--font-ui);
		font-size: var(--text-xs);
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--accent-color);
		margin-bottom: 0;
		line-height: 1.2;

		&::before {
			content: "";
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: var(--accent-color);
			flex-shrink: 0;
		}
	}

	/* Collapse spacing between a label and the following heading */
	p:has(> .label), .label {
		margin-bottom: 0;
	}
	p:has(> .label) + h1, p:has(> .label) + h2, p:has(> .label) + h3,
	p:has(> .label) + h4, p:has(> .label) + h5, p:has(> .label) + h6,
	.label + h1, .label + h2, .label + h3,
	.label + h4, .label + h5, .label + h6 {
		margin-top: var(--spacing-xs);
	}

	/* Button — solid accent CTA */
	.button,
	a.button {
		display: inline-flex;
		align-items: center;
		gap: var(--spacing-sm);
		padding: .625rem var(--spacing-xl);
		background: var(--accent-color);
		color: var(--accent-contrast);
		border: 2px solid var(--accent-color);
		border-radius: var(--radius-sm);
		cursor: pointer;
		text-decoration: none;
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		font-weight: 600;

		&:hover {
			background: var(--accent-hover);
			border-color: var(--accent-hover);
			color: var(--accent-contrast);
			text-decoration: none;
		}
	}

	/* Ghost Button — outlined CTA */
	.ghost-button,
	a.ghost-button {
		display: inline-flex;
		align-items: center;
		gap: var(--spacing-sm);
		padding: .625rem var(--spacing-xl);
		background: transparent;
		color: var(--primary-color);
		border: 2px solid var(--primary-color);
		border-radius: var(--radius-sm);
		cursor: pointer;
		text-decoration: none;
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		font-weight: 600;

		&:hover {
			background: var(--primary-color);
			color: var(--primary-contrast);
			text-decoration: none;
		}
	}

	/* Ghost Button on dark backgrounds */
	.columns[data-columns-bg="primary"] .ghost-button,
	.columns[data-columns-bg="primary"] a.ghost-button {
		color: #fff;
		border-color: rgba(255, 255, 255, .5);

		&:hover {
			background: #fff;
			color: var(--primary-color);
			border-color: #fff;
		}
	}

	/* Highlight — subtle accent background */
	.highlight {
		background: color-mix(in srgb, var(--accent-color), white 88%);
		padding: .125em .35em;
		border-radius: var(--radius-sm);
	}

	/* Callout — bordered info box */
	.callout {
		background: var(--bg-light);
		border: 1px solid var(--border-color);
		border-left: 4px solid var(--primary-color);
		border-radius: 0 var(--radius-md) var(--radius-md) 0;
		padding: var(--spacing-lg) var(--spacing-xl);
		margin: var(--spacing-xl) 0;
		font-size: var(--text-base);
		line-height: 1.7;
	}

	/* Lead — larger intro paragraph */
	.lead {
		font-size: var(--text-xl);
		line-height: 1.6;
		color: var(--text-secondary);
		font-weight: 300;
	}

	/* Small — de-emphasized text */
	.small {
		font-size: var(--text-sm);
		color: var(--text-secondary);
	}

	/* Text Center */
	.text-center {
		text-align: center;
	}
}



/* @import ../../../../theme/current/style/forms.css */
/* ── Form Styles ── */
/* Overrides base su__* form classes for the SUThemeStarter design system */

/* ── Form group spacing ── */
html.su_bootstrap_safe .su__form__group {
	margin-bottom: var(--spacing-lg);
}

/* ── Labels ── */
html.su_bootstrap_safe .su__label {
	display: block;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--text-color);
	margin-bottom: var(--spacing-xs);
	letter-spacing: 0.01em;
}

html.su_bootstrap_safe .su__required__indicator .su__label::after {
	content: "*";
	padding-left: 3px;
	color: var(--error-color);
}

/* ── Text inputs, textareas, selects ── */
html.su_bootstrap_safe .su__input {
	width: 100%;
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--text-color);
	background: var(--bg-white);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 0.6em 0.85em;
	line-height: 1.5;
	box-shadow: none;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	box-sizing: border-box;
}

html.su_bootstrap_safe .su__input::placeholder {
	color: color-mix(in srgb, var(--text-secondary), transparent 30%);
}

html.su_bootstrap_safe .su__input:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color), transparent 85%);
}

html.su_bootstrap_safe .su__input:hover:not(:focus) {
	border-color: color-mix(in srgb, var(--border-color), black 15%);
}

/* Textarea specific */
html.su_bootstrap_safe textarea.su__input {
	min-height: 120px;
	resize: vertical;
}

/* Select specific */
html.su_bootstrap_safe select.su__input {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23596170' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85em center;
	padding-right: 2.5em;
	cursor: pointer;
}

/* ── Input group (date, datetime with addon) ── */
html.su_bootstrap_safe .su__input__group {
	display: flex;
}

html.su_bootstrap_safe .su__input__group .su__input {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

html.su_bootstrap_safe .su__input__addon {
	display: flex;
	align-items: center;
	padding: 0 0.75em;
	background: var(--bg-light);
	border: 1px solid var(--border-color);
	border-left: none;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	color: var(--text-secondary);
	font-size: var(--text-sm);
}

/* ── Help text ── */
html.su_bootstrap_safe .su__input__help {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--text-secondary);
	margin-top: var(--spacing-xs);
	line-height: 1.4;
}

html.su_bootstrap_safe .su__input__help:empty {
	display: none;
}

/* ── Error states ── */
html.su_bootstrap_safe .su__form__group.has-error .su__input {
	border-color: var(--error-color);
}

html.su_bootstrap_safe .su__form__group.has-error .su__input:focus {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--error-color), transparent 85%);
}

html.su_bootstrap_safe .su__form__group.has-error .su__input__help {
	color: var(--error-color);
}

/* ── Radio buttons ── */
html.su_bootstrap_safe .su__radio {
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: normal;
	color: var(--text-color);
	margin-bottom: var(--spacing-xs);
	cursor: pointer;
}

html.su_bootstrap_safe .su__radio--inline {
	display: inline-flex;
	margin-right: var(--spacing-md);
}

html.su_bootstrap_safe .su__radio input[type="radio"] {
	appearance: none;
	width: 18px;
	height: 18px;
	border: 2px solid var(--border-color);
	border-radius: 50%;
	margin: 0;
	flex-shrink: 0;
	cursor: pointer;
	transition: border-color var(--transition-fast);
	position: relative;
}

html.su_bootstrap_safe .su__radio input[type="radio"]:checked {
	border-color: var(--primary-color);
}

html.su_bootstrap_safe .su__radio input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 8px;
	height: 8px;
	background: var(--primary-color);
	border-radius: 50%;
}

html.su_bootstrap_safe .su__radio input[type="radio"]:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

html.su_bootstrap_safe .su__radio__label {
	margin-right: 0;
}

/* ── Checkboxes ── */
html.su_bootstrap_safe .su__checkbox {
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: normal;
	color: var(--text-color);
	margin-bottom: var(--spacing-xs);
	cursor: pointer;
}

html.su_bootstrap_safe .su__checkbox input[type="checkbox"] {
	appearance: none;
	width: 18px;
	height: 18px;
	border: 2px solid var(--border-color);
	border-radius: 3px;
	margin: 0;
	flex-shrink: 0;
	cursor: pointer;
	transition: all var(--transition-fast);
	position: relative;
}

html.su_bootstrap_safe .su__checkbox input[type="checkbox"]:checked {
	background: var(--primary-color);
	border-color: var(--primary-color);
}

html.su_bootstrap_safe .su__checkbox input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 5px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

html.su_bootstrap_safe .su__checkbox input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* ── Section header ── */
html.su_bootstrap_safe .su__form__section {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	color: var(--primary-color);
	margin-top: var(--spacing-xl);
	margin-bottom: var(--spacing-md);
	padding-bottom: var(--spacing-sm);
	border-bottom: 1px solid var(--border-light);
}

/* ── Submit button (su__button) ── */
html.su_bootstrap_safe .su__button,
html.su_bootstrap_safe .su__survey .survey--submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--accent-contrast);
	background: var(--accent-color);
	border: 2px solid var(--accent-color);
	border-radius: var(--radius-sm);
	padding: 0.625rem var(--spacing-xl);
	cursor: pointer;
	transition: all var(--transition-fast);
	white-space: nowrap;
	line-height: 1.4;
	text-decoration: none;
}

html.su_bootstrap_safe .su__button:hover,
html.su_bootstrap_safe .su__button:focus,
html.su_bootstrap_safe .su__survey .survey--submit:hover,
html.su_bootstrap_safe .su__survey .survey--submit:focus {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	color: var(--accent-contrast);
	text-decoration: none;
	box-shadow: none;
}

html.su_bootstrap_safe .su__button:focus-visible,
html.su_bootstrap_safe .su__survey .survey--submit:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

html.su_bootstrap_safe .su__button:active,
html.su_bootstrap_safe .su__survey .survey--submit:active {
	background: color-mix(in srgb, var(--accent-color), black 15%);
	border-color: color-mix(in srgb, var(--accent-color), black 15%);
	box-shadow: none;
}

html.su_bootstrap_safe .su__button:disabled,
html.su_bootstrap_safe .su__survey .survey--submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Survey form wrapper ── */
html.su_bootstrap_safe .su__survey {
	max-width: 640px;
}

html.su_bootstrap_safe .survey--buttons {
	margin-top: var(--spacing-xl);
}

/* ── Address field layout ── */
html.su_bootstrap_safe .su__form__address {
	margin-bottom: var(--spacing-lg);
}

html.su_bootstrap_safe .su__address__group {
	display: flex;
	gap: var(--spacing-md);
}

@media (max-width: 768px) {
	html.su_bootstrap_safe .su__address__group {
		flex-direction: column;
		gap: 0;
	}
}

/* ── Name field layout ── */
html.su_bootstrap_safe .su__form__name__group {
	display: flex;
	gap: var(--spacing-md);
}

@media (max-width: 768px) {
	html.su_bootstrap_safe .su__form__name__group {
		flex-direction: column;
		gap: 0;
	}
}

/* ── Scale / rating ── */
html.su_bootstrap_safe .su__form__scale .su__radio {
	display: inline-flex;
	margin-right: var(--spacing-sm);
}

/* ── Flatpickr readonly override ── */
html.su_bootstrap_safe .su__input.flatpickr-input[readonly] {
	cursor: pointer;
	background: var(--bg-white);
}

/* ── Subscription form (email signup) ── */
html.su_bootstrap_safe .su__subscription {
	max-width: 480px;
}

/* ── Success/error alerts ── */
html.su_bootstrap_safe .su__survey .alert-success,
html.su_bootstrap_safe .su__subscription .alert-success {
	background: color-mix(in srgb, var(--success-color), white 90%);
	color: var(--success-color);
	border: 1px solid color-mix(in srgb, var(--success-color), white 70%);
	border-radius: var(--radius-sm);
	padding: var(--spacing-md) var(--spacing-lg);
	font-family: var(--font-ui);
}

html.su_bootstrap_safe .su__survey .alert-danger,
html.su_bootstrap_safe .su__subscription .alert-danger {
	background: color-mix(in srgb, var(--error-color), white 90%);
	color: var(--error-color);
	border: 1px solid color-mix(in srgb, var(--error-color), white 70%);
	border-radius: var(--radius-sm);
	padding: var(--spacing-md) var(--spacing-lg);
	font-family: var(--font-ui);
}



/* @import ../../../../theme/current/style/calendar.css */
/* ── FullCalendar Theme Overrides ── */
/* Matches FullCalendar v3 to the SUThemeStarter design system */

/* ── Toolbar ── */
html.su_bootstrap_safe .fc-toolbar {
	margin-bottom: var(--spacing-lg);
}

html.su_bootstrap_safe .fc-toolbar h2 {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	color: var(--primary-color);
	margin: 0;
}

/* ── Buttons ── */
html.su_bootstrap_safe .fc-button {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 500;
	background: var(--bg-white);
	color: var(--text-color);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 0.4em 0.85em;
	text-transform: none;
	box-shadow: none;
	text-shadow: none;
	line-height: 1.4;
	transition: all var(--transition-fast);
	/* Reset FC defaults */
	background-image: none;
	height: auto;
}

html.su_bootstrap_safe .fc-button:hover {
	background: var(--bg-light);
	color: var(--primary-color);
	border-color: var(--border-color);
}

html.su_bootstrap_safe .fc-button:focus {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
	box-shadow: none;
}

html.su_bootstrap_safe .fc-state-active,
html.su_bootstrap_safe .fc-state-active:hover {
	background: var(--primary-color);
	color: var(--bg-white);
	border-color: var(--primary-color);
	box-shadow: none;
	text-shadow: none;
}

html.su_bootstrap_safe .fc-state-disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ── Button groups ── */
html.su_bootstrap_safe .fc-button-group > .fc-button {
	border-radius: 0;
	margin-left: -1px;
}

html.su_bootstrap_safe .fc-button-group > .fc-button:first-child {
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
	margin-left: 0;
}

html.su_bootstrap_safe .fc-button-group > .fc-button:last-child {
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Active button in group should sit above neighbors for border overlap */
html.su_bootstrap_safe .fc-button-group > .fc-state-active {
	position: relative;
	z-index: 1;
}

/* Today button stands alone — full border radius */
html.su_bootstrap_safe .fc-today-button {
	border-radius: var(--radius-sm);
	margin-left: var(--spacing-sm);
}

/* ── Prev/Next arrow buttons ── */
html.su_bootstrap_safe .fc-prev-button .fc-icon,
html.su_bootstrap_safe .fc-next-button .fc-icon {
	font-size: 1em;
}

/* ── Calendar grid ── */
html.su_bootstrap_safe .fc-view-container {
	background: var(--bg-white);
	border-radius: var(--radius-md);
	overflow: hidden;
}

html.su_bootstrap_safe .fc-view {
	border-radius: var(--radius-md);
}

html.su_bootstrap_safe .fc-view table {
	border-color: var(--border-light);
}

html.su_bootstrap_safe .fc th,
html.su_bootstrap_safe .fc td {
	border-color: var(--border-light);
}

html.su_bootstrap_safe .fc-unthemed th,
html.su_bootstrap_safe .fc-unthemed td,
html.su_bootstrap_safe .fc-unthemed thead,
html.su_bootstrap_safe .fc-unthemed tbody,
html.su_bootstrap_safe .fc-unthemed .fc-divider,
html.su_bootstrap_safe .fc-unthemed .fc-row,
html.su_bootstrap_safe .fc-unthemed .fc-content,
html.su_bootstrap_safe .fc-unthemed .fc-popover,
html.su_bootstrap_safe .fc-unthemed .fc-list-view,
html.su_bootstrap_safe .fc-unthemed .fc-list-heading td {
	border-color: var(--border-light);
}

/* ── Day headers ── */
html.su_bootstrap_safe .fc-day-header {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.6em 0.25em;
	background: var(--bg-light);
	border-bottom: 2px solid var(--border-color);
}

/* ── Day numbers ── */
html.su_bootstrap_safe .fc-day-number {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--text-secondary);
	padding: 0.4em 0.6em;
}

/* ── Today highlight ── */
html.su_bootstrap_safe .fc-today {
	background: color-mix(in srgb, var(--accent-color), white 92%) !important;
}

html.su_bootstrap_safe .fc-today .fc-day-number {
	color: var(--accent-color);
	font-weight: 700;
}

/* ── Events ── */
html.su_bootstrap_safe .fc-event,
html.su_bootstrap_safe a.fc-event {
	border-radius: var(--radius-sm);
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 500;
	padding: 1px 4px;
	cursor: pointer;
	transition: opacity var(--transition-fast);
}

/* Default colors for events without a category */
html.su_bootstrap_safe .fc-event:not([style*="background"]),
html.su_bootstrap_safe a.fc-event:not([style*="background"]) {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--config-primaryColor-contrast, #fff);
}

html.su_bootstrap_safe .fc-event:hover,
html.su_bootstrap_safe a.fc-event:hover {
	opacity: 0.85;
	text-decoration: none;
}

html.su_bootstrap_safe .fc-event .fc-title {
	font-weight: 500;
}

html.su_bootstrap_safe .fc-event .fc-time {
	font-weight: 600;
}

/* Sunset events (dimmer) */
html.su_bootstrap_safe .su__event--sunset {
	background: var(--bg-warm);
	border-color: var(--border-color);
	color: var(--text-secondary);
}

/* ── "More" link (+2 more) ── */
html.su_bootstrap_safe .fc-more {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--accent-color);
}

html.su_bootstrap_safe .fc-more:hover {
	color: var(--accent-hover);
}

/* ── Popover (when clicking "+more") ── */
html.su_bootstrap_safe .fc-popover {
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

html.su_bootstrap_safe .fc-popover .fc-header {
	background: var(--bg-light);
	padding: 0.5em 0.75em;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-sm);
	border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* ── List view ── */
html.su_bootstrap_safe .fc-list-view {
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
}

html.su_bootstrap_safe .fc-list-heading td {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: var(--bg-light);
	padding: 0.5em 1em;
}

html.su_bootstrap_safe .fc-list-item td {
	font-family: var(--font-ui);
	padding: 0.6em 1em;
	border-color: var(--border-light);
}

html.su_bootstrap_safe .fc-list-item:hover td {
	background: color-mix(in srgb, var(--accent-color), white 95%);
}

html.su_bootstrap_safe .fc-list-item-title a {
	font-weight: 500;
	color: var(--primary-color);
	text-decoration: none;
}

html.su_bootstrap_safe .fc-list-item-title a:hover {
	color: var(--accent-color);
}

html.su_bootstrap_safe .fc-list-item-marker .fc-event-dot {
	background: var(--primary-color);
	border-color: var(--primary-color);
	border-radius: 50%;
}

html.su_bootstrap_safe .fc-list-empty {
	font-family: var(--font-ui);
	color: var(--text-secondary);
	padding: var(--spacing-2xl);
}

/* ── Agenda view (week/day) ── */
html.su_bootstrap_safe .fc-time-grid .fc-slats td {
	border-color: var(--border-light);
}

html.su_bootstrap_safe .fc-axis {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	color: var(--text-secondary);
	padding: 0 0.5em;
}

html.su_bootstrap_safe .fc-time-grid-event {
	border-radius: var(--radius-sm);
	border-left-width: 3px;
}

/* ── Tippy popup overrides ── */
html.su_bootstrap_safe .tippy-box[data-theme~="light"] {
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	font-family: var(--font-ui);
}

html.su_bootstrap_safe .tippy-box[data-theme~="light"] .tippy-content {
	padding: 0;
}

html.su_bootstrap_safe .tippy-content .su__event__popup__title {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 400;
	color: var(--primary-color);
	background: var(--bg-light);
	padding: 0.75em 1em;
	margin: 0;
	min-width: 260px;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	border-bottom: 1px solid var(--border-light);
	line-height: 1.3;
}

html.su_bootstrap_safe .tippy-content .su__event__popup__date {
	padding: 0.6em 1em;
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--text-color);
	line-height: 1.5;
}

html.su_bootstrap_safe .tippy-content .su__event__popup__details,
html.su_bootstrap_safe .tippy-content .su__event__popup__more,
html.su_bootstrap_safe .tippy-content .su__event__popup__map,
html.su_bootstrap_safe .tippy-content .su__event__popup__recurrence {
	padding: 0.6em 1em;
	margin: 0;
	border-top: 1px solid var(--border-light) !important;
	font-size: var(--text-sm);
	color: var(--text-secondary);
	line-height: 1.5;
}

html.su_bootstrap_safe .tippy-content .su__event__popup__more {
	text-align: right;
	padding-top: 0.5em;
	padding-bottom: 0.75em;
}

html.su_bootstrap_safe .tippy-content .su__event__popup__more a {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--accent-color);
	text-decoration: none;
}

html.su_bootstrap_safe .tippy-content .su__event__popup__more a:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}

/* ── Responsive ── */
@media (max-width: 768px) {
	html.su_bootstrap_safe .fc-toolbar {
		flex-direction: column;
		gap: var(--spacing-sm);
	}

	html.su_bootstrap_safe .fc-toolbar .fc-left,
	html.su_bootstrap_safe .fc-toolbar .fc-right,
	html.su_bootstrap_safe .fc-toolbar .fc-center {
		float: none;
		display: flex;
		justify-content: center;
	}

	html.su_bootstrap_safe .fc-toolbar h2 {
		font-size: var(--text-xl);
	}

	html.su_bootstrap_safe .fc-button {
		font-size: var(--text-xs);
		padding: 0.35em 0.6em;
	}
}



/* @import ../../../../theme/current/style/store.css */
/* ══════════════════════════════════════════════════
   Store — Cart, Checkout, Product styles
   ══════════════════════════════════════════════════ */

/* ── Store Navigation ── */
html.su_bootstrap_safe #su_store_navigation {
	display: flex;
	justify-content: flex-end;
	margin-bottom: var(--spacing-lg);
}

html.su_bootstrap_safe #su_store_navigation_links {
	list-style: none;
	margin: 0;
	padding: 0;
}

html.su_bootstrap_safe .store-nav-link {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--primary-color);
	text-decoration: none;
	padding: .5rem var(--spacing-md);
	transition: color var(--transition-fast);
}

html.su_bootstrap_safe .store-nav-link:hover {
	color: var(--accent-color);
	text-decoration: none;
}

html.su_bootstrap_safe .store-nav-link svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

html.su_bootstrap_safe .store-cart-link {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--primary-color);
	text-decoration: none;
	padding: .5rem var(--spacing-md);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	transition: all var(--transition-fast);
}

html.su_bootstrap_safe .store-cart-link:hover {
	background: var(--bg-light);
	text-decoration: none;
	color: var(--primary-color);
}

html.su_bootstrap_safe .store-cart-link svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

html.su_bootstrap_safe .store-cart-badge {
	display: none;
}

html.su_bootstrap_safe .store-cart-badge:not(:empty) {
	display: inline-block;
	background: var(--accent-color);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	min-width: 20px;
	height: 20px;
	border-radius: 10px;
	text-align: center;
	padding: 0 6px;
	vertical-align: middle;
}

/* ── Store Browse Filters ── */
html.su_bootstrap_safe .su__store__filters {
	display: flex;
	gap: var(--spacing-lg);
	align-items: center;
	margin-bottom: var(--spacing-xl);
}

html.su_bootstrap_safe .su__store__filters .su_macro_search_wrapper {
	position: relative;
	width: 100%;
}

html.su_bootstrap_safe .su__store__filters .su_macro_search_wrapper input {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: .625rem 2.5rem .625rem var(--spacing-md);
	width: 100%;
	outline: none;
	transition: border-color var(--transition-fast);
	background: none;
}

html.su_bootstrap_safe .su__store__filters .su_macro_search_wrapper input:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(30, 58, 74, .1);
}

html.su_bootstrap_safe #su__store__sortby.su__sortby {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	justify-content: flex-end;
	white-space: nowrap;
}

html.su_bootstrap_safe #su__store__sortby .su__sortby__label {
	color: var(--text-secondary);
	font-weight: 500;
}

html.su_bootstrap_safe #su__store__sortby .su__sortby__option {
	background: none;
	border: 1px solid var(--border-color);
	color: var(--text-secondary);
	padding: .375rem .75rem;
	border-radius: var(--radius-sm);
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 600;
	cursor: pointer;
	transition: all var(--transition-fast);
}

html.su_bootstrap_safe #su__store__sortby .su__sortby__option:hover {
	color: var(--primary-color);
	border-color: var(--primary-color);
}

html.su_bootstrap_safe #su__store__sortby .su__sortby__option.su__sortby__option--asc,
html.su_bootstrap_safe #su__store__sortby .su__sortby__option.su__sortby__option--desc {
	background: var(--accent-color);
	color: var(--accent-contrast, #fff);
	border-color: var(--accent-color);
}

/* ── Browse Product Cards ── */
html.su_bootstrap_safe .su__store__products .store__item {
	display: flex;
	flex-direction: column;
}

html.su_bootstrap_safe .su__store__products .store__item__link {
	flex: 1;
	display: flex;
	flex-direction: column;
	color: inherit;
}

html.su_bootstrap_safe .store__item__add-to-cart,
html.su_bootstrap_safe .store__item__select-options {
	display: block;
	width: 100%;
	margin-top: var(--spacing-sm);
	padding: .5rem var(--spacing-md);
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 600;
	text-align: center;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	background: none;
	color: var(--primary-color);
	cursor: pointer;
	transition: all var(--transition-fast);
	text-decoration: none;
}

html.su_bootstrap_safe .store__item__out-of-stock {
	display: block;
	width: 100%;
	margin-top: var(--spacing-sm);
	padding: .5rem var(--spacing-md);
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 600;
	text-align: center;
	color: var(--text-secondary);
	background: var(--bg-light);
	border-radius: var(--radius-sm);
}

html.su_bootstrap_safe .store__item__add-to-cart:hover,
html.su_bootstrap_safe .store__item__select-options:hover {
	background: var(--accent-color);
	color: var(--accent-contrast, #fff);
	border-color: var(--accent-color);
	text-decoration: none;
}

/* ── Product Actions ── */
html.su_bootstrap_safe .product__actions {
	display: flex;
	gap: var(--spacing-sm);
	align-items: center;
	flex-wrap: wrap;
	margin: var(--spacing-lg) 0;
}

html.su_bootstrap_safe .product__qty-select {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: .5rem var(--spacing-md);
	min-width: 60px;
	cursor: pointer;
}

html.su_bootstrap_safe .product__button__buy {
	background: var(--accent-color);
	color: var(--accent-contrast, #fff);
	border-color: var(--accent-color);
}

html.su_bootstrap_safe .product__button__buy:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
}

html.su_bootstrap_safe .product__price-display {
	display: flex;
	align-items: baseline;
	gap: var(--spacing-sm);
	margin: var(--spacing-sm) 0;
}

html.su_bootstrap_safe .product__price--original {
	text-decoration: line-through;
	color: var(--text-secondary);
	font-size: var(--text-base);
}

html.su_bootstrap_safe .product__price--sale {
	font-family: var(--font-ui);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--accent-color);
}

html.su_bootstrap_safe .product__price--free {
	font-family: var(--font-ui);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--accent-color);
	margin: var(--spacing-sm) 0;
}

html.su_bootstrap_safe .product__open-price {
	margin: var(--spacing-md) 0;
}

html.su_bootstrap_safe .product__open-price label {
	display: block;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: var(--spacing-xs);
}

html.su_bootstrap_safe .product__open-price-input {
	display: inline-flex;
	align-items: center;
	border: 2px solid var(--border-color);
	border-radius: var(--radius-sm);
	overflow: hidden;
	transition: border-color var(--transition-fast);
}

html.su_bootstrap_safe .product__open-price-input:focus-within {
	border-color: var(--accent-color);
}

html.su_bootstrap_safe .product__open-price-currency {
	padding: .5rem .75rem;
	background: var(--bg-light);
	font-family: var(--font-ui);
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--text-secondary);
}

html.su_bootstrap_safe .product__open-price-field {
	border: none;
	outline: none;
	padding: .5rem .75rem;
	font-family: var(--font-ui);
	font-size: var(--text-lg);
	font-weight: 600;
	width: 120px;
	-moz-appearance: textfield;
}

html.su_bootstrap_safe .product__open-price-field::-webkit-outer-spin-button,
html.su_bootstrap_safe .product__open-price-field::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

html.su_bootstrap_safe .product__min-qty {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--text-secondary);
	font-weight: 500;
}

html.su_bootstrap_safe .product__stock-warning {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: #c4622d;
	font-weight: 600;
}

html.su_bootstrap_safe .product__stock-out {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--error-color);
	font-weight: 600;
}

/* ── Cart Page ── */
html.su_bootstrap_safe .store-cart__title {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	color: var(--primary-color);
	margin: 0 0 var(--spacing-xl);
}

html.su_bootstrap_safe .store-cart__empty {
	text-align: center;
	padding: var(--spacing-3xl) var(--spacing-xl);
	background: var(--bg-light);
	border-radius: var(--radius-lg);
}

html.su_bootstrap_safe .store-cart__empty p {
	font-size: var(--text-lg);
	color: var(--text-secondary);
	margin-bottom: var(--spacing-lg);
}

/* Cart items */
html.su_bootstrap_safe .store-cart__item {
	display: grid;
	grid-template-columns: 80px 1fr auto auto auto;
	gap: var(--spacing-md);
	align-items: center;
	padding: var(--spacing-lg) 0;
	border-bottom: 1px solid var(--border-light);
}

html.su_bootstrap_safe .store-cart__item:first-child {
	border-top: 1px solid var(--border-light);
}

html.su_bootstrap_safe .store-cart__item-image {
	width: 80px;
	height: 80px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--bg-light);
}

html.su_bootstrap_safe .store-cart__item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

html.su_bootstrap_safe .store-cart__item-info {
	min-width: 0;
}

html.su_bootstrap_safe .prose .store-cart__item-name {
	font-family: var(--font-heading);
	font-size: var(--text-base);
	color: var(--primary-color);
	margin: 0 0 var(--spacing-xs);
	line-height: 1.3;
}

html.su_bootstrap_safe .store-cart__item-code {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	color: var(--text-secondary);
	display: block;
	margin-bottom: var(--spacing-xs);
}

html.su_bootstrap_safe .store-cart__item-price {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--text-secondary);
}

/* Quantity controls */
html.su_bootstrap_safe .store-cart__item-quantity {
	display: flex;
	align-items: center;
	gap: 0;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

html.su_bootstrap_safe .store-cart__qty-btn {
	width: 32px;
	height: 32px;
	border: none;
	background: var(--bg-light);
	color: var(--text-color);
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--transition-fast);
}

html.su_bootstrap_safe .store-cart__qty-btn:hover {
	background: var(--border-color);
}

html.su_bootstrap_safe .store-cart__qty-input {
	width: 40px;
	height: 32px;
	border: none;
	border-left: 1px solid var(--border-color);
	border-right: 1px solid var(--border-color);
	text-align: center;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	-moz-appearance: textfield;
}

html.su_bootstrap_safe .store-cart__qty-input::-webkit-outer-spin-button,
html.su_bootstrap_safe .store-cart__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Item total */
html.su_bootstrap_safe .store-cart__item-total {
	font-family: var(--font-ui);
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--primary-color);
	text-align: right;
	min-width: 80px;
}

/* Remove button */
html.su_bootstrap_safe .store-cart__item-remove {
	background: none;
	border: none;
	color: var(--text-secondary);
	font-size: 20px;
	cursor: pointer;
	padding: var(--spacing-xs);
	border-radius: var(--radius-sm);
	transition: color var(--transition-fast), background var(--transition-fast);
}

html.su_bootstrap_safe .store-cart__item-remove:hover {
	color: var(--error-color);
	background: rgba(200, 0, 0, .05);
}

/* Cart summary */
html.su_bootstrap_safe .store-cart__summary {
	padding: var(--spacing-xl) 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing-lg);
}

html.su_bootstrap_safe .store-cart__subtotal {
	font-family: var(--font-ui);
	font-size: var(--text-lg);
	display: flex;
	gap: var(--spacing-md);
	align-items: baseline;
}

html.su_bootstrap_safe .store-cart__subtotal strong {
	font-size: var(--text-2xl);
	color: var(--primary-color);
}

html.su_bootstrap_safe .store-cart__actions {
	display: flex;
	gap: var(--spacing-md);
	flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 600px) {
	html.su_bootstrap_safe .store-cart__item {
		grid-template-columns: 60px 1fr;
		gap: var(--spacing-sm);
	}

	html.su_bootstrap_safe .store-cart__item-image {
		width: 60px;
		height: 60px;
	}

	html.su_bootstrap_safe .store-cart__item-quantity,
	html.su_bootstrap_safe .store-cart__item-total,
	html.su_bootstrap_safe .store-cart__item-remove {
		grid-column: 2;
	}

	html.su_bootstrap_safe .store-cart__summary {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	html.su_bootstrap_safe .store-cart__subtotal {
		justify-content: center;
	}

	html.su_bootstrap_safe .store-cart__actions {
		justify-content: center;
	}
}

/* ── Checkout Page ── */
html.su_bootstrap_safe .store-checkout__title {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	color: var(--primary-color);
	margin: 0 0 var(--spacing-xl);
}

html.su_bootstrap_safe .store-checkout__grid {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: var(--spacing-2xl);
	align-items: start;
}

html.su_bootstrap_safe .store-checkout__fieldset {
	border: none;
	padding: 0;
	margin: 0 0 var(--spacing-xl);
}

html.su_bootstrap_safe .store-checkout__fieldset legend {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	color: var(--primary-color);
	padding-bottom: var(--spacing-sm);
	border-bottom: 1px solid var(--border-light);
	margin-bottom: var(--spacing-lg);
	width: 100%;
}

html.su_bootstrap_safe .store-checkout__row {
	display: flex;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

html.su_bootstrap_safe .store-checkout__field {
	flex: 1;
}

html.su_bootstrap_safe .store-checkout__field--full {
	flex: 1 1 100%;
}

html.su_bootstrap_safe .store-checkout__field label {
	display: block;
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: var(--spacing-xs);
}

html.su_bootstrap_safe .store-checkout__field input,
html.su_bootstrap_safe .store-checkout__field select {
	width: 100%;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: .625rem var(--spacing-md);
	outline: none;
	transition: border-color var(--transition-fast);
}

html.su_bootstrap_safe .store-checkout__field input:focus,
html.su_bootstrap_safe .store-checkout__field select:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(30, 58, 74, .1);
}

html.su_bootstrap_safe .store-checkout__error {
	color: var(--error-color);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	margin-top: var(--spacing-md);
	padding: var(--spacing-sm) var(--spacing-md);
	background: rgba(200, 0, 0, .05);
	border-radius: var(--radius-sm);
}

html.su_bootstrap_safe .store-checkout__processing {
	text-align: center;
	padding: var(--spacing-xl);
	color: var(--text-secondary);
	font-family: var(--font-ui);
}

#stripe-payment-element {
	padding: var(--spacing-md);
}

html.su_bootstrap_safe .store-checkout__back-links {
	display: flex;
	justify-content: center;
	gap: var(--spacing-xl);
	margin-top: var(--spacing-md);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
}

html.su_bootstrap_safe .store-checkout__back-links a {
	color: var(--text-secondary);
	text-decoration: none;
}

html.su_bootstrap_safe .store-checkout__back-links a:hover {
	color: var(--primary-color);
}

html.su_bootstrap_safe .store-checkout__legend {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	color: var(--primary-color);
	padding-bottom: var(--spacing-sm);
	border-bottom: 1px solid var(--border-light);
	margin-bottom: var(--spacing-lg);
}

/* Order summary sidebar */
html.su_bootstrap_safe .store-checkout__summary {
	background: var(--bg-light);
	border-radius: var(--radius-lg);
	padding: var(--spacing-xl);
	position: sticky;
	top: var(--spacing-xl);
}

html.su_bootstrap_safe .store-checkout__summary h3 {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	margin: 0 0 var(--spacing-lg);
}

html.su_bootstrap_safe .store-checkout__summary-item {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) 0;
	border-bottom: 1px solid var(--border-light);
}

html.su_bootstrap_safe .store-checkout__summary-img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

html.su_bootstrap_safe .store-checkout__summary-info {
	flex: 1;
	min-width: 0;
}

html.su_bootstrap_safe .store-checkout__summary-name {
	font-size: var(--text-sm);
	display: block;
	line-height: 1.3;
}

html.su_bootstrap_safe .store-checkout__summary-qty {
	font-size: var(--text-xs);
	color: var(--text-secondary);
}

html.su_bootstrap_safe .store-checkout__summary-price {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	white-space: nowrap;
}

html.su_bootstrap_safe .store-checkout__summary-totals {
	padding-top: var(--spacing-md);
}

html.su_bootstrap_safe .store-checkout__summary-row {
	display: flex;
	justify-content: space-between;
	padding: var(--spacing-xs) 0;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
}

html.su_bootstrap_safe .store-checkout__summary-row--total {
	border-top: 1px solid var(--border-color);
	padding-top: var(--spacing-sm);
	margin-top: var(--spacing-sm);
	font-size: var(--text-base);
}

/* Receipt Page */
html.su_bootstrap_safe .store-receipt__header {
	text-align: center;
	margin-bottom: var(--spacing-2xl);
}

html.su_bootstrap_safe .store-receipt__header h1 {
	color: var(--accent-color);
}

html.su_bootstrap_safe .store-receipt__subtitle {
	font-size: var(--text-lg);
	color: var(--text-secondary);
}

html.su_bootstrap_safe .store-receipt__card {
	background: var(--bg-white, #fff);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	padding: var(--spacing-xl);
	max-width: 700px;
	margin: 0 auto;
}

html.su_bootstrap_safe .store-receipt__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-xl);
	padding-bottom: var(--spacing-lg);
	border-bottom: 1px solid var(--border-light);
}

html.su_bootstrap_safe .store-receipt__table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
}

html.su_bootstrap_safe .store-receipt__table th {
	text-align: left;
	font-weight: 600;
	padding: var(--spacing-sm) var(--spacing-md);
	border-bottom: 2px solid var(--border-color);
}

html.su_bootstrap_safe .store-receipt__table td {
	padding: var(--spacing-sm) var(--spacing-md);
	border-bottom: 1px solid var(--border-light);
}

html.su_bootstrap_safe .store-receipt__table tfoot td {
	border-bottom: none;
}

html.su_bootstrap_safe .store-receipt__total-row td {
	font-size: var(--text-base);
	border-top: 2px solid var(--border-color);
}

html.su_bootstrap_safe .store-receipt__addresses {
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--border-light);
}

html.su_bootstrap_safe .store-receipt__addresses h4 {
	font-size: var(--text-sm);
	font-weight: 600;
	margin: 0 0 var(--spacing-xs);
}

html.su_bootstrap_safe .store-receipt__create-account {
	max-width: 700px;
	margin: var(--spacing-2xl) auto 0;
}

html.su_bootstrap_safe .store-receipt__create-account-inner {
	background: var(--bg-light);
	border-radius: var(--radius-lg);
	padding: var(--spacing-xl);
	text-align: center;
}

html.su_bootstrap_safe .store-receipt__create-account-inner h3 {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	color: var(--primary-color);
	margin: 0 0 var(--spacing-xs);
}

html.su_bootstrap_safe .store-receipt__create-account-inner p {
	font-size: var(--text-sm);
	color: var(--text-secondary);
	margin: 0 0 var(--spacing-lg);
}

html.su_bootstrap_safe .store-receipt__create-account-form {
	display: flex;
	gap: var(--spacing-sm);
	justify-content: center;
	max-width: 400px;
	margin: 0 auto;
}

html.su_bootstrap_safe .store-receipt__create-account-form input {
	flex: 1;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: .5rem var(--spacing-md);
}

html.su_bootstrap_safe .store-receipt__create-account-done {
	color: var(--accent-color);
	font-size: var(--text-base);
	padding: var(--spacing-md);
}

html.su_bootstrap_safe .store-receipt__actions {
	text-align: center;
	margin-top: var(--spacing-2xl);
}

/* ── My Orders Page ── */
html.su_bootstrap_safe .store-orders__title {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	color: var(--primary-color);
	margin: 0 0 var(--spacing-xl);
}

html.su_bootstrap_safe .store-orders__empty {
	text-align: center;
	padding: var(--spacing-3xl) var(--spacing-xl);
	background: var(--bg-light);
	border-radius: var(--radius-lg);
}

html.su_bootstrap_safe .store-orders__empty p {
	font-size: var(--text-lg);
	color: var(--text-secondary);
	margin-bottom: var(--spacing-lg);
}

html.su_bootstrap_safe .store-orders__item {
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
	padding: var(--spacing-lg);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	margin-bottom: var(--spacing-sm);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

html.su_bootstrap_safe .store-orders__item:hover {
	border-color: var(--primary-color);
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
	text-decoration: none;
	color: inherit;
}

html.su_bootstrap_safe .store-orders__item-main {
	flex: 1;
	min-width: 0;
}

html.su_bootstrap_safe .store-orders__item-id {
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--primary-color);
}

html.su_bootstrap_safe .store-orders__item-date {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	color: var(--text-secondary);
}

html.su_bootstrap_safe .store-orders__item-details {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	text-align: right;
}

html.su_bootstrap_safe .store-orders__item-count {
	display: block;
	color: var(--text-secondary);
	font-size: var(--text-xs);
}

html.su_bootstrap_safe .store-orders__item-total {
	font-weight: 600;
	color: var(--primary-color);
}

html.su_bootstrap_safe .store-orders__item-status {
	text-align: right;
	min-width: 80px;
}

html.su_bootstrap_safe .store-orders__status {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 20px;
	background: var(--bg-light);
	color: var(--text-secondary);
}

html.su_bootstrap_safe .store-orders__status--paid { background: #e8f5e9; color: #2e7d32; }
html.su_bootstrap_safe .store-orders__status--shipped { background: #e3f2fd; color: #1565c0; }
html.su_bootstrap_safe .store-orders__status--completed { background: #ede7f6; color: #4527a0; }
html.su_bootstrap_safe .store-orders__status--refunded { background: #fff3e0; color: #e65100; }

html.su_bootstrap_safe .store-orders__tracking {
	display: block;
	font-family: var(--font-ui);
	font-size: 10px;
	color: var(--text-secondary);
	margin-top: 2px;
}

/* ── My Account Page ── */
html.su_bootstrap_safe .store-account__title {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	color: var(--primary-color);
	margin: 0 0 var(--spacing-xl);
}

html.su_bootstrap_safe .store-account__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-xl);
}

html.su_bootstrap_safe .store-account__section-title {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	color: var(--primary-color);
	margin: 0 0 var(--spacing-md);
}

html.su_bootstrap_safe .store-account__card {
	background: var(--bg-light);
	border-radius: var(--radius-lg);
	padding: var(--spacing-lg);
}

html.su_bootstrap_safe .store-account__field {
	margin-bottom: var(--spacing-md);
}

html.su_bootstrap_safe .store-account__field label {
	display: block;
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: var(--spacing-xs);
}

html.su_bootstrap_safe .store-account__field input {
	width: 100%;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: .5rem var(--spacing-md);
	background: var(--bg-white, #fff);
}

html.su_bootstrap_safe .store-account__field input:focus {
	border-color: var(--primary-color);
	outline: none;
	box-shadow: 0 0 0 3px rgba(30, 58, 74, .1);
}

html.su_bootstrap_safe .store-account__actions {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-md);
}

html.su_bootstrap_safe .store-account__msg {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	display: none;
}

html.su_bootstrap_safe .store-account__note {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--text-secondary);
	margin: 0 0 var(--spacing-md);
}

html.su_bootstrap_safe .store-account__view-all {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--accent-color);
	text-decoration: none;
}

html.su_bootstrap_safe .store-account__view-all:hover {
	text-decoration: underline;
}

@media (max-width: 768px) {
	html.su_bootstrap_safe .store-account__grid {
		grid-template-columns: 1fr;
	}
}

/* ── Order Detail Page ── */
html.su_bootstrap_safe .store-order-detail__back {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--text-secondary);
	text-decoration: none;
	display: inline-block;
	margin-bottom: var(--spacing-lg);
}

html.su_bootstrap_safe .store-order-detail__back:hover {
	color: var(--primary-color);
}

html.su_bootstrap_safe .store-order-detail__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: var(--spacing-xl);
}

html.su_bootstrap_safe .store-order-detail__title {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	color: var(--primary-color);
	margin: 0;
}

html.su_bootstrap_safe .store-order-detail__date {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--text-secondary);
	margin: var(--spacing-xs) 0 0;
}

html.su_bootstrap_safe .store-order-detail__tracking {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	background: #e3f2fd;
	color: #1565c0;
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-sm);
	margin-bottom: var(--spacing-xl);
}

html.su_bootstrap_safe .store-order-detail__card {
	background: var(--bg-white, #fff);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-bottom: var(--spacing-xl);
}

html.su_bootstrap_safe .store-order-detail__table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
}

html.su_bootstrap_safe .store-order-detail__table th {
	text-align: left;
	font-weight: 600;
	padding: var(--spacing-sm) var(--spacing-md);
	border-bottom: 2px solid var(--border-color);
	background: var(--bg-light);
}

html.su_bootstrap_safe .store-order-detail__table td {
	padding: var(--spacing-sm) var(--spacing-md);
	border-bottom: 1px solid var(--border-light);
}

html.su_bootstrap_safe .store-order-detail__table tfoot td {
	border-bottom: none;
}

html.su_bootstrap_safe .store-order-detail__total-row td {
	font-size: var(--text-base);
	border-top: 2px solid var(--border-color);
}

html.su_bootstrap_safe .store-order-detail__address {
	margin-bottom: var(--spacing-xl);
}

html.su_bootstrap_safe .store-order-detail__address h3 {
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--text-secondary);
	margin: 0 0 var(--spacing-xs);
}

html.su_bootstrap_safe .store-order-detail__address p {
	font-size: var(--text-sm);
	line-height: 1.6;
}

@media (max-width: 600px) {
	html.su_bootstrap_safe .store-orders__item {
		flex-wrap: wrap;
		gap: var(--spacing-sm);
	}

	html.su_bootstrap_safe .store-orders__item-details {
		text-align: left;
	}

	html.su_bootstrap_safe .store-order-detail__header {
		flex-direction: column;
		gap: var(--spacing-sm);
	}
}

@media (max-width: 768px) {
	html.su_bootstrap_safe .store-checkout__grid {
		grid-template-columns: 1fr;
	}

	html.su_bootstrap_safe .store-checkout__row {
		flex-wrap: wrap;
	}

	html.su_bootstrap_safe .store-checkout__summary {
		position: static;
	}
}

/* ── Checkout Shipping Options ── */
html.su_bootstrap_safe .store-checkout__shipping-option {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) var(--spacing-md);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	margin-bottom: var(--spacing-sm);
	cursor: pointer;
	transition: border-color var(--transition-fast);
}

html.su_bootstrap_safe .store-checkout__shipping-option:hover {
	border-color: var(--primary-color);
}

html.su_bootstrap_safe .store-checkout__shipping-option input[type="radio"] {
	accent-color: var(--accent-color);
}

html.su_bootstrap_safe .store-checkout__shipping-option input[type="radio"]:disabled {
	opacity: .5;
}

html.su_bootstrap_safe .store-checkout__shipment-items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
	margin-bottom: var(--spacing-md);
}

/* ── Checkout Login ── */
html.su_bootstrap_safe .store-checkout__login-prompt {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	background: var(--bg-light);
	padding: var(--spacing-md) var(--spacing-lg);
	border-radius: var(--radius-sm);
	margin-bottom: var(--spacing-xl);
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

html.su_bootstrap_safe .store-checkout__login-prompt a {
	font-weight: 600;
	color: var(--accent-color);
}

html.su_bootstrap_safe .store-checkout__login-guest {
	color: var(--text-secondary);
}

html.su_bootstrap_safe .store-checkout__login-form {
	background: var(--bg-light);
	padding: var(--spacing-lg);
	border-radius: var(--radius-sm);
	margin: calc(-1 * var(--spacing-lg)) 0 var(--spacing-xl);
}

html.su_bootstrap_safe .store-checkout__login-form .store-checkout__row {
	margin-bottom: var(--spacing-sm);
}

html.su_bootstrap_safe .store-checkout__login-form input {
	width: 100%;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: .5rem var(--spacing-md);
}

html.su_bootstrap_safe .store-checkout__logged-in {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--text-secondary);
	margin-bottom: var(--spacing-lg);
}

html.su_bootstrap_safe .store-checkout__free-shipping-banner {
	background: #e8f5e9;
	color: #2e7d32;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	padding: var(--spacing-md) var(--spacing-lg);
	border-radius: var(--radius-sm);
	margin-bottom: var(--spacing-xl);
	text-align: center;
}

html.su_bootstrap_safe .shipping-groups--disabled {
	opacity: .4;
	pointer-events: none;
}

html.su_bootstrap_safe .store-checkout__shipment-item-tag {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	background: var(--bg-light);
	color: var(--text-secondary);
	padding: 2px 8px;
	border-radius: var(--radius-sm);
}

/* ── Cart Sidebar Drawer ── */
.cart-sidebar__overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .4);
	z-index: 9998;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
}

.cart-sidebar__overlay--visible {
	opacity: 1;
	visibility: visible;
}

.cart-sidebar {
	position: fixed;
	top: 0;
	right: 0;
	width: 400px;
	max-width: 90vw;
	height: 100%;
	z-index: 9999;
	background: var(--bg-white, #fff);
	box-shadow: -4px 0 24px rgba(0, 0, 0, .15);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .3s ease;
}

.cart-sidebar--open {
	transform: translateX(0);
}

/* Header */
.cart-sidebar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-lg) var(--spacing-xl);
	border-bottom: 1px solid var(--border-light);
	flex-shrink: 0;
}

html.su_bootstrap_safe .cart-sidebar__title {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	color: var(--primary-color);
	margin: 0;
	line-height: 1;
}

.cart-sidebar__count {
	font-size: var(--text-sm);
	color: var(--text-secondary);
	font-weight: 400;
}

.cart-sidebar__close {
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	color: var(--text-secondary);
	cursor: pointer;
	padding: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	transition: background var(--transition-fast), color var(--transition-fast);
}

.cart-sidebar__close:hover {
	background: var(--bg-light);
	color: var(--text-color);
}

/* Body / items list */
.cart-sidebar__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--spacing-md) var(--spacing-xl);
}

.cart-sidebar__empty {
	text-align: center;
	padding: var(--spacing-3xl) var(--spacing-md);
	color: var(--text-secondary);
}

.cart-sidebar__empty p {
	margin: 0;
}

/* Individual item */
.cart-sidebar__item {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: var(--spacing-sm);
	padding: var(--spacing-md) 0;
	border-bottom: 1px solid var(--border-light);
	align-items: start;
}

.cart-sidebar__item-image {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--bg-light);
}

.cart-sidebar__item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cart-sidebar__item-details {
	min-width: 0;
}

.cart-sidebar__item-name {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--primary-color);
	line-height: 1.3;
	margin-bottom: 2px;
}

.cart-sidebar__item-price {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	color: var(--text-secondary);
	margin-bottom: var(--spacing-xs);
}

/* Quantity controls */
.cart-sidebar__item-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.cart-sidebar__qty-btn {
	width: 26px;
	height: 26px;
	border: none;
	background: var(--bg-light);
	color: var(--text-color);
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background var(--transition-fast);
}

.cart-sidebar__qty-btn:hover {
	background: var(--border-color);
}

.cart-sidebar__qty-input {
	width: 30px;
	height: 26px;
	border: none;
	border-left: 1px solid var(--border-color);
	border-right: 1px solid var(--border-color);
	text-align: center;
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	-moz-appearance: textfield;
	background: transparent;
}

.cart-sidebar__qty-input::-webkit-outer-spin-button,
.cart-sidebar__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Right column: total + remove */
.cart-sidebar__item-end {
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--spacing-xs);
}

.cart-sidebar__item-total {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--primary-color);
	white-space: nowrap;
}

.cart-sidebar__item-remove {
	background: none;
	border: none;
	color: var(--text-secondary);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: color var(--transition-fast);
}

.cart-sidebar__item-remove:hover {
	color: var(--error-color);
}

/* Footer */
.cart-sidebar__footer {
	flex-shrink: 0;
	padding: var(--spacing-lg) var(--spacing-xl);
	border-top: 1px solid var(--border-light);
	background: var(--bg-light);
}

.cart-sidebar__subtotal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-family: var(--font-ui);
	font-size: var(--text-base);
	margin-bottom: var(--spacing-md);
}

.cart-sidebar__subtotal strong {
	font-size: var(--text-lg);
	color: var(--primary-color);
}

.cart-sidebar__buttons {
	display: flex;
	gap: var(--spacing-sm);
}

.cart-sidebar__btn {
	flex: 1;
	text-align: center;
	padding: .625rem var(--spacing-md) !important;
	font-size: var(--text-sm) !important;
}

html.su_bootstrap_safe .cart-sidebar__btn.su-btn--primary {
	background: var(--accent-color);
	color: #fff !important;
	border-color: var(--accent-color);
}

html.su_bootstrap_safe .cart-sidebar__btn.su-btn--primary:hover {
	background: var(--accent-hover);
	color: #fff !important;
	border-color: var(--accent-hover);
}

@media (max-width: 480px) {
	.cart-sidebar {
		width: 100vw;
		max-width: 100vw;
	}
}



/* @import ../../../../theme/current/style/product-widget.css */
/* ══════════════════════════════════════════════════
   Product Widget — Grid, Featured, Carousel
   ══════════════════════════════════════════════════ */

/* ── Shared Section Styles ── */
html.su_bootstrap_safe .product-section,
html.su_bootstrap_safe .product-featured,
html.su_bootstrap_safe .product-carousel-section {
	background: var(--product-bg, var(--bg-light));
	padding: var(--spacing-3xl) 0;
}

html.su_bootstrap_safe .product-section--full,
html.su_bootstrap_safe .product-featured--full,
html.su_bootstrap_safe .product-carousel-section--full {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	padding-left: var(--spacing-xl);
	padding-right: var(--spacing-xl);
}

html.su_bootstrap_safe .product-section--no-bg,
html.su_bootstrap_safe .product-carousel-section--no-bg {
	padding-top: var(--spacing-xl);
	padding-bottom: var(--spacing-xl);
}

html.su_bootstrap_safe .product-section--dark,
html.su_bootstrap_safe .product-featured--dark,
html.su_bootstrap_safe .product-carousel-section--dark {
	color: var(--primary-contrast, #fff);
}

html.su_bootstrap_safe .product-section--dark .section__title,
html.su_bootstrap_safe .product-featured--dark .section__title,
html.su_bootstrap_safe .product-carousel-section--dark .section__title,
html.su_bootstrap_safe .product-section--dark .product-card__title a,
html.su_bootstrap_safe .product-featured--dark .product-featured__title,
html.su_bootstrap_safe .product-carousel-section--dark .product-carousel__title a {
	color: var(--primary-contrast, #fff);
}

/* ── Section Header ── */
.product-section .section__header,
.product-featured .section__header,
.product-carousel-section .section__header {
	text-align: center;
	margin-bottom: var(--spacing-2xl);
}

.product-section .section__header .label,
.product-featured .section__header .label,
.product-carousel-section .section__header .label {
	margin-bottom: 0;
}

html.su_bootstrap_safe .prose .product-section .section__title,
html.su_bootstrap_safe .prose .product-featured .section__title,
html.su_bootstrap_safe .prose .product-carousel-section .section__title {
	font-family: var(--font-heading);
	font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
	color: var(--primary-color);
	margin: var(--spacing-xs) 0 0;
}

.product-section .section__footer,
.product-featured .section__footer,
.product-carousel-section .section__footer {
	text-align: center;
	margin-top: var(--spacing-2xl);
}

/* ── Product Grid ── */
html.su_bootstrap_safe .product-section__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--spacing-xl);
}

/* ── Product Card (shared by grid and carousel) ── */
html.su_bootstrap_safe .product-card {
	background: var(--bg-white, #fff);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
	transition: box-shadow var(--transition-fast), transform var(--transition-fast);
	display: flex;
	flex-direction: column;
}

html.su_bootstrap_safe .product-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
	transform: translateY(-2px);
}

html.su_bootstrap_safe .product-card__image-wrap {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--bg-light);
}

html.su_bootstrap_safe .product-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

html.su_bootstrap_safe .product-card:hover .product-card__image {
	transform: scale(1.04);
}

html.su_bootstrap_safe .product-card__image--placeholder {
	width: 100%;
	height: 100%;
	background: var(--bg-light);
}

html.su_bootstrap_safe .product-card__badge {
	position: absolute;
	top: var(--spacing-sm);
	left: var(--spacing-sm);
	background: var(--accent-color);
	color: #fff;
	font-family: var(--font-ui);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 3px 10px;
	border-radius: 20px;
	text-transform: uppercase;
}

html.su_bootstrap_safe .product-card__badge--out {
	background: var(--text-secondary);
}

html.su_bootstrap_safe .product-card__body {
	padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
	flex: 1;
	display: flex;
	flex-direction: column;
}

html.su_bootstrap_safe .prose .product-card__title {
	font-family: var(--font-heading);
	font-size: var(--text-base);
	line-height: 1.3;
	margin: 0 0 var(--spacing-xs);
}

html.su_bootstrap_safe .product-card__title a {
	color: var(--primary-color);
	text-decoration: none;
}

html.su_bootstrap_safe .product-card__title a:hover {
	color: var(--accent-color);
}

html.su_bootstrap_safe .product-card__price {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: var(--spacing-sm);
}

html.su_bootstrap_safe .product-card__price--original {
	text-decoration: line-through;
	color: var(--text-secondary);
	font-weight: 400;
	margin-right: var(--spacing-xs);
}

html.su_bootstrap_safe .product-card__price--sale {
	color: var(--accent-color);
}

html.su_bootstrap_safe .product-card .product-card__add-to-cart,
html.su_bootstrap_safe .product-card .product-card__select-options {
	display: block;
	width: 100%;
	margin-top: auto;
	padding: .5rem;
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	background: none;
	color: var(--primary-color);
	cursor: pointer;
	transition: all var(--transition-fast);
}

html.su_bootstrap_safe .product-card .product-card__add-to-cart:hover,
html.su_bootstrap_safe .product-card .product-card__select-options:hover {
	background: var(--accent-color);
	color: #fff;
	border-color: var(--accent-color);
	text-decoration: none;
}

/* ─��� Featured Product ── */
html.su_bootstrap_safe .product-featured__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-2xl);
	align-items: center;
}

html.su_bootstrap_safe .product-featured__layout--no-image {
	grid-template-columns: 1fr;
	max-width: 600px;
	margin: 0 auto;
}

html.su_bootstrap_safe .product-featured__image-wrap {
	display: block;
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--bg-white, #fff);
}

html.su_bootstrap_safe .product-featured__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

html.su_bootstrap_safe .prose .product-featured__title {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	color: var(--primary-color);
	margin: 0 0 var(--spacing-md);
	line-height: 1.2;
}

html.su_bootstrap_safe .product-featured__desc {
	font-family: var(--font-ui);
	font-size: var(--text-base);
	color: var(--text-secondary);
	line-height: 1.6;
	margin: 0 0 var(--spacing-lg);
}

html.su_bootstrap_safe .product-featured__price {
	font-family: var(--font-ui);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: var(--spacing-lg);
}

html.su_bootstrap_safe .product-featured__actions {
	display: flex;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
}

html.su_bootstrap_safe .product-featured__strip {
	display: flex;
	gap: var(--spacing-md);
	margin-top: var(--spacing-2xl);
	padding-top: var(--spacing-xl);
	border-top: 1px solid var(--border-light);
	overflow-x: auto;
	scrollbar-width: none;
}

html.su_bootstrap_safe .product-featured__strip::-webkit-scrollbar {
	display: none;
}

html.su_bootstrap_safe .product-featured__strip-item {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	padding: var(--spacing-sm);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background var(--transition-fast);
	min-width: 200px;
	flex-shrink: 0;
}

html.su_bootstrap_safe .product-featured__strip-item:hover {
	background: rgba(0, 0, 0, .04);
}

html.su_bootstrap_safe .product-featured__strip-item--active {
	background: rgba(0, 0, 0, .06);
	box-shadow: inset 0 0 0 2px var(--accent-color);
}

html.su_bootstrap_safe .product-featured__strip-image {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	flex-shrink: 0;
}

html.su_bootstrap_safe .product-featured__strip-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

html.su_bootstrap_safe .product-featured__strip-name {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--primary-color);
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

html.su_bootstrap_safe .product-featured__strip-price {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	color: var(--text-secondary);
	margin-top: 2px;
}

/* ── Product Carousel ── */
html.su_bootstrap_safe .product-carousel {
	position: relative;
	margin: 0 calc(-1 * var(--spacing-md));
}

html.su_bootstrap_safe .product-carousel__track {
	display: flex;
	gap: var(--spacing-lg);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding: var(--spacing-sm) var(--spacing-md) var(--spacing-lg);
	scrollbar-width: none;
}

/* Fade masks controlled by JS via data attributes */
html.su_bootstrap_safe .product-carousel--fade-right .product-carousel__track {
	mask-image: linear-gradient(to right, black calc(100% - 50px), transparent 100%);
	-webkit-mask-image: linear-gradient(to right, black calc(100% - 50px), transparent 100%);
}

html.su_bootstrap_safe .product-carousel--fade-left .product-carousel__track {
	mask-image: linear-gradient(to right, transparent 0, black 50px);
	-webkit-mask-image: linear-gradient(to right, transparent 0, black 50px);
}

html.su_bootstrap_safe .product-carousel--fade-both .product-carousel__track {
	mask-image: linear-gradient(to right, transparent 0, black 50px, black calc(100% - 50px), transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0, black 50px, black calc(100% - 50px), transparent 100%);
}

html.su_bootstrap_safe .product-carousel__track::-webkit-scrollbar {
	display: none;
}

/* Arrow buttons */
html.su_bootstrap_safe .product-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: var(--bg-white, #fff);
	color: var(--primary-color);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--transition-fast), box-shadow var(--transition-fast);
}

html.su_bootstrap_safe .product-carousel__arrow:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}

html.su_bootstrap_safe .product-carousel__arrow--prev {
	left: 4px;
}

html.su_bootstrap_safe .product-carousel__arrow--next {
	right: 4px;
}

html.su_bootstrap_safe .product-carousel__arrow--hidden {
	opacity: 0;
	pointer-events: none;
}

html.su_bootstrap_safe .product-carousel__card {
	flex: 0 0 260px;
	scroll-snap-align: start;
	background: var(--bg-white, #fff);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
	transition: box-shadow var(--transition-fast), transform var(--transition-fast);
	display: flex;
	flex-direction: column;
}

html.su_bootstrap_safe .product-carousel__card:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
	transform: translateY(-2px);
}

html.su_bootstrap_safe .product-carousel__image-wrap {
	display: block;
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--bg-light);
}

html.su_bootstrap_safe .product-carousel__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

html.su_bootstrap_safe .product-carousel__card:hover .product-carousel__image {
	transform: scale(1.04);
}

html.su_bootstrap_safe .product-carousel__body {
	padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
}

html.su_bootstrap_safe .prose .product-carousel__title {
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	margin: 0 0 var(--spacing-xs);
	line-height: 1.3;
}

html.su_bootstrap_safe .product-carousel__title a {
	color: var(--primary-color);
	text-decoration: none;
}

html.su_bootstrap_safe .product-carousel__title a:hover {
	color: var(--accent-color);
}

html.su_bootstrap_safe .product-carousel__price {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: var(--spacing-xs);
}

html.su_bootstrap_safe .product-carousel__body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

html.su_bootstrap_safe .product-carousel__action {
	display: block;
	width: 100%;
	margin-top: auto;
	padding: .4rem;
	font-family: var(--font-ui);
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	background: none;
	color: var(--primary-color);
	cursor: pointer;
	transition: all var(--transition-fast);
}

html.su_bootstrap_safe .product-carousel__action:hover {
	background: var(--accent-color);
	color: #fff;
	border-color: var(--accent-color);
	text-decoration: none;
}

/* ── Widget Button Fixes ── */
html.su_bootstrap_safe .product-featured__actions .su-btn--primary {
	color: #fff !important;
}

html.su_bootstrap_safe .product-featured__actions .su-btn--primary:hover {
	color: #fff !important;
}

/* ── Floating Cart Button ── */
html.has-store-nav .floating-cart {
	display: none !important;
}

.floating-cart {
	position: fixed;
	bottom: 90px;
	right: var(--spacing-xl);
	z-index: 9990;
}

.floating-cart__btn {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	background: var(--accent-color);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
	position: relative;
}

.floating-cart__btn:hover {
	transform: scale(1.08);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}

.floating-cart__badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background: var(--primary-color);
	color: #fff;
	font-family: var(--font-ui);
	font-size: 11px;
	font-weight: 700;
	min-width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 10px;
	text-align: center;
	padding: 0 5px;
}

.floating-cart__badge:empty {
	display: none;
}

/* ── Responsive ── */
@media (max-width: 768px) {
	html.su_bootstrap_safe .product-featured__layout {
		grid-template-columns: 1fr;
		gap: var(--spacing-xl);
	}

	html.su_bootstrap_safe .product-section__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-md);
	}

	html.su_bootstrap_safe .product-carousel__card {
		flex: 0 0 200px;
	}
}

@media (max-width: 480px) {
	html.su_bootstrap_safe .product-section__grid {
		grid-template-columns: 1fr;
	}

	.floating-cart {
		bottom: var(--spacing-lg);
		right: var(--spacing-lg);
	}

	.floating-cart__btn {
		width: 48px;
		height: 48px;
	}

	.floating-cart__btn svg {
		width: 20px;
		height: 20px;
	}
}



/* @import marketing.css */
/* ============================================================
   SimpleUpdates marketing — "Direction D"
   Alternating paper / near-black bands; one rise-and-fade reveal
   plus one pinned transition. Every class is mk- prefixed so it
   can't collide with framework/widget CSS, and everything nests
   under html.su_bootstrap_safe to out-rank the base a/h/p rules.
   ============================================================ */

html.su_bootstrap_safe {

	/* ── Shared primitives (also used in header/footer) ── */
	.mk-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 14px 28px;
		font-family: var(--mk-f-ui);
		font-size: 16px;
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: -.01em;
		text-decoration: none;
		border: 1.5px solid transparent;
		border-radius: 999px;
		cursor: pointer;
		transition: background .18s, border-color .18s, color .18s, transform .12s;

		&:hover { text-decoration: none; }
		&:active { transform: translateY(1px); }
	}

	.mk-btn--go {
		background: var(--mk-blue);
		border-color: var(--mk-blue);
		color: #fff;

		&:hover {
			background: var(--mk-blue-deep);
			border-color: var(--mk-blue-deep);
			color: #fff;
		}
	}

	.mk-btn--quiet {
		background: transparent;
		border-color: var(--mk-line);
		color: var(--mk-ink);

		&:hover {
			border-color: var(--mk-ink-3);
			color: var(--mk-ink);
		}
	}

	.mk-btn--quiet-d {
		background: transparent;
		border-color: var(--mk-d-line);
		color: var(--mk-d-ink);

		&:hover {
			border-color: var(--mk-d-ink-2);
			color: var(--mk-d-ink);
		}
	}

	.mk-btn--sm {
		padding: 9px 18px;
		font-size: 14.5px;
	}

	.mk-eyebrow {
		display: block;
		margin-bottom: 20px;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--mk-ink-3);
	}

	.mk-eyebrow--d { color: var(--mk-d-ink-2); }

	.mk-micro {
		font-size: 13.5px;
		letter-spacing: -.005em;
		color: var(--mk-ink-3);
	}

	.mk-micro--d { color: var(--mk-d-ink-2); }

	/* ── Page frame ── */
	.mk {
		font-family: var(--mk-f-ui);
		font-size: 17px;
		line-height: 1.55;
		color: var(--mk-ink);

		h1, h2, h3, h4 {
			margin: 0;
			font-family: var(--mk-f-ui);
			font-weight: 600;
			line-height: 1.03;
			letter-spacing: -.035em;
			text-wrap: balance;
			color: inherit;
		}

		p { margin: 0; }

		ul { margin: 0; padding: 0; }

		/* framework form CSS re-displays hidden inputs */
		[hidden] { display: none !important; }

		:focus-visible {
			outline: 2.5px solid var(--mk-blue);
			outline-offset: 3px;
			border-radius: 4px;
		}
	}

	.mk-wrap {
		max-width: var(--mk-wrap);
		margin: 0 auto;
		padding-inline: var(--mk-gut);
	}

	.mk-narrow {
		max-width: 940px;
		margin: 0 auto;
		padding-inline: var(--mk-gut);
	}

	.mk-section { padding-block: clamp(76px, 10vw, 150px); }

	.mk-band {
		background: var(--mk-paper-2);
		border-block: 1px solid var(--mk-line);
	}

	.mk-dark {
		background: var(--mk-black);
		color: var(--mk-d-ink);
	}

	/* ── Motion vocabulary ── */
	.mk [data-rise] {
		opacity: 0;
		transform: translateY(20px);
	}

	.mk.mk-motion [data-rise] {
		transition: opacity .68s var(--mk-ease), transform .68s var(--mk-ease);
	}

	.mk [data-rise].in {
		opacity: 1;
		transform: none;
	}

	/* No JS → show everything */
	.mk:not(.mk-motion) [data-rise] {
		opacity: 1;
		transform: none;
	}

	/* ── Hero ── */
	.mk-hero {
		padding-block: clamp(56px, 8vw, 110px) clamp(56px, 7vw, 96px);
		text-align: center;

		h1 {
			margin-bottom: 24px;
			font-size: clamp(42px, 7.4vw, 102px);
		}
	}

	.mk-hero__ln { display: block; }
	.mk-thin { font-weight: 200; }

	.mk-hero__sub {
		max-width: 24ch;
		margin: 0 auto 34px !important;
		font-size: clamp(18px, 2.1vw, 25px);
		font-weight: 300;
		line-height: 1.35;
		letter-spacing: -.018em;
		color: var(--mk-ink-2);
	}

	.mk-hero__cta,
	.mk-final__cta {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
		margin-bottom: 16px;
	}

	/* ── The instrument (typing interview) ── */
	.mk-instrument {
		max-width: 720px;
		margin: clamp(44px, 6vw, 80px) auto 0;
		overflow: hidden;
		text-align: left;
		background: var(--mk-white);
		border: 1px solid var(--mk-line);
		border-radius: 18px;
		box-shadow: 0 2px 4px rgba(26, 26, 26, .04), 0 30px 60px -30px rgba(26, 26, 26, .28);
	}

	.mk-inst__bar {
		display: flex;
		align-items: center;
		gap: 7px;
		padding: 13px 18px;
		background: var(--mk-paper-2);
		border-bottom: 1px solid var(--mk-line-2);
	}

	.mk-inst__dot {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: #D5D5D0;
	}

	.mk-inst__tag {
		margin-left: 8px;
		font-size: 11.5px;
		letter-spacing: .02em;
		font-variant-numeric: tabular-nums;
		color: var(--mk-ink-3);
	}

	.mk-inst__body { padding: 24px 24px 26px; }

	.mk-qa {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	/* Sized by a hidden full-text ghost so the bubble never grows while typing */
	.mk-bub {
		display: grid;
		max-width: 86%;
		padding: 12px 16px;
		border-radius: 16px;
		font-size: 16px;
		line-height: 1.45;
		opacity: 0;
		transition: opacity .28s var(--mk-ease);

		&.on { opacity: 1; }
	}

	.mk-bub__ghost,
	.mk-bub__live { grid-area: 1 / 1; }

	.mk-bub__ghost { visibility: hidden; }

	.mk-bub--q {
		background: var(--mk-paper-2);
		color: var(--mk-ink-2);
		border-bottom-left-radius: 5px;
	}

	.mk-bub--a {
		/* .mk-qa is a flex column, so the cross-axis property is align-self;
		   justify-self does nothing here and left the answer stuck left. */
		align-self: flex-end;
		background: var(--mk-blue-wash);
		color: var(--mk-ink);
		border-bottom-right-radius: 5px;
		font-family: var(--mk-f-written);
		font-size: 16.5px;
	}

	.mk-caret {
		display: inline-block;
		width: 2px;
		height: 1em;
		margin-left: 1px;
		vertical-align: -2px;
		background: var(--mk-ink-3);
		animation: mk-blink 1.05s steps(1) infinite;
	}

	.mk-rule {
		height: 1px;
		margin: 22px 0 18px;
		background: repeating-linear-gradient(90deg, var(--mk-line) 0 5px, transparent 5px 10px);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform .55s var(--mk-ease);

		&.on { transform: scaleX(1); }
	}

	.mk-built {
		margin-bottom: 13px !important;
		font-size: 11.5px;
		font-weight: 600;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--mk-ink-3);
		opacity: 0;
		transition: opacity .35s;

		&.on { opacity: 1; }
	}

	.mk-pages {
		display: flex;
		flex-direction: column;
		gap: 7px;
	}

	.mk-prow {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 11px 14px;
		background: var(--mk-white);
		border: 1px solid var(--mk-line-2);
		border-radius: 10px;
		opacity: 0;
		transform: translateY(8px);
		transition: opacity .38s var(--mk-ease), transform .38s var(--mk-ease);

		&.on {
			opacity: 1;
			transform: none;
		}
	}

	.mk-tick {
		display: grid;
		place-items: center;
		flex: none;
		width: 19px;
		height: 19px;
		border-radius: 50%;
		background: var(--mk-green);
		color: #fff;
		font-size: 11px;
		font-weight: 700;
		transform: scale(0);
		transition: transform .34s cubic-bezier(.34, 1.56, .64, 1) .08s;
	}

	.mk-prow.on .mk-tick { transform: scale(1); }

	.mk-pname {
		font-size: 15px;
		font-weight: 500;
		letter-spacing: -.012em;
		color: var(--mk-ink);
	}

	.mk-pnote {
		margin-left: auto;
		font-family: var(--mk-f-written);
		font-size: 13.5px;
		font-style: italic;
		color: var(--mk-ink-3);
	}

	@media (max-width: 480px) {
		.mk-pnote { display: none; }
	}

	/* ── Pinned stage ── */
	.mk-pin {
		position: relative;
		background: var(--mk-black);
		color: var(--mk-d-ink);
	}

	.mk-pin__track { height: 320vh; }

	.mk-pin__stage {
		position: sticky;
		top: 0;
		display: grid;
		place-items: center;
		height: 100vh;
		height: 100svh;
		overflow: hidden;
	}

	.mk-slide {
		grid-area: 1 / 1;
		display: grid;
		place-items: center;
		width: 100%;
		height: 100%;
		will-change: transform, opacity, clip-path;
	}

	.mk-slide--yellow {
		background: var(--mk-yellow);
		color: #0D0D0D;
	}

	.mk-punch {
		padding: 0 .1em;
		background: #0D0D0D;
		color: var(--mk-yellow);
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}

	.mk-pin__dots {
		position: absolute;
		top: 50%;
		right: clamp(16px, 3vw, 34px);
		z-index: 3;
		display: flex;
		flex-direction: column;
		gap: 9px;
		transform: translateY(-50%);
	}

	.mk-pin__dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: #333;
		transition: background .35s, transform .35s;

		&.on {
			background: var(--mk-d-ink);
			transform: scale(1.5);
		}
	}

	.mk-prob {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: clamp(30px, 6vw, 90px);
		width: 100%;

		h2 {
			max-width: 15ch;
			font-size: clamp(28px, 4.4vw, 56px);
		}

		p {
			font-size: clamp(16px, 1.7vw, 19.5px);
			font-weight: 300;
			line-height: 1.55;
			letter-spacing: -.012em;
			color: var(--mk-d-ink-2);
		}

		p + p { margin-top: 16px; }
	}

	@media (max-width: 880px) {
		.mk-prob {
			grid-template-columns: 1fr;
			gap: 24px;
		}
	}

	.mk-said {
		font-family: var(--mk-f-written);
		font-style: italic;
		font-weight: 400 !important;
		color: var(--mk-d-ink) !important;
	}

	.mk-thesis {
		text-align: center;

		h2 {
			max-width: 17ch;
			margin: 0 auto;
			font-size: clamp(30px, 5.4vw, 72px);
		}
	}

	/* Unpinned fallback (small / short screens, reduced motion) */
	.mk-pin.is-unpinned {
		.mk-pin__track { height: auto; }

		.mk-pin__stage {
			position: static;
			display: block;
			height: auto;
			overflow: visible;
		}

		.mk-slide {
			display: block;
			height: auto;
			padding-block: clamp(70px, 13vw, 110px);
			opacity: 1 !important;
			transform: none !important;
			clip-path: none !important;
		}

		.mk-slide + .mk-slide { border-top: 1px solid var(--mk-d-line); }

		.mk-pin__dots { display: none; }
	}

	/* ── Statement heads ── */
	.mk-statement {
		text-align: center;

		h2 {
			max-width: 17ch;
			margin: 0 auto;
			font-size: clamp(32px, 5.2vw, 68px);
		}
	}

	.mk-sub {
		max-width: 46ch;
		margin: 26px auto 0 !important;
		font-size: clamp(17px, 1.9vw, 21px);
		font-weight: 300;
		line-height: 1.5;
		letter-spacing: -.012em;
		color: var(--mk-ink-2);
	}

	/* ── Steps ── */
	.mk-steps {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(26px, 4vw, 56px);
		margin-top: clamp(40px, 5vw, 66px);
	}

	@media (max-width: 820px) {
		.mk-steps {
			grid-template-columns: 1fr;
			gap: 34px;
		}
	}

	.mk-step__n {
		display: grid;
		place-items: center;
		width: 34px;
		height: 34px;
		margin-bottom: 18px;
		border-radius: 50%;
		background: var(--mk-blue);
		color: #fff;
		font-size: 14px;
		font-weight: 600;
	}

	.mk-step {
		h3 {
			margin-bottom: 11px;
			font-size: clamp(20px, 2.2vw, 26px);
			line-height: 1.15;
		}

		p {
			font-size: 16.5px;
			font-weight: 300;
			line-height: 1.55;
			color: var(--mk-ink-2);
		}
	}

	/* ── Example ── */
	.mk-exwrap {
		max-width: 860px;
		margin: clamp(40px, 5vw, 64px) auto 0;
	}

	.mk-shot {
		padding: clamp(30px, 4.6vw, 56px);
		background: var(--mk-white);
		border: 1px solid var(--mk-line);
		border-radius: 16px;
		box-shadow: 0 2px 4px rgba(26, 26, 26, .04), 0 26px 52px -28px rgba(26, 26, 26, .26);

		h3 {
			margin-bottom: 14px;
			font-family: var(--mk-f-written);
			font-size: clamp(25px, 3.4vw, 40px);
			font-weight: 600;
			line-height: 1.12;
			letter-spacing: -.02em;
		}
	}

	.mk-shot__who {
		margin-bottom: 26px !important;
		padding-bottom: 16px;
		border-bottom: 1px solid var(--mk-line-2);
		font-size: 12.5px;
		font-weight: 600;
		letter-spacing: .02em;
		color: var(--mk-ink);

		span {
			font-weight: 400;
			color: var(--mk-ink-3);
		}
	}

	.mk-shot__p {
		font-family: var(--mk-f-written);
		font-size: clamp(16.5px, 1.85vw, 19.5px);
		line-height: 1.5;
		color: var(--mk-ink-2);
	}

	.mk-reader {
		min-height: clamp(160px, 17vw, 208px);
		transition: opacity .22s var(--mk-ease), transform .22s var(--mk-ease);

		&.is-fading {
			opacity: 0;
			transform: translateY(5px);
		}
	}

	.mk-reader__pg {
		margin-bottom: 14px !important;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: .15em;
		text-transform: uppercase;
		color: var(--mk-green-text);
	}

	.mk-pills__hint {
		margin: 26px 0 12px !important;
		padding-top: 22px;
		border-top: 1px solid var(--mk-line-2);
		font-size: 12.5px;
		font-weight: 300;
		color: var(--mk-ink-3);
	}

	.mk-pills {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.mk-pill {
		padding: 7px 14px;
		font-family: var(--mk-f-ui);
		font-size: 13.5px;
		font-weight: 500;
		letter-spacing: -.008em;
		color: var(--mk-ink-2);
		background: var(--mk-paper);
		border: 1px solid var(--mk-line);
		border-radius: 999px;
		cursor: pointer;
		transition: background .16s, color .16s, border-color .16s;

		&:hover {
			border-color: var(--mk-ink-3);
			color: var(--mk-ink);
		}

		&.is-on {
			background: var(--mk-ink);
			border-color: var(--mk-ink);
			color: var(--mk-paper);
		}
	}

	.mk-tabs {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
		margin-top: clamp(28px, 3.4vw, 40px);
	}

	.mk-tab {
		padding: 9px 20px;
		font-family: var(--mk-f-ui);
		font-size: 14.5px;
		font-weight: 500;
		letter-spacing: -.008em;
		color: var(--mk-ink-2);
		background: transparent;
		border: 1.5px solid var(--mk-line);
		border-radius: 999px;
		cursor: pointer;
		transition: .18s;

		&:hover { border-color: var(--mk-ink-3); }

		&[aria-selected="true"] {
			background: var(--mk-ink);
			border-color: var(--mk-ink);
			color: var(--mk-paper);
		}
	}

	.mk-expanel { display: none; }
	.mk-expanel.is-on { display: block; }

	.mk-exnote {
		max-width: 52ch;
		margin: clamp(30px, 4vw, 44px) auto 0;
		text-align: center;

		h4 {
			margin-bottom: 12px;
			font-size: clamp(20px, 2.3vw, 26px);
			line-height: 1.15;
			letter-spacing: -.025em;
		}

		p {
			font-size: 17.5px;
			font-weight: 300;
			line-height: 1.55;
			color: var(--mk-ink-2);
		}
	}

	.mk-extag {
		max-width: 44ch;
		margin: clamp(26px, 3vw, 38px) auto 0 !important;
		text-align: center;
		font-size: 17px;
		font-weight: 300;
		line-height: 1.5;
		color: var(--mk-ink-3);
	}

	/* ── Memory ── */
	.mk-mem {
		display: grid;
		grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
		align-items: start;
		gap: clamp(28px, 5vw, 64px);
	}

	@media (max-width: 880px) {
		.mk-mem {
			grid-template-columns: 1fr;
			gap: 24px;
		}
	}

	.mk-mem__lead h2 { font-size: clamp(28px, 4.2vw, 52px); }

	.mk-mem__body {
		p {
			max-width: 58ch;
			font-size: clamp(17px, 1.85vw, 20px);
			font-weight: 300;
			line-height: 1.55;
			color: var(--mk-ink-2);
		}

		p + p { margin-top: 18px; }
	}

	.mk-mem__body .mk-mem__soon {
		margin-top: 26px;
		padding: 17px 20px;
		background: var(--mk-blue-wash);
		border-left: 3px solid var(--mk-blue);
		border-radius: 10px;
		font-size: 16px;
		line-height: 1.5;
		color: var(--mk-blue-deep);
	}

	/* ── Editor demo ── */
	.mk-demo {
		background: var(--mk-paper-2);
		border-block: 1px solid var(--mk-line);
	}

	.mk-demo__head {
		max-width: 46ch;
		margin: 0 auto clamp(30px, 4vw, 44px);
		text-align: center;

		h2 {
			margin-bottom: 16px;
			font-size: clamp(30px, 4.6vw, 58px);
		}

		p {
			font-size: clamp(17px, 1.85vw, 20px);
			font-weight: 300;
			line-height: 1.5;
			color: var(--mk-ink-2);
		}
	}

	.mk-sheet {
		position: relative;
		max-width: 760px;
		margin: 0 auto;
		background: var(--mk-white);
		border: 1px solid var(--mk-line);
		border-radius: 16px;
		box-shadow: 0 2px 4px rgba(26, 26, 26, .04), 0 26px 52px -30px rgba(26, 26, 26, .24);
	}

	.mk-sheet__bar {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 11px 16px;
		background: var(--mk-paper-2);
		border-bottom: 1px solid var(--mk-line-2);
		border-radius: 16px 16px 0 0;
	}

	.mk-sheet__url {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		padding: 5px 12px;
		font-size: 12.5px;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: var(--mk-ink-3);
		background: var(--mk-white);
		border: 1px solid var(--mk-line-2);
		border-radius: 999px;
	}

	.mk-ebtn {
		padding: 7px 16px;
		font-family: var(--mk-f-ui);
		font-size: 13.5px;
		font-weight: 600;
		letter-spacing: -.005em;
		white-space: nowrap;
		color: #fff;
		background: var(--mk-blue);
		border: 1.5px solid var(--mk-blue);
		border-radius: 999px;
		cursor: pointer;
		transition: background .16s, border-color .16s;

		&:hover {
			background: var(--mk-blue-deep);
			border-color: var(--mk-blue-deep);
		}

		&[data-mode="save"] {
			background: var(--mk-green-text);
			border-color: var(--mk-green-text);
		}
	}

	.mk-tools {
		display: none;
		padding: 9px 16px;
		background: var(--mk-blue-wash);
		border-bottom: 1px solid var(--mk-line-2);

		&.on { display: block; }
	}

	.mk-tools__tip {
		font-size: 12.5px;
		color: var(--mk-blue-deep);
	}

	/* Floating format bar, the way in-place editors do it */
	.mk-selbar {
		position: absolute;
		z-index: 30;
		display: none;
		gap: 2px;
		padding: 4px;
		background: #141414;
		border-radius: 9px;
		box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .5);
		transform: translate(-50%, -100%);

		&.on { display: flex; }
		&.below { transform: translate(-50%, 10px); }

		button {
			display: grid;
			place-items: center;
			min-width: 32px;
			height: 30px;
			padding: 0;
			font-family: var(--mk-f-ui);
			font-size: 14px;
			color: #F5F5F3;
			background: transparent;
			border: 0;
			border-radius: 6px;
			cursor: pointer;
			transition: background .14s;

			&:hover { background: #2E2E2E; }
		}
	}

	.mk-sheet__body {
		padding: clamp(24px, 3.6vw, 40px);

		h3 {
			margin-bottom: 14px;
			font-family: var(--mk-f-written);
			font-size: clamp(24px, 3.1vw, 34px);
			font-weight: 600;
			line-height: 1.14;
			letter-spacing: -.02em;
		}

		p {
			font-family: var(--mk-f-written);
			font-size: clamp(16.5px, 1.8vw, 18.5px);
			line-height: 1.6;
			color: var(--mk-ink-2);
		}

		p + p { margin-top: 14px; }
	}

	.mk-editable {
		outline: none;
		border-radius: 6px;
		transition: background .18s, box-shadow .18s;
	}

	.mk-sheet.is-editing .mk-editable {
		background: #F7FAFF;
		box-shadow: 0 0 0 1px #CBD8EE inset;

		&:focus {
			background: #fff;
			box-shadow: 0 0 0 2px var(--mk-blue) inset;
		}
	}

	.mk-shot-img {
		position: relative;
		display: grid;
		place-items: center;
		aspect-ratio: 16 / 7;
		margin-top: 22px;
		padding: 16px;
		overflow: hidden;
		text-align: center;
		background: linear-gradient(140deg, #E7E9E4, #D6D8D1);
		border: 1px solid var(--mk-line-2);
		border-radius: 10px;
		transition: box-shadow .18s;

		img {
			position: absolute;
			inset: 0;
			display: block;
			width: 100%;
			height: 100%;
			max-width: none;
			object-fit: cover;
		}

		span {
			position: relative;
			grid-area: 1 / 1;
			font-size: 12.5px;
			font-weight: 500;
			color: var(--mk-ink-3);
		}
	}

	.mk-shot-img .mk-shot-img__swap {
		padding: 8px 14px;
		font-weight: 600;
		color: #fff;
		background: rgba(20, 20, 20, .72);
		border-radius: 999px;
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		opacity: 0;
		transition: opacity .18s;
	}

	.mk-sheet.is-editing .mk-shot-img {
		cursor: pointer;
		box-shadow: 0 0 0 1px #CBD8EE inset;

		&:hover,
		&:focus-visible { box-shadow: 0 0 0 2px var(--mk-blue) inset; }

		&:hover .mk-shot-img__label { opacity: 0; }
		&:hover .mk-shot-img__swap { opacity: 1; }
	}

	.mk-sheet__body .mk-toast {
		margin-top: 16px;
		font-family: var(--mk-f-ui);
		font-size: 13.5px;
		font-weight: 500;
		color: var(--mk-green-text);
		opacity: 0;
		transform: translateY(-4px);
		transition: opacity .25s, transform .25s;

		&.on {
			opacity: 1;
			transform: none;
		}
	}

	.mk-demo__note {
		max-width: 50ch;
		margin: clamp(22px, 3vw, 32px) auto 0 !important;
		text-align: center;
		font-size: 15.5px;
		font-weight: 300;
		line-height: 1.55;
		color: var(--mk-ink-3);
	}

	.mk-demo__scale {
		max-width: 56ch;
		margin: clamp(30px, 4vw, 44px) auto 0 !important;
		padding-top: clamp(26px, 3vw, 36px);
		border-top: 1px solid var(--mk-line);
		text-align: center;
		font-size: clamp(17px, 1.9vw, 21px);
		font-weight: 300;
		line-height: 1.45;
		color: var(--mk-ink);

		b { font-weight: 600; }
	}

	/* ── Testimonial ── */
	.mk-voice {
		padding-block: clamp(62px, 7vw, 104px);
		background: var(--mk-paper);
		border-block: 1px solid var(--mk-line);

		blockquote {
			margin: 0;
			font-size: clamp(21px, 3vw, 36px);
			font-weight: 300;
			line-height: 1.28;
			letter-spacing: -.028em;
			text-wrap: balance;
			color: var(--mk-ink);
		}

		cite {
			display: block;
			margin-top: 20px;
			font-size: 15px;
			font-style: normal;
			font-weight: 500;
			color: var(--mk-ink-2);

			span {
				display: block;
				margin-top: 3px;
				font-weight: 300;
				color: var(--mk-ink-3);
			}
		}
	}

	.mk-voice__in {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: clamp(24px, 4vw, 52px);
		max-width: 980px;
	}

	@media (max-width: 720px) {
		.mk-voice__in {
			grid-template-columns: 1fr;
			gap: 22px;
		}
	}

	/* No photo: one centred column. Declared after .mk-voice__in so it wins,
	   and clears the framework's blockquote border. */
	.mk-voice .mk-voice__in--noface {
		display: block;
		max-width: 940px;
		text-align: center;

		blockquote {
			padding: 0;
			border: 0;
			text-wrap: balance;
		}

		cite { color: var(--mk-ink-3); }
	}

	.mk-voice__face {
		display: grid;
		place-items: center;
		flex: none;
		width: clamp(104px, 14vw, 152px);
		aspect-ratio: 1;
		padding: 14px;
		text-align: center;
		font-size: 10.5px;
		font-weight: 600;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--mk-ink-3);
		background: linear-gradient(150deg, #E6E6E2, #D3D3CD);
		border: 1px solid var(--mk-line);
		border-radius: 999px;
	}

	/* ── Pricing ── */
	.mk-plans {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px;
		margin-top: clamp(38px, 5vw, 58px);
	}

	@media (max-width: 880px) {
		.mk-plans { grid-template-columns: 1fr; }
	}

	.mk-plan {
		position: relative;
		display: flex;
		flex-direction: column;
		padding: 30px 28px 32px;
		background: var(--mk-white);
		border: 1px solid var(--mk-line);
		border-radius: 16px;

		ul {
			display: flex;
			flex: 1;
			flex-direction: column;
			gap: 10px;
			margin-top: 18px;
			list-style: none;
		}

		li {
			display: flex;
			gap: 10px;
			font-size: 15.5px;
			font-weight: 300;
			line-height: 1.45;
			color: var(--mk-ink-2);

			&::before {
				content: "✓";
				flex: none;
				margin-top: 2px;
				font-size: 13px;
				font-weight: 700;
				color: var(--mk-green-text);
			}

			&.mk-key {
				font-weight: 500;
				color: var(--mk-ink);
			}
		}

		.mk-btn {
			width: 100%;
			margin-top: 22px;
		}
	}

	.mk-plan--best {
		border-color: var(--mk-blue);
		box-shadow: 0 20px 44px -26px rgba(82, 109, 171, .5);
	}

	.mk-plan__flag {
		position: absolute;
		top: -12px;
		left: 28px;
		padding: 5px 12px;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: #fff;
		background: var(--mk-blue);
		border-radius: 999px;
	}

	.mk-plan__name {
		font-size: 17px;
		font-weight: 600;
		letter-spacing: -.02em;
	}

	.mk-plan__price {
		margin: 10px 0 6px;
		font-size: 46px;
		font-weight: 600;
		line-height: 1;
		letter-spacing: -.045em;
		font-variant-numeric: tabular-nums;

		span {
			font-size: 15px;
			font-weight: 400;
			letter-spacing: -.01em;
			color: var(--mk-ink-3);
		}
	}

	.mk-plan__blurb {
		min-height: 3em;
		font-size: 15px;
		font-weight: 300;
		line-height: 1.45;
		color: var(--mk-ink-3);
	}

	.mk-addons {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: clamp(20px, 3vw, 40px);
		margin-top: clamp(26px, 3.4vw, 38px);
		padding: clamp(24px, 3vw, 34px);
		background: var(--mk-white);
		border: 1px solid var(--mk-line);
		border-radius: 16px;

		> div {
			flex: 1 1 380px;
			min-width: 0;
		}

		h3 {
			margin-bottom: 10px;
			font-size: 20px;
			line-height: 1.2;
			letter-spacing: -.028em;
		}

		p {
			max-width: 66ch;
			font-size: 16.5px;
			font-weight: 300;
			line-height: 1.55;
			color: var(--mk-ink-2);

			b {
				font-weight: 600;
				color: var(--mk-ink);
			}
		}

		.mk-btn {
			flex: none;
			white-space: nowrap;
		}
	}

	.mk-promises {
		margin-top: clamp(18px, 2.4vw, 26px);
		padding: clamp(24px, 3vw, 34px);
		background: var(--mk-green-wash);
		border: 1px solid var(--mk-line);
		border-radius: 16px;

		h3 {
			margin-bottom: 16px;
			font-size: 19px;
			line-height: 1.2;
			letter-spacing: -.028em;
			color: var(--mk-green-text);
		}

		ul {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 11px 30px;
			list-style: none;
		}

		li {
			display: flex;
			gap: 11px;
			font-size: 16px;
			font-weight: 300;
			line-height: 1.45;
			color: var(--mk-ink-2);

			&::before {
				content: "✓";
				flex: none;
				margin-top: 3px;
				font-size: 13px;
				font-weight: 700;
				color: var(--mk-green-text);
			}
		}
	}

	@media (max-width: 720px) {
		.mk-promises ul { grid-template-columns: 1fr; }
	}

	/* ── Final ── */
	.mk-final {
		text-align: center;

		h2 {
			max-width: 14ch;
			margin: 0 auto 22px;
			font-size: clamp(34px, 5.8vw, 78px);
		}

		p:not(.mk-micro) {
			max-width: 44ch;
			margin: 0 auto 32px;
			font-size: clamp(17px, 1.9vw, 21px);
			font-weight: 300;
			line-height: 1.5;
			color: var(--mk-d-ink-2);
		}
	}

	/* ── Reduced motion ── */
	@media (prefers-reduced-motion: reduce) {
		.mk.mk-motion [data-rise] { transition: none; }
		.mk [data-rise] { opacity: 1 !important; transform: none !important; }
		.mk-bub, .mk-rule, .mk-built, .mk-prow, .mk-tick { transition: none !important; }
		.mk-caret { animation: none; opacity: 0; }
	}
}

@keyframes mk-blink {
	50% { opacity: 0; }
}

/* ── Pricing (partial/pricing-plans.html, layout/pricing.html) ── */
html.su_bootstrap_safe {
	.mk-statement h1 {
		max-width: 17ch;
		margin: 0 auto;
		font-size: clamp(38px, 6vw, 80px);
	}

	.mk-pricing-page {
		padding-bottom: clamp(56px, 7vw, 96px);
	}

	/* Interval switch: the container's data-interval decides which prices show */
	.mk-pricing [data-show="yearly"] { display: none; }
	.mk-pricing[data-interval="yearly"] [data-show="monthly"] { display: none; }
	.mk-pricing[data-interval="yearly"] span[data-show="yearly"] { display: block; }
	.mk-pricing[data-interval="yearly"] p[data-show="yearly"] { display: block; }
	.mk-pricing[data-interval="yearly"] td span[data-show="yearly"] { display: inline; }

	.mk-interval {
		display: flex;
		width: max-content;
		margin: clamp(30px, 4vw, 44px) auto 0;
		padding: 4px;
		background: var(--mk-paper-2);
		border: 1px solid var(--mk-line);
		border-radius: 999px;
	}

	.mk-interval__btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 9px 20px;
		font-family: var(--mk-f-ui);
		font-size: 14.5px;
		font-weight: 500;
		letter-spacing: -.008em;
		color: var(--mk-ink-2);
		background: transparent;
		border: 0;
		border-radius: 999px;
		cursor: pointer;
		transition: background .18s, color .18s;

		&:hover { color: var(--mk-ink); }

		&.is-on {
			background: var(--mk-ink);
			color: var(--mk-paper);
		}
	}

	.mk-interval__save {
		padding: 2px 8px;
		font-size: 11.5px;
		font-weight: 600;
		color: var(--mk-green-text);
		background: var(--mk-green-wash);
		border-radius: 999px;
	}

	.mk-interval__btn.is-on .mk-interval__save {
		color: #1A1A1A;
		background: var(--mk-yellow);
	}

	.mk-plan .mk-plan__per {
		margin: -2px 0 6px;
		font-size: 13.5px;
		color: var(--mk-green-text);
	}

	/* Add-ons comparison */
	.mk-addon-table {
		margin-top: clamp(56px, 7vw, 96px);
	}

	.mk-addon-table__head {
		max-width: 60ch;
		margin: 0 auto clamp(24px, 3vw, 34px);
		text-align: center;

		h2 {
			margin-bottom: 14px;
			font-size: clamp(28px, 4vw, 48px);
		}

		p {
			font-size: clamp(16.5px, 1.8vw, 19px);
			font-weight: 300;
			line-height: 1.5;
			color: var(--mk-ink-2);
		}
	}

	.mk-addon-table__scroll {
		overflow-x: auto;
		background: var(--mk-white);
		border: 1px solid var(--mk-line);
		border-radius: 16px;
	}

	.mk-addon-table table {
		width: 100%;
		min-width: 620px;
		border-collapse: collapse;
		font-size: 15px;
	}

	.mk-addon-table th,
	.mk-addon-table td {
		padding: 16px 20px;
		text-align: left;
		vertical-align: middle;
		border-bottom: 1px solid var(--mk-line-2);
	}

	.mk-addon-table tbody tr:last-child th,
	.mk-addon-table tbody tr:last-child td {
		border-bottom: 0;
	}

	.mk-addon-table thead th {
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--mk-ink-3);
		background: var(--mk-paper-2);
	}

	.mk-addon-table thead th:not(:first-child),
	.mk-addon-table td {
		width: 17%;
		text-align: center;
	}

	.mk-addon-table__name {
		display: block;
		font-weight: 600;
		letter-spacing: -.012em;
		color: var(--mk-ink);
	}

	.mk-addon-table__desc {
		display: block;
		margin-top: 3px;
		font-size: 14px;
		font-weight: 300;
		line-height: 1.45;
		color: var(--mk-ink-3);
	}

	.mk-addon-table__price {
		font-weight: 600;
		font-variant-numeric: tabular-nums;
		color: var(--mk-ink);
	}

	.mk-addon-table__int {
		font-size: 13px;
		color: var(--mk-ink-3);
	}

	.mk-addon-table__inc {
		font-size: 13.5px;
		font-weight: 500;
		color: var(--mk-green-text);

		&::before {
			content: "✓ ";
			font-weight: 700;
		}
	}

	.mk-addon-table__na {
		color: var(--mk-ink-3);
	}

	/* Phones: each add-on becomes a card with the three plan prices in a row */
	@media (max-width: 640px) {
		.mk-addon-table__scroll {
			overflow: visible;
		}

		.mk-addon-table table {
			min-width: 0;
		}

		.mk-addon-table thead {
			display: none;
		}

		.mk-addon-table tbody tr {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			border-bottom: 1px solid var(--mk-line-2);
		}

		.mk-addon-table tbody tr:last-child {
			border-bottom: 0;
		}

		.mk-addon-table tbody th {
			grid-column: 1 / -1;
			padding: 16px 18px 6px;
			border-bottom: 0;
		}

		.mk-addon-table td,
		.mk-addon-table tbody tr:last-child td {
			width: auto;
			padding: 8px 6px 16px;
			border-bottom: 0;

			&::before {
				content: attr(data-label);
				display: block;
				margin-bottom: 2px;
				font-size: 10.5px;
				font-weight: 600;
				letter-spacing: .1em;
				text-transform: uppercase;
				color: var(--mk-ink-3);
			}
		}
	}

	.mk-pricing-page .mk-promises {
		margin-top: clamp(40px, 5vw, 60px);
	}
}

/* ── Inner pages: page head, legal, support, about, done-for-you ── */
html.su_bootstrap_safe {
	.mk-section--tight {
		padding-block: clamp(40px, 5vw, 72px) clamp(64px, 8vw, 110px);
	}

	.mk-page-head {
		padding-block: clamp(64px, 9vw, 130px) clamp(20px, 3vw, 36px);

		h1 {
			max-width: 20ch;
			font-size: clamp(38px, 6vw, 76px);
		}
	}

	.mk-page-head__lede {
		max-width: 52ch;
		margin-top: 24px !important;
		font-size: clamp(18px, 2vw, 22px);
		font-weight: 300;
		line-height: 1.45;
		letter-spacing: -.015em;
		color: var(--mk-ink-2);
	}

	.mk-arrow {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-top: 14px;
		font-weight: 500;
		color: var(--mk-blue-deep);
		text-decoration: none;

		&::after {
			content: "→";
			transition: transform .18s var(--mk-ease);
		}

		&:hover {
			color: var(--mk-blue-deep);
			text-decoration: none;

			&::after { transform: translateX(3px); }
		}
	}

	/* Long-form prose (legal pages, editable regions) */
	.mk-prose {
		max-width: 70ch;
		font-family: var(--mk-f-ui);
		font-size: 17px;
		line-height: 1.7;
		color: var(--mk-ink-2);

		h2 {
			margin: 2.2em 0 .6em;
			font-size: clamp(22px, 2.4vw, 28px);
			font-weight: 600;
			line-height: 1.2;
			letter-spacing: -.02em;
			color: var(--mk-ink);
		}

		h3 {
			margin: 1.8em 0 .5em;
			font-size: 19px;
			font-weight: 600;
			line-height: 1.3;
			letter-spacing: -.012em;
			color: var(--mk-ink);
		}

		> :first-child { margin-top: 0; }

		p { margin: 0 0 1em; }

		ul, ol {
			margin: 0 0 1.2em;
			padding-left: 1.3em;
		}

		li + li { margin-top: .4em; }

		strong { color: var(--mk-ink); font-weight: 600; }

		a {
			color: var(--mk-blue-deep);
			text-decoration: underline;
			text-underline-offset: 3px;
		}

		blockquote {
			margin: 1.4em 0;
			padding: 16px 20px;
			background: var(--mk-blue-wash);
			border-left: 3px solid var(--mk-blue);
			border-radius: 10px;
			color: var(--mk-blue-deep);
		}
	}

	.mk-prose--below:not(:empty) {
		margin-top: clamp(40px, 5vw, 64px);
	}

	.mk-legal {
		padding-block: clamp(24px, 3vw, 40px) clamp(72px, 9vw, 130px);
	}

	.mk-legal__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 260px;
		align-items: start;
		gap: clamp(32px, 6vw, 88px);
	}

	.mk-legal__aside {
		position: sticky;
		top: calc(var(--nav-height) + 24px);
		display: flex;
		flex-direction: column;
		gap: 20px;

		h2 {
			margin-bottom: 12px;
			font-size: 12px;
			font-weight: 600;
			letter-spacing: .14em;
			text-transform: uppercase;
			color: var(--mk-ink-3);
		}

		ul { list-style: none; }

		li + li { margin-top: 8px; }

		a {
			font-size: 15px;
			color: var(--mk-ink-2);
			text-decoration: none;

			&:hover { color: var(--mk-ink); }

			&[aria-current="page"] {
				font-weight: 600;
				color: var(--mk-ink);
			}
		}
	}

	.mk-legal__help {
		padding: 18px 20px;
		background: var(--mk-paper-2);
		border: 1px solid var(--mk-line);
		border-radius: 12px;

		p {
			font-size: 14.5px;
			line-height: 1.5;
			color: var(--mk-ink-2);
		}

		a { color: var(--mk-blue-deep); }
	}

	@media (max-width: 900px) {
		.mk-legal__grid { grid-template-columns: 1fr; }
		.mk-legal__aside { position: static; order: -1; }
		.mk-legal__help { display: none; }
	}

	/* Support */
	.mk-cards {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px;
	}

	@media (max-width: 880px) {
		.mk-cards { grid-template-columns: 1fr; }
	}

	.mk-card {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 28px;
		background: var(--mk-white);
		border: 1px solid var(--mk-line);
		border-radius: 16px;

		h2 {
			font-size: 24px;
			line-height: 1.15;
		}

		p {
			font-size: 15.5px;
			font-weight: 300;
			line-height: 1.55;
			color: var(--mk-ink-2);
		}

		.mk-btn { margin-top: auto; }
	}

	.mk-card__kicker {
		font-size: 11.5px;
		font-weight: 600;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--mk-green-text);
	}

	.mk-card .mk-card__big {
		font-size: 18px;
		font-weight: 500;
		line-height: 1.45;
		color: var(--mk-ink);

		a {
			color: var(--mk-ink);
			text-decoration: none;

			&:hover { color: var(--mk-blue-deep); }
		}
	}

	.mk-split {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(24px, 4vw, 48px);
		margin-top: clamp(40px, 5vw, 64px);
		padding-top: clamp(32px, 4vw, 48px);
		border-top: 1px solid var(--mk-line);

		h2 {
			margin-bottom: 10px;
			font-size: 20px;
			line-height: 1.2;
		}

		p, address {
			font-size: 15.5px;
			font-style: normal;
			font-weight: 300;
			line-height: 1.55;
			color: var(--mk-ink-2);
		}
	}

	@media (max-width: 880px) {
		.mk-split { grid-template-columns: 1fr; }
	}

	/* About */
	.mk-people {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 320px));
		justify-content: center;
		gap: 18px;
		margin-top: clamp(36px, 5vw, 56px);
	}

	@media (max-width: 640px) {
		.mk-people { grid-template-columns: 1fr; }
	}

	.mk-person {
		padding: 28px;
		text-align: center;
		background: var(--mk-white);
		border: 1px solid var(--mk-line);
		border-radius: 16px;

		h3 {
			font-size: 22px;
			line-height: 1.15;
		}

		a {
			font-size: 15px;
			color: var(--mk-blue-deep);
			text-decoration: none;

			&:hover { text-decoration: underline; }
		}
	}

	.mk-person .mk-person__role {
		margin: 6px 0 12px;
		font-size: 14px;
		color: var(--mk-ink-3);
	}

	.mk-checks {
		list-style: none;

		li {
			display: flex;
			gap: 12px;
			font-size: clamp(17px, 1.85vw, 20px);
			font-weight: 300;
			line-height: 1.5;
			color: var(--mk-ink-2);

			&::before {
				content: "✓";
				flex: none;
				margin-top: 3px;
				font-size: 14px;
				font-weight: 700;
				color: var(--mk-green-text);
			}
		}

		li + li { margin-top: 14px; }
	}

	.mk-mem__body .mk-about__where {
		margin-top: 28px;
		padding-top: 24px;
		border-top: 1px solid var(--mk-line);
		font-size: 16px;
		color: var(--mk-ink-3);
	}

	/* Done For You */
	.mk-dfy-diy {
		text-align: center;

		h2 {
			margin-bottom: 14px;
			font-size: clamp(28px, 4vw, 48px);
		}

		p {
			max-width: 44ch;
			margin: 0 auto 28px;
			font-size: clamp(17px, 1.9vw, 20px);
			font-weight: 300;
			color: var(--mk-ink-2);
		}
	}

	.mk-final .mk-dfy-line {
		max-width: none;
		margin: 28px auto 0;
		padding-top: 24px;
		border-top: 1px solid var(--mk-d-line);
		font-size: 16px;
		color: var(--mk-d-ink-2);

		a {
			color: var(--mk-d-ink);
			text-underline-offset: 3px;
		}
	}

	/* Pricing extras */
	.mk-soon {
		display: inline-block;
		margin-left: 6px;
		padding: 2px 7px;
		font-size: 10.5px;
		font-weight: 600;
		letter-spacing: .08em;
		text-transform: uppercase;
		vertical-align: 2px;
		color: #3D2E00;
		background: var(--mk-yellow);
		border-radius: 4px;
	}

	.mk-pair {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
		margin-top: 18px;
	}

	@media (max-width: 800px) {
		.mk-pair { grid-template-columns: 1fr; }
	}

	.mk-pair__item {
		padding: clamp(24px, 3vw, 34px);
		background: var(--mk-white);
		border: 1px solid var(--mk-line);
		border-radius: 16px;

		.mk-eyebrow { margin-bottom: 12px; }

		h3 {
			margin-bottom: 10px;
			font-size: 22px;
			line-height: 1.2;
		}

		p {
			font-size: 16px;
			font-weight: 300;
			line-height: 1.55;
			color: var(--mk-ink-2);
		}
	}

	.mk-faq {
		max-width: 760px;
		margin: clamp(32px, 4vw, 48px) auto 0;
		border-top: 1px solid var(--mk-line);

		details { border-bottom: 1px solid var(--mk-line); }

		summary {
			position: relative;
			padding: 20px 40px 20px 0;
			font-size: 18px;
			font-weight: 500;
			letter-spacing: -.012em;
			color: var(--mk-ink);
			cursor: pointer;
			list-style: none;

			&::-webkit-details-marker { display: none; }

			&::after {
				content: "+";
				position: absolute;
				top: 50%;
				right: 6px;
				font-size: 22px;
				font-weight: 300;
				color: var(--mk-ink-3);
				transform: translateY(-50%);
			}
		}

		details[open] summary::after { content: "–"; }

		p {
			max-width: 64ch;
			padding: 0 0 22px;
			font-size: 16.5px;
			font-weight: 300;
			line-height: 1.55;
			color: var(--mk-ink-2);
		}
	}
}

html.su_bootstrap_safe .mk-addon-table__head .mk-addon-table__note {
	margin-top: 12px;
	font-size: 15px;
	color: var(--mk-ink-3);
}

/* ── How It Works (layout/howItWorks.html) ── */
html.su_bootstrap_safe {
	.mk-hiw-facts-wrap {
		padding-block: 0 clamp(24px, 3vw, 40px);
	}

	.mk-hiw-facts {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin: 0;
		background: var(--mk-white);
		border: 1px solid var(--mk-line);
		border-radius: 16px;

		> div {
			padding: 20px 24px;

			& + div { border-left: 1px solid var(--mk-line-2); }
		}

		dt {
			font-size: 20px;
			font-weight: 600;
			letter-spacing: -.02em;
			color: var(--mk-ink);
		}

		dd {
			margin: 4px 0 0;
			font-size: 14.5px;
			font-weight: 300;
			color: var(--mk-ink-3);
		}
	}

	@media (max-width: 720px) {
		.mk-hiw-facts {
			grid-template-columns: 1fr;

			> div + div {
				border-left: 0;
				border-top: 1px solid var(--mk-line-2);
			}
		}
	}

	.mk-hiw {
		padding-top: clamp(32px, 4vw, 56px);
	}

	.mk-hiw-steps {
		display: flex;
		flex-direction: column;
		gap: clamp(72px, 9vw, 128px);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Text + screenshot side by side, alternating sides */
	.mk-hiw-step {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: center;
		gap: clamp(32px, 5vw, 72px);

		&:nth-child(even) {
			.mk-hiw-step__text { order: 2; }
		}
	}

	/* Steps with a two-part visual: text on top, the pair below */
	.mk-hiw-step--wide {
		grid-template-columns: minmax(0, 1fr);

		.mk-hiw-step__text {
			order: 0 !important;
			max-width: 62ch;
		}
	}

	@media (max-width: 900px) {
		.mk-hiw-step {
			grid-template-columns: 1fr;

			.mk-hiw-step__text { order: 0 !important; }
		}
	}

	.mk-hiw-step__text {
		h2 {
			margin: 14px 0 16px;
			font-size: clamp(26px, 3.2vw, 40px);
			line-height: 1.08;
		}

		p {
			font-size: clamp(16.5px, 1.7vw, 18.5px);
			font-weight: 300;
			line-height: 1.6;
			color: var(--mk-ink-2);

			strong { font-weight: 600; color: var(--mk-ink); }
		}

		p + p { margin-top: 14px; }

		.mk-step__n {
			margin-bottom: 0;
		}
	}

	.mk-hiw-pair {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: clamp(24px, 4vw, 56px);
	}

	/* The step's own grid gap already separates text from the pair */
	.mk-hiw-step--wide {
		row-gap: clamp(24px, 3vw, 36px);
	}

	@media (max-width: 900px) {
		.mk-hiw-pair { grid-template-columns: 1fr; }
	}

	/* Screenshot in a light browser frame */
	.mk-frame {
		margin: 0;
		overflow: hidden;
		background: var(--mk-white);
		border: 1px solid var(--mk-line);
		border-radius: 14px;
		box-shadow: 0 2px 4px rgba(26, 26, 26, .04), 0 30px 60px -32px rgba(26, 26, 26, .3);

		img {
			display: block;
			width: 100%;
			height: auto;
		}

		figcaption {
			padding: 12px 16px;
			font-size: 14px;
			color: var(--mk-ink-3);
			border-top: 1px solid var(--mk-line-2);
		}
	}

	.mk-frame__bar {
		display: flex;
		gap: 6px;
		padding: 10px 14px;
		background: var(--mk-paper-2);
		border-bottom: 1px solid var(--mk-line-2);

		span {
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: #D5D5D0;
		}
	}

	.mk-frame--narrow {
		max-width: 620px;
		justify-self: center;
		width: 100%;
	}

	.mk-frame--flat {
		box-shadow: none;
	}

	/* Transcript excerpt */
	.mk-transcript,
	.mk-hiw-callout {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.mk-transcript__label {
		margin-bottom: 6px !important;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--mk-ink-3);
	}

	.mk-tq,
	.mk-ta {
		max-width: 88%;
		padding: 12px 16px;
		font-size: 15.5px;
		line-height: 1.5;
		border-radius: 16px;
	}

	.mk-tq {
		align-self: flex-start;
		color: var(--mk-ink-2);
		background: var(--mk-white);
		border: 1px solid var(--mk-line-2);
		border-bottom-left-radius: 5px;
	}

	.mk-ta {
		align-self: flex-end;
		font-family: var(--mk-f-written);
		font-size: 16px;
		color: var(--mk-ink);
		background: var(--mk-blue-wash);
		border-bottom-right-radius: 5px;
	}

	.mk-hiw-callout {
		gap: 16px;

		blockquote {
			margin: 0;
			padding: 18px 20px;
			font-family: var(--mk-f-written);
			font-size: 17px;
			font-style: italic;
			line-height: 1.55;
			color: var(--mk-ink);
			background: var(--mk-blue-wash);
			border: 0;
			border-left: 3px solid var(--mk-blue);
			border-radius: 10px;
		}
	}

	.mk-hiw-callout .mk-hiw-callout__src {
		font-size: 13.5px;
		color: var(--mk-ink-3);
	}

	.mk-hiw-results {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(20px, 3vw, 36px);
		margin-top: clamp(36px, 5vw, 56px);
	}

	@media (max-width: 800px) {
		.mk-hiw-results { grid-template-columns: 1fr; }
	}

	/* Icon circles in "After that" */
	.mk-step .mk-step__n svg {
		width: 15px;
		height: 15px;
		fill: currentColor;
	}

	.mk-step p a { color: var(--mk-blue-deep); }
}

/* ── /book page ── */
html.su_bootstrap_safe {
	.mk-book {
		display: grid;
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		align-items: start;
		gap: clamp(28px, 5vw, 64px);
	}

	@media (max-width: 860px) {
		.mk-book { grid-template-columns: 1fr; }
	}

	.mk-book__widget {
		padding: clamp(20px, 3vw, 30px);
		background: var(--mk-white);
		border: 1px solid var(--mk-line);
		border-radius: 18px;
		box-shadow: var(--shadow-md);
	}

	.mk-book__aside {
		h2 {
			margin-bottom: 12px;
			font-size: 20px;
			line-height: 1.2;
		}

		p {
			font-size: 16px;
			font-weight: 300;
			line-height: 1.6;
			color: var(--mk-ink-2);
		}

		p + p { margin-top: 12px; }

		a { color: var(--mk-blue-deep); }
	}
}

/* ── Book-a-call modal (script/marketing.js) ── */
html.su_bootstrap_safe {
	.mk-modal {
		position: fixed;
		inset: 0;
		z-index: 300;
		display: grid;
		place-items: center;
		padding: var(--mk-gut);

		&[hidden] { display: none; }
	}

	.mk-modal__scrim {
		position: absolute;
		inset: 0;
		background: rgba(10, 10, 10, .55);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
	}

	.mk-modal__panel {
		position: relative;
		width: 100%;
		max-width: 560px;
		max-height: min(86vh, 820px);
		overflow-y: auto;
		padding: clamp(22px, 3vw, 32px);
		background: var(--mk-white);
		border-radius: 18px;
		box-shadow: 0 2px 4px rgba(26, 26, 26, .06), 0 40px 80px -30px rgba(26, 26, 26, .5);
	}

	.mk-modal__close {
		position: absolute;
		top: 12px;
		right: 14px;
		width: 34px;
		height: 34px;
		font-size: 24px;
		line-height: 1;
		color: var(--mk-ink-3);
		background: transparent;
		border: 0;
		border-radius: 50%;
		cursor: pointer;

		&:hover {
			color: var(--mk-ink);
			background: var(--mk-paper-2);
		}
	}

	.mk-modal__loading {
		padding: 40px 0;
		text-align: center;
		color: var(--mk-ink-3);
	}

	/* The widget ships its own CSS; these only align it with the brand. */
	.mk-modal__body .su-booking-widget,
	.mk-book .su-booking-widget {
		max-width: none;
		margin: 0;
		font-family: var(--mk-f-ui);
		border: 0;
		box-shadow: none;
	}

	.mk-modal__body .su-booking-widget__heading,
	.mk-book .su-booking-widget__heading {
		font-family: var(--mk-f-ui);
		font-size: 22px;
		font-weight: 600;
		letter-spacing: -.02em;
		color: var(--mk-ink);
	}
}

html.su_bootstrap_safe body.mk-modal-open {
	overflow: hidden;
}

/* Brief highlight when a "Book a call" link points at the widget already on the page */
html.su_bootstrap_safe .su-booking-widget--flash {
	animation: mk-flash 1.2s ease;
}

@keyframes mk-flash {
	0%, 100% { box-shadow: 0 0 0 0 rgba(82, 109, 171, 0); }
	25% { box-shadow: 0 0 0 6px rgba(82, 109, 171, .25); }
}

/* ── Guide pages ─────────────────────────────────────────────── */

html.su_bootstrap_safe {
	/* Wide comparison tables scroll sideways rather than crushing every
	   column to one word per line. */
	.mk-table-scroll {
		margin: 32px 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		border: 1px solid var(--mk-line);
		border-radius: 10px;
		background: #fff;
	}

	.mk-compare {
		width: 100%;
		min-width: 860px;
		margin: 0;
		border-collapse: collapse;
		font-family: var(--mk-f-ui);
		font-size: 14px;
		line-height: 1.45;

		caption {
			caption-side: bottom;
			padding: 12px 16px;
			border-top: 1px solid var(--mk-line-2);
			color: var(--mk-ink-3);
			font-size: 13px;
			text-align: left;
		}

		th, td {
			padding: 10px 14px;
			border-bottom: 1px solid var(--mk-line-2);
			vertical-align: top;
			text-align: left;
		}

		thead th {
			background: var(--mk-paper-2);
			border-bottom: 1px solid var(--mk-line);
			font-weight: 600;
			font-size: 13px;
			white-space: nowrap;
		}

		tbody th {
			font-weight: 600;
			white-space: nowrap;
			background: #fff;
		}

		tbody tr:last-child th,
		tbody tr:last-child td { border-bottom: 0; }

		/* Our own column, so the eye lands on it. */
		thead th:nth-child(2),
		tbody td:nth-child(2) {
			background: var(--mk-blue-wash);
		}

		thead th:nth-child(2) { color: var(--mk-blue-deep); }
	}

	.mk-guide {
		h2 {
			margin-top: 2.4em;
		}

		ul {
			margin: 1.1em 0;
			padding-left: 1.3em;
		}

		li { margin: .45em 0; }
	}
}



/* ── Reset ── */
/* @layer gives the reset lowest cascade priority so third-party
   widget styles (ALTCHA, etc.) aren't overridden by the * selector */
@layer reset {
	html.su_bootstrap_safe *,
	html.su_bootstrap_safe *::before,
	html.su_bootstrap_safe *::after {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
}

html.su_bootstrap_safe {
	font-size: 16px;
	scroll-behavior: smooth;

	body {
		font-family: var(--font-body);
		font-size: var(--text-md);
		line-height: 1.6;
		color: var(--text-color);
		background: var(--mk-paper);
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		-webkit-font-smoothing: antialiased;
	}

	img {
		max-width: 100%;
		display: block;
	}

	a {
		color: var(--primary-color);
		text-decoration: underline;
		text-underline-offset: 3px;
		transition: color var(--transition-fast);

		&:hover {
			color: var(--accent-color);
		}

		&:focus-visible {
			outline: 2px solid var(--focus-ring);
			outline-offset: 3px;
			border-radius: var(--radius-sm);
		}
	}

	/* ── Skip link ── */
	.skip-link {
		position: absolute;
		top: -100%;
		left: 1rem;
		background: var(--primary-color);
		color: var(--bg-white);
		padding: .5rem 1rem;
		border-radius: 0 0 var(--radius-sm) var(--radius-sm);
		font-size: var(--text-sm);
		z-index: 9999;
		text-decoration: none;

		&:focus {
			top: 0;
		}
	}

	/* ── Visually hidden ── */
	.visually-hidden {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	/* ── Container ── */
	.su-container {
		width: 100%;
		max-width: var(--container-max);
		margin-left: auto;
		margin-right: auto;
		padding-left: var(--spacing-lg);
		padding-right: var(--spacing-lg);
	}
}