/*
 * Footer.
 *
 * Two bands: a light one carrying the loyalty block and the link columns, and
 * a grey legal bar. One markup tree serves both layouts — below 900px the
 * columns become accordions (footer.js flips aria-expanded; the CSS does the
 * rest) and the loyalty block centres.
 */

.site-footer {
	margin-block-start: 80px;
	background: var(--footer-bg);
	color: var(--footer-text);
	font-size: 15px;
}

.site-footer__inner {
	display: grid;
	/* The loyalty block takes the left half, the three link columns share the
	   right. `minmax(0, …)` on every track so a long link ("Signature FAQs &
	   Terms + Conditions") wraps instead of widening the grid. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 40px;
	padding-block: 34px 46px;
}

/* ─── Loyalty block ──────────────────────────────────────────────────────── */

.site-footer__signature {
	max-width: 520px;
}

.site-footer__script {
	margin: 0 0 14px;
	font-family: var(--font-script);
	font-size: clamp(38px, 4vw, 52px);
	font-weight: 400;
	line-height: 1.1;
	/* The script's ascenders and descenders are long; without this the loop of
	   the S is clipped by the block above it. */
	padding-block: 4px;
}

.site-footer__blurb {
	max-width: 46ch;
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-text);
}

.site-footer__cta {
	margin-block-start: 26px;
	min-width: 210px;
}

/* No page to link to yet, so it renders as a span. Keep it looking like a
   button but stop it pretending to be clickable. */
.site-footer__cta--inert {
	cursor: default;
}

.site-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 46px 0 0;
	padding: 0;
	list-style: none;
}

.site-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--footer-social-bg);
	color: var(--color-white);
	transition: background-color 0.18s ease;
}

.site-footer__social a:hover {
	background: var(--color-ink);
}

.site-footer__social .icon {
	width: 22px;
	height: 22px;
}

/* ─── Link columns ───────────────────────────────────────────────────────── */

.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	padding-block-start: 6px;
}

/* Mobile-only row (the design shows Find a Store above the accordions; on
   desktop it is already the first item of Get In Touch). */
.site-footer__shortcut {
	display: none;
}

.site-footer__heading {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

/*
 * The heading is a button because below 900px it opens an accordion. On
 * desktop it must look like plain text: no button chrome, no pointer, and the
 * plus sign hidden.
 */
.site-footer__heading-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: start;
	text-transform: inherit;
	cursor: default;
}

.site-footer__heading-sign {
	display: none;
}

.site-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__links li + li {
	margin-block-start: 11px;
}

.site-footer__links a,
.site-footer__links span {
	display: inline-block;
	color: var(--color-text);
	line-height: 1.45;
	text-decoration: none;
}

.site-footer__links a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ─── Legal bar ──────────────────────────────────────────────────────────── */

.site-footer__bar {
	/* The anchor for the back-to-top button, which sits in the page's corner
	   rather than inside the container's gutter. */
	position: relative;
	background: var(--footer-bar-bg);
	color: var(--footer-bar-text);
}

.site-footer__bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 56px;
	/* Clear of the back-to-top button in the corner. */
	padding-inline-end: calc(var(--container-pad) + 58px);
}

.site-footer__legal {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
}

.site-footer__payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Payment marks: monochrome text in a white slab, the way the design greys
 * them out. Set in the body font at a size where each mark is legible but
 * none of them competes with the copyright line.
 */
.pay {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 26px;
	padding-inline: 7px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.86);
	color: #55565a;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	white-space: nowrap;
}

.pay__mark {
	display: flex;
	align-items: center;
	gap: 2px;
}

.pay__apple {
	width: 11px;
	height: 11px;
	margin-block-end: 1px;
}

.pay--visa .pay__mark {
	font-size: 12px;
	font-style: italic;
	letter-spacing: 0.02em;
}

.pay--paypal .pay__mark {
	font-size: 11px;
	font-style: italic;
	letter-spacing: 0;
}

.pay--afterpay .pay__mark,
.pay--zip .pay__mark {
	font-size: 11px;
	letter-spacing: 0;
	text-transform: lowercase;
}

.pay--latitude .pay__mark {
	font-size: 8px;
	letter-spacing: 0.08em;
}

/*
 * Mastercard has no wordmark that reads at 26px — its two interlocking rings
 * do the work. Drawn as two circles overlapping by a third of their width, in
 * the same grey as every other mark.
 */
.pay--mastercard .pay__rings {
	position: relative;
	display: block;
	width: 26px;
	height: 16px;
}

