@charset "UTF-8";
/* not-found
---------------------------------------- */
.not-found {
	padding-inline: var(--layout-inline-gutter);

	.not-found__inner {
		padding-block-end: var(--space-80);
	}

	.not-found-panel {
		display: flex;
		flex-direction: column;
		gap: var(--space-20);

		max-inline-size: 58rem;
		margin-inline: auto;

		&.panel-compact {
			max-inline-size: 40rem;
		}

		&.panel-wide {
			max-inline-size: 62rem;
		}

		h2 {
			font-size: var(--font-size-md);
			letter-spacing: -0.03em;
		}

		strong {
			color: rgb(var(--color-accent-primary));
		}

		p:last-of-type {
			padding-bottom: var(--space-24);
		}
	}

	.not-found-list {
		display: flex;
		flex-direction: column;
		gap: var(--space-24);
		list-style: none;

		.link--arrow-rounded {
			max-width: 360px;
			border: 1px solid rgb(var(--border-color-dark) / 20%);
		}

		.not-found-shop-link {
			background: rgb(var(--color-secondary));
			border: 1px solid rgb(var(--color-secondary));
			font-size: var(var(--font-size-sm));
			color: rgb(var(--color-light));

			&::before {
				background: rgb(var(--color-light));
			}

			&::after {
				background: rgb(var(--color-secondary));
			}
		}

		@media (hover:hover) {
			.not-found-shop-link:hover {
				background: rgb(var(--color-primary));
				border: 1px solid rgb(var(--color-primary));

				&::before {
					background: rgb(var(--color-light));
				}
			}
		}
	}
}