/* Builder */

.custom-product-builder > .inner{
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 1rem;
}
#custom-product-builder-controls {
    position: absolute;
    top: 0;
    left: 0;
    padding: calc(var(--inner)* 2) 3rem 0;
    gap: .75rem;
}
#custom-product-builder-controls .next{
    transform:rotate(180deg);
}
#custom-product-builder-controls button:disabled{
    cursor:default;
}
#custom-product-builder-controls button:disabled svg g{
    stroke: var(--borders);
}
#custom-product-builder-footer-controls{
    position:absolute;
    bottom: 2rem;
    left: 3rem;
    right: 3rem;
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
}
#custom-product-builder-footer-controls button {
    min-height:unset;
    padding: .75rem var(--inner);
}
#custom-product-builder-footer-controls button:disabled{
    cursor:default;
    background: var(--borders);
}

/* Image, Price & Availability */

.preview-image{
    position:relative;
    padding:1.5rem 3rem 9.375rem 3rem;
    background:transparent linear-gradient(47deg, #EAEBEF 0%, #FCFCFC 100%) 0% 0% no-repeat padding-box;
    border-radius: .1875rem;
}
.preview-image .svg,
.preview-image .png{
    position:relative;
    display: flex;
    justify-content: center;
}
.preview-image .svg svg,
.preview-image .png img{
    position:absolute;
    top:0;
}
.preview-image .logo{
    position:absolute;
    z-index:10;
}
.preview-image .logo img,
.preview-image .logo svg{
    height: 100%;
    width: auto;
    margin: 0 auto;
}
.preview-image .wording{
    position: absolute;
    z-index: 20;
}
.preview-image .wording span{
    text-transform: uppercase;
    display: block;
    text-align: right;
    font-family: 'Helvetica', sans-serif;
}
.preview-image .wording span.winner{
    font-size:70%;
    text-align: center;
}
.preview-image .wording span.racename{
    text-align:center;
}
.preview-image .wording span.number{
    font-size: 400%;
}
.preview-image .result{
    position: absolute;
    bottom: 2rem;
    left: 1.5rem;
    right: 1.5rem;
}
.preview-image .result #custom-price{
    background: var(--main-blue);
    padding: 1rem;
    color: var(--white);
    font-size:2rem;
    border-radius: .1875rem;
}
.preview-image .result #availability{
    background: white;
    padding: 1rem;
    margin-bottom:.5rem;
    border-radius: .1875rem;
}
.preview-image .result #availability span{
    text-transform: uppercase;
    font-size: 0.75rem;
    text-align: center;
    display: block;
    letter-spacing: 0.125rem;
}

/* Steps */

