@import '../helpers/variables';

// sass-lint:disable no-important
.new-usp {
  &-container,
  &-bar,
  &-tile,
  &-message {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &-container,
  &-bar {
    position: relative;
  }

  &-container {
    overflow: hidden;
    max-width: 1397px;
    margin: 0 auto;
    padding: 5px 0;
  }

  &-bar {
    flex-direction: row;
    max-width: 1130px;
    padding: 3px;
  }

  &-tile {
    flex-direction: column;
    min-width: 275px;
    background-color: $gray-bg;
    padding: 3px 0 10px;
    margin: 2px;
    text-decoration: none;
    min-height: 73px;

    &:hover {
      text-decoration: none;
    }

    &:hover .new-proposition-title {
      text-decoration: underline !important;
    }
  }

  &-message {
    flex-direction: column;
  }
}

.new-proposition {
  &-icon {
    color: $usp-icon-color;
    font-size: 20px;
  }

  &-title {
    color: $blue;
    font-size: $font-size-base;
    font-weight: 500;
    line-height: 14px;
  }

  &-descr {
    color: $gray-dark;
    font-size: 12px;
    font-weight: 300;
    line-height: 16px;
  }
}

.for-mobile {
  display: none;
}

.card-easter {
  overflow: hidden;
  background: $gray-light;
}

.hero-background {
  transform: scale(1.05);
  height: 340px;
  object-fit: cover;

  &-only {
    transform: scale(1);
  }
}

.hero-foreground {
  position: absolute;
  left: 0;
  top: 0;
  filter: drop-shadow(0 0 4px $black-transparent50);
  height: 340px;
  object-fit: contain;
  box-shadow: inset 0 0 0 $black-transparent0;
}

.hero-container {
  height: calc(100% - 1.5rem);
  max-height: 340px;
}

.hero-link {
  min-height: 100%;
  overflow: hidden;
}

.hero-empty {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.small-insp-card {
  padding-bottom: 30px;

  &-text {
    text-align: center;
  }

  &-title {
    position: absolute;
    left: 0;
    right: 0;
    margin: -50px auto 0;
    background-color: $white;
    border-radius: 3px 3px 0 0;
    height: 50px;
    padding-top: 15px;
    width: 85%;
    color: $gray-dark;
    font-size: 1.375rem;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 32px;
  }

  &-info {
    padding: 10px 14px 0;
    height: auto;
    color: $gray-dark;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 24px;
    margin-bottom: 7px;
  }

  &-link {
    font-weight: 600;
    height: 17px;
    color: $blue;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 32px;
    text-decoration: none;
  }
}

.center-me {
  text-align: center;
}

.popcats-container {
  overflow: hidden;
}

.popcats-col a {
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.popcats-img-container {
  width: 100%;
  overflow: hidden;
  border-radius: 200px;
  border: 1px solid $gray-light;
}

.popcats-img {
  width: 100%;
  height: auto;
}

.popcats-title {
  padding: 20px 0 30px;

  p {
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color: $gray-dark;
  }
}

.essential-title {
  font-weight: 500;
}

.fullwidth-blue-hr {
  max-width: 555px;
  margin: 40px auto;
  border-bottom: 8px solid $blue-dark;
}

.hero-insp-banner {
  background-position: center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  height: 300px;
  max-height: 300px;
  overflow: hidden;
  max-width: 1110px;
  margin-bottom: 40px;
  position: relative;
  cursor: pointer;

  &__content {
    background-color: $white-transparent80;
    width: 407px;
    height: 250px;
    padding: 20px;
    text-align: center;
    position: absolute;
    left: 27.98px;
    top: 24px;
    bottom: 26px;
  }

  &__gallery-content {
    margin: 0 auto;
    height: 100%;
    left: auto;
    top: auto;
    bottom: auto;
    background-color: transparent;
  }

  &__gallery-icon img {
    height: 38px;
    width: 26px;
  }

  &__text {
    color: $gray-dark;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }

  &__gallery-text {
    color: $white;
  }

  &__text-title {
    font-size: 30px;
    font-weight: 500;
  }

  &__text-descr {
    font-size: 18px;
  }

  &__text-link {
    color: $blue;
    font-size: 18px;
    font-weight: 500;
    text-decoration: underline;
  }

  &__galery-text-link a {
    color: $white;
  }
}

p {
  line-height: 1.2;
}

.middle-align {
  margin: 0 auto;
}

.corner-borders {
  &::before,
  &::after {
    border-color: $blue-light;
    border-width: 4px;
    content: '';
    display: block;
    height: 30px;
    pointer-events: none;
    position: absolute;
    width: 30px;
  }

  &--left {
    &::before {
      top: 15px;
      left: 14px;

      border: {
        left-style: solid;
        top-style: solid;
      }
    }

    &::after {
      bottom: 15px;
      left: 14px;

      border: {
        bottom-style: solid;
        left-style: solid;
      }
    }
  }

  &--right {
    &::before {
      top: 15px;
      right: 14px;

      border: {
        right-style: solid;
        top-style: solid;
      }
    }

    &::after {
      bottom: 15px;
      right: 14px;

      border: {
        bottom-style: solid;
        right-style: solid;
      }
    }
  }
}

.gallery-corner-borders {
  &::before,
  &::after {
    border-color: $white-transparent30;
  }
}

.product-recall-banner {
  display: flex;
  flex-direction: row;
  max-width: 1110px;
  background: $error-bg;
  margin: 0 auto;
  font-size: 28px;
  line-height: 37px;
}

.product-safety-recall {
  height: 100%;
  background: $red;
  padding: 22px;
  color: $white;
  font-weight: 600;
}

.product-safety-icon {
  margin-right: 10px;
}

.product-recall-message {
  padding: 22px;
  font-weight: 500;
  color: $gray-dark;
}

.product-recall-link {
  position: relative;
  padding: 22px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 400;
  color: $blue;
  flex-grow: 1;

  &-holder {
    position: absolute;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
  }

  &-icon {
    font-size: 16px;
    text-decoration: none;
    margin-left: 5px;
  }
}

.component_filled {
  background: none;
  border-top: 1px solid $gray;
  border-bottom: 1px solid $gray;

  .card__inner {
    border: 1px solid $gray;
  }
}

.impress-the-guests-banner {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: flex-start;
  min-width: 100%;
  overflow: hidden;

  p {
    font-size: 18px;
    font-weight: 100;
    line-height: 22px;
  }
}

.info-box {
  position: absolute;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: $gray-dark-transparent60;
  width: 44.4444%;
  height: 100%;
  color: $white;
  padding: 1em;
  text-align: center;
}

.width-fix {
  max-width: 1397px;
}

.padding-fix {
  padding: 0;
}

.bottom-fix {
  margin-bottom: -1.5rem;
}

.new-home-banner {
  max-width: 1110px;

  img {
    border: 0;
  }
}

.card__offers-item_discount {
  opacity: .8;
}

.new-card__title {
  margin: 15px;
  font-size: 1.125rem;
  font-weight: 700;
  color: $black;
  text-decoration: none;
}

.card__title-link {
  text-decoration: none;
}

.hero-banner-info {
  width: 355px;

  // sass-lint:disable no-important
  &__small {
    font-size: 19px !important;
  }

  // sass-lint:disable no-important
  &__section:nth-child(3),
  &__section:nth-child(4) {
    border-style: none !important;
  }
}

// sass-lint:disable no-important
.hero-spend {
  border-style: none !important;
  font-size: 16px !important;
}

.yellow-background {
  padding-bottom: 4px;
}

// sass-lint:disable no-important
.offer__banner {
  background-color: $red-transparent10 !important;
}

.hero-link-karcher {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

// sass-lint:disable no-url-domains
// sass-lint:disable no-url-protocols
// sass-lint:disable no-vendor-prefixes
// sass-lint:disable no-misspelled-properties
.hero-banner-karcher {
  background: $white url('https://media.wickes.co.uk/is/image/wickes/10519-3241-Karcher-Homepage-banner-withouttext-1400x400?fmt=png-alpha&wid=1400&hei=400&fit=crop') no-repeat center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100% 100%;
  height: 400px;
  text-align: center;
}

.hero-overlay-image {
  position: relative;
  background: url('https://media.wickes.co.uk/is/image/wickes/2519-3241-Karcher-Homepage-element?fmt=png-alpha&wid=320&hei=400&fit=crop') no-repeat center top;
  width: 320px;
  height: 400px;
  margin-left: auto;
  margin-right: auto;
}

.left-align-button-image a img {
  position: relative;
  top: 200px;
  left: 697px;
}

.inspiration-border {
  border: 1px solid $blue-dark;
}

@media screen and (max-width: 1199px) {
  .product-recall-banner {
    font-size: 25px;
    line-height: 32px;
  }
}

@media screen and (max-width: 1110px) {
  .new-usp {
    &-container,
    &-bar,
    &-tile {
      min-width: 100%;
      max-height: 100px;
    }

    &-container,
    &-tile {
      padding: 0;
    }

    &-bar {
      justify-content: left;
      padding: 5px 0;
    }

    &-tile {
      margin: 0;
      padding: 0;
      min-height: 78px;
    }
  }

  .for-mobile {
    display: flex;
  }

  .new-proposition-title {
    line-height: 17px;
  }
}

@media screen and (max-width: 1010px) {
  .hero-banner-karcher {
    background: $white url('https://media.wickes.co.uk/is/image/wickes/10519-3241-Karcher-Homepagebanner-Background-Blank-1400x400?fmt=png-alpha&wid=1400&hei=400&fit=crop') no-repeat center top;
  }

  .hero-overlay-image {
    background: url('https://media.wickes.co.uk/is/image/wickes/10519-3241-Karcher-Homepagebanner-messaging-d3-320x400-1?fmt=png-alpha&wid=320&hei=400&fit=crop') no-repeat center top;
  }
}

@media screen and (max-width: 991px) {
  .hero-container {
    min-height: 280px;
  }

  .hero-background,
  .hero-foreground {
    height: 280px;
  }

  .product-recall-banner {
    font-size: 18px;
    line-height: 24px;
  }

  .product-recall-link {
    font-size: 13px;
    line-height: 24px;

    &-icon {
      font-size: 10px;
      margin-left: 3px;
    }
  }
}

@media screen and (max-width: 767px) {
  .info-box {
    width: 100%;
  }

  .product-recall-banner {
    flex-direction: column;
    text-align: center;
  }

  .product-recall-link {
    padding: 0 0 22px;

    &-holder {
      position: relative;
      top: 0;
      right: 0;
      transform: none;
    }
  }
}

@media screen and (max-width: 576px) {
  .new-usp {
    &-container,
    &-bar,
    &-tile {
      min-height: 48px;
    }

    &-tile {
      flex-direction: row;
    }

    &-message {
      align-items: initial;
      margin-left: 10px;
    }
  }

  .hero-foreground {
    object-fit: cover;
  }
}

@media screen and (min-width: 478px) {
  .lift-to-right {
    // sass-lint:disable no-important
    right: 27.98px !important;
    left: auto !important;
  }
}

@media screen and (max-width: 478px) {
  .hero-insp-banner {
    height: 450px;
    max-height: 450px;

    &__content {
      width: 300px;
      max-width: 300px;
      height: 300px;
      max-height: 300px;
      top: 75px;
      bottom: 75px;
      left: auto;
      right: auto;
    }

    &__text-title {
      font-size: 24px;
    }

    &__text-descr {
      font-size: 16px;
    }
  }
}