.variantBuyOuter{position: fixed;top: 0;bottom: 0;left: 0;right: 0;background-color: #0000002b;height: 100%;z-index: 600000;}
.variantBuyContent {position:fixed;bottom:0;right:0;width: 100%;display: flex;background-color: #fff;z-index: 600001;padding: 20px;border:1px solid #dadada;border-radius: 5px;flex-direction: column;}
.variantBuyContent .variantBuyContainer {flex: 0 0 100%;max-width: 100%;display: flex;flex-wrap: wrap;align-content: flex-start;flex: 1 1 auto;}
.variantBuyContent .variantBuyHeader{position: relative;margin-top: -20px;padding: 15px 0;font-weight: 600;margin-bottom: 10px;}
.variantBuyContent .variantBuyHeader:after{content:"";border-bottom: 1px solid #dadada;position: absolute;left: -20px;right: -20px;bottom: 0;}
.variantBuyContent .left{flex:0 0 40%;max-width:40%;}
.variantBuyContent .left .listSavings{font-size:11px;font-weight:600;}
.variantBuyContent h2{margin-top:0;font-size: 15px;font-weight:600;}
.variantBuyContent div.price{font-weight:700;margin-bottom:.2rem;}
.variantBuyContent div.price strike{color:#908f8f}
.variantBuyContent .right{flex:0 0 60%;max-width:60%;padding-left:10px;display: flex;flex-direction: column;justify-content: flex-end;}
.variantBuyContent .selectors{flex: 0 0 calc(100% + 20px);max-width: calc(100% + 20px);display: flex;flex-wrap: wrap;margin: 8px -10px 0;max-height: 50vh;overflow-y: auto;}
.variantBuyContent .selectVar{background-color: #f6f5ec;border-radius: 5px;margin: 8px;padding: 5px;text-align: center;cursor: pointer;flex: 0 0 calc(50% - 20px);max-width: calc(50% - 20px);border: 1px solid #dadada91;}
.variantBuyContent .selectVar:hover{border-color:#dadada;}
.variantBuyContent .selectVar.selected{background-color: #733c88;color: #fff;border-color: #733c88;}
.variantBuyContent form{flex:0 0 100%;max-width:100%;}
.variantBuyHeader i {position: absolute;top: 12px;right: 0;display: block;width: 30px;height: 30px;font-size: 0;cursor: pointer;}
.variantBuyHeader i:before,.variantBuyHeader i:after {position: absolute;top: 50%;left: 50%;width: 3px;height: 25px;background-color: #b7b2b2;transform: rotate(45deg) translate(-50%, -50%);transform-origin: top left;content: '';}
.variantBuyHeader i:after {transform: rotate(-45deg) translate(-50%, -50%);}
.variantBuyHeader i:hover:before,.variantBuyHeader i:hover:after{opacity:0.6;}
.variantBuyContent .listBuyWrapper{margin: 12px -20px 0;padding: 18px 20px 0;box-shadow: 0 -5px 10px -5px rgba(115,115,115,0.50);display: flex;}
.variantBuyContent .listBuyWrapper>input{height:50px;width: 71px;border: 1px solid #DADADA;border-radius: 5px;padding: 0;text-align: center;margin-right: 10px;}
.variantBuyContent .listBuy:not(:empty){height: 50px;padding-top: 13px;margin-top: 0;width: calc(100% - 81px);}
@media (max-width: 599px){
	@keyframes variantBuyContent {
		from {transform: translateY(100%);}
		to {transform: translateY(0);}
	}
	@keyframes variantBuyContentClose {
		from {transform: translateY(0);}
		to {transform: translateY(100%);}
	}
}
@media (min-width: 600px){
	.variantBuyContent{width:550px;height: 100vh;}
	@keyframes variantBuyContent {
		from {transform: translateX(100%);}
		to {transform: translateX(0);}
	}
	@keyframes variantBuyContentClose {
		from {transform: translateX(0);}
		to {transform: translateX(100%);}
	}
}
@media (min-width: 999px){
	.variantBuyContent .selectors{align-content:flex-start;}
	.variantBuyContent .selectors {margin-top: 15px;}	
	.variantBuyContainer{margin-top: 20px;}	
}
@media (orientation:landscape) and (max-width: 999px)  {
	.variantBuyContent{width:100%;overflow-y: scroll;height: 100%;}
	.variantBuyContent .left {max-width:100px;}
	.variantBuyContent .selectVar{flex: 0 0 calc(25% - 20px);max-width: calc(25% - 20px);}
}
.variantBuyContent {animation: variantBuyContent 0.25s;animation-fill-mode: both;}
.variantBuyContentClose {animation: variantBuyContentClose 0.25s;animation-fill-mode: both;}