/*
 * Site chrome on every page: the moving top bar, the sticky header, the footer.
 * Source design: _design/product-art/swap/r2/home.html (approved 2026-11-11).
 */

/* Top bar: store messages that move slowly; pauses on hover, on focus and with its button */

.site-bar {
	position: relative;
	z-index: 31;
	height: var(--bar-height);
	background: var(--color-highlight);
	color: var(--color-text);
}

.site-bar__clip {
	position: relative;
	height: 100%;
	overflow: hidden;
}

.site-bar__track {
	display: flex;
	width: max-content;
	height: 100%;
	animation: site-bar-run var(--loop, 34s) linear infinite;
	will-change: transform;
}

.site-bar__run {
	display: flex;
	flex: none;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-bar__run li,
.site-bar__static {
	font: 550 13.5px/1 var(--font-body);
	letter-spacing: 0.005em;
	white-space: nowrap;
}

.site-bar__run li {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	padding-right: var(--space-6);
}

.site-bar__gem {
	display: block;
	flex: none;
	width: 9px;
	height: 9px;
	fill: var(--color-text);
	opacity: 0.55;
}

.site-bar__static {
	display: none;
	height: 100%;
	margin: 0;
	align-items: center;
	justify-content: center;
}

@keyframes site-bar-run {
	to {
		transform: translate3d(var(--shift, -50%), 0, 0);
	}
}

.site-bar.is-stopped .site-bar__track,
.site-bar.is-off .site-bar__track,
.site-bar:has(:focus-visible):not(.is-forced) .site-bar__track {
	animation-play-state: paused;
}

@media (hover: hover) {
	.site-bar:hover:not(.is-forced) .site-bar__track {
		animation-play-state: paused;
	}
}

.site-bar__stop {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	height: 100%;
	padding: 0;
	border: 0;
	background: var(--color-highlight);
	color: var(--color-text);
	cursor: pointer;
}

.site-bar__stop::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 100%;
	width: 28px;
	background: linear-gradient(to right, color-mix(in srgb, var(--color-highlight) 0%, transparent), var(--color-highlight));
	pointer-events: none;
}

.site-bar__stop svg {
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 auto;
	fill: currentColor;
	opacity: 0.62;
}

.site-bar__stop:hover svg {
	opacity: 1;
}

.site-bar__stop .i-play,
.site-bar.is-stopped .i-pause {
	display: none;
}

.site-bar.is-stopped .i-play {
	display: block;
}

.site-bar__stop:focus-visible {
	outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
	.site-bar__track,
	.site-bar__stop {
		display: none;
	}

	.site-bar__static {
		display: flex;
	}
}

/* Header */

html {
	scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--color-bg);
	transition: box-shadow 200ms ease;
}

.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 0px);
}

.site-header.is-scrolled {
	box-shadow: 0 1px 0 color-mix(in srgb, var(--color-shadow) 12%, transparent);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-height);
}

.site-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--tap-target);
	color: var(--color-brand-brown);
	text-decoration: none;
}

.site-brand__mark {
	display: block;
	width: auto;
	height: 38px;
}

.site-brand__word {
	font: 400 25px/1 var(--font-wordmark);
	letter-spacing: 0.015em;
}

.site-brand__word i {
	font-style: normal;
	color: var(--color-brand-terracotta);
}

