/* Viewport-based layout; loaded after legacy device-specific styles. */
.wrapper,.single-product,.single-product-left,.single-product-right,.single-product-right input,.single-product-right textarea,.single-product-right select{box-sizing:border-box}
.wrapper{width:calc(100% - 40px);max-width:1440px;margin-left:auto;margin-right:auto}
.headwrapper{width:100%}
.single-product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.single-product>.single-product-left,.single-product>.single-product-right{float:none;width:auto;min-width:0;margin:0;padding-left:0;padding-right:0}
.single-product>.clear{display:none}
.single-product>:not(.single-product-left):not(.single-product-right){grid-column:1/-1;min-width:0}
.single-product-left{position:relative}
.single-product-right input[type=text],.single-product-right textarea{max-width:100%}
.content,.content-full{max-width:100%}
.wrapper iframe,.wrapper input[type=text],.wrapper input[type=email],.wrapper input[type=tel],.wrapper textarea,.wrapper select{max-width:100%;box-sizing:border-box}
.single-product #tabs{max-width:100%;overflow-x:auto}
.single-product #tabs table{max-width:100%}
.compare-table{max-width:100%;display:block;overflow-x:auto}
.lightbox{z-index:100001}.lightboxOverlay{z-index:100000}
.lightbox .lb-image{max-width:none!important;max-height:none!important;object-fit:contain}
.lb-dataContainer{max-width:calc(100vw - 24px)}
@media(max-width:1100px){
 .single-product{grid-template-columns:minmax(0,1fr);gap:20px}
 .single-product>.single-product-left{top:auto!important}
 .header .wrapper,.bottom .wrapper{max-width:100%}
 .sidebar-left,.sidebar-right{max-width:100%}
}
@media(max-width:1024px){
 .wrapper{width:calc(100% - 24px);overflow:visible}
 .content,.content-full{width:100%;float:none;margin-left:0;margin-right:0}
 .header-left,.header-right{min-width:0;max-width:100%}
 .single-product .ui-tabs-nav{display:flex;overflow-x:auto;flex-wrap:nowrap}
 .single-product .ui-tabs-nav li{flex:none}
}
@media(max-width:768px){
 .header{display:none}
 .navtop{display:none}.mobile-menu{display:block}
 .wrapper{width:calc(100% - 20px)}
 .header-mob .wrapper{width:100%}
 .header-left,.header-right{width:100%;float:none;text-align:center}
 .single-product{padding:0;margin:10px 0;gap:18px}
 .single-product h1{font-size:clamp(23px,6vw,30px);overflow-wrap:anywhere}
 .single-product-right form{max-width:100%}
 .single-product-right input:not([type=hidden]),.single-product-right select,.single-product-right textarea{max-width:100%}
 .content iframe,.contentfull iframe{max-width:100%}
}

@media(prefers-reduced-motion:reduce){.single-product-left{scroll-behavior:auto}}

