@layer pages {
	.haf-contact-page {
		padding-block: clamp(var(--haf-space-6), 5vw, var(--haf-space-8));
	}

	.haf-contact-hero {
		max-width: 47rem;
		margin-block: var(--haf-space-6) var(--haf-space-7);
	}

	.haf-contact-hero h1 {
		margin-block-end: var(--haf-space-2);
	}

	.haf-contact-hero__title {
		margin-block: 0 var(--haf-space-2);
		color: var(--haf-color-ink);
		font-size: var(--haf-font-size-xl);
		font-weight: 750;
		line-height: var(--haf-line-height-heading);
	}

	.haf-contact-hero__note,
	.haf-contact-stores__header p {
		margin: 0;
		color: var(--haf-color-muted);
	}

	.haf-contact-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--haf-space-5);
	}

	.haf-contact-action {
		display: flex;
		min-width: 0;
		align-items: center;
		gap: var(--haf-space-4);
		padding: var(--haf-space-5);
		border: 1px solid #b9dce0;
		border-radius: var(--haf-radius-lg);
		background: var(--haf-color-primary-soft);
	}

	.haf-contact-action__icon {
		display: grid;
		width: 3.5rem;
		height: 3.5rem;
		flex: 0 0 auto;
		place-items: center;
		border-radius: 50%;
		background: var(--haf-color-primary);
		color: var(--haf-color-base);
	}

	.haf-contact-action__icon .haf-icon {
		width: 1.6rem;
		height: 1.6rem;
	}

	.haf-contact-action__content {
		min-width: 0;
		flex: 1;
	}

	.haf-contact-action h3 {
		margin-block-end: var(--haf-space-1);
		font-size: var(--haf-font-size-md);
	}

	.haf-contact-action p {
		margin: 0;
		color: var(--haf-color-primary-hover);
		font-weight: 700;
	}

	.haf-contact-stores {
		margin-block-start: clamp(var(--haf-space-7), 6vw, var(--haf-space-8));
	}

	.haf-contact-stores__header {
		display: flex;
		align-items: end;
		justify-content: space-between;
		gap: var(--haf-space-5);
		margin-block-end: var(--haf-space-5);
	}

	.haf-contact-stores__header h2 {
		margin-block-end: var(--haf-space-2);
	}

	.haf-contact-stores__all,
	.haf-contact-store__actions a {
		display: inline-flex;
		align-items: center;
		gap: var(--haf-space-2);
		font-weight: 750;
		text-decoration: none;
	}

	.haf-contact-stores__track {
		display: grid;
		grid-auto-columns: min(30rem, 82vw);
		grid-auto-flow: column;
		gap: var(--haf-space-5);
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		padding: var(--haf-space-1) var(--haf-space-1) var(--haf-space-4);
		scroll-snap-type: inline mandatory;
		scrollbar-color: var(--haf-color-primary) var(--haf-color-surface-strong);
		scrollbar-width: thin;
	}

	.haf-contact-stores__track.is-looping {
		cursor: grab;
		scroll-snap-type: none;
		scrollbar-width: none;
	}

	.haf-contact-stores__track.is-looping:active {
		cursor: grabbing;
	}

	.haf-contact-stores__track.is-looping::-webkit-scrollbar {
		display: none;
	}

	.haf-contact-stores__track--single {
		grid-auto-flow: row;
		grid-template-columns: minmax(0, min(100%, 64rem));
		justify-content: center;
		overflow-x: visible;
		scroll-snap-type: none;
	}

	.haf-contact-stores__track--single .haf-contact-store {
		display: grid;
		grid-template-columns: minmax(18rem, 0.9fr) minmax(0, 1.1fr);
	}

	.haf-contact-store {
		display: flex;
		min-width: 0;
		flex-direction: column;
		overflow: hidden;
		border: 1px solid var(--haf-color-border);
		border-radius: var(--haf-radius-lg);
		background: var(--haf-color-base);
		box-shadow: var(--haf-shadow-sm);
		scroll-snap-align: start;
	}

	.haf-contact-store__media {
		display: block;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		background: var(--haf-color-surface-strong);
	}

	.haf-contact-store__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.haf-contact-store__placeholder {
		display: grid;
		height: 100%;
		place-content: center;
		place-items: center;
		gap: var(--haf-space-2);
		color: var(--haf-color-muted);
	}

	.haf-contact-store__placeholder .haf-icon {
		width: 2rem;
		height: 2rem;
	}

	.haf-contact-store__body {
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: flex-start;
		padding: var(--haf-space-5);
	}

	.haf-contact-store__body h3 {
		margin-block: var(--haf-space-3) var(--haf-space-4);
	}

	.haf-contact-store__body h3:first-child {
		margin-block-start: 0;
	}

	.haf-contact-store__body h3 a {
		color: var(--haf-color-ink);
		text-decoration: none;
	}

	.haf-contact-store__details {
		display: grid;
		gap: var(--haf-space-3);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.haf-contact-store__details li {
		display: flex;
		align-items: flex-start;
		gap: var(--haf-space-2);
		color: var(--haf-color-text);
	}

	.haf-contact-store__details .haf-icon {
		margin-block-start: 0.12rem;
		color: var(--haf-color-primary);
	}

	.haf-contact-store__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--haf-space-3) var(--haf-space-5);
		margin-block-start: auto;
		padding-block-start: var(--haf-space-5);
	}

	@media (max-width: 52rem) {
		.haf-contact-actions {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	@media (max-width: 39.99rem) {
		.haf-contact-hero {
			margin-block: var(--haf-space-5) var(--haf-space-6);
		}

		.haf-contact-action {
			align-items: flex-start;
			flex-wrap: wrap;
		}

		.haf-contact-action .haf-button {
			width: 100%;
		}

		.haf-contact-stores__header {
			align-items: flex-start;
			flex-direction: column;
		}

		.haf-contact-stores__track {
			grid-auto-columns: 88vw;
		}

		.haf-contact-stores__track--single {
			grid-template-columns: minmax(0, 1fr);
		}

		.haf-contact-stores__track--single .haf-contact-store {
			grid-template-columns: minmax(0, 1fr);
		}
	}
}