/**
 * AF Commerce — footer, newsletter and trust blocks.
 *
 * Loaded on every request alongside base.css. Newsletter and trust live here
 * rather than in home.css because both appear on cart, checkout and product
 * templates too.
 */

/* -------------------------------------------------------------------------
 * 1. Newsletter
 * ---------------------------------------------------------------------- */

.af-newsletter {
	padding-block: var(--af-space-xxl);
	background: var(--af-surface);
}

.af-newsletter__inner {
	display: grid;
	gap: var(--af-space-lg);
	align-items: center;
}

@media (min-width: 782px) {
	.af-newsletter--band .af-newsletter__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.af-newsletter--center .af-newsletter__inner {
	justify-items: center;
	text-align: center;
}

.af-newsletter__text {
	min-width: 0;
}

.af-newsletter__title {
	margin: 0 0 var(--af-space-xs);
	font-size: var(--af-fs-h3);
}

.af-newsletter__subtitle {
	margin: 0;
	max-width: 52ch;
	color: var(--af-secondary);
}

.af-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--af-space-sm);
}

.af-newsletter__input {
	flex: 1 1 240px;
}

.af-newsletter__consent {
	flex: 1 1 100%;
	margin: 0;
	color: var(--af-muted);
	font-size: var(--af-fs-caption);
}

.af-newsletter__consent a {
	color: inherit;
}

/* -------------------------------------------------------------------------
 * 2. Trust blocks
 * ---------------------------------------------------------------------- */

.af-trust {
	display: grid;
	gap: var(--af-space-lg);
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.af-trust__item {
	display: flex;
	align-items: flex-start;
	gap: var(--af-space-sm);
}

.af-trust__body {
	min-width: 0;
}

.af-trust__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--af-accent-soft);
	color: var(--af-accent);
}

.af-trust__title {
	margin: 0 0 2px;
	font-size: var(--af-fs-small);
	font-weight: 600;
}

.af-trust__text {
	margin: 0;
	color: var(--af-muted);
	font-size: var(--af-fs-caption);
}

.af-trust--grid .af-trust__item {
	flex-direction: column;
	padding: var(--af-space-lg);
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius-card);
}

.af-trust--bar {
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
	gap: var(--af-space-md);
	padding: var(--af-space-md) 0;
}

.af-trust--bar .af-trust__icon {
	width: 30px;
	height: 30px;
	background: transparent;
}

.af-trust--bar .af-trust__text {
	display: none;
}

/* -------------------------------------------------------------------------
 * 3. Footer shell
 * ---------------------------------------------------------------------- */

.af-footer {
	margin-top: auto;
	border-top: 1px solid var(--af-border);
	background: var(--af-footer-bg);
	color: var(--af-footer-text);
	font-size: var(--af-fs-small);
}

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

.af-footer a:hover {
	color: var(--af-footer-link-hover);
	text-decoration: underline;
}

.af-footer--dark {
	border-top-color: transparent;
}

.af-footer__widgets {
	padding-block: var(--af-space-xxl);
}

