.tab-menu {
	border-bottom: 2px solid var(--color--border);
  display: flex;
	justify-content: center;

	@media(width < 768px) {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding-inline: 10px;
	}
}

.tab-button {
	color: #888C9A;
  cursor: pointer;
	font-size: clamp(0.875rem, 0.4306rem + 0.9259vw, 1.125rem);
	padding-bottom: 16px;
	width: calc(100% / 6);
	min-width: max-content;

	@media(width < 768px) {
		padding-bottom: 7px;
	}

	&.is-active {
		box-shadow: 0 3px 0 var(--color--primary), inset 0 -1px 0 var(--color--primary);
		color: var(--color--primary);

		@media(width < 768px) {
			box-shadow: 0 4px 0 -1px var(--color--primary), inset 0 -1px 0 -1px var(--color--primary);
		}
	}
}

.tab-content {
  display: none;
	padding-top: 72px;

	@media(width < 768px) {
		padding-top: 32px;
	}

	&.is-active {
		display: block;
	}
}

.card-grid {
	.card-label {
		background-color: #B79226;
		color: var(--white);
		font-family: var(--font--sans);
		font-size: var(--font-size--sm);
		padding: 2px 11px;
		position: absolute;
		top: 8px;
		left: 12px;
		clip-path: polygon(
			0% 0%,
			100% 0%,
			calc(100% - 5px) 50%,
			100% 100%,
			0% 100%,
			5px 50%
		);
	}

	.card-address {
		color: var(--color--text);
		font-family: var(--font--sans);
		font-size: clamp(0.8125rem, 0.5903rem + 0.463vw, 0.9375rem);

		&:has(+ .card-actions) {
			margin-bottom: 12px;
		}
	}

	.card-actions {
		margin-top: auto;
	}

	.card-btn {
		background: #F97199;
		border-radius: var(--radius--sm);
		color: var(--white);
		display: flex;
		flex-direction: column;
		padding: 2px;
		text-align: center;
	}

	.card-btn-sub {
		display: flex;
		align-items: center;
		gap: 4px;
		justify-content: center;
		font-size: var(--font-size--sm);

		&::before,
		&::after {
			content: "";
			width: 1px;
			height: 11px;
			background: var(--white);
			transform: rotate(20deg);
		}

		&::before {
			transform: rotate(-20deg);
		}
	}
}