/* ==========================================================================
   WooCommerce Single Product Page styles - begin
   ========================================================================== */
.qodef-woo-single-page {

    .product {
        @include qodefRelativeHolderLayout();
        float: none;
        max-width: 100%;
        margin: 0 0 20px;

        &.qodef-woo-single-thumb-on-left-side {

            .qodef-single-product-content {

                .images {

                    figure {
                        margin: 0;
                    }

                    a {

                        &.woocommerce-main-image {
                            width: calc(100% - 120px);
                            margin: 0 0 0 120px;
                        }
                    }

                    .thumbnails {
                        position: absolute;
                        top: 0;
                        left: 0;
                        display: inline-block;
                        vertical-align: top;
                        width: 100px;
                        height: 100%;
                        margin: 0;

                        a {
                            float: none;
                            width: 100%;
                            margin: 0;
                            padding: 20px 0 0;

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

                    figure {
                        width: 100%;
                        margin: 0;
                    }

                    .woocommerce-product-gallery__image {

                        &:first-child {
                            padding: 0 0 0 120px;
                        }
                    }

                    &.woocommerce-product-gallery--with-images {

                        .woocommerce-product-gallery__image {

                            &:not(:first-child) {
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100px;
                                height: 100px;
                                padding: 0;

                                a {
                                    height: 100%;

                                    img {
                                        height: 100%;
                                    }
                                }
                            }

                            $thumbnail_numbers: (2, 3, 4, 5, 6, 7, 8, 9);
                            @for $i from 0 to length($thumbnail_numbers) {
                                $thumbnail_number_value: nth($thumbnail_numbers, $i+1);

                                &:nth-child(#{$thumbnail_number_value}#{n}) {
                                    $topPos: (100 * $i + 20 * $i)#{px};

                                    top: $topPos;
                                }
                            }
                        }
                    }
                }
            }
        }

        .qodef-single-product-content {
            @include qodefRelativeHolderLayout();
            clear: both;
            margin: 0 0 20px;

            .images {
                position: relative;
                display: inline-block;
                vertical-align: middle;
                width: 44%;
                margin: 0;
                padding: 0 29px 0 0;
                float: left;
                box-sizing: border-box;

                a {
                    @include qodefRelativeHolderLayout();

                    img {
                        position: relative;
                        width: 100%;
                        display: block;
                    }
                }

                .thumbnails {
                    margin: 0 -7px;

                    a {
                        margin: 14px 0 0;
                        padding: 0 7px;
                        box-sizing: border-box;
                    }

                    $thumb_columns_label: ('columns-2', 'columns-3', 'columns-4');
                    @for $i from 0 to length($thumb_columns_label) {
                        &.#{nth($thumb_columns_label, $i+1)} {
                            $column_width: 100%/($i+2);

                            a {
                                float: left;
                                width: $column_width;
                            }
                        }
                    }
                }

                figure {
                    position: relative;
                    display: inline-block;
                    vertical-align: top;
                    margin: 0 -10px;
                }

                .woocommerce-product-gallery__image {
                    position: relative;
                    display: inline-block;
                    vertical-align: top;
                    margin: 0;
                    padding: 0 10px;
                    box-sizing: border-box;

                    &:first-child {
                        width: 100%;
                    }
                }

                &.woocommerce-product-gallery--with-images {

                    .woocommerce-product-gallery__image {

                        &:not(:first-child) {
                            float: left;
                            padding-top: 20px;
                        }
                    }
                }

                $thumb_3_columns_label: ('columns-2', 'columns-3', 'columns-4');
                @for $i from 0 to length($thumb_3_columns_label) {
                    &.woocommerce-product-gallery--#{nth($thumb_3_columns_label, $i+1)} {
                        $column_width: 100%/($i+2);

                        .woocommerce-product-gallery__image {

                            &:not(:first-child) {
                                width: $column_width;
                            }
                        }
                    }
                }
            }
        }

        .qodef-single-product-summary {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            width: 49%;
            padding: 0 0 0 24px;
            float: left;
            @include qodefBoxSizing(border-box);
        }

        &.product-type-external {
            .single_add_to_cart_button {
                margin-top: 19px;
            }
        }
    }

    .woocommerce-tabs {
        @include qodefRelativeHolderLayout();
        margin: 30px 0 0;

        h2 {
            display: none;
        }

        ul.tabs {
            @include qodefRelativeHolderLayout();
            list-style: none;
            margin: 0;
            padding: 0;
            clear: both;
            border-bottom: 1px solid $default-heading-color;

            > li {
                position: relative;
                display: inline-block;
                vertical-align: middle;
                float: left;
                top: 1px; /* For overlapping parent border bottom */

                a {
                    position: relative;
                    display: block;
                    padding: 11px 27px;
                    color: #444444;
                    font-size: 17px;
                    line-height: 25px;
                    font-weight: 700;
                    @include qodefBoxSizing(border-box);
                    @include qodefTransition(color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out);
                }

                &:hover,
                &.active {

                    a {
                        color: #fff;
                        background-color: $default-heading-color;
                    }
                }
            }
        }

        .entry-content {
            padding: 30px 0;
            &#tab-description p {
                margin: 0;
            }
        }

        table {
            margin: 0 0 20px;

            tr, th {
                border: 0;
            }

            td, th {
                padding: 3px 0;
                vertical-align: middle;
                text-align: left;
            }

            th {
                color: $default-heading-color;
                font-weight: 400;
                width: 1%;
                padding: 0 10px 0 0;
            }

            td {
                width: 99%;
            }
        }

        #reviews {

            ol.commentlist {
                list-style: none;

	            li {
		            padding-top: 10px;

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

                .comment_container {
                    @include qodefRelativeHolderLayout();

                    img {
                        float: left;
                        width: 60px;
                    }

                    .comment-text {
                        padding: 0 0 0 80px;

                        .star-rating {
                            margin: 0;
                        }

                        p {
	                        display: block;
	                        margin: 5px 0 0;
                        }

                        strong {
                            color: #000;
                        }
                    }
                }
            }

            .comment-respond {
                margin-top: 15px;

                .comment-reply-title {
                    margin: 0 0 10px;
                    font-size: 16px;
                    font-weight: 700;
                }

                .stars {
                    height: 13px;
                    margin: 0;
                }

                .comment-form-rating .stars span {
                    width: 90px;
                    height: 13px;
                    position: relative;
                    float: left;

                    &:after {
                        content: "\e031\e031\e031\e031\e031";
                        position: absolute;
                        top: 0;
                        left: 0;
                        font-family: 'ElegantIcons', serif;
                        color: $default-heading-color;
                        letter-spacing: 4px;
                        font-size: 13px;
                    }

                    a {
                        float: left;
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 13px;
                        height: 0;
                        padding-top: 23px;
                        overflow: hidden;

                        &:after {
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 0;
                            font-family: 'ElegantIcons', serif;
                            color: $default-heading-color;
                            letter-spacing: 4px;
                            font-size: 13px;
                            opacity: 0;
                            z-index: 1;
                            -webkit-transition: opacity 0.15s ease-out;
                            transition: opacity 0.15s ease-out;
                        }
                    }

                    a.star-1 {
                        width: 18px;
                        z-index: 10;
                        &:after {
                            content: "\e033";
                        }
                        &.active:after,
                        &:hover:after,
                        &:focus:after {
                            opacity: 1;
                        }
                    }
                    a.star-2 {
                        width: 36px;
                        z-index: 9;
                        &:after {
                            content: "\e033\e033";
                        }
                        &.active:after,
                        &:hover:after,
                        &:focus:after {
                            opacity: 1;
                        }
                    }
                    a.star-3 {
                        width: 54px;
                        z-index: 8;
                        &:after {
                            content: "\e033\e033\e033";
                        }
                        &.active:after,
                        &:hover:after,
                        &:focus:after {
                            opacity: 1;
                        }
                    }
                    a.star-4 {
                        width: 72px;
                        z-index: 7;
                        &:after {
                            content: "\e033\e033\e033\e033";
                        }
                        &.active:after,
                        &:hover:after,
                        &:focus:after {
                            opacity: 1;
                        }
                    }
                    a.star-5 {
                        width: 90px;
                        z-index: 6;
                        &:after {
                            content: "\e033\e033\e033\e033\e033";
                        }
                        &.active:after,
                        &:hover:after,
                        &:focus:after {
                            opacity: 1;
                        }
                    }
                }

	            .comment-form-comment label {
		            display: block;
		            margin: 0 0 10px;
	            }
            }
        }
    }

    .related.products,
    .upsells.products {

	    > h2 {
		    display: block;
            margin: 0;
            font-size: 20px;
	    }
    }

	.related.products {
		margin: 117px 0 0;
	}

	.upsells.products {
		margin: 12px 0 40px;
		border-bottom: 1px solid #dadada;
	}

    ul.products > .product {
        margin: 25px 0 18px 0;
    }
}

