/* Consolidated responsive layer. Loaded after the legacy responsive.css. */
.header-mob {
	display: none !important;
}

@media screen and (max-width: 1024px) {
	html { overflow-x: hidden; }
	body { min-width: 0; overflow-x: hidden; padding-top: 65px; }
	*, *::before, *::after { box-sizing: border-box; }

	.header, .navtop, .mobile-menu, .divider { display: none !important; }
	.header-mob {
		display: block !important;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 65px;
		background: #fff;
		border-bottom: 1px solid #ddd;
		box-shadow: 0 3px 12px rgba(0, 0, 0, .12);
		z-index: 3000;
	}
	.header-mob .phone, .header-mob nav {
		position: relative;
		width: 100%;
		height: 65px;
		background: #fff;
	}
	#menuToggle { position: absolute; top: 22px; left: 18px; width: 40px; }
	#menuToggle input { top: -8px; left: -6px; margin: 0; }
	#menu {
		top: 28px;
		left: 32px;
		width: min(320px, 86vw);
		height: calc(100vh - 28px);
		margin: -50px 0 0 -50px;
		padding: 76px 20px 24px 50px;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.moblogo {
		display: block;
		position: absolute;
		top: 19px;
		left: 50%;
		width: 170px;
		transform: translateX(-50%);
	}
	.moblogo .logo { width: 100%; margin: 0; padding: 0; text-align: center; }
	.header-mob .moblogo .logo img {
		display: block;
		width: 160px !important;
		max-width: 100%;
		height: auto;
		margin: 0 auto !important;
		padding: 0;
	}
	.searchnav, .phonenav, .navbasket { top: 18px; width: auto; font-size: 22px; }
	.searchnav { left: 62px; }
	.phonenav { left: auto; right: 54px; }
	.navbasket { right: 16px; }
	.searchbox { height: auto; padding: 8px 12px; background: #f2f2f2; }
	.searchbox form { display: flex; justify-content: center; }
	.searchbox .sboxinput { width: min(520px, calc(100% - 52px)); }

	.wrapper {
		width: 100%;
		max-width: 100%;
		height: auto;
		padding-right: 24px;
		padding-left: 24px;
		overflow: visible;
	}
	.products, .productscenter { width: 100%; margin: 0; padding: 24px 0 0; }
	.productscenter {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
		align-items: stretch;
	}
	.productscenter > h1, .productscenter > h2, .productscenter > .clear { grid-column: 1 / -1; }
	.productscenter > h1, .productscenter > h2 {
		margin: 0;
		padding: 8px 0 0;
		font-size: 25px;
		line-height: 1.25;
		text-align: center;
	}
	.productscenter > a { display: block; min-width: 0; color: inherit; text-decoration: none; }
	.productbox, .containerpage .productbox {
		display: flex;
		flex-direction: column;
		width: 100% !important;
		height: auto !important;
		min-height: 100%;
		margin: 0;
		background: #fafafa;
	}
	.productimg, .containerpage .productimg {
		flex: 0 0 auto;
		width: 100%;
		height: auto !important;
		aspect-ratio: 1 / 1;
	}
	.productimg img { display: block; width: 100%; height: 100%; object-fit: cover; }
	.productcontent { padding: 0 14px; }
	.productcontent h3 { margin: 12px 0 8px; font-size: 18px; line-height: 1.2; }
	.product-desc { padding: 0 14px; margin: 0 0 18px; font-size: 15px; line-height: 1.35; }
	.product-price {
		position: static;
		margin: auto 14px 14px;
		font-size: 15px;
		line-height: 1.35;
	}
	.productscenter > .clear { display: none; }
	.cc_container {
		left: 12px !important;
		right: 12px !important;
		bottom: 12px !important;
		width: auto !important;
		max-width: 420px;
		font-size: 13px;
		line-height: 1.35;
	}
}

@media screen and (max-width: 767px) {
	.wrapper { padding-right: 15px; padding-left: 15px; }
	.products, .productscenter { padding-top: 18px; }
	.productscenter { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.productscenter > h1, .productscenter > h2 { font-size: 22px; }
	.productbox, .containerpage .productbox { min-height: 0; }
	.productcontent h3 { font-size: 17px; }
	.moblogo { width: 142px; }
	.header-mob .moblogo .logo img { width: 136px !important; }
	.searchnav { display: flex; }
}

@media screen and (max-width: 420px) {
	.moblogo { width: 130px; }
	.header-mob .moblogo .logo img { width: 124px !important; }
	.phonenav { right: 48px; }
	.navbasket { right: 12px; }
}
