/*
 * Perfume Luxury - Responsive breakpoints
 * Mobile-first overrides layered on top of main.css / perfumes-store.css /
 * threejs-animations.css.
 */

@media (max-width: 1200px) {
	ul.products,
	.shop-layout-grid-5-wide ul.products,
	.shop-layout-grid-4-wide ul.products {
		grid-template-columns: repeat(3, 1fr) !important;
	}

	.site-footer__widgets {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 992px) {
	.shop-layout {
		grid-template-columns: 1fr;
	}

	.shop-layout aside.shop-sidebar {
		order: 2;
	}

	.woocommerce div.product {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.post-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 782px) {
	.main-navigation {
		position: fixed;
		inset: 0 0 0 auto;
		width: 280px;
		background: var(--pl-color-white);
		transform: translateX(100%);
		transition: transform var(--pl-transition);
		padding: 80px 24px;
		z-index: 200;
	}

	.main-navigation.is-open {
		transform: translateX(0);
	}

	.main-navigation ul {
		flex-direction: column;
		gap: 20px;
	}

	.menu-toggle {
		display: flex;
	}

	ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.post-grid {
		grid-template-columns: 1fr;
	}

	.site-footer__widgets {
		grid-template-columns: 1fr;
	}

	.site-footer__bottom {
		flex-direction: column;
		text-align: center;
	}
}

@media (max-width: 480px) {
	ul.products {
		grid-template-columns: 1fr !important;
	}

	.container {
		padding-inline: 16px;
	}

	.perfume-3d-viewer__canvas-wrap {
		aspect-ratio: 4 / 5;
	}
}