html {
	background-color: #fff;
}
#mobile-purchase-bar {
	display: none;
}
@media (max-width: 767px) {
	body.mobile-purchase-enabled {
		padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
	}
	/* Solid background stays on the fixed element on purpose: a full-width bar flush at
	   bottom: 0 is what iOS 26 Safari samples to tint its toolbar, so the chrome below
	   merges seamlessly with the bar. */
	body.mobile-purchase-enabled #mobile-purchase-bar {
		display: block;
		position: fixed;
		z-index: 1030;
		right: 0;
		bottom: 0;
		left: 0;
		padding-top: 8px;
		padding-right: max(12px, env(safe-area-inset-right, 0px));
		padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
		padding-left: max(12px, env(safe-area-inset-left, 0px));
		background: #fdfcfb;
		box-shadow: 0 -1px 0 rgba(45, 38, 33, 0.14), 0 -10px 24px rgba(45, 38, 33, 0.07);
		-webkit-font-smoothing: antialiased;
		opacity: 0;
		transform: translateY(18px);
		visibility: hidden;
		pointer-events: none;
		transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 0s linear 200ms;
	}
	body.mobile-purchase-enabled #mobile-purchase-bar.mobile-purchase-bar--visible {
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
		pointer-events: auto;
		transition: opacity 350ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
	}
	.mobile-purchase-bar__inner {
		display: flex;
		max-width: 560px;
		margin: 0 auto;
	}
	.mobile-purchase-bar__label {
		overflow: hidden;
		font-variant-numeric: tabular-nums;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.mobile-purchase-bar__button {
		display: inline-flex;
		width: 100%;
		min-height: 48px;
		align-items: center;
		justify-content: center;
		padding: 10px 18px;
		border: 1px solid #b64000;
		border-radius: 4px;
		background: #ca4800;
		box-shadow: 0 1px 2px rgba(80, 30, 3, 0.2), inset 0 1px rgba(255, 255, 255, 0.12);
		color: #fffaf6;
		font: 700 16px/1.2 "Open Sans", Arial, Helvetica, sans-serif;
		letter-spacing: 0.005em;
		text-align: center;
		touch-action: manipulation;
		transition: background-color 150ms ease, box-shadow 150ms ease, transform 100ms ease-out;
	}
	.mobile-purchase-bar__button:not(:disabled):active {
		transform: scale(0.98);
		box-shadow: 0 0 0 rgba(80, 30, 3, 0), inset 0 1px rgba(255, 255, 255, 0.08);
	}
	.mobile-purchase-bar__button:focus-visible {
		outline: 2px solid #24211f;
		outline-offset: 2px;
	}
	.mobile-purchase-bar__button:disabled {
		cursor: wait;
		border-color: #984922;
		background: #aa542b;
		box-shadow: none;
		transform: none;
	}
}
@media (max-width: 350px) {
	.mobile-purchase-bar__button {
		padding-right: 12px;
		padding-left: 12px;
		font-size: 15px;
	}
}
@media (hover: hover) and (pointer: fine) {
	.mobile-purchase-bar__button:not(:disabled):hover {
		background: #b54100;
		box-shadow: 0 2px 4px rgba(80, 30, 3, 0.22), inset 0 1px rgba(255, 255, 255, 0.12);
	}
	.mobile-purchase-bar__button:not(:disabled):hover:active {
		box-shadow: 0 0 0 rgba(80, 30, 3, 0), inset 0 1px rgba(255, 255, 255, 0.08);
	}
}
@media (prefers-reduced-motion: reduce) {
	body.mobile-purchase-enabled #mobile-purchase-bar,
	body.mobile-purchase-enabled #mobile-purchase-bar.mobile-purchase-bar--visible {
		transition: none;
	}
	.mobile-purchase-bar__button:active {
		transform: none;
	}
	.mobile-purchase-bar__button {
		transition: none;
	}
}