﻿
#product-intro-wrapper{position: relative}
#product-intro-wrapper::before{content: ""; width: 50%; height: 100%; position: absolute; left: 0%; top: 0%; background: #f8f8f8}

#product-intro{padding: 0px; display: flex; justify-content: space-between; overflow: visible; background: transparent}
#product-intro-left{width: 360px; height: 100%; padding: 60px 0px 0px 0px; position: sticky; top: 0px}
.product-intro-left__img{width: 310px; height: auto; margin-bottom: 40px; border: solid 1px var(--border-color)}

.product-intro-left__summary{margin: 0px 0px 25px -50px; display: flex; justify-content: flex-start; align-items: flex-start; transition: 1s ease; opacity: 0}
.product-intro-left__summary--active{margin-left: 0px; opacity: 1}

.product-intro-left__summary-tick{width: 20px; height: 20px; margin: 2px 10px 0px 0px; position: relative; overflow: hidden; background: #228be6}
.product-intro-left__summary-tick::before, .product-intro-left__summary-tick::after{content: " "; height: 2px; position: absolute; background: #fff}
.product-intro-left__summary-tick::before{width: 6px; transform: rotate(45deg); left: 4px; top: 10px}
.product-intro-left__summary-tick::after{width: 20px; transform: rotate(-45deg); left: 6px; top: 6px}

.product-intro-left__summary P, .product-intro-left__summary P *{font-size: 15px; line-height: 1; font-weight: 600; font-synthesis: style}
.product-intro-left__summary P *{color: #606060; font-weight: 400; padding-top: 8px; display: block}





#product-intro-right{width: calc(100% - 410px); padding: 55px 0px 0px 50px; border-left: solid 1px var(--border-color); background: #fff}

/* PADDING BOTTOM: BOTH COLUMNS (these values are coded into the JS) */
#product-intro-left, #product-intro-right{padding-bottom: 80px !important}





.product-image-responsive{position: static; display: none}

.configuration-option{max-width: 700px; margin-top: 80px; padding-top: 75px; border-top: solid 1px #0066cc}
.configuration-option--top{margin-top: 25px; padding-top: 0px; border: none}

P.configuration-option__header, P.configuration-option__header *{font-size: 22px; line-height: 1.4; font-weight: 600; font-synthesis: style; letter-spacing: -0.5px}
P.configuration-option__header *{color: #909090}
P.configuration-option__header{padding-bottom: 10px} 

.configuration-option__values{position: relative}
.configuration-option__mask{width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; opacity: 0.5; z-index: 10; background: #fff}
.configuration-option__mask--inactive{display: none}

P.configuration-option__value, P.configuration-option__value *{font-size: 15px; line-height: 1.35}
P.configuration-option__value *{color: #0066cc; line-height: 1; font-weight: 700; font-synthesis: style; padding: 0px 0px 10px 0px; display: block}
P.configuration-option__value{color: #202020; margin-top: 20px; padding: 20px 15px 20px 15px; border: solid 1px #888; box-sizing: border-box; cursor: pointer; transition: 0.25s; background: #fff}
P.configuration-option__value--active{border: solid 2px #0066cc; background: #f8fcff}





#configure-cart-section{width: 100%; max-width: 700px; border-top: solid 1px #0066cc}

/* MARGIN + PADDING TOP (these values are coded into the JS) */
#configure-cart-section{margin-top: 80px !important; padding-top: 80px !important}





.configure-cart-section__inner{padding: 25px 20px 25px 20px; border: solid 1px var(--border-color); border-left: none; border-right: none; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; position: relative; background: var(--third-color)}
.configure-cart-section__inner-mask{width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; opacity: 0.5; z-index: 10; background: #fff}
.configure-cart-section__inner-mask--inactive{display: none}

.configure-cart-section__inner P, .configure-cart-section__inner P *{font-size: 28px; line-height: 1; font-weight: 300; letter-spacing: -1px; font-synthesis: style}
.configure-cart-section__inner P *{font-size: 20px; letter-spacing: 0px}
.configure-cart-section__inner P{margin-right: 40px}
.configure-cart-section__inner INPUT{background: #0066cc}

@media screen and (min-width: 1200px)
{	
	.configuration-option{max-width: none}
	.configuration-option__values{display: flex; justify-content: space-between; flex-wrap: wrap}
	P.configuration-option__value{width: calc(50% - 10px)}
	#configure-cart-section{max-width: none}
}

@media screen and (max-width: 1000px)
{	
	#product-intro-left{width: 260px}
	.product-intro-left__img{width: 210px}
	#product-intro-right{width: calc(100% - 310px)}
	.configure-cart-section__inner P, .configure-cart-section__inner P *{font-size: 26px; font-weight: 400}
	.configure-cart-section__inner P *{font-size: 18px}
}

@media screen and (max-width: 800px)
{	
	#product-intro-wrapper::before{display: none}
	#product-intro{display: block}
	#product-intro-left{display: none}
	#product-intro-right{width: 100%; padding-top: 0px; padding-left: 0px; border: none}
	.product-image-responsive{display: block}
}

@media screen and (max-width: 410px)
{	
	.configure-cart-section__inner{display: block}
	.configure-cart-section__inner P{margin: 0px 0px 20px 0px}
}

