@heading-number-color: #fbdf60;
@color-red: #e23333;
@font-family-baskerville: "Libre Baskerville";
@heading-color: #ff5050;
@promobanner-bg-color: #f6f6f6;
@btn-link-color: #bf2828;
@price-old-color: #adadad;
@price-special-color: #ff5050;
@arrow-hover-color: #bf2828;
@nav-border-color: #f6f6f8;
@owl-nav-color: #c2c2c2;
@dot-bg-color: #e9f0f3;

& when (@media-common =true) {
  .customer-account-create {
    .create {
      .choice {
        overflow: inherit;

        label {
          display: inline-block
        }
      }
    }
  }

  .banner-auto-parts {
    h2.big-text {
      color: @color-white;
      font-size: 56px;
      line-height: 64px;
      margin-bottom: 9px;
    }

    h4 {
      font-weight: 600;
      color: @color-white;
      text-transform: uppercase;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: 0.05em;
    }

    .sub-number {
      .lib-vendor-prefix-display(flex);
      gap: 24px;
      margin-top: 15px;
    }

    h5 {
      font-size: 26px;
      color: @heading-number-color;
      font-weight: bold;
    }

    span {
      font-size: 11px;
      color: @color-white;
      display: block;
      margin-right: 20px;
      margin-top: -5px;
      line-height: 24px;
      letter-spacing: 0.05em;
    }

    .inner-text {
      a.btn-red {
        background: @color-red;
        border-radius: 100px;
        border: none;
        font-size: 16px;
        padding: 0 15px;
        color: @color-white;
        margin-top: 55px;
        line-height: 40px;

        &:hover {
          opacity: 0.9;
        }
      }
    }
  }

  .section-builder.section-common {
    .panel-heading {
      text-align: center;

      h2 {
        font-weight: 600;
        font-size: 24px;
        line-height: 36px;
        text-transform: uppercase;
        position: relative;
        display: inline-block;
      }

      .panel-note {
        font-family: @font-family-baskerville;
        font-style: italic;
        font-weight: normal;
        font-size: 14px;
        line-height: 24px;
        color: @heading-color;
        letter-spacing: 0.5px;
      }
    }

    .motor-banner,
    .sale-banner {
      .promobanner {
        .text {
          padding: 36px;
          bottom: 0;

          .btn-red {
            position: absolute;
            bottom: 36px;
            background-color: @color-red;
            color: @color-white;
            font-size: 16px;
            padding: 0 24px;
            border: none;
            line-height: 40px;
            min-width: 136px;

            &:hover {
              opacity: 0.9;
            }
          }

          h3,
          h4,
          h2 {
            font-weight: 700;
          }
        }
      }
    }

    .motor-banner {
      .banner-text {
        p {
          color: @color-white;
          font-size: 16px;
          line-height: 24px;
          letter-spacing: 0.06em;
          margin-top: 18px;
        }
      }
    }

    .sale-banner {
      .promobanner {
        .text {
          padding-top: 28px;

          p {
            font-size: 14px;
            line-height: 18.5px;
            color: @color-white;
            font-weight: 500;
          }
        }
      }
    }

    .category-wrapper {
      margin-bottom: 30px;

      .promobanner-block {
        .promobanner {
          background-color: @promobanner-bg-color;
          .lib-vendor-prefix-display(flex);
          justify-content: space-between;
          align-items: center;
          padding: 16px 24px;
          background-position: 75% 50%;

          a {
            img {
              max-width: 150px;
              background-color: @promobanner-bg-color;
            }

            &:hover {
              opacity: 0.8;
            }
          }

          .text.top-left {
            position: absolute;
            padding: 0;
            left: 0;
            bottom: 0;
          }
        }
      }

      .category-content {
        h3 {
          font-weight: 600;
          font-size: 16px;
          line-height: 36px;
          letter-spacing: 0.05em;
          text-transform: uppercase;
          color: @color-black;
          text-align: left;
          position: absolute;
          top: 24px;
          left: 24px;
        }

        a.btn-link.text-red {
          color: @btn-link-color;
          position: absolute;
          bottom: 52px;
          left: 37px;
          font-size: 16px;
          font-weight: 500;
          line-height: 24px;

          &:after {
            .lib-css(content, url("@{baseDir}images/icon-arrow.svg"));
            width: 13px;
            height: 8px;
            margin-right: 8px;
          }
        }
      }
    }

    .mgs-owl-carousel.owl-carousel {
      .owl-nav {
        >div {
          width: 40px;
          height: 40px;
          background-color: @color-white;
          border: 1px solid @nav-border-color;
          color: @owl-nav-color;

          &:hover {
            background: @arrow-hover-color;
            color: @color-white;
            border: 1px solid @nav-border-color;
          }
        }

        div.owl-prev {
            right: 0;
        }

        div {
          span {
            em {
              font-size: 20px;
              top: -3px;
            }
          }
        }
      }
    }
  }

  .section-slider {
    .mgs-owl-carousel.owl-carousel {
      .owl-dots {
        .owl-dot {
          span {
            background-color: @dot-bg-color;
          }

          &:hover {
            span {
              background: @color-red;
            }
          }
        }

        .owl-dot.active {
          span {
            background: @color-red;
          }
        }
      }
    }
  }

  .home-policy.section-builder-full {
    .panel-block-row {
      margin: 0;

      .icon-service {
        .icon {
          color: @color-white;
          font-size: 64px;

          em {
            width: 64px;
            display: block;
            position: relative;

            &:before {
              position: absolute;
              top: 50%;
              right: 50%;
              .lib-transform(translate(-50%, -50%));
            }
          }
        }

        h6 {
          color: @color-white;
          font-size: 16px;
          line-height: 24px;
        }

        p {
          color: @color-white;
          max-width: 210px;
        }
      }
    }
  }

  .section-motor-sale {
    .promobanner {
      >a {
        >img {
          min-height: 290px;
          object-fit: cover;
        }
      }
    }
  }

  .page-title-wrapper {
    h1.page-title+.breadcrumbs {
      background-color: transparent;
      margin: 0;

      a,
      li {
        color: #fff;
        ;
      }
    }

    &.ttbg-color,
    &.ttbg-image {
      margin-bottom: 80px;
    }

    &.ttbg-color {
      &:before {
        display: none;
      }
    }
  }
}

