/*
 * CaseCreator — Responsive Stylesheet
 * Media queries for tablet and mobile. Expanded in Phase 2.
 */

/* =========================================================================
   Tablet — max 1024px
   ========================================================================= */
@media (max-width: 1024px) {
	.woocommerce ul.products {
		--cc-shop-cols: 3;
	}

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

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

/* =========================================================================
   Mobile — max 768px
   ========================================================================= */
@media (max-width: 768px) {
	:root {
		--cc-container-pad: 1rem;
	}

	.site-header__nav {
		display: none;
	}

	.site-header__mobile-toggle {
		display: flex;
	}

	.woocommerce ul.products {
		--cc-shop-cols: 2;
	}

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

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

/* =========================================================================
   Small Mobile — max 480px
   ========================================================================= */
@media (max-width: 480px) {
	.woocommerce ul.products {
		--cc-shop-cols: 1;
	}

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