.pay--mastercard .pay__rings::before,
.pay--mastercard .pay__rings::after {
	content: "";
	position: absolute;
	inset-block: 0;
	width: 16px;
	border-radius: 50%;
	background: currentColor;
}

.pay--mastercard .pay__rings::before {
	inset-inline-start: 0;
	opacity: 0.42;
}

.pay--mastercard .pay__rings::after {
	inset-inline-end: 0;
	opacity: 0.72;
}

/*
 * Back to top: a white square in the page's bottom-right corner, flush with
 * the edge of the viewport rather than the container's gutter — which is where
 * the design puts it.
 */
.site-footer__top {
	position: absolute;
	inset-block-end: 0;
	inset-inline-end: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	background: var(--color-white);
	color: var(--color-ink);
	cursor: pointer;
	transition: color 0.18s ease;
}

.site-footer__top:hover {
	color: var(--color-navy);
}

.site-footer__top .icon {
	width: 20px;
	height: 20px;
}

/* ─── Below 900px: one column, accordions ────────────────────────────────── */

@media (max-width: 899px) {
	.site-footer {
		margin-block-start: 52px;
		text-align: center;
	}

	.site-footer__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding-block: 26px 0;
	}

	.site-footer__signature {
		max-width: none;
		margin-inline: auto;
		padding-block-end: 30px;
	}

	.site-footer__blurb {
		max-width: 34ch;
		margin-inline: auto;
	}

	.site-footer__social {
		justify-content: center;
		margin-block-start: 24px;
	}

	.site-footer__columns {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding-block-start: 0;
		text-align: start;
		/* The gutter belongs to .container; the accordion rules must run the
		   full width of the phone, so pull back out of it. */
		margin-inline: calc(var(--container-pad) * -1);
	}

	.site-footer__shortcut,
	.site-footer__col {
		display: block;
		border-block-start: 1px solid var(--color-border);
	}

	.site-footer__shortcut-link,
	.site-footer__heading-btn {
		min-height: 53px;
		padding-inline: var(--container-pad);
	}

	.site-footer__shortcut-link {
		display: flex;
		align-items: center;
		color: var(--color-ink);
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-decoration: none;
		text-transform: uppercase;
	}

	.site-footer__heading {
		margin: 0;
	}

	.site-footer__heading-btn {
		cursor: pointer;
	}

	/*
	 * The plus/minus sign, drawn rather than lettered so the two bars line up
	 * exactly and the minus is the plus with its upright hidden.
	 */
	.site-footer__heading-sign {
		position: relative;
		display: block;
		width: 15px;
		height: 15px;
		flex: none;
	}

	.site-footer__heading-sign::before,
	.site-footer__heading-sign::after {
		content: "";
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 0;
		width: 15px;
		height: 1.5px;
		background: currentColor;
		transform: translateY(-50%);
	}

	.site-footer__heading-sign::after {
		transform: translateY(-50%) rotate(90deg);
		transition: opacity 0.18s ease, transform 0.18s ease;
	}

	.site-footer__heading-btn[aria-expanded="true"] .site-footer__heading-sign::after {
		opacity: 0;
		transform: translateY(-50%) rotate(0deg);
	}

	.site-footer__links {
		padding: 0 var(--container-pad) 18px;
	}

	.site-footer__links[hidden] {
		display: none;
	}

	.site-footer__bar-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding-block: 16px 18px;
		/* Stacked, so the button no longer sits beside the content — only the
		   last row (the payment marks) has to keep clear of it. */
		padding-inline-end: var(--container-pad);
		text-align: start;
	}

	.site-footer__payments {
		padding-inline-end: 44px;
	}

	.site-footer__legal {
		font-size: 12px;
	}

	.site-footer__payments {
		gap: 8px;
	}

	.site-footer__top {
		width: 40px;
		height: 40px;
	}
}

/* Shared page furniture used by 404 and search — both are full pages, so these
   belong in a stylesheet that loads everywhere rather than a page-scoped one. */
.page-lead {
	max-width: 52ch;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.65;
	text-align: center;
	color: var(--color-text-muted);
}

.page-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	margin-block: 28px 60px;
}

.page-actions__link {
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.search-list {
	max-width: 760px;
	margin: 0 auto 40px;
	padding: 0;
	list-style: none;
}

.search-result + .search-result {
	margin-block-start: 24px;
	padding-block-start: 24px;
	border-block-start: 1px solid var(--color-border-light);
}

.search-result__title {
	margin: 0 0 6px;
	font-size: 18px;
}

.search-result__excerpt {
	margin: 0;
	color: var(--color-text-muted);
}

.entry__content {
	max-width: 760px;
	margin-inline: auto;
	padding-block-end: 60px;
}