/* The existing mobile header also applies to tablet/narrow desktop viewports. */
@media only screen and (max-width: 1024px) {
	.header-mob {
		display: block !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #f5f5f5 !important;
		border-bottom: 0 !important;
		box-shadow: none !important;
		z-index: 3000 !important;
	}

	.header-mob .phone,
	.header-mob nav {
		width: 100% !important;
		height: 65px !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #f5f5f5 !important;
	}

	.searchnav {
		display: none !important;
	}

	.header-mob .mob-header-search {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		box-sizing: border-box !important;
		background: #fff !important;
		padding: 12px 10px 14px !important;
		margin: 0 !important;
		clear: both !important;
		text-align: left !important;
		border-bottom: 0 !important;
	}

	.header-mob .mob-header-search form {
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		height: 46px !important;
		box-sizing: border-box !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #fff !important;
		border: 1px solid #ddd !important;
		border-radius: 18px !important;
		overflow: hidden !important;
	}

	.header-mob .mob-header-search .sboxinput {
		display: block !important;
		flex: 1 1 auto !important;
		min-width: 0 !important;
		width: auto !important;
		height: 100% !important;
		box-sizing: border-box !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: #fff !important;
		color: #222 !important;
		font-size: 16px !important;
		line-height: 46px !important;
		padding: 0 14px !important;
		margin: 0 !important;
		outline: none !important;
		-webkit-appearance: none !important;
		appearance: none !important;
	}

	.header-mob .mob-header-search .sboxinput::placeholder {
		color: #8b8b8b !important;
		opacity: 1 !important;
	}

	.header-mob .mob-header-search button.searchbtnb {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: static !important;
		flex: 0 0 60px !important;
		width: 60px !important;
		height: 100% !important;
		min-height: 0 !important;
		box-sizing: border-box !important;
		border: 0 !important;
		border-left: 0 !important;
		border-radius: 0 !important;
		background: linear-gradient(90deg, #fff 0%, #fafafa 42%, #eee 100%) !important;
		color: #666 !important;
		padding: 0 !important;
		margin: 0 !important;
		cursor: pointer !important;
		outline: none !important;
		-webkit-appearance: none !important;
		appearance: none !important;
		vertical-align: top !important;
	}

	.header-mob .mob-header-search button.searchbtnb .fa,
	.header-mob .mob-header-search .fa-search {
		display: block !important;
		font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
		font-size: 26px !important;
		line-height: 1 !important;
		color: #666 !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.spacer,
	.spacerinside,
	.mobspacer {
		height: 138px !important;
	}

	.header-mob .phonenav {
		right: calc(4% + 8px) !important;
	}
}
@media(max-width:1024px){.header{display:none}.navtop{display:none}.mobile-menu{display:block}}

/* Product links are the layout items; the cards inside always fill their links. */
.products.productstop:not(.blog-grid),.productsinside{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-right:0;width:100%;box-sizing:border-box}
.products.productstop:not(.blog-grid)>a{display:block;flex:0 1 calc((100% - 60px)/4);min-width:0;max-width:340px;box-sizing:border-box}
.productsinside>a{display:block;flex:0 1 calc((100% - 40px)/3);min-width:0;box-sizing:border-box}
.products.productstop:not(.blog-grid)>a>.productbox,.productsinside>a>.productbox{float:none;width:100%;max-width:none;height:auto;min-height:0;margin:0;box-sizing:border-box}
.products.productstop:not(.blog-grid)>a .productimg,.productsinside>a .productimg{width:100%;height:auto;aspect-ratio:1/1;box-sizing:border-box}
.products.productstop:not(.blog-grid)>a .productimg img,.productsinside>a .productimg img{width:100%;height:100%;max-width:100%;object-fit:contain}
.products.productstop:not(.blog-grid)>a .productcontent,.productsinside>a .productcontent{width:100%;box-sizing:border-box;overflow-wrap:break-word}
.homepages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:1200px;margin-left:auto;margin-right:auto}
.homepages>h1{grid-column:1/-1}
.homepages>.homepage{width:100%;height:auto;margin:0;min-width:0;box-sizing:border-box}
.homepages .homepageimg{width:100%;height:auto;aspect-ratio:264/350}
.homepages .homepageimg img{display:block;width:100%;height:100%;object-fit:cover}
.homepages>.clear{display:none}
@media(max-width:1024px){
 .products.productstop:not(.blog-grid),.productsinside{gap:12px}
 .products.productstop:not(.blog-grid)>a,.productsinside>a{flex:0 0 calc((100% - 12px)/2);max-width:none}
 .homepages{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .homepages .homepagecontent h2{font-size:clamp(14px,2.6vw,20px);line-height:1.3}
 .header-mob .phone>nav{position:relative}
 .header-mob .moblogo{position:absolute;left:50%;top:0;transform:translateX(-50%);width:clamp(140px,42vw,190px);height:65px;display:flex;align-items:center;justify-content:center;margin:0;padding:0}
 .header-mob .moblogo>a{display:block;width:100%}
 .header-mob .moblogo .logo{float:none;width:100%;margin:0;padding:0;text-align:center}
 .header-mob .moblogo .logo img{display:block;width:100%;max-width:100%;height:auto;max-height:48px;object-fit:contain;margin:0;padding:0}
 .header-mob .moblogo>br{display:none}
}