/*
 * Majestic New In
 * v0.9.0
 *
 * Desktop/tablet keep the normal Majestic product grid.
 * Mobile mirrors the approved Complete The Look interaction:
 * two cards visible, horizontal swipe, and previous/next arrows.
 */

.majestic-new-in {
	width: 100%;
}

.majestic-new-in__mobile-nav {
	display: none;
}

@media (max-width: 767px) {
	.majestic-new-in {
		overflow: hidden;
	}

	.majestic-new-in .majestic-product-grid {
		display: flex;
		grid-template-columns: none;
		gap: 12px;
		width: 100%;
		padding: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.majestic-new-in .majestic-product-grid::-webkit-scrollbar {
		display: none;
	}

	.majestic-new-in .majestic-product-grid > .majestic-product-card {
		flex: 0 0 calc((100% - 12px) / 2);
		max-width: calc((100% - 12px) / 2);
		min-width: calc((100% - 12px) / 2);
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.majestic-new-in__mobile-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		margin-top: 18px;
	}

	.elementor .majestic-new-in__mobile-arrow,
	.majestic-new-in__mobile-arrow {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 38px !important;
		height: 38px !important;
		min-width: 38px !important;
		min-height: 38px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 999px !important;
		background: var(--majestic-color-text, #222) !important;
		color: #fff !important;
		box-shadow: none !important;
		cursor: pointer;
		transition: opacity .18s ease;
	}

	.elementor .majestic-new-in__mobile-arrow:hover,
	.elementor .majestic-new-in__mobile-arrow:focus,
	.majestic-new-in__mobile-arrow:hover,
	.majestic-new-in__mobile-arrow:focus {
		background: var(--majestic-color-text, #222) !important;
		color: #fff !important;
		opacity: .82;
	}

	.majestic-new-in__mobile-arrow:disabled {
		opacity: .28 !important;
		cursor: default;
	}

	.majestic-new-in__mobile-arrow svg {
		display: block;
		width: 15px;
		height: 15px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.8;
	}
}