.nmcnav_wrap {
	padding: var(--sp-block) var(--spx4) var(--sp-block) 0;

	@media (max-width: 767px) {
		padding: var(--sp-block) var(--spx4);

		html:has(header.header) & {
			padding-bottom: calc(var(--ab-offset) + var(--ab-height) + var(--spx4));
		}
	}

	.nav-content {
		container: navcontent / inline-size;
		max-width: 300px;
	}

	.person-info {

		.name {
			margin-bottom: 0.5em;
		}

		.status-wrap {
			display: flex;
			align-items: center;
			gap: 0.5em;

			a {
				text-decoration: underline;
				font-size: var(--body-small);
			}

			@container (max-width: 299px) {
				flex-direction: column;
				align-items: start;
			}
		}

		.status {
			padding: 0.15em 0.5em;
			font-size: 14px;
			text-transform: uppercase;
			font-weight: 800;
			letter-spacing: 0.05em;
			color: var(--brand-blue-50);
			border: 1px solid var(--brand-blue-50);
		}

		.rewards-detail {
			margin-top: 1em;
			display: flex;
			align-items: center;
			gap: 0.75em;
			padding: 10px 20px 10px 10px;
			font-size: 1em;
			background: oklch(from var(--torch-blue-50) l c h / 0.04);
			border: 1px solid var(--border);
			border-radius: 100px;
			transition: background 200ms;

			&:has([cheetah-hide]) {
				display: none;
			}

			&:hover {
				background: oklch(from var(--torch-blue-50) l c h / 0.09);
			}

			svg {
				width: 40px;
				height: 40px;
			}

			.rewards-detail-text {
				font-weight: 700;
			}

			.rewards-detail-cta {
				font-size: 0.8em;
			}
		}

		.rewards-progress {
			display: flex;
			flex-direction: column;
			gap: 0.75em;
			margin-top: 1em;
		}

		.progress-bar {
			position: relative;
			height: 16px;
			background: linear-gradient(90deg, var(--torch-blue-50) var(--progress), var(--gray-10) var(--progress));
		}
	}

	.primary-nav {
		margin-top: var(--spx6);

		li {

			a {
				display: flex;
				align-items: center;
				gap: 0.5em;
				height: 52px;
				border-bottom: 1px solid var(--border);
				transition: 200ms;

				&.active {
					padding-left: 12px;
					background: var(--torch-blue-50-05);
					border-bottom: 2px solid var(--brand-blue-50);

					.label {
						font-weight: 700;
						color: var(--brand-blue-50);
					}
				}

				&:hover {
					padding-left: 12px;
					background: var(--torch-blue-50-05);
				}
			}

			.icon {
				flex: 0 0 20px;
				display: flex;
				justify-content: center;
				align-items: start;
			}

			.label {
				flex: 1 1 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 1em;

				> svg {
					margin-right: 1em;
				}
			}
		}

		a.sign-out {
			display: inline-block;
			margin-top: 1em;
			text-decoration: underline;
		}
	}

	.secondary-nav {
		display: none;
		margin-top: var(--spx4);

		.em {
			font-weight: 700;
		}
	}

	.my-ff {
		margin-top: var(--spx6);

		.heading {
			display: flex;
			align-items: center;
			gap: 0.5em;
			margin-bottom: 1em;
			font-size: 14px;
			text-transform: uppercase;
			letter-spacing: 0.05em;
			font-weight: 800;
			color: var(--brand-blue-50);
		}

		.store-heading {
			display: flex;
			align-items: baseline;
			justify-content: space-between;
			flex-wrap: wrap;
			gap: 0.5em 1em;
			margin-bottom: 0.35em;
		}

		.map-link {
			font-weight: 700;
			text-decoration: underline;
		}

		.store-links {
			display: flex;
			gap: 1.5em;
			line-height: 1;
			margin-top: 0.5em;

			a {
				position: relative;
				text-decoration: underline;
				font-weight: 700;

				&:not(:first-child):before {
					content: '';
					position: absolute;
					left: -0.75em;
					top: 0;
					width: 0;
					height: 100%;
					border-right: 1px solid var(--border);
				}
			}
		}
	}

	@media (max-width: 767px) {

		.nav-content {
			max-width: none;
		}

		.primary-nav {
			margin-left: calc(var(--spx4) * -1);
			width: calc(100% + var(--spx8));

			li {

				a,
				a.active {
					padding-left: var(--spx4);
				}
			}
			
			a.sign-out {
				display: none;
			}
		}

		.secondary-nav {
			display: block;
		}
	}
}