.page-products,
.blog-post-list {
  .page-title-wrapper {

    &.ttbg-color,
    &.ttbg-image {
      margin-bottom: 30px;
    }
  }
}

.brand-brand-view {
  .page-title-wrapper {

    &.ttbg-color,
    &.ttbg-image {
      margin-bottom: 80px;
    }
  }
}

.layout_type2 {

  .page-title-wrapper.ttbg-color,
  .page-title-wrapper.ttbg-image {
    margin-bottom: 0;
  }
}

.media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__m) {
  .section-builder.section-common {
    margin-top: 48px;

    .panel-heading {
      margin-bottom: 24px;
    }
  }

  .banner-auto-parts {
    h2.big-text {
      font-size: 26px;
      line-height: 48px;
      margin-bottom: 0;

      br {
        display: none;
      }
    }

    .inner-text {
      a.btn-red {
        margin-top: 20px;
      }
    }

    h4 {
      font-size: 12px;
    }

    .sub-number {
      margin-top: 10px;
    }
  }

  .home-policy.section-builder-full {
    padding: 40px 0;
  }

  .section-builder.section-blog {
    margin-bottom: 108px;

    .mgs-owl-carousel {
      .owl-dots {
        display: none;
      }

      .owl-nav {
        div.owl-prev {
            right: -22px;
        }

        div.owl-next {
            left: -22px;
        }
      }
    }

    .latest-post-grid-block {
      .post-content {
        h3.title-blog {
          line-height: 24px;
          display: block;
          margin-top: 24px;
        }
      }

      .mgs-post {
        .post-create-date {
          font-family: @font-family-baskerville;
          font-style: italic;
          font-weight: normal;
          font-size: 14px;
          line-height: 24px;
          letter-spacing: 0.05em;
          color: @price-old-color;
          margin-bottom: 0;

          span {
            color: @price-old-color;
          }
        }
      }
    }
  }

  .section-builder.section-common {
    .panel-heading {
      h2 {

        &:after,
        &:before {
          position: absolute;
          content: "";
          width: 60px;
          height: 2px;
          background: @color-black;
          top: 48%;
        }

        &:after {
            left: -75px;
        }

        &:before {
            right: -75px;
        }
      }
    }
  }
}

