/* -------------- Infos simple Product ----------------- */
.et_pb_module {
    .et_pb_module_inner {
        .cart {
            .custom-quantity-price-wrapper {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: var(--spacing-xxl);

                .single-quantity-controls,
                .variable-quantity-controls {
                    display: flex;
                    align-items: center;
                    gap: var(--spacing-xs);
                    background-color: var(--ocre-600);
                    padding: var(--spacing-sm);
                    color: var(--grayscale-50);
                    border-radius: var(--radius-full);

                    .btn-single-qty-minus,
                    .btn-single-qty-plus,
                    .btn-variable-qty-minus,
                    .btn-variable-qty-plus {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 0 !important;
                        background-color: transparent !important;
                        width: 30px;
                        height: 30px;
                        border: none !important;
                        cursor: pointer;
                        transition: all 0.3s ease;

                        &:hover {
                            opacity: 0.8;
                        }
                    }

                    .single-qty,
                    .variable-qty {
                        font-size: var(--fs-button);
                        font-weight: var(--fw-bold);

                    }

                    /* Masquer les flèches natives */
                    input[type="number"].qty::-webkit-outer-spin-button,
                    input[type="number"].qty::-webkit-inner-spin-button {
                        -webkit-appearance: none;
                        margin: 0;
                    }

                    input[type="number"].qty {
                        -moz-appearance: textfield;
                        text-align: center;
                    }
                }

                .custom-price-display {
                    .price {
                        color: var(--grayscale-900) !important;
                        font-weight: var(--fw-bold) !important;
                        font-size: var(--fs-title) !important;
                    }
                }
            }
        }
    }
}



/* -------------- Infos Product with variations ----------------- */
.woocommerce div.product form.cart .variations td {
    padding: 0 !important;
}

.woocommerce div.product form.cart .variations td select {
    font-size: var(--fs-text);
}

/* Masquer la flèche Select2/SelectWoo ajoutée par WooCommerce */
.et_pb_wc_add_to_cart form.cart .variations td.value span:after {
        display: none !important;
}


.attributs-labels {
    color: var(--grayscale-700);
}

.variations {
    margin-top: var(--spacing-xs);

    select {
        padding: var(--spacing-md) !important;
        background-color: transparent !important;
        border: 1px solid var(--grayscale-400) !important;
        border-radius: var(--radius-sm) !important;
        font-weight: var(--fw-bold) !important;

        option {
            color: var(--grayscale-900) !important;
            border-radius: var(--radius-sm) !important;
            font-weight: var(--fw-bold) !important;
            font-style: var(--fs-button) !important;
        }

        ::after {
            content: none;
        }
    }
}


.single_variation_wrap {
    display: flex;
    justify-content: space-between;

    .single_variation {
        order: 2;
        padding-top: var(--spacing-md);

        .price {
            color: var(--grayscale-900) !important;
            font-weight: var(--fw-bold) !important;
            font-size: var(--fs-title) !important;
        }
    }

    .custom-quantity-price-wrapper {
        margin-bottom: var(--spacing-xl);

        .quantity {
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
            background-color: var(--ocre-600);
            padding: var(--spacing-sm);
            color: var(--grayscale-50);
            border-radius: var(--radius-full);

            input,
            .quantity-button {
                padding: 0 !important;
                font-weight: var(--fw-bold) !important;
                background-color: transparent !important;
                color: var(--grayscale-50) !important;
                width: 30px;
                height: 30px;
                border: none !important;
                font-size: var(--fs-button);
                cursor: pointer;
                transition: 0.3s all ease;
            }

            /* Masquer les flèches natives */
            input[type="number"].qty::-webkit-outer-spin-button,
            input[type="number"].qty::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }

            input[type="number"].qty {
                -moz-appearance: textfield;
                text-align: center;
            }
        }
    }
}


/* -------------- Gallery Product ----------------- */

.flex-control-thumbs {
    margin-top: var(--spacing-lg) !important;
    display: flex !important;
    gap: 1rem !important;

    li {
        margin: 0 !important;
        width: fit-content !important;

        img {
            margin: 0 !important;
            width: 60px !important;
            height: 60px !important;
            object-fit: cover !important;
        }
    }
}




/* -------------- Related product ----------------- */

.related-products {
    color: var(--grayscale-900);

    h2 {
        display: none;
    }

    .products {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xl);

        &::before,
        &::after {
            display: none !important;
        }

        .product {
            background-color: var(--grayscale-50);
            margin: 0 !important;
            padding: var(--spacing-xs) !important;
            width: calc(25% - var(--spacing-xl) * 3 / 4) !important;
            display: flex !important;
            border: 1px solid var(--grayscale-400);
            border-radius: var(--radius-sm);

            .product-card {
                display: flex;
                flex-direction: column;
                width: 100%;
                text-decoration: none;
                color: inherit;

                .product-card-image {
                    img {
                        width: 100%;
                        height: 180px;
                        object-fit: cover;
                        border-radius: var(--radius-sm);
                    }
                }

                .product-card-content {
                    padding: var(--spacing-md);
                    display: flex;
                    flex-direction: column;
                    gap: var(--spacing-md);
                    color: var(--grayscale-900);
                    flex: 1;

                    .product-card-header {
                        flex: 1;
                    }

                    .product-card-excerpt {
                        font-size: var(--fs-subtext);
                        color: var(--grayscale-700);
                        line-height: 1.4;
                        margin-top: var(--spacing-xs);
                    }

                    .product-card-footer {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-top: auto;

                        .product-card-price-wrapper {
                            .product-card-price {
                                font-weight: var(--fw-bol d);
                                font-size: var(--fs-button);
                            }

                            .product-card-weight {
                                font-size: var(--fs-subtext);
                                color: var(--grayscale-700);
                            }
                        }

                        .product-card-button {
                            padding: var(--spacing-sm) var(--spacing-md);
                            background-color: var(--ocre-600);
                            border-radius: var(--radius-full);
                            transition: 0.3s all ease;

                            img {
                                transition: transform 0.3s ease;
                            }

                            &:hover {
                                background-color: var(--ocre-900);

                                img {
                                    transform: translateX(2px);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* -------------- Responsive ----------------- */

@media (max-width: 980px) {
    .related-products .products .product {
        width: calc(50% - var(--spacing-xl) / 2) !important;
    }
}

@media (max-width: 480px) {
    .related-products .products .product {
        width: 100% !important;
    }
}