// =============================================================================
// PRODUCT VIEW (CSS)
// =============================================================================


// Product view layout
// -----------------------------------------------------------------------------

.productView {
    @include grid-row($behavior: "nest");

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: -(spacing("base"));
    margin-right: -(spacing("base"));

    @include breakpoint("medium") {
        display: block;
    }

    .modal & {
        padding-bottom: 0;
        padding-top: 0;
    }
}

.productView--quickView {
    .socialLinks-item--print {
        display: none;
    }
}

.productView-images {
    @include grid-column(12);
    padding-left: spacing("base");
    padding-right: spacing("base");

    @include breakpoint("medium") {
        width: grid-calc(6, $total-columns);
    }
}

.productView-details {
    @include grid-column(12);
    padding-left: spacing("base");
    padding-right: spacing("base");

    @include breakpoint("medium") {
        clear: right;
        float: right;
        width: grid-calc(6, $total-columns);
    }

    .productView--quickView & {
        position: relative;
    }

    &.product-data {
        order: -1;
    }
}

.productView-description {
    @include grid-column(12);
    padding-left: spacing("base");
    padding-right: spacing("base");
    position: relative;
    z-index: 1;

    .productView-title {
        border-bottom: container("border");
        margin-bottom: spacing("base");
        padding-left: spacing("base");
        padding-right: spacing("base");
    }

    .productView-description {
        @include breakpoint("medium") {
            clear: both;
            float: none;
            width: 100%;
        }
    }
}
