@layer pages {
	.haf-store-single {
		padding-block: clamp(var(--haf-space-5), 4vw, var(--haf-space-8));
	}

	.haf-store-detail {
		display: grid;
		gap: var(--haf-space-6);
	}

	.haf-store-detail__header {
		width: min(100%, var(--haf-content-width));
	}

	.haf-store-detail__header h1 {
		margin-block: var(--haf-space-3) 0;
	}

	.haf-store-detail__media {
		overflow: hidden;
		border-radius: var(--haf-radius-xl);
		background: var(--haf-color-surface-strong);
	}

	.haf-store-detail__media img {
		width: 100%;
	}

	.haf-store-detail__content,
	.haf-store-section {
		min-width: 0;
		padding: clamp(var(--haf-space-4), 3vw, var(--haf-space-6));
		border: 1px solid var(--haf-color-border);
		border-radius: var(--haf-radius-lg);
		background: var(--haf-color-base);
	}

	.haf-store-section h2 {
		margin-block-end: var(--haf-space-4);
	}

	.haf-store-details {
		display: grid;
		gap: 1px;
		margin: 0;
		border: 1px solid var(--haf-color-border);
		border-radius: var(--haf-radius-md);
		overflow: hidden;
		background: var(--haf-color-border);
	}

	.haf-store-details > div {
		display: grid;
		grid-template-columns: minmax(5rem, 0.35fr) minmax(0, 1.65fr);
		gap: var(--haf-space-3);
		padding: var(--haf-space-3) var(--haf-space-4);
		background: var(--haf-color-surface);
	}

	.haf-store-details :where(dt, dd) {
		margin: 0;
	}

	.haf-store-details dt {
		color: var(--haf-color-muted);
		font-weight: 700;
	}

	.haf-store-details dd {
		font-weight: 750;
		overflow-wrap: anywhere;
	}

	.haf-store-details__actions {
		margin-block-start: var(--haf-space-5);
	}

	.haf-store-related-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--haf-space-3);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.haf-store-related-list a {
		display: flex;
		min-height: 3rem;
		align-items: center;
		padding: var(--haf-space-3) var(--haf-space-4);
		border: 1px solid var(--haf-color-border);
		border-radius: var(--haf-radius-md);
		background: var(--haf-color-surface);
		font-weight: 700;
	}

	.haf-store-directory-page {
		padding-block: clamp(var(--haf-space-5), 3vw, var(--haf-space-6));
	}

	.haf-store-directory-page__header {
		margin-block: var(--haf-space-5);
	}

	.haf-store-directory-page__header h1 {
		margin-block-end: var(--haf-space-2);
	}

	.haf-store-directory-page__header p {
		margin: 0;
		color: var(--haf-color-muted);
		font-size: var(--haf-font-size-lg);
	}

	.haf-store-directory-filter {
		display: flex;
		flex-wrap: wrap;
		gap: var(--haf-space-3);
		margin-block-end: var(--haf-space-4);
	}

	.haf-store-directory-filter__link {
		display: inline-flex;
		min-height: 2.75rem;
		align-items: center;
		justify-content: center;
		padding: var(--haf-space-2) var(--haf-space-5);
		border: 1px solid var(--haf-color-border);
		border-radius: var(--haf-radius-md);
		background: var(--haf-color-base);
		color: var(--haf-color-ink);
		font-weight: 700;
		text-decoration: none;
	}

	.haf-store-directory-filter__link:hover,
	.haf-store-directory-filter__link.is-current {
		border-color: var(--haf-color-primary);
		background: var(--haf-color-primary);
		color: var(--haf-color-base) !important;
	}

	.haf-store-directory {
		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);
	}

	[data-haf-store-results] {
		transition: opacity var(--haf-transition-fast);
	}

	[data-haf-store-results][aria-busy="true"] {
		opacity: 0.48;
		pointer-events: none;
	}

	.haf-store-directory-row[hidden] {
		display: none;
	}

	.haf-store-directory-row {
		display: grid;
		height: 12.5rem;
		grid-template-columns: minmax(18rem, 31%) minmax(0, 1fr) minmax(13rem, 18%);
		align-items: stretch;
		gap: var(--haf-space-5);
		padding: var(--haf-space-4);
	}

	.haf-store-directory-row + .haf-store-directory-row {
		border-block-start: 1px solid var(--haf-color-border);
	}

	.haf-store-directory-row__media {
		display: block;
		min-height: 0;
		overflow: hidden;
		border-radius: var(--haf-radius-md);
		background: var(--haf-color-surface-strong);
	}

	.haf-store-directory-row__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

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

	.haf-store-directory-row__placeholder .haf-icon {
		width: 2rem;
		height: 2rem;
	}

	.haf-store-directory-row__content {
		align-self: center;
	}

	.haf-store-directory-row__content h2 {
		margin-block-end: var(--haf-space-4);
		font-size: var(--haf-font-size-lg);
	}

	.haf-store-directory-row__content h2 a {
		color: var(--haf-color-primary);
		text-decoration: none;
	}

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

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

	.haf-store-directory-row__details .haf-icon {
		margin-block-start: 0.12rem;
		color: var(--haf-color-muted);
	}

	.haf-store-directory-row__actions {
		display: grid;
		align-content: center;
		gap: var(--haf-space-3);
		padding-inline-start: var(--haf-space-5);
		border-inline-start: 1px solid var(--haf-color-border);
	}

	.haf-store-directory-row__actions .haf-button {
		width: 100%;
	}

	@media (max-width: 63.99rem) {
		.haf-store-directory-row {
			height: auto;
			min-height: 12rem;
			grid-template-columns: minmax(15rem, 36%) minmax(0, 1fr);
		}

		.haf-store-directory-row__actions {
			grid-column: 1 / -1;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			padding: var(--haf-space-4) 0 0;
			border-block-start: 1px solid var(--haf-color-border);
			border-inline-start: 0;
		}
	}

	@media (max-width: 39.99rem) {
		.haf-store-details > div,
		.haf-store-related-list {
			grid-template-columns: minmax(0, 1fr);
		}

		.haf-store-directory-page__header {
			margin-block: var(--haf-space-5);
		}

		.haf-store-directory-page__header p {
			font-size: var(--haf-font-size-md);
		}

		.haf-store-directory-filter {
			flex-wrap: nowrap;
			overflow-x: auto;
			padding-block-end: var(--haf-space-2);
			scrollbar-width: none;
		}

		.haf-store-directory-filter::-webkit-scrollbar {
			display: none;
		}

		.haf-store-directory-filter__link {
			flex: 0 0 auto;
		}

		.haf-store-directory-row {
			grid-template-columns: minmax(0, 1fr);
			gap: var(--haf-space-4);
		}

		.haf-store-directory-row__media {
			aspect-ratio: 16 / 9;
			min-height: 0;
		}

		.haf-store-directory-row__actions {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	@media (min-width: 64rem) {
		.haf-store-detail:has(.haf-store-detail__media) {
			grid-template-columns: minmax(0, 1.12fr) minmax(20rem, 0.88fr);
			align-items: start;
		}

		.haf-store-detail:has(.haf-store-detail__media) > .haf-store-detail__header,
		.haf-store-detail:has(.haf-store-detail__media) > .haf-store-section:not(:first-of-type) {
			grid-column: 1 / -1;
		}

		.haf-store-detail:has(.haf-store-detail__media) > .haf-store-detail__media {
			grid-column: 1;
			grid-row: 2 / span 2;
		}

		.haf-store-detail:has(.haf-store-detail__media) > .haf-store-detail__content {
			grid-column: 2;
			grid-row: 2;
		}

		.haf-store-detail:has(.haf-store-detail__media) > .haf-store-section:first-of-type {
			grid-column: 2;
			grid-row: 3;
		}
	}
}