//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .catalog-product-view {
        .pdp-page-top {
            .lib-clearfix();
            margin-bottom: 30px;
        }
        .label {
            color: @djo-gray;
        }
        .product-info-main .product.attribute.overview {
            margin: 8px 0 15px 0;
            .promo {
                .lib-font-size(19);
            }
        }
        .product-info-main .product-add-form {
            margin-bottom: 12px;
            padding: 0;
            .fieldset {
                > .field.required {
                    > .label {
                        &::after {
                            content: none;
                        }
                        > span::after {
                            .lib-font-size(14);
                            color: #e02b27;
                            content: '*';
                            margin-left: 5.5px;
                        }
                    }
                }
            }
            .fieldset {
                > .fields {
                    > .field.required {
                        > .label {
                            &::after {
                                content: none;
                            }
                            > span::after {
                                .lib-font-size(14);
                                color: #e02b27;
                                content: '*';
                                margin-left: 5.5px;
                            }
                        }
                    }
                }
            }
            .fieldset {
                > .field._required {
                    > .label {
                        &::after {
                            content: none;
                        }
                        > span::after {
                            .lib-font-size(14);
                            color: #e02b27;
                            content: '*';
                            margin-left: 5.5px;
                        }
                    }
                }
            }
            .fieldset {
                > .fields {
                    > .field._required {
                        > .label {
                            &::after {
                                content: none;
                            }
                            > span::after {
                                .lib-font-size(14);
                                color: #e02b27;
                                content: '*';
                                margin-left: 5.5px;
                            }
                        }
                    }
                }
            }
            .product-options-wrapper {
                .fieldset {
                    margin: 0;
                    .field {
                        .label {
                            .lib-font-size(16);
                            color: @djo-gray;
                            font-weight: 700;
                            padding: 0;
                            text-transform: uppercase;
                        }
                        .input-text {
                            .lib-font-size(16);
                            border-color: #b4b4b4;
                            border-radius: 30px;
                            color: @djo-gray;
                        }
                    }
                }
                .form:not(.patientinfo):not(.inserts) {
                    .fieldset {
                        .field {
                            margin: 0 0 12px;
                        }
                    }
                }
            }
        }
        .product.info.detailed {
            margin-top: 30px;
        }
        .readypulse-section .contained,
        .block.upsell,
        .block.related {
            border-top: 1px solid #c9c9c9;
            padding-top: 52px;
        }
        .box-tocart .paypal:first-of-type {
            margin-top: 0;
        }
    }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .catalog-product-view {
        .product-info-main {
            .product-options-wrapper {
                .fieldset {
                    > .field {
                        width: 100%;
                        .field {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .catalog-product-view {
        .pdp-page-top.contained {
            padding-left: 0;
            padding-right: 0;
        }
        .product {
            &.info {
                margin-bottom: 0;
            }
        }
        .review-add .block-content {
            width: 100% !important;
        }
        .readypulse-section,
        .block.upsell,
        .block.related {
            padding-top: 35px;
        }
        .section-separated {
            margin-top: 0;
            &:first-child {
                border-top: 0;
            }
        }
        .product.media {
            .product-info-price {
                .product-options-wrapper {
                    .field:not(.date) {
                        > .control {
                            width: 100%;
                        }
                    }
                    .fieldset {
                        .field {
                            width: 100%;
                        }
                    }
                }
            }
        }
        .price-review-container {
            text-align: center;
            .product-add-form {
                max-width: 75%;
                .patientinfo {
                    .fieldset {
                        text-align: center;
                        .field {
                            margin-bottom: 12px;
                            text-align: left;
                        }
                    }
                }
                .fieldset {
                    text-align: left;
                    .field {
                        text-align: left;
                    }
                }
            }
        }
        .product-options-wrapper {
            .fieldset > .field, .fieldset > {
                text-align: center;
                .field {
                    display: inline-block;
                    margin-bottom: 12px;
                    width: 100%;
                    .label {
                        float: left;
                    }
                }
                .field:not(.date) {
                    > .control {
                        width: 100%;
                    }
                }
            }
            .form:last-child {
                .fieldset:last-child > .field, .fieldset:last-child > {
                    margin-bottom: 0;
                }
            }
        }
    }
    .product.data.items {
        .item.title {
            a {
                background-color: #e7e7e6;
                &::after {
                    .lib-font-size(38);
                    content: '+';
                    font-family: @font-family__base;
                    font-weight: 700;
                    top: 0;
                    right: 10px;
                }
            }
            &.active {
                a {
                    border-bottom: 0;
                    &::after {
                        content: '\2013';
                    }
                }
            }
            &.last {
                a {
                    border-bottom: 1px solid #cccccc;
                }
            }
        }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .catalog-product-view {
        .media {
            .product.page-title-wrapper + .price-review-container {
                margin-top: 20px;
            }
            .price-review-container {
                border-top: 1px solid #dbdfe1;
                padding-top: 20px;
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .product.data.items {
        text-align: center;
    }
    .product.data.items > .item.title {
        float: none;
        display: inline-block;
    }
    .product.data.items > .item.content {
        border: 0;
        border-top: 1px solid #cccccc;
        padding: 35px 0 0;
        text-align: left;
    }
    .catalog-product-view {
        .page-main {
            max-width: none;
            padding-left: 0;
            padding-right: 0;
        }
        .product {
            .gallery-placeholder._block-content-loading {
                position:relative;
                left:56px;
                top:3px;
            }
            &.info {
                margin-bottom: 50px;
                &.detailed {
                    .item-title-container {
                        ~ .data.item.content {
                            margin-top: 0;
                        }
                        .slick-arrow {
                            background-color: transparent;
                            border: none;
                            cursor: default;
                            font-size: 0;
                            height: 100%;
                            padding: 0;
                            position: absolute;
                            top: 0;
                            width: 5%;
                            z-index: 1;
                            &.slick-prev {
                                left: 0;
                            }
                            &.slick-next {
                                right: 0;
                            }
                        }
                        // @DO - copy over direct children (>) styles to .item.title
                        // when .item-title-container comes between them and .product.data.items
                        .item.title {
                            box-sizing: border-box;
                            display: inline-block;
                            float: none;
                            margin-right: -1px;
                            width: auto;
                            .switch {
                                display: block;
                                height: 44px;
                                line-height: 44px;
                                padding-bottom: 2px;
                                text-decoration: none;
                                z-index: 2;
                            }
                        }
                    }
                }
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m + 1) {
    .catalog-product-view {
        .page.messages {
            &:extend(.page-main);
        }
        &.page-layout-1column {
            .product-info-main {
                margin-top: 8px;
                width: 38%;
            }
            .product.media {
                width: 57%;
            }
        }
        .product-info-main {
            .product-add-form {
                max-width: none;
                .product-options-wrapper {
                    .fieldset {
                        .field:not(.date) {
                            width: 80%;
                            > .control {
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
        .product-options-wrapper {
            .patientinfo {
                font-size: 0;
                &:not(:last-child) {
                    margin-bottom: 8px;
                    margin-top: 12px;
                }
                .fieldset.patient_info {
                    .patient-name:not(.date),
                    .patient-purchase-order:not(.date) {
                        margin-bottom: 0;
                        width: 100%;
                    }
                }
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .catalog-product-view {
        .product-options-wrapper {
            .patientinfo {
                .fieldset.patient_info {
                    width: 50%;
                }
            }
        }
    }
}