/*
 * SmoldersV2
 * Rustig en vertrouwd: de bestaande vormtaal blijft behouden, met een
 * overzichtelijke tabletindeling en een compacte mobiele productgrid.
 * Alle regels zijn begrensd tot schermen smaller dan 1200px.
 */

@media only screen and (min-width: 769px) and (max-width: 1199px) {
	body {
		padding-right: 20px;
		padding-left: 20px;
		font-size: 14px;
		line-height: 1.45;
	}

	.wrapper,
	.header-info,
	.header-mid {
		width: 100%;
		max-width: 1160px;
	}

	.header-mid {
		display: grid;
		grid-template-columns: minmax(180px, 220px) minmax(280px, 1fr) auto;
		gap: 20px;
		padding: 14px 0 18px;
	}

	.header-logo img {
		display: block;
		width: 100%;
		height: auto;
		max-width: 210px;
	}

	.header-search,
	.aws-container {
		width: 100%;
		max-width: none;
	}

	.header-mid > .shoppingcart {
		min-height: 52px;
		border-radius: 4px;
		white-space: nowrap;
	}

	#mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link {
		padding-right: 9px;
		padding-left: 9px;
		font-size: 13px;
	}

	.sidebar {
		display: none;
	}

	.smolders-content,
	.smolders-content-wijd,
	.woocommerce-products-header {
		float: none;
		width: 100%;
		min-width: 0;
		max-width: none;
	}

	.woocommerce ul.products.columns-3 {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px;
	}

	.woocommerce ul.products.columns-3::before,
	.woocommerce ul.products.columns-3::after {
		display: none;
	}

	.woocommerce ul.products.columns-3 li.product,
	.woocommerce-page ul.products.columns-3 li.product {
		float: none;
		width: auto;
		margin: 0;
	}

	.woocommerce ul.products.columns-3 li.product h2,
	.woocommerce-page ul.products.columns-3 li.product h2 {
		font-size: 17px;
		line-height: 1.3;
	}

	/* The two floated tax-price lines need slightly more than the legacy
	 * 50px price bar at tablet line-height. Contain the floats and leave
	 * enough room so the inclusive price is never clipped at the bottom. */
	.woocommerce ul.products li.product .price,
	.woocommerce-page ul.products li.product .price {
		display: flow-root;
		box-sizing: border-box;
		min-height: 64px;
		padding: 5px 8px 7px;
		line-height: 1.25;
		overflow: visible;
	}

	.woocommerce ul.products li.product .price .prijsblok1,
	.woocommerce ul.products li.product .price .prijsblok2,
	.woocommerce ul.products li.product .price .prijsblok4,
	.woocommerce-page ul.products li.product .price .prijsblok1,
	.woocommerce-page ul.products li.product .price .prijsblok2,
	.woocommerce-page ul.products li.product .price .prijsblok4 {
		display: block;
		width: 100%;
	}

	.woocommerce form.checkout,
	.woocommerce .cart-collaterals {
		max-width: 100%;
	}
}

@media only screen and (max-width: 768px) {
	body {
		padding-right: 12px;
		padding-bottom: 80px;
		padding-left: 12px;
		font-size: 15px;
		line-height: 1.5;
	}

	.header-background {
		padding: 10px 0 14px;
	}

	.header-mid {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 12px;
		width: 100%;
	}

	.header-logo {
		display: flex;
		min-width: 0;
		align-self: center;
		align-items: center;
		text-align: left;
	}

	.header-logo a {
		display: block;
		width: 100%;
		max-width: 210px;
		line-height: 0;
	}

	.header-logo img {
		display: block;
		width: 100%;
		height: auto;
		max-width: 100%;
		object-fit: contain;
	}

	.header-search {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100%;
	}

	.header-mid > .shoppingcart {
		align-self: center;
		min-height: 48px;
		padding: 6px 8px;
		border-radius: 4px;
	}

	.header-mid > .shoppingcart > a {
		padding: 6px;
	}

	.header-mid > .shoppingcart > i {
		font-size: 27px;
	}

	.header-prijs,
	.price-spacer {
		display: none;
	}

	.header-bottom-container {
		padding: 0;
	}

	.sidebar {
		display: none;
	}

	.smolders-content,
	.smolders-content-wijd,
	.woocommerce-products-header {
		float: none;
		width: 100%;
		min-width: 0;
		max-width: none;
	}

	.woocommerce ul.products.columns-3 {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.woocommerce ul.products.columns-3::before,
	.woocommerce ul.products.columns-3::after {
		display: none;
	}

	.woocommerce ul.products.columns-3 li.product,
	.woocommerce-page ul.products.columns-3 li.product {
		float: none;
		width: auto;
		margin: 0;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce ul.products li.product .woocommerce-loop-category__title {
		font-size: 15px;
		line-height: 1.35;
	}

	.woocommerce ul.products li.product .price {
		font-size: 15px;
	}

	.woocommerce div.product form.cart .button,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button {
		min-height: 44px;
	}

}

@media only screen and (max-width: 479px) {
	.woocommerce ul.products.columns-3 {
		grid-template-columns: 1fr;
	}

	.header-aantal {
		font-size: 13px;
	}
}