.steps {
    padding: 1.5rem 3rem 7rem 3rem;
    background:transparent linear-gradient(47deg, #EAEBEF 0%, #FCFCFC 100%) 0% 0% no-repeat padding-box;
    height:100%;
    border-radius: .1875rem;
}
.step{
    display:none;
}
.step.active{
    display:block;
}
.step h3,
.step h4{
    text-transform:uppercase;
    letter-spacing:0.063rem;
}
.step h3{
    padding-left:4rem;
}

/* Tabs / Groups */

.tab-navigation{
    display:flex;
    padding-bottom: .5rem;
    border-bottom: 0.063rem solid var(--borders);
    margin-bottom: 2rem;
    align-items: center;
}
.tab-navigation > h4{
    padding:.5rem 1.5rem;
    color:var(--main-blue-op-50);
    cursor:pointer;
}
.tab-navigation > h4.active{
    color:var(--main-blue);
}
.tab-navigation > h4:first-of-type{
    padding-left:0;
}
.tab-navigation > h4:not(:first-of-type){
    border-left:0.063rem solid var(--borders);
}
.attribute-group{
    padding-bottom:1rem;
    max-width:41rem;
}
.attribute-group.available{
    display:block;
}
.attribute-group.unavailable{
    display:none;
}
.tabs .attribute-group{
    display:none;
    width:100%;
}
.tabs .attribute-group.active{
    display:block;
}
.attribute-group > div:not(.select):not(.branding):not(.description){
    display: grid;
    gap:1rem;
}
.attribute-group > div.select{
    display: block;
    position:relative;
    width: 100%;
    z-index:30;
    min-height:1.875rem;
    border-radius: .1875rem;
}
.attribute-group > div.select::after{
    content: url(../svg/select.svg);
    position: absolute;
    z-index: 50;
    top: 0.313rem;
    right: .5rem;
}
.attribute-group > div.branding{
    margin-bottom:2rem;
}
.attribute-group > div.branding > div{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    align-items: start;
    gap: 1rem;
}
.attribute-group > div.branding h5{
    padding-top:1.5rem;
}
.attribute-group > div:not(.colours):not(.select):not(.description){
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.tabs .tab-slider{
    display:block;
}
.tabs .tab-slider .slick-list{
    margin: 0 2rem 0 2rem;
    overflow: hidden;
}
.tabs .tab-slider .slick-list .slick-slide{
    margin: 0 .5rem;
}
.tabs .tab-slider .slick-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width:1rem;
    height:1rem;
}
.tabs .tab-slider .slick-arrow:after{
    width:1rem;
    height:1rem;
    background-size: 1rem 1rem;
}
.tabs .tab-slider .slick-prev{
    left: 0;
}
.tabs .tab-slider .slick-next{
    right: 0;
}
.attribute-group .description{
    padding-top:1rem;
}

/* Inputs */

.attribute-group > div label{
    position:relative;
    cursor: pointer;
    border: 0.063rem solid var(--main-blue);
    border-radius: .1875rem;
    padding:.5rem;
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.attribute-group > div label.unavailable{
    opacity:0.25;
    cursor:default;
}
.attribute-group > div label input:disabled{
    cursor:default;
}
.attribute-group > div.select label{
    display: block;
    width: 100%;
    position:absolute;
    background:var(--white);
    border:0;
    border-radius:0;
}
.attribute-group > div.select label:hover{
    background:var(--fields);
}
.attribute-group > div.branding label{
    border:0;
    padding:0;
    max-width:20rem;
}
.attribute-group > div label > input[type="radio"]{
    position: absolute;
    z-index:10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-right:0;
    border:0;
}
.attribute-group > div label > input[type="radio"].hidden{
    display:none;
}

.attribute-group > div label > span,
.attribute-group > div label > img{
    position:relative;
    z-index:20;
}
.attribute-group > div label > input[type="radio"]:checked{
    background:var(--fields);
    z-index:20;
}
.attribute-group > div label > span{
    display:block;
    text-align:center;
    width:100%;
}
.attribute-group > div.select label > span,
.attribute-group > div.branding label > span{
    text-align:left;
}
.attribute-group > div.branding label > span{
    padding-top:.5rem;
}
.attribute-group > div.colours .colour-list label > span{
    font-size:0.688rem;
    padding-top:.5rem;
}
.attribute-group > div label > img{
    padding-bottom:.5rem;
}

/* Colour groups */

.attribute-group .colour-heading h5{
    text-transform:uppercase;
    font-size: 1rem;
    display: inline-block;
    padding: 0 1rem 0 0;
}
.attribute-group .colour-heading span{
    font-size: 1rem;
}
.attribute-group .colour-subtitle{
    display:block;
    font-size:0.875rem;
}
.attribute-group > div.colours .colour-list{
    display:flex;
    gap:0 1rem;
    flex-wrap: wrap;
    padding-bottom:2rem;
}
.attribute-group > div.colours .colour-list .parent{
    position:relative;
    cursor: pointer;
    font-size: 0.688rem;
    width:3.125rem;
    text-align: center;
}
.attribute-group > div.colours .colour-list .parent > span{
    display:block;
    border: 0.063rem solid var(--main-blue);
    border-radius:50%;
    height:3.125rem;
    width:3.125rem;
    margin:.5rem 0;
}
.attribute-group > div.colours .colour-list .children{
    display:none;
    position: absolute;
    z-index:50;
    width: 9.375rem;
    background: white;
    transform: translate(100%, 50%);
    border: .063rem solid var(--main-blue);
    border-radius: .1875rem;
}
.attribute-group > div.colours .colour-list .children.active{
    display:block;
}
.attribute-group > div.colours .colour-list .children > div{
    background:transparent linear-gradient(47deg, #EAEBEF 0%, #FCFCFC 100%) 0% 0% no-repeat padding-box;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: .5rem;
    font-size: 0.688rem;
    position: relative;
}
.attribute-group > div.colours .colour-list .children .close{
    display:block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.attribute-group > div.colours .colour-list label{
    border:0;
    max-width:3.125rem;
    justify-content: flex-start;
}
.attribute-group > div.colours .colour-list .children label{
    flex-direction: row;
    justify-content: flex-start;
    max-width: 100%;
    padding:.5rem .5rem 0 .5rem;
}
.attribute-group > div.colours .colour-list .children label:last-of-type{
    padding-bottom:.5rem;
}
.attribute-group > div label > input[type="radio"].colour{
    position:unset;
    border: 0.063rem solid var(--main-blue);
    border-radius:50%;
    height:3.125rem;
    width:3.125rem;
}
.attribute-group > div label > input[type="radio"].colour:checked{
    outline: 0.063rem solid var(--main-blue);
    outline-offset: 0.125rem;
}
.attribute-group > div.colours .colour-list .children label > input[type="radio"].colour{
    height: 1.563rem;
    width: 1.563rem;
    min-height: 1.563rem;
    min-width: 1.563rem;
}
.attribute-group > div.colours .colour-list .children label > span{
    padding-top:0;
    padding-left:.5rem;
    width:unset;
    text-align:unset;
}

/* Comments, initials, logos */

.attribute-group .branding,
.attribute-group input[type="text"],
.attribute-group input[type="number"]{
    display:none;
}
.attribute-group input[type="text"],
.attribute-group input[type="number"]{
    margin-top: 1rem;
    background:var(--white);
    border: 0.063rem solid var(--borders);
    border-radius: .1875rem;
}
.attribute-group input[type="file"],
.attribute-group .branding select{
    display:block;
    background-color:var(--white);
    border: 0.063rem solid var(--borders);
    border-radius: .1875rem;
    padding:.5rem;
}
.attribute-group .branding .artwork{
    background: rgba(255,0,0,0.11);
}
::placeholder{
    color: var(--dark-blue-op-65);
}

/* Upsell products */

ul.products{
    max-width: 60rem;
    margin-left: auto;
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}
ul.products li a {
    display: block;
    border-radius: .1875rem;
    border: .063rem solid var(--borders);
    height: 100%;
    display: flex;
    flex-direction: column;
    background:var(--white);
}
ul.products li a img {
    width: 100%;
    height: auto;
}
ul.products li a .product-info {
    padding: .5rem 1rem;
}
ul.products li a h2 {
    font-size: 1.063rem;
    font-weight: 500;
}
ul.products li a span.price {
    font-size: .875rem;
    font-weight: 700;
    display: block;
    padding: 0 0 var(--inner-half) 0;
}

/* Summary */

#product-attributes{
    margin-top: var(--inner-half);
    padding-top: var(--inner-half);
    padding-bottom: var(--inner-half);
    border-top: .063rem solid var(--borders);
    border-bottom: .063rem solid var(--borders);
    border-collapse: unset;
    min-width:unset;
}
#product-attributes tr td:first-of-type{
    font-weight:700;
}
#product-attributes tr td:last-of-type{
    text-align:right;
}
#product-attributes td{
    padding: var(--inner-half) 0;
    font-size:0.875rem;
}
#product-attributes td span{
    font-size: 0.75rem;
    font-style: italic;
}
.subtotal{
    padding:var(--inner) 0;
    margin-bottom: var(--inner-half);
    border-bottom: 0.063rem solid var(--borders);
    font-weight: 700;
    text-align:right;
}
.add-to-cart{
    padding-top: var(--inner);
    gap:1rem;
}
.add-to-cart .row{
    position: relative;
}
.add-to-cart input[type="number"]{
    background: transparent;
    border: 0.063rem solid var(--main-blue);
    padding: .5rem;
}
.add-to-cart .row > div{
    position: absolute;
    right: 0.313rem;
    display: flex;
    flex-direction: column;
}
.add-to-cart .row > div .increase svg{
    transform: rotate(180deg);
}
#add-to-cart button{
    min-height: unset;
    padding: .75rem var(--inner);
    display: flex;
    align-items: center;
    justify-content: space-around;
}

