/*
 * Majestic Native Product Categories
 * v0.8.0
 */

.majestic-product-categories {
	--majestic-category-columns: 5;
	--majestic-category-gap: 14px;
	width: 100%;
	color: var(--majestic-color-text, #222);
	font-family: var(--majestic-font-body, inherit);
}

.majestic-product-categories__track {
	display: grid;
	grid-template-columns: repeat(var(--majestic-category-columns), minmax(0, 1fr));
	gap: var(--majestic-category-gap);
	width: 100%;
}

.majestic-product-category {
	min-width: 0;
	text-align: center;
}

.majestic-product-category__link {
	display: block;
	color: var(--majestic-color-text, #222) !important;
	text-decoration: none !important;
}

.majestic-product-category__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: color-mix(in srgb, var(--majestic-color-secondary, #f7f3ed) 55%, #fff);
}

.majestic-product-category__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

@media (hover: hover) and (pointer: fine) {
	.majestic-product-category__link:hover .majestic-product-category__image {
		transform: scale(1.018);
	}

	.majestic-product-category__link:hover .majestic-product-category__name {
		color: var(--majestic-color-accent, #aa7f79);
	}
}

.majestic-product-category__name {
	display: block;
	margin-top: 14px;
	color: var(--majestic-color-text, #222);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: uppercase;
	transition: color .2s ease;
}

.majestic-product-category__count {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	line-height: 1.3;
	opacity: .58;
}

.majestic-product-category__link:focus-visible {
	outline: 2px solid var(--majestic-color-text, #222);
	outline-offset: 4px;
}

/* Tablet: keep the compact storefront navigation feel. */
@media (max-width: 1024px) and (min-width: 768px) {
	.majestic-product-categories {
		--majestic-category-gap: 12px;
	}

	.majestic-product-category__name {
		margin-top: 11px;
		font-size: 12px;
	}
}


.majestic-product-categories__mobile-nav {
	display: none;
}

/*
 * Mobile is intentionally a horizontal category rail rather than shrinking
 * five category images into unreadably small tiles.
 */
@media (max-width: 767px) {
	.majestic-product-categories {
		overflow: hidden;
	}

	/* Hide the image tiles on phones. */
	.majestic-product-categories__track {
		display: none;
	}

	/*
	 * Reference-style mobile category navigation:
	 * compact enough to keep the core shop categories on one row where
	 * the viewport allows it, but still horizontally scrollable on
	 * narrower phones or stores with more categories.
	 */
	.majestic-product-categories__mobile-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: clamp(9px, 2.6vw, 12px);
		width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 3px 8px 6px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.majestic-product-categories__mobile-nav::-webkit-scrollbar {
		display: none;
	}

	.majestic-product-categories__mobile-link {
		flex: 0 0 auto;
		color: var(--majestic-color-text, #222) !important;
		font-family: inherit;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.15;
		text-decoration: none !important;
		white-space: nowrap;
		transition: color .2s ease;
	}

	.majestic-product-categories__mobile-link.is-active,
	.majestic-product-categories__mobile-link:hover,
	.majestic-product-categories__mobile-link:focus {
		color: var(--majestic-color-accent, #aa7f79) !important;
		text-decoration: none !important;
	}

	.majestic-product-categories__mobile-link:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 3px;
	}
}