:root {
	--ss-primary: #6F0B13;
	--ss-primary-dark: #4D070D;
	--ss-gold: #C8942E;
	--ss-gold-light: #E4C47A;
	--ss-cream: #FBF7F0;
	--ss-white: #FFFFFF;
	--ss-text: #241A17;
	--ss-muted: #6F6662;
	--ss-border: #E8DED0;
	--ss-radius-sm: 4px;
	--ss-radius-md: 8px;
	--ss-radius-lg: 14px;
	--ss-container: 1440px;
	--ss-transition: 220ms ease;
}

.ss-container {
	width: min(100% - 32px, var(--ss-container));
	margin-inline: auto;
}

.ss-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.ss-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 24px;
	border: 1px solid transparent;
	border-radius: var(--ss-radius-sm);
	background: var(--ss-primary);
	color: var(--ss-white);
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--ss-transition), background var(--ss-transition);
}

.ss-button:hover {
	background: var(--ss-primary-dark);
	transform: translateY(-1px);
}

.ss-button--gold {
	background: var(--ss-gold);
	color: var(--ss-text);
}

.ss-button--gold:hover {
	background: var(--ss-gold-light);
}

@media (max-width: 767px) {
	.ss-container {
		width: min(100% - 24px, var(--ss-container));
	}
}