/* Responsive */

@media screen and (max-width:850px){
    .custom-product-builder > .inner{
        grid-template-columns: 1fr;
    }
    .preview-image{
        max-height:34rem;
    }
    .preview-image .png,
    .preview-image .png img,
    .preview-image .svg,
    .preview-image .svg svg{
        max-height:calc(34rem - 9.375rem);
    }
}

@media screen and (max-width:744px){
    .custom-product-builder > .inner {
        padding: var(--inner) 0;
    }
    .steps{
        padding: 1rem 1rem 8rem 1rem;
        max-width: calc(100vw - var(--inner));
        overflow:hidden;
    }
    #custom-product-builder-controls{
        padding: 1.875rem 1rem 0;
    }
    #custom-product-builder-footer-controls{
        left: 1rem;
        right: 1rem;
    }
    #custom-product-builder-footer-controls button{
        padding: .5rem var(--inner);
        min-width: unset;
    }
    .tabs .tab-slider .slick-list{
        margin: 0 1rem 0 1rem;
    }
    .tab-navigation > h4{
        font-size:0.938rem;
        padding: .5rem 1rem;
    }
    .attribute-group > div.colours .colour-list .parent,
    .attribute-group > div.colours .colour-list .parent > span,
    .attribute-group > div.colours .colour-list :not(.children) label,
    .attribute-group > div label > input[type="radio"].colour{
        width:3rem;
        max-width:3rem;
    }
    .attribute-group > div.colours .colour-list .parent > span,
    .attribute-group > div label > input[type="radio"].colour{
        height:3rem;
    }
}

@media screen and (max-width:600px){
    .attribute-group > div label{
        font-size:0.813rem;
    }
}