/*
 * Footer — full four-column footer and the slim checkout variant.
 */

.al-footer {
	background: var(--al-ivory);
	border-top: 1px solid var(--al-border-nav);
	padding: var(--al-footer-padding-top) var(--al-page-padding) var(--al-footer-padding-bottom);
}

.al-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: var(--al-grid-gap-footer);
	max-width: var(--al-max-width);
	margin-inline: auto;
}

.al-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.al-footer__wordmark {
	font-family: var(--al-font-serif);
	font-size: var(--al-h3-lg);           /* 24px */
	color: var(--al-plum-light);
}

.al-footer__blurb {
	font-size: var(--al-caption-lg);
	font-weight: var(--al-weight-light);
	color: var(--al-muted);
	line-height: var(--al-body-line);
}

.al-footer__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Only the link columns size their own text. The newsletter column deliberately
   does not: in the design source every control inside it carries its own size,
   so an inherited value there would silently apply to anything added later. */
.al-footer__col--links {
	font-size: var(--al-card-desc-size-lg); /* 12.5px */
}

.al-footer__heading {
	font-size: var(--al-eyebrow-size);
	letter-spacing: var(--al-eyebrow-tracking-footer);
	text-transform: uppercase;
	color: var(--al-eyebrow);
	margin-bottom: 4px;
}

/* The newsletter column stacks at a slightly looser rhythm and its heading
   carries no bottom margin, because the field below supplies the gap. */
.al-footer__col--newsletter {
	gap: 14px;
}

.al-footer__col--newsletter .al-footer__heading {
	margin-bottom: 0;
}

.al-newsletter {
	display: flex;
	gap: 8px;
}

.al-newsletter__field {
	flex: 1;
	border: 1px solid var(--al-border-newsletter);
	border-radius: var(--al-radius-pill);
	padding: 11px 18px;
	font-size: var(--al-caption-lg);
	color: var(--al-faint);
	background: transparent;
}

.al-newsletter__field::placeholder {
	color: var(--al-faint);
	opacity: 1;
}

.al-newsletter__submit {
	background: var(--al-lavender);
	color: var(--al-on-primary);
	border-radius: var(--al-radius-pill);
	padding: 11px 22px;
	font-size: var(--al-caption-lg);
	transition: background var(--al-transition);
}

.al-newsletter__submit:hover {
	background: var(--al-lavender-hover);
}

.al-social {
	display: flex;
	gap: 18px;
	font-size: var(--al-caption-lg);
	color: var(--al-muted);
}

/* ---------------------------------------------------------------------------
 * Slim checkout footer
 * ------------------------------------------------------------------------ */

.al-footer--slim {
	display: flex;
	justify-content: space-between;
	padding: 32px var(--al-page-padding);
	font-size: 11.5px;                    /* design source, checkout footer only */
	color: var(--al-print);
}

.al-footer--slim a {
	color: var(--al-print);
}

.al-footer__links {
	display: flex;
	gap: 22px;
}