/*------------------------------------------------------------------------------------------< Produktliste >---*/

.product_list > .product:not(:last-child){
    margin-bottom:2rem;
}

.product_list > .product:nth-child(even) .inside{
    background-color:var(--c-lightgreen);
}



.product.highlight .image_container{
    position:relative;
    border-radius: var(--br) 0 0 var(--br);
}

.product.highlight .image_container img{
    position:absolute;
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;
    width:auto;
}


.product.highlight .wp{
    margin:1rem 0;
}


.product .inside{
    padding:1rem;
    border:var(--line) solid var(--c-green);
    border-radius:var(--br);
}

.product.highlight .inside{
    border-left:none;
    border-radius:0 var(--br) var(--br) 0;
}










.product .widget-checkbox{
    margin-bottom:1rem !important;
}

.product .widget-checkbox label{
    padding-left:0;
    font-size:inherit;
}

.product .widget-checkbox legend,
.product .small{
    font-size:var(--fs-small);
}

.product h3{
    margin-bottom:1rem;
}

.product .options .widget-select{
    margin-bottom:0;
}

.product .offer{
    text-align:right;
}

.product .options{
    flex-grow:1;
    min-width:12rem;
}

.product.highlight .teaser{
    display:-webkit-box;
    -webkit-line-clamp: 2;
            line-clamp: 2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.product .price{
    font-family:'OpenSans_C_Bold';
    font-size:var(--fs-h1);
}

.product .price .circa{
    font-size:1rem;
}

.product .quantity_submit{
    justify-content: end;
}






.product .wp{
    display:flex;
    justify-content: space-between;
    gap:var(--grid__gutter);
    margin:1rem 0;
}


@media screen and (max-width:500px){

    .product .options{
        margin-bottom:.5rem;
    }

}






@media screen and (min-width:501px) and (max-width:659px){
    .product .submit_container{
        display:flex;
        gap:var(--grid__gutter);
    }

    .product .options{
        margin-bottom:0 !important;
    }

}

@media screen and (min-width:660px){

    .product.highlight .submit_container{
        display:flex;
        gap:var(--grid__gutter);
    }

    .product:not(.highlight):not(.short) .inside{
        display:grid;
        grid-template-columns: 1fr 1fr;
    }

    .product:not(.highlight):not(.short) .head{
        padding-right:5rem;
    }


    .product .wp{
        margin:0 0 1rem 0;
    }


}


@media screen and (max-width:768px){

    .product.highlight .inside{
        border-top:none;
        border-left:var(--line) solid var(--c-green);
        border-radius:0 0 var(--br) var(--br);
    }

    .product.highlight .image_container{
        border-radius: var(--br) var(--br) 0 0;
    }


    .product.highlight .productContainer{
        display:block;
    }

    .product.highlight .image_container{
        height:20vh;
    }

    .product .quantity{
        flex-grow:1;
    }

    .product:not(.highlight) .options{
        margin-bottom:.5rem;
    }
}



@media screen and (min-width:769px){

    .product.highlight .productContainer{
        display:grid;
        grid-template-columns: 1fr 1fr;
    }
   
    .product .quantity{
        width:5rem;
    }
    
    .product .submit_container{
        display:flex;
        gap:var(--grid__gutter);
    }




}

/*------------------------------------------------------------------------------------------< Produktdetails >---*/

#productDetails{
    display:grid;
    grid-template-columns: 1fr .5fr;
    gap:3rem;

    margin-bottom:3rem;
}

#productDetails img{
    border-radius: var(--br);
    overflow:hidden;
}

@media screen and (max-width:600px){
    #productDetails{
        display:block;

        margin-bottom:3rem;
    }

    #productDetails .description{
        margin-bottom:3rem;
    }
}



/*------------------------------------------------------------------------------------------< Produktliste (verkürzt) >---*/

.product.short .head{
    display:grid;
    grid-template-columns: 3fr 1fr;
    margin-bottom:2rem;
}

.product.short h3{
    margin-bottom:0;
}

.product.short .price{
    font-size:var(--fs-h3);
}

.product.short h3{
    text-transform: none;
}