.custom-logo-link {
	display: block;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a,
.cart-link {
	display: inline-flex;
	align-items: center;
	height: var(--tap-target);
	color: var(--color-text);
	font: 620 19px/1 var(--font-display);
	text-decoration: none;
}

.site-nav__list a {
	padding: 0 var(--space-4);
	border-radius: var(--radius-pill);
	transition: background-color 220ms ease, color 220ms ease;
}

.site-nav__list a:hover,
.cart-link:hover .cart-link__label {
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
}

/* Past the hero's own button, Shop fills in cocoa: the way to buy stays in reach */
.site-nav__link--shop {
	padding: 0 var(--space-5);
}

.site-header.is-past .site-nav__link--shop {
	background: var(--color-accent);
	color: var(--color-accent-contrast);
}

.site-header.is-past .site-nav__link--shop:hover {
	box-shadow: inset 0 0 0 99px rgb(0 0 0 / 14%);
	text-decoration: none;
}

.cart-link {
	gap: var(--space-2);
	margin-left: var(--space-3);
}

.cart-link__count {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.cart-link__badge {
	display: grid;
	place-items: center;
	min-width: 21px;
	height: 21px;
	padding: 0 var(--space-2);
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: var(--color-accent-contrast);
	font: 600 12.5px/1 var(--font-body);
	font-variant-numeric: tabular-nums;
}

.cart-link__total {
	font: 500 15.5px/1 var(--font-body);
	font-variant-numeric: tabular-nums;
}

.cart-link__count[data-count="0"] .cart-link__badge,
.cart-link__count[data-count="0"] .cart-link__total {
	display: none;
}

.cart-link__count.is-bumped .cart-link__badge {
	animation: cart-bump 0.3s ease;
}

@keyframes cart-bump {
	40% {
		transform: translateY(-2px);
	}
}

.site-header a:focus-visible {
	outline-offset: 2px;
}

/* The nav links keep their pill when focused; the logo and the cart link are plain */
.site-brand:focus-visible,
.cart-link:focus-visible {
	border-radius: var(--radius-xs);
}

@media (max-width: 719px) {
	.site-brand {
		gap: var(--space-2);
	}

	.site-brand__mark {
		height: 31px;
	}

	.site-brand__word {
		font-size: 20px;
	}

	.site-nav__link--gtk {
		display: none !important;
	}

	.site-nav__list a,
	.cart-link {
		font-size: 18px;
	}

	.site-nav__link--shop {
		padding: 0 var(--space-4);
	}

	.cart-link {
		gap: var(--space-2);
		margin-left: var(--space-1);
	}

	.cart-link__total {
		display: none;
	}

	.site-bar__run li,
	.site-bar__static {
		font-size: 13px;
	}
}

/* Footer */

.site-footer {
	width: min(100% - 2 * var(--gutter), var(--layout-wide));
	margin: var(--space-section) auto var(--gutter);
	padding: var(--pad-panel);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: var(--surface-ring);
	font-size: 15.5px;
	line-height: 1.35;
}

.site-footer a {
	text-decoration: none;
}

.site-footer a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
}

.site-footer a:focus-visible {
	border-radius: var(--radius-xs);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: var(--space-6);
}

.site-footer .site-brand__mark {
	height: 40px;
}

.site-footer__tagline {
	margin: var(--space-3) 0 0;
	color: var(--color-muted);
}

.site-footer__title {
	margin: 0 0 var(--space-2);
	font: 600 15.5px/1.35 var(--font-body);
	letter-spacing: 0;
}

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

.site-footer__links a,
.site-footer__links span {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

.site-footer__address {
	max-width: 15em;
	padding: var(--space-2) 0;
}

.site-footer__end {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-6);
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: var(--border);
	color: var(--color-muted);
	font-size: 14px;
}

.site-footer__copyright {
	margin: 0;
}

.site-footer__pay {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__badge {
	display: flex;
}

.site-footer__badge img {
	display: block;
	width: 44px;
	height: auto;
}

@media (max-width: 899px) {
	.site-footer__pay {
		gap: var(--space-1);
	}

	.site-footer__badge img {
		width: 38px;
	}
}

.site-footer__pay-text {
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-xs);
	background: var(--color-bg);
	box-shadow: inset 0 0 0 1px var(--color-border);
	color: var(--color-text);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
}

@media (max-width: 899px), (pointer: coarse) {
	.site-footer__links a,
	.site-footer__links span {
		min-height: var(--tap-target);
	}

	.site-footer__address {
		padding: var(--space-3) 0;
	}
}

@media (max-width: 899px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-6) var(--space-4);
	}

	.site-footer__who,
	.site-footer__reach {
		grid-column: 1 / -1;
	}
}