.roj-site-footer {
	background: #f2eee6;
	color: #1d1d1b;
	position: relative;
	z-index: 1;
}

.roj-site-footer__newsletter {
	align-items: center;
	background: #1d1d1b;
	color: #fffaf5;
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, 32rem);
	padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 2.4vw, 2.4rem);
}

.roj-site-footer__newsletter p {
	color: #d4b06d;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	margin: 0 0 0.7rem;
	text-transform: uppercase;
}

.roj-site-footer__newsletter h2 {
	color: #fffaf5;
	font-size: clamp(2rem, 3.6vw, 4rem);
	margin: 0;
	max-width: 13ch;
}

.roj-site-footer__newsletter form {
	border-bottom: 0.0625rem solid rgba(255, 250, 245, 0.55);
	display: grid;
	gap: 0.75rem;
	grid-template-columns: minmax(0, 1fr) auto;
}

.roj-site-footer__newsletter input,
.roj-site-footer__newsletter button {
	background: transparent;
	border: 0;
	color: #fffaf5;
	min-height: 3.2rem;
	padding: 0;
}

.roj-site-footer__newsletter input::placeholder {
	color: rgba(255, 250, 245, 0.62);
}

.roj-site-footer__newsletter button {
	cursor: pointer;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.roj-site-footer__main {
	display: grid;
	gap: clamp(2rem, 5vw, 5rem);
	grid-template-columns: minmax(16rem, 1.2fr) repeat(3, minmax(10rem, 0.55fr));
	padding: clamp(3rem, 5vw, 5.5rem) clamp(1rem, 2.4vw, 2.4rem);
}

.roj-site-footer__brand {
	max-width: 27rem;
}

.roj-site-footer__brand p,
.roj-site-footer__column p {
	color: rgba(29, 29, 27, 0.66);
	margin: 0.9rem 0 0;
}

.roj-footer-logo {
	align-items: flex-start;
	display: inline-flex;
	text-decoration: none;
}

.roj-footer-logo img {
	height: auto;
	max-height: 5rem;
	object-fit: contain;
	width: auto;
}

.roj-footer-logo .roj-footer-logo__demo {
	max-height: 6rem;
	width: min(100%, 18rem);
}

.roj-footer-logo span {
	color: #1d1d1b;
	font-family: var(--roj-font-display);
	font-size: clamp(1.6rem, 3vw, 2.7rem);
}

.roj-footer-logo small {
	color: #8f753e;
	display: block;
	font-size: 0.68rem;
	letter-spacing: 0.2em;
	margin-top: 0.35rem;
}

.roj-site-footer__column {
	display: grid;
	gap: 0.55rem;
	align-content: start;
}

.roj-site-footer__column h2 {
	color: #1d1d1b;
	font-family: var(--roj-font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	margin: 0 0 0.6rem;
	text-transform: uppercase;
}

.roj-site-footer__column a {
	color: rgba(29, 29, 27, 0.72);
	text-decoration: none;
}

.roj-site-footer__column a:hover,
.roj-site-footer__column a:focus-visible {
	color: #9d1226;
}

.roj-site-footer__bottom {
	align-items: center;
	border-top: 0.0625rem solid rgba(29, 29, 27, 0.12);
	display: flex;
	font-size: 0.76rem;
	justify-content: space-between;
	letter-spacing: 0.08em;
	padding: 1.2rem clamp(1rem, 2.4vw, 2.4rem);
	text-transform: uppercase;
}

.roj-site-footer__bottom p {
	margin: 0;
}

.roj-site-footer__bottom a {
	text-decoration: none;
}

@media (max-width: 61.99rem) {
	.roj-site-footer__newsletter,
	.roj-site-footer__main {
		grid-template-columns: 1fr;
	}

	.roj-site-footer__newsletter h2 {
		max-width: 15ch;
	}
}

@media (max-width: 47.99rem) {
	.roj-site-footer__newsletter form {
		grid-template-columns: 1fr;
		padding-bottom: 0.8rem;
	}

	.roj-site-footer__bottom {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.55rem;
	}
}

/* Dark footer for the white storefront theme. */
.roj-site-footer,
.roj-site-footer__newsletter {
	background: #080808;
	color: #fff;
}

.roj-site-footer {
	border-top: 0.0625rem solid rgba(255, 255, 255, 0.12);
}

.roj-site-footer__newsletter {
	border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.12);
}

.roj-site-footer__newsletter h2,
.roj-site-footer__newsletter input,
.roj-site-footer__newsletter button,
.roj-site-footer__column h2,
.roj-footer-logo span,
.roj-site-footer__bottom a {
	color: #fff;
}

.roj-site-footer__brand p,
.roj-site-footer__column p,
.roj-site-footer__column a,
.roj-site-footer__bottom {
	color: rgba(255, 255, 255, 0.68);
}

.roj-site-footer__newsletter form {
	border-bottom-color: rgba(255, 255, 255, 0.42);
}

.roj-site-footer__newsletter input::placeholder {
	color: rgba(255, 255, 255, 0.58);
}

.roj-site-footer__bottom {
	border-top-color: rgba(255, 255, 255, 0.12);
}