/* @import ../../../../theme/current/style/variables.css */
:root {
	/* Injected by framework from theme.conf — DO NOT define fallbacks here for config vars */
	/* --config-primaryColor, --config-secondaryColor, --config-accentColor, etc. are set via inline <style> */

	/* ── Color palette ── */
	--primary-color: var(--config-primaryColor, #1E3A4A);
	--primary-light: color-mix(in srgb, var(--primary-color), white 20%);
	--primary-dark: color-mix(in srgb, var(--primary-color), black 25%);
	--secondary-color: var(--config-secondaryColor, #162C3C);
	--accent-color: var(--config-accentColor, #C4622D);
	--accent-light: color-mix(in srgb, var(--accent-color), white 20%);
	--accent-hover: color-mix(in srgb, var(--accent-color), black 15%);
	--text-color: #1C1C1C;
	--text-secondary: var(--config-textSecondary, #596170);
	--text-inverse: #F4F0EA;
	--bg-white: #FFFFFF;
	--bg-light: var(--config-bgLight, #F5F2ED);
	--bg-warm: var(--config-bgWarm, #EDE7DC);
	--border-color: var(--config-borderColor, #D9D3C8);
	--border-light: color-mix(in srgb, var(--border-color), white 40%);
	--focus-ring: #3D8FBF;
	--success-color: #2A7A45;
	--error-color: #C03030;

	/* ── Contrast text (auto-computed: #000 on light bg, #fff on dark bg) ── */
	--primary-contrast: var(--config-primaryColor-contrast, #fff);
	--secondary-contrast: var(--config-secondaryColor-contrast, #fff);
	--accent-contrast: var(--config-accentColor-contrast, #fff);

	/* ── Typography ── */
	--font-heading: 'DM Serif Display', Georgia, 'Times New Roman', serif;
	--font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--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: 1140px;
	--nav-height: 68px;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 14px;

	/* ── Shadows ── */
	--shadow-sm: 0 1px 4px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .04);
	--shadow-md: 0 4px 14px rgba(0, 0, 0, .09), 0 2px 4px rgba(0, 0, 0, .05);
	--shadow-lg: 0 12px 36px rgba(0, 0, 0, .11), 0 4px 8px rgba(0, 0, 0, .05);

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

	/* ── Footer ── */
	--footer-bg: var(--secondary-color);
	--footer-text: color-mix(in srgb, var(--secondary-contrast) 65%, transparent);
	--footer-link: color-mix(in srgb, var(--secondary-contrast) 65%, transparent);
}



/* @import ../../../../theme/current/style/header.css */
html.su_bootstrap_safe {
	.site-header {
		background: var(--bg-white);
		height: var(--nav-height);
		position: sticky;
		top: 0;
		z-index: 200;
		border-bottom: 1px solid var(--border-light);
		box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
	}

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

	.site-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
	}

	/* Logo */
	.site-header__logo {
		display: flex;
		align-items: center;
		gap: 10px;
		text-decoration: none;
		flex-shrink: 0;

		&:hover {
			text-decoration: none;
		}
	}

	.site-header__logo-img {
		max-height: 48px;
		width: auto;
	}

	.site-header__logo-text {
		display: flex;
		flex-direction: column;
		line-height: 1.2;
	}

	.site-header__logo-name {
		font-family: var(--font-heading);
		font-size: var(--text-lg);
		color: var(--primary-color);
		white-space: nowrap;
	}

	.site-header__slogan {
		font-family: var(--font-body);
		font-size: var(--text-xs);
		color: var(--text-muted);
		text-transform: uppercase;
		letter-spacing: 0.05em;
		white-space: nowrap;
	}

	/* Hamburger */
	.nav-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		background: none;
		border: none;
		cursor: pointer;
		padding: var(--spacing-sm);
		color: var(--primary-color);
		border-radius: var(--radius-sm);
		transition: background var(--transition-fast);

		&:hover {
			background: var(--bg-light);
		}
	}

	.nav-toggle__bar {
		display: block;
		width: 22px;
		height: 2px;
		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(7px) 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(-7px) rotate(-45deg);
	}
}

/* ── Dark navigation variant ──
   Uses .site-header.site-header--dark compound selector to beat
   the base specificity from header.css and navigation.css. */
html.su_bootstrap_safe .site-header.site-header--dark {
	background: var(--primary-color);
	border-bottom-color: color-mix(in srgb, var(--primary-contrast) 10%, transparent);
	box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
}

html.su_bootstrap_safe .site-header.site-header--dark .site-header__logo-name {
	color: var(--primary-contrast);
}

html.su_bootstrap_safe .site-header.site-header--dark .site-header__slogan {
	color: color-mix(in srgb, var(--primary-contrast) 70%, transparent);
}

html.su_bootstrap_safe .site-header.site-header--dark .nav-toggle {
	color: var(--primary-contrast);
}

html.su_bootstrap_safe .site-header.site-header--dark .nav-toggle:hover {
	background: color-mix(in srgb, var(--primary-contrast) 10%, transparent);
}

html.su_bootstrap_safe .site-header.site-header--dark .site-nav__link {
	color: color-mix(in srgb, var(--primary-contrast) 85%, transparent);
}

html.su_bootstrap_safe .site-header.site-header--dark .site-nav__link:hover {
	color: var(--primary-contrast);
	background: color-mix(in srgb, var(--primary-contrast) 10%, transparent);
}

html.su_bootstrap_safe .site-header.site-header--dark .site-nav__item.is-active > .site-nav__link {
	color: var(--primary-contrast);
	font-weight: 600;
}

html.su_bootstrap_safe .site-header.site-header--dark .site-nav__caret {
	color: color-mix(in srgb, var(--primary-contrast) 50%, transparent);
}

/* Mobile dropdown — dark variant */
@media (max-width: 767px) {
	html.su_bootstrap_safe .site-header.site-header--dark .site-nav {
		background: var(--primary-color);
		border-top-color: color-mix(in srgb, var(--primary-contrast) 10%, transparent);
	}

	html.su_bootstrap_safe .site-header.site-header--dark .site-nav__item {
		border-bottom-color: color-mix(in srgb, var(--primary-contrast) 10%, transparent);
	}

	html.su_bootstrap_safe .site-header.site-header--dark .site-nav__submenu .site-nav__link {
		color: color-mix(in srgb, var(--primary-contrast) 65%, transparent);
	}
}

/* Desktop dropdown — stays light even with dark header */
@media (min-width: 768px) {
	html.su_bootstrap_safe .site-header.site-header--dark .site-nav__submenu .site-nav__link {
		color: var(--text-color);
	}

	html.su_bootstrap_safe .site-header.site-header--dark .site-nav__submenu .site-nav__link:hover {
		color: var(--primary-color);
		background: var(--bg-light);
	}
}

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



/* @import ../../../../theme/current/style/navigation.css */
html.su_bootstrap_safe {
	.site-nav {
		display: none;
		position: absolute;
		top: var(--nav-height);
		left: 0;
		right: 0;
		background: var(--bg-white);
		border-top: 1px solid var(--border-light);
		box-shadow: var(--shadow-lg);
		padding: var(--spacing-md) 0;
		z-index: 200;

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

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

	.site-nav__item {
		border-bottom: 1px solid var(--border-light);

		&.is-active > .site-nav__link {
			color: var(--accent-color);
			font-weight: 600;
		}
	}

	.site-nav__link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--spacing-md) 0;
		color: var(--text-color);
		text-decoration: none;
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		font-weight: 500;
		transition: color var(--transition-fast);

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

	.site-nav__caret {
		font-size: .6em;
		transition: transform var(--transition-fast);
		color: var(--text-secondary);
	}

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

	/* Dropdown submenu */
	.site-nav__submenu {
		display: none;
		padding: 0 0 var(--spacing-sm) var(--spacing-md);
		list-style: none;
	}

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

	.site-nav__submenu .site-nav__link {
		padding: var(--spacing-xs) 0;
		color: var(--text-secondary);
		font-size: var(--text-sm);
	}
}

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

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

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

		.site-nav__link {
			padding: .5rem .875rem;
			border-radius: var(--radius-sm);
			font-size: var(--text-sm);
			font-weight: 500;
			color: var(--text-color);

			&:hover {
				background: var(--bg-light);
				color: var(--primary-color);
			}
		}

		.site-nav__submenu {
			position: absolute;
			top: calc(100% + 6px);
			left: 0;
			min-width: 210px;
			background: var(--bg-white);
			border-radius: var(--radius-md);
			box-shadow: var(--shadow-lg);
			padding: var(--spacing-sm) 0;
			border: 1px solid var(--border-light);
		}

		/* Transparent hover bridge across the 6px gap above the dropdown.
		 * Without this, cursor in the gap is over neither the nav item nor
		 * the dropdown — :hover drops on the parent <li> and the dropdown
		 * collapses before the cursor can reach it. The ::before is a
		 * descendant of the dropdown (which is a descendant of the <li>),
		 * so hovering it keeps the parent's :hover true. */
		.site-nav__submenu::before {
			content: "";
			position: absolute;
			top: -6px;
			left: 0;
			right: 0;
			height: 6px;
		}

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

		.site-nav__submenu .site-nav__link {
			padding: .5rem var(--spacing-lg);
			color: var(--text-color);
			font-size: var(--text-sm);

			&:hover {
				background: var(--bg-light);
				color: var(--primary-color);
			}
		}
	}
}



/* @import ../../../../theme/current/style/hero.css */
html.su_bootstrap_safe {
	.hero {
		background-image: var(--config-heroDefault-url, none);
		background-size: cover;
		background-position:
			calc(var(--config-heroDefault-focalpoint-x, 50) * 1%)
			calc(var(--config-heroDefault-focalpoint-y, 50) * 1%);
		background-repeat: no-repeat;
		position: relative;
		min-height: 300px;
		display: flex;
		align-items: flex-end;
		padding-bottom: var(--spacing-3xl);

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(
				160deg,
				rgba(17, 35, 48, .15) 0%,
				rgba(17, 35, 48, .5) 45%,
				rgba(17, 35, 48, .82) 100%
			);
		}

		&.hero--large {
			min-height: 500px;
			padding-bottom: var(--spacing-4xl);
		}

		&.hero--solid {
			background-image: none !important;
			background: var(--primary-color);
			min-height: auto;
			padding: var(--spacing-3xl) 0;

			&::before {
				display: none;
			}
		}

		&.hero--hidden {
			display: none;
		}
	}

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

	.hero__eyebrow {
		font-family: var(--font-ui);
		font-size: var(--text-xs);
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--accent-light);
		margin-bottom: var(--spacing-md);
	}

	.hero__description {
		font-size: var(--text-lg);
		color: rgba(255, 255, 255, .82);
		line-height: 1.6;
		max-width: 680px;
	}

	.hero__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-light);
		margin-bottom: var(--spacing-md);
	}

	.hero__label-dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--accent-color);
		flex-shrink: 0;
	}

	.hero__title {
		font-family: var(--font-heading);
		font-size: clamp(2.25rem, 5.5vw, var(--text-5xl));
		line-height: 1.1;
		color: #fff;
		margin-bottom: var(--spacing-lg);
		text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
	}

	.hero__subtitle {
		font-size: var(--text-lg);
		color: rgba(255, 255, 255, .82);
		line-height: 1.6;
		margin-bottom: var(--spacing-2xl);
		max-width: 520px;
	}

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

