/*
Theme Name: Divi Child
Theme URI: https://parameter-tech.com/
Description: Child theme for Divi
Author: 7Span
Author URI: https://parameter-tech.com/
Template: Divi
Version: 1.0
*/

/* Custom Product Page CSS (from ChatGPT) */
.custom-product-top {
    display: flex;
    flex-direction: column;
}
.custom-product-gallery{
    display: flex;
    gap: 30px;
}
.custom-product-top .clearfix{
    width: 70%;
}
.woocommerce div.product div.images.woocommerce-product-gallery{
    width: 100%;
}
.custom-product-top .custom-product-summary{
    width: 30%;
}
.woocommerce div.product form.cart .variations select {
    min-width: 42% !important;
}
.variations_form.cart{
    margin: 0 !important;
}
p.price {
    margin: 30px 0 10px 0 !important;
}
.custom-product-summary span.woocommerce-Price-amount.amount {
    font-size: 22px;
    color: #000;
    font-weight: 700;
}
.woocommerce-product-details__short-description{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}
.variations tr{
    display: flex;
    flex-direction: column;
    padding: 0px !important;
}
.woocommerce div.product form.cart .variations td {
    padding: 0 0 10px 0 !important;
}
.add-to-quote-button {
    width: 100%;
    background-color: #000;
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    padding: 4px;
    font-weight: 600;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
    width: 100px !important;
    
}
.woocommerce div.product .woocommerce-product-gallery--columns-4 .flex-control-thumbs li{
    clear: none !important;
    margin: 0 !important;
}
/*.custom-product-gallery .flex-viewport{*/
/*    max-height: 500px;*/
/*    height: 100% !important;*/
/*}*/
.flex-control-nav.flex-control-thumbs{
    margin-top: 30px !important;
    padding: 0 !important;
}
body.woocommerce .woocommerce-tabs {
    border: 1px solid #d9d9d9;
    margin: 50px 0px 20px !important;
}
/*.custom-product-tabs {*/
/*    margin-top: 40px;*/
/*}*/
.tabs-nav {
    display: flex;
    list-style: none;
    margin-bottom: 20px;
    gap: 20px;
}
.tabs-nav li {
    cursor: pointer;
    padding: 10px 20px;
    background: #f5f5f5;
}
.tabs-nav li.current {
    background: #e0e0e0;
}
body.woocommerce div.product .woocommerce-tabs ul.tabs li, body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li{
    background-color: #000;
}
body.woocommerce div.product .woocommerce-tabs ul.tabs li a, body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li a{
    color: #fff !important;
}
body.woocommerce div.product .woocommerce-tabs ul.tabs, body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs{
    background: #fff;
}
body.woocommerce div.product .woocommerce-tabs .panel, body.woocommerce #content-area div.product .woocommerce-tabs .panel {
    background-color: #f4f4f4;
}
.tab-content {
    display: none;
}
.tab-content.current {
    display: block;
}
.related-products-grid {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}
.related-product-item {
    width: 24%;
    border: 1px solid #eee;
    padding: 10px;
    text-align: center;
}
.short-desc {
    margin-top: 10px;
}
.product .related h2.woocommerce-loop-product__title{
    font-size: 20px !important;
    padding: 0px !important;
}

@media (max-width: 769px){
    .woocommerce div.product div.images .flex-control-thumbs li img {
    width: 50px !important;
}
}
@media (max-width: 575px){
.custom-product-gallery {
    flex-direction: column;
}
.add-to-quote-button {
    font-size: 16px;
}
.custom-product-top .clearfix, .custom-product-top .custom-product-summary {
    width: 100%;
}
.tabs.wc-tabs{
    display: flex;
}
body.woocommerce div.product .woocommerce-tabs ul.tabs li, body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li{
    flex: 1 1 0;
}
body.woocommerce div.product .woocommerce-tabs ul.tabs li a, body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li a {
    padding: 4px !important;
    font-size: 12px;
    text-align: center;
}
body.woocommerce div.product .woocommerce-tabs .panel, body.woocommerce #content-area div.product .woocommerce-tabs .panel {
    padding: 20px;
}
}