@import '../helpers/helpers-pdp-critical/helpers-critical-pdp';
$gray: #ccc;

// sass-lint:disable no-vendor-prefixes, no-duplicate-properties
.pdp {
  @include media-breakpoint-only(md) {
    grid-template-columns: 50% 50%;
    //grid-template-rows: auto auto auto 1fr auto auto;
    grid-template-rows: auto auto 1fr auto auto;
  }

  @include media-breakpoint-up(md) {
    display: grid;
  }

  @include media-breakpoint-only(lg) {
    grid-template-columns: 310px 310px 310px;
  }

  @include media-breakpoint-up(lg) {
    grid-template-rows: auto auto auto auto 1fr;
  }

  // set correct column width for xl breakpoint
  @include media-breakpoint-up(xl) {
    grid-template-columns: 370px 370px 370px;
  }

  &__title {
    padding-bottom: 20px;

    @include media-breakpoint-up(md) {
      grid-column: 1 / span 2;
      grid-row-start: 1;
      padding-right: 10px;
    }
  }

  &__product-code {
    padding-bottom: 20px;

    @include media-breakpoint-only(md) {
      padding-right: 15px;
    }

    @include media-breakpoint-up(md) {
      grid-column-start: 1;
      grid-row-start: 2;
    }

    @include media-breakpoint-up(lg) {
      padding-right: 20px;
    }
  }

  &__reviews_small {
    padding-bottom: 20px;

    @include media-breakpoint-only(md) {
      padding-left: 15px;
    }

    @include media-breakpoint-up(md) {
      grid-column-start: 2;
      grid-row-start: 2;
    }

    @include media-breakpoint-up(lg) {
      padding-left: 10px;
      padding-right: 10px;
    }

    .pr-snippet-stars-reco-reco {
      display: none;
    }
  }

  &__reviews-link-wrap {
    display: inline-block;
    font-weight: 500;
    line-height: 22px;
    white-space: nowrap;

    & + & {
      border-left: 1px solid $gray;
      padding-left: 14px;
      margin-left: 14px;
    }
  }

  &__gallery {
    @include media-breakpoint-down(sm) {
      padding-bottom: 30px;
      min-height: 432px;
    }

    @include media-breakpoint-only(md) {
      padding-right: 15px;
      padding-bottom: 20px;
    }

    @include media-breakpoint-up(md) {
      grid-column-start: 1;
      grid-row-start: 3;
    }

    @include media-breakpoint-up(lg) {
      padding-right: 20px;
      padding-bottom: 40px;
    }
  }

  &__description {
    padding-bottom: 40px;

    @include media-breakpoint-only(md) {
      grid-column-start: 1;
      grid-row-start: 4;
      padding-right: 15px;
    }

    @include media-breakpoint-up(lg) {
      grid-column-start: 2;
      grid-row-start: 3;
      padding-left: 10px;
      padding-right: 10px;
    }
  }

  &__reviews {
    @include media-breakpoint-only(md) {
      grid-row-start: 6;
    }

    @include media-breakpoint-up(md) {
      grid-column: 1 / span 2;
    }

    @include media-breakpoint-up(lg) {
      grid-row-start: 5;
      padding-right: 10px;
    }

    .pr-review-snapshot-block-container {

      .pr-review-snapshot-block-pros {
        display: none;
      }

      .pr-review-snapshot-block-cons {
        display: none;
      }

      .pr-review-snapshot-msqs {
        display: none;
      }
    }
  }

  &__aside {
    padding-bottom: 40px;

    @include media-breakpoint-only(md) {
      grid-column-start: 2;
      grid-row: 3 / span 2;
      padding-left: 15px;
    }

    @include media-breakpoint-up(lg) {
      grid-column-start: 3;
      grid-row: 1 / span 5;
      padding-left: 20px;
    }
  }

  // Semantically it's h1 but looks like h3
  &__heading {
    @include heading-3;
    text-align: left;
    margin-bottom: 0;
    text-transform: none;
  }

  &__badges {
    @include badges;
  }

  &__badge {
    @include badge;
  }
}