@media (min-width: 768px) {
	html.su_bootstrap_safe .hero {
		min-height: 500px;
	}
	html.su_bootstrap_safe .hero.hero--large {
		min-height: 640px;
	}
}



/* @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);
	line-height: 1.25;
	color: var(--primary-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 {
		background: var(--footer-bg);
		color: var(--footer-text);
		margin-top: auto;

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

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

	.site-footer__main {
		padding: var(--spacing-3xl) 0 var(--spacing-2xl);
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--spacing-2xl);
	}

	.site-footer__heading {
		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-md);
	}

	.site-footer__logo {
		font-family: var(--font-heading);
		font-size: var(--text-2xl);
		color: var(--secondary-contrast);
		margin-bottom: var(--spacing-sm);
		display: block;
		text-decoration: none;
	}

	.site-footer__contact p {
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		line-height: 2;
		margin: 0;
	}

	.site-footer__bar {
		border-top: 1px solid color-mix(in srgb, var(--secondary-contrast) 7%, transparent);
		padding: var(--spacing-lg) 0;
		font-family: var(--font-ui);
		font-size: var(--text-xs);
	}

	.site-footer__bar-inner {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);
		align-items: center;
		text-align: center;
	}

	.site-footer__bar a {
		color: color-mix(in srgb, var(--secondary-contrast) 40%, transparent);
		text-decoration: none;

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

	.site-footer__bar-links {
		display: flex;
		gap: var(--spacing-md);
		flex-wrap: wrap;
		justify-content: center;
	}

	/* SU platform footer (Powered by / Sitemap / Login) — nested in the
	 * site footer's bottom bar, dimmer than the customer's own links so
	 * it doesn't compete visually but is still discoverable. */
	.site-footer__legal {
		margin-top: var(--spacing-md);
		text-align: center;
		font-size: var(--text-xs);
		opacity: 0.7;
	}
	.site-footer__legal .footer,
	.site-footer__legal > span {
		display: inline;
	}
	.site-footer__legal span + span::before {
		content: " · ";
		opacity: 0.5;
	}

	.site-footer__hours {
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		line-height: 1.9;
		margin-top: var(--spacing-xl);
	}

	.site-footer__desc {
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		line-height: 1.7;
		margin-bottom: var(--spacing-md);
	}

	.site-footer__nav {
		margin-top: var(--spacing-xl);
	}

	.site-footer__nav-list {
		list-style: none;
		padding: 0;
		margin: 0;
		font-family: var(--font-ui);
		font-size: var(--text-sm);
		line-height: 2.1;
	}

	.site-footer__nav-list a {
		color: color-mix(in srgb, var(--secondary-contrast) 55%, transparent);
		text-decoration: none;

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

	.site-footer__cta {
		margin-top: var(--spacing-xl);
	}

	.site-footer .su-btn {
		color: #fff;

		&:hover {
			color: #fff;
		}
	}
}

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

	html.su_bootstrap_safe .site-footer__bar-inner {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}

	html.su_bootstrap_safe .site-footer__bar-links {
		justify-content: flex-end;
	}
}



/* @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: 600;
		letter-spacing: .02em;
		text-decoration: none;
		border: 2px solid transparent;
		border-radius: var(--radius-sm);
		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';
			}
		}
	}
}

/* ── 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 { 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);
}

/* Closed, the drawer sits just off-canvas and its shadow bled a grey strip
   down the right edge of every page. Only cast it while open. */
.cart-sidebar:not(.cart-sidebar--open) {
	box-shadow: none;
}

/* 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__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;
	}
}



/* ── 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.7;
		color: var(--text-color);
		background: var(--bg-white);
		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);
	}
}