@import url('../general-and-utility-classes.css');
@import url('../woo/dh-customizer.css');
@import url('../woo/components/quantity-btns.css');

.single-product {

    &.disabled {
        pointer-events: none;
    }

    &.designer-modal-open {
        overflow: hidden;
    }

    .site-main {
        width: 100%;
        max-width: 1440px;
        padding: 0 120px;
        margin: 0 auto;

        /* - Tablet - */
        @media only screen and (max-width: 992px) {
            padding: 0 40px;
        }
        /* - Mobile - */
        @media only screen and (max-width: 767px) {
            padding: 0 20px;
        }
    }

    /* --- Breadcrumb --- */
    .woocommerce-breadcrumb {
        color: var(--color-black);
        font-weight: 500;
        padding: 24px 0;
        margin: 0;

        /* - Mobile - */
        @media only screen and (max-width: 767px) {
            padding: 18px 0;
        }

        a {
            font-size: 16px;
            line-height: 20px;
            font-weight: 500;
            color: #737A80;
            padding: 0 6px;
            transition: .2s linear;

            &:first-child {
                padding-left: 0;
            }

            &:nth-child(2) {
                pointer-events: none;

                &:hover {
                    color: #737A80;
                }
            }

            &:hover {
                color: var(--color-slick-yellow);
                transition: .2s linear;
            }
        }
    }

    /* --- Notices --- */
    .woocommerce-notices-wrapper {
        margin-bottom: 20px;

        .woocommerce-message {

            &::before {
                top: 50%;
                translate: 0 -50%;
                color: var(--color-success);
            }

            &::after {
                display: none;
            }

            .custom-add-to-cart-notice {
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-top: 2px solid var(--color-success);
                background-color: #ECFDEC;
                padding: 16px 16px 16px 56px;

                .custom-notice-message {
                    font-weight: 700;
                    color: #54595F;

                    .button.wc-forward {
                        display: none;
                    }
                }

                .custom-notice-buttons {
                    display: flex;
                    gap: 12px;
                    
                    .button {
                        display: flex;
                        align-items: center;
                        float: none;
                        padding: 12px 18px;
                    }

                    .custom-notice-close {
                        font-size: 24px;
                        font-weight: 700;
                        padding-left: 12px;
                        margin-top: -8px;
                        opacity: 1;
                        cursor: pointer;
                        transition: .2s linear;

                        &:hover {
                            opacity: .7;
                            transition: .2s linear;
                        }
                    }
                }
            }
        }
    }

    /* --- Product --- */
    .product {

        .product-gallery-summary-container {
            display: flex;
            gap: 58px;
            padding-bottom: 64px;

            /* - Tablet- */
            @media only screen and (max-width: 992px) {
                flex-wrap: wrap;
                gap: 24px;
                padding-bottom: 132px;
            }
            /* - Mobile - */
            @media only screen and (max-width: 767px) {
                padding-bottom: 34px;
            }
        }
    
        /* --- Gallery --- */
        .woocommerce-product-gallery {
            float: none;
            width: 100%;
            max-width: 40%;
            margin-bottom: 0;
            overflow: hidden;

            /* - Tablet- */
            @media only screen and (max-width: 992px) {
                float: none;
                max-width: 70%;
            }
            /* - Mobile - */
            @media only screen and (max-width: 767px) {
                max-width: 100%;
            }

            .woocommerce-product-gallery__image {

                img {
                    width: 100%;
                    height: auto;
                }
            }
        }
    
        /* --- Summary --- */
        .summary {
            width: 100%;
            padding-right: 32px;

            /* - Tablet- */
            @media only screen and (max-width: 992px) {
                width: 100% !important;
            }

            .product-tag {
                font-size: 16px;
                line-height: 18px;
                font-weight: 700;
                color: var(--color-slick-yellow);
                text-transform: uppercase;
                margin-bottom: 20px;

                /* - Tablet- */
                @media only screen and (max-width: 992px) {
                    margin-bottom: 10px;
                }
            }
    
            .product_title {
                font-size: 42px;
                line-height: 46px;
                color: var(--color-dark);
                margin-bottom: 32px;

                /* - Tablet- */
                @media only screen and (max-width: 992px) {
                    font-size: 28px;
                    line-height: 32px;
                }
            }

            .woocommerce-product-details__description {
                margin: 24px 0 32px;

                p {
                    font-size: 18px;
                    line-height: 22px;
                    font-weight: 500;
                    color: #54595F;
                }

                p:last-child {
                    margin-bottom: 0;
                }
            }

            .product-size,
            .production-time,
            .product-categories,
            .product-material {
                color: #737A80;
                margin-bottom: 8px;
                
                span {
                    font-weight: 700;
                }
            }

            & > .price {
                display: none;
            }
        
            .price {
                & > p {
                    font-size: 17px;
                    line-height: 22px;
                    font-weight: 700;
                    color: var(--color-slick-yellow);
                    margin-bottom: 14px;
                }

                .woocommerce-Price-amount {
                    font-size: 26px;
                    line-height: 28px;
                    font-weight: 700;
                    color: var(--color-dark);
                }
            }
        
            .customize-button {
                font-size: 16px;
                line-height: 20px;
                font-weight: 700;
                color: var(--color-white);
                background-color: var(--color-slick-blue);
                border: none;
                cursor: pointer;
                width: 100%;
                padding: 16px;
                margin: 42px 0 0;
                transition: .2s linear;

                &:hover, 
                &:focus,
                &:active {
                    background-color: var(--color-slick-blue-darkened);
                }

                /* - Tablet- */
                @media only screen and (max-width: 992px) {
                    margin: 24px 0 0;
                }

                /* - Mobile - */
                @media only screen and (max-width: 767px) {
                    margin: 0;
                }
            }

            .cart {
                margin: 32px 0 0;

                .cart-quantity-price-container {
                    display: flex; 
                    justify-content: space-between;
                    align-items: center;
                }

                .cart-quantity-container {

                    & > p {
                        font-size: 17px;
                        line-height: 22px;
                        font-weight: 700;
                        color: var(--color-black);
                        margin-bottom: 14px;
                    }
                }
            }

            &.has-addons {
                .cart.variations_form {
                    .single_variation_wrap {

                        .woocommerce-variation.single_variation {
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            transform: translateY(370%);
                        }

                        .woocommerce-variation-add-to-cart {
                            .quantity {
                                display: flex !important;
                                margin: 62px 0 0;

                                &::before {
                                    content: 'Quantity';
                                    position: absolute;
                                    top: -14px;
                                    left: 0;
                                    transform: translateY(-100%);
                                    font-size: 18px;
                                    line-height: 22px;
                                    font-weight: 700;
                                    color: var(--color-black);
                                }
                            }
                        }
                    }
                }
            }

            .cart.variations_form {
                position: relative;
                display: flex;
                justify-content: space-between;
                align-items: flex-end;

                .variations {
                    background-color: transparent;
                    margin-bottom: 0;

                    tbody {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 20px;
                    }

                    .label {
                        display: block;
                        width: 100%;
                        font-size: 18px;
                        line-height: 22px;
                        font-weight: 700;
                        color: var(--color-black);
                        text-align: left;
                        background: none;
                        padding: 0;
                        margin-bottom: 14px;
                    }

                    .value {
                        background-color: transparent;
                        padding: 0;

                        select {
                            font-weight: 700;
                            min-width: 0;
                            max-width: 200px;
                            padding: 8px 10px;
                            cursor: pointer;

                            option {
                                cursor: pointer;
                            }
                        }

                        .reset_variations {
                            display: none !important;
                        }
                    }
                }
    
                .single_variation_wrap {
                    
                    .woocommerce-variation-description {
                        display: none;
                    }

                    .woocommerce-variation-price {
                        position: relative;
                        font-size: 26px;
                        line-height: 28px;
                        font-weight: 700;
                        color: var(--color-dark);

                        &::before {
                            content: 'Subtotal';
                            position: absolute;
                            top: -14px;
                            left: 0;
                            transform: translateY(-100%);
                            font-size: 18px;
                            line-height: 22px;
                            font-weight: 700;
                            color: var(--color-slick-yellow);
                        }
                    }

                    .woocommerce-variation-add-to-cart {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        transform: translateY(100%);
                        width: 100%;

                        .quantity {
                            display: none !important;
                        }

                        /* - Mobile - */
                        @media only screen and (max-width: 767px) {
                            position: fixed;
                            transform: translateY(0);
                            background-color: var(--color-white);
                            box-shadow: 0 0 8px 2px rgba(var(--color-black), .7);
                            padding: 12px 16px;
                            z-index: 10;
                        }

                        &.woocommerce-variation-add-to-cart-disabled {

                            &::after {
                                content: 'Choose a quantity, then click button to add to cart.';
                                position: absolute;
                                bottom: -8px;
                                transform: translateY(100%);
                                display: block;
                                width: 100%;
                                font-size: 16px;
                                color: #15212C;
                                text-align: center;
                                background-color: #FFFDD0;
                                padding: 10px;

                                /* - Mobile - */
                                @media only screen and (max-width: 767px) {
                                    display: none;
                                }
                            }
                        }
    
                        .single_add_to_cart_button {
                            float: right;
                            background-color: var(--color-slick-yellow);

                            &:hover,
                            &:focus,
                            &:active {
                                background-color: var(--color-slick-yellow-darkened); 
                                transition: .2s linear;
                            } 
                        }
                    }
                }
            }

            .single_add_to_cart_button {
                width: 100%;
                font-size: 20px;
                line-height: 22px;
                font-weight: 600;
                color: var(--color-text-black);
                text-transform: uppercase;
                background-color: var(--color-slick-yellow);
                padding: 18px;
                margin-top: 48px;
                transition: .2s linear;

                &:hover,
                &:focus,
                &:active {
                    background-color: var(--color-slick-yellow-darkened); 
                    transition: .2s linear;
                } 
    
                &.disabled {
                    background-color: #FFD7EC;
                    transition: .2s linear;
                }
            }
        }

        /* --- Summary (Customizable Products) --- */
        .product-gallery-summary-container.customizable-product {

            .summary {

                .single_add_to_cart_button {
                    display: none;
                }

                .cart.variations_form {
                    .single_variation_wrap {
                        .woocommerce-variation-add-to-cart {
                            &.woocommerce-variation-add-to-cart-disabled {
    
                                &::after {
                                    content: 'Choose a quantity, then click button to customize.';
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    /* --- Product (Downloadable) --- */
    .product.downloadable {
        .summary {

            .woocommerce-product-details__description {

                button {
                    appearance: none;
                    font-weight: 500;
                    color: var(--color-white);
                    border: none;
                    border-radius: 0;
                    background: none;
                    background-color: var(--color-slick-yellow);
                    background-image: none;
                    width: 182px;
                    height: 62px;
                    padding: 0;
                    margin: 32px 0;
                    transition: .3s linear;
        
                    &:hover,
                    &:focus {
                        color: #FF94CC;
                        background-color: #BD2574;
                        transition: .3s linear;
                    } 
        
                    &:active {
                        background-color: #8A1B55;
                        transition: .3s linear;
                    }
        
                    &.disabled {
                        background-color: #FFD7EC;
                        transition: .3s linear;
                    }

                    a {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }

    /* --- Related Products --- */
    @media (min-width: 767px) {
        .swiper,
        .swipper-wrapper,
        .swiper-slide {
            all: unset;
        }
    }

    .related.products {
        display: block;
        padding: 42px 0;

        & > h2 {
            font-size: 32px;
            text-transform: uppercase;
            margin-bottom: 24px;
        }
        
        .products {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: auto;
            gap: 32px;

            &::before,
            &::after {
                content: none;
            }

            /* - Mobile - */
            @media only screen and (max-width: 767px) {
                display: flex;
                gap: 0;
            }

            .product {
                position: relative;
                width: 100%;
                margin: 0;

                .product-image {
                    width: 100%;
                    height: 276px;
                    border-radius: 16px;
                    overflow: hidden;
                    margin-bottom: 12px;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }
                }

                .woocommerce-loop-product__link {
                    position: absolute;
                    inset: 0;

                    &:hover {
                        text-decoration: none;

                        & ~ .product-body {
                            
                            .button {
                                background-color: var(--color-dark);
                                border: 1px solid var(--color-dark);
                                transition: .2s linear;
                            }
                        }
                    }
                }
    
                .woocommerce-loop-product__title {
                    font-size: 22px;
                    line-height: 24px;
                    color: var(--color-black);
                    padding: 0;
                }

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

                    .price {
                        font-size: 16px;
                        line-height: 20px;
                        font-weight: 500;
                        color: #737A80;
                        margin-bottom: 0;

                        .woocommerce-Price-amount {
                            display: block;

                            bdi {
                                font-size: 20px;
                                line-height: 24px;
                                font-weight: 600;
                            }
                        }
                    }

                    .button {
                        font-size: 12px;
                        line-height: 14px;
                        color: var(--color-white);
                        background-color: var(--color-black);
                        border: 1px solid var(--color-black);
                        padding: 16px 22px;
                        margin-top: 0;
                        transition: .2s linear;
                    }
                }
            }   
        }
    }
}