.qodef-single-product-summary {

    .qodef-single-product-title {
        display: block;
        margin: 0;
	    line-height: 1em;
    }

    .woocommerce-product-rating {
        @include qodefRelativeHolderLayout();
        line-height: 1;
        margin: 15px 0 0;

	    .woocommerce-review-link {
		    display: none;
		    vertical-align: middle;
	    }
    }

    .price {
        position: relative;
        display: block;
        font-size: 20px;
        line-height: 1;
        font-weight: 800;
        margin: 32px 0 0;
        color: $default-heading-color;
        border-top: 1px solid #dadada;
        padding: 34px 0 0;

        * {
            font-size: inherit;
            line-height: inherit;
        }

        del {
            color: #969696;
            font-size: 19px;
            font-weight: 700;
	        margin: 0 20px 0 0;
        }

        ins {
            text-decoration: none;
        }
    }

    div[itemprop="description"] p {
        @include qodefRelativeHolderLayout();
        margin: 30px 0 0;
    }

    form.cart {
        @include qodefRelativeHolderLayout();
        margin: 29px 0 0;

        .qodef-quantity-buttons {
            margin: 0 26px 0 0;
        }
    }

    .product_meta {
        margin: 34px 0 0;

        .sku_wrapper .sku,
        .posted_in a:first-child,
        .tagged_as a:first-child {
            margin-left: 7px;
        }

        > span {
            display: block;
            margin: 0 0 5px 0;
            font-size: 20px;
            color: $default-heading-color;
            font-weight: 900;

	        * {
		        font-weight: 700;
                color: #797979;
	        }

            a {
                color: #797979;

                &:hover {
                    color: $first-main-color;
                }
            }
        }
    }

    .qodef-woo-social-share-holder {
        @include qodefRelativeHolderLayout();
        margin: 20px 0 0;

        > * {
            display: table-cell;
            vertical-align: top;
        }

        > span {
            color: $default-heading-color;
            font-weight: 400;
        }
        .qodef-social-share-holder.qodef-list li {
            margin-right: 30px;
        }
    }

    p.stock.out-of-stock,
    p.stock.in-stock {
        color: $default-heading-color;
        font-weight: 600;
        margin: 18px 0 0;
    }
}
/* ==========================================================================
   WooCommerce Single Product Page styles - end
   ========================================================================== */