.media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__ml) {
  .section-builder.section-common {
    margin-top: 100px;

    .panel-heading {
      margin-bottom: 40px;
    }

    &.section-category {
      margin-bottom: -30px;
    }
  }

  .banner-auto-parts {
    h2.big-text {
      font-size: 56px;
      line-height: 64px;
      margin-bottom: 9px;

      br {
        display: block;
      }
    }

    .inner-text {
      a.btn-red {
        margin-top: 55px;
      }
    }

    h4 {
      font-size: 16px;
    }

    .sub-number {
      margin-top: 15px;
    }
  }

  .home-policy.section-builder-full {
    .panel-block-row {
      margin: 0;
    }
  }
}

.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__m) {
  .section-builder {
    .banner-auto-parts {
      h2.big-text {
        font-size: 26px;
        line-height: 48px;
        margin-bottom: 0;

        br {
          display: none;
        }
      }

      .inner-text {
        a.btn-red {
          margin-top: 24px;
          height: 40px;
        }
      }

      h4 {
        font-size: 12px;

        br {
          display: none;
        }
      }

      .sub-number {
        margin-top: 10px;
      }
    }

    .home-policy.section-builder-full {
      .panel-block-row {
        margin: 0 0 30px 0;
      }
    }
  }

  .cms-index-index {
    .banner-auto-parts {
      .slider_mgs_carousel {
        .owl-item {
          .slide-text {
            .inner-text {
              padding: 0;
              width: 100%;
            }
          }
        }

        .owl-item {
          .item-image {
            background-position: 57% 100%;
          }

          .slide-text.middle_right {
            top: 36px;
            transform: initial !important;
            padding-top: 0;
          }
        }
      }

      .owl-carousel {
        .owl-stage-outer.owl-height {
          height: 555px !important;
        }
      }
    }
  }

  .section-builder.section-common {
    margin-top: 48px;

    .panel-heading {
      margin-bottom: 24px;
    }

    .motor-banner {
      margin-bottom: 16px;

      .banner-text {
        h3 {
          font-size: 24px !important;
        }

        p {
          font-size: 12px;
          margin-top: 16px;
        }
      }
    }

    .sale-banner {
      .promobanner {
        .text {
          h2 {
            font-size: 56px !important;
          }
        }
      }
    }

    div.category-wrapper {
      margin-bottom: 24px;
      max-height: 190px;
      min-height: 190px;

      .promobanner-block {
        .promobanner {
          max-height: 190px;
          min-height: 190px;

          a {
            img {
              max-width: 130px;
              padding-right: 16px;
            }
          }
        }
      }

      .category-content {
        h3 {
          font-size: 14px;
          top: 36px;
          left: 16px;
        }

        a.btn-link.text-red {
            left: 17px;
        }
      }
    }
  }

  .home-policy.section-builder-full {
    padding: 48px 0;

    .col-des-3 {
      margin-bottom: 32px;
    }
  }

  .section-builder.section-blog {
    padding-bottom: 78px;
  }

  .section-slider {
    .mgs-owl-carousel.owl-carousel {
      .owl-dots {
        bottom: -30px;
      }
    }
  }
}