.af-footer__grid {
	display: grid;
	gap: var(--af-space-xl);
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

@media (min-width: 992px) {
	.af-footer__grid {
		grid-template-columns: repeat(var(--af-footer-cols, 5), minmax(0, 1fr));
	}
}

.af-footer__title {
	margin: 0 0 var(--af-space-md);
	font-size: var(--af-fs-caption);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.af-footer__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: start;
	text-transform: inherit;
	/* Only interactive where the accordion is active. */
	cursor: default;
}

.af-footer__list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.af-footer__column--widgets .widget {
	margin-bottom: var(--af-space-lg);
}

.af-footer__column--widgets .widget-title,
.af-footer__column--widgets .wp-block-heading {
	margin: 0 0 var(--af-space-md);
	font-size: var(--af-fs-caption);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * 4. Link rows (brands and categories)
 * ---------------------------------------------------------------------- */

.af-footer__links {
	padding-block: var(--af-space-lg);
	border-top: 1px solid var(--af-footer-border);
}

.af-footer__link-row + .af-footer__link-row {
	margin-top: var(--af-space-md);
}

.af-footer__link-title {
	margin: 0 0 6px;
	color: var(--af-footer-muted);
	font-size: var(--af-fs-caption);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * A single wrapping line of comma-free links. Kept visually quiet on purpose:
 * these exist to spread crawl equity, not to compete with the main navigation.
 */
.af-footer__link-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px var(--af-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--af-fs-caption);
}

.af-footer__link-list a {
	color: var(--af-footer-muted);
}

/* -------------------------------------------------------------------------
 * 5. Bottom bar
 * ---------------------------------------------------------------------- */

.af-footer__bottom {
	padding-block: var(--af-space-lg);
	border-top: 1px solid var(--af-footer-border);
}

.af-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--af-space-md);
}

.af-footer__copyright {
	margin: 0;
	color: var(--af-footer-muted);
	font-size: var(--af-fs-caption);
}

.af-social {
	display: flex;
	gap: var(--af-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.af-social__link {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--af-footer-border);
	border-radius: 50%;
	color: inherit;
}

.af-social__link:hover {
	border-color: currentColor;
	text-decoration: none;
}

.af-payments {
	display: flex;
	flex-wrap: wrap;
	gap: var(--af-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.af-payments__item {
	display: grid;
	place-items: center;
	height: 26px;
	padding-inline: 8px;
	border: 1px solid var(--af-footer-border);
	border-radius: 4px;
	background: var(--af-background);
}

.af-payments__icon {
	height: 16px;
	width: auto;
}

/*
 * Payment marks are typographic rather than logo images: shipping card-brand
 * artwork with a theme is a trademark problem, and a short wordmark reads at
 * any size without a network request.
 */
.af-pay-mark {
	display: inline-grid;
	place-items: center;
	height: 26px;
	padding-inline: 8px;
	border: 1px solid var(--af-footer-border);
	border-radius: 4px;
	background: var(--af-background);
	color: var(--af-secondary);
}

.af-pay-mark__label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	/* Card wordmarks stay left-to-right in RTL layouts. */
	direction: ltr;
}

.af-payments--inline .af-payments__item {
	border-color: var(--af-border);
}

.af-footer__locale {
	display: flex;
	flex-wrap: wrap;
	gap: var(--af-space-sm);
}

/* -------------------------------------------------------------------------
 * 6. Mobile accordion
 * ---------------------------------------------------------------------- */

@media (max-width: 781px) {
	.af-footer__widgets {
		padding-block: var(--af-space-lg);
	}

	.af-footer--accordion .af-footer__grid {
		gap: 0;
	}

	.af-footer--accordion .af-footer__column {
		border-bottom: 1px solid var(--af-footer-border);
	}

	.af-footer--accordion .af-footer__title {
		margin: 0;
	}

	.af-footer--accordion .af-footer__toggle {
		padding-block: var(--af-space-md);
		cursor: pointer;
	}

	.af-footer--accordion .af-footer__toggle::after {
		content: "";
		width: 9px;
		height: 9px;
		border-inline-end: 2px solid currentColor;
		border-block-end: 2px solid currentColor;
		transform: rotate(45deg) translateY(-2px);
		transition: transform 0.2s ease;
	}

	.af-footer--accordion .af-footer__toggle[aria-expanded="true"]::after {
		transform: rotate(225deg) translateY(-2px);
	}

	/*
	 * Collapsed panels are hidden with the hidden attribute by the script, so
	 * the links stay in the accessibility tree and in the HTML source when
	 * JavaScript has not run yet.
	 */
	.af-footer--accordion .af-footer__nav[hidden] {
		display: none;
	}

	.af-footer--accordion .af-footer__nav {
		padding-bottom: var(--af-space-md);
	}

	.af-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}