.hero__outer--custom-border-radius,
.hero__outer--custom-border-radius .hero__image-inner .hero__overlay,
.hero__outer--custom-border-radius .hero__image-inner img {
  border-bottom-right-radius: 33px;
  border-bottom-left-radius: 33px;
  object-fit: cover;
}

.hero__outer.hero__outer--custom-content-width {
  justify-content: unset;
}

.hero__outer.hero__outer--custom-content-width .hero__content {
  max-width: var(--content-width);
  margin: 0;
  padding-left: 90px;
}

.hero__outer--overlay .hero__subtitle.subtitle--custom {
  background-color: unset;
}

.hero__subtitle,
.hero__subtitle h2,
.stars-rating-large {
  font-size: var(--subheading-font-size);
  font-weight: 600;
  line-height: var(--lh-140);
  letter-spacing: 0.42px;
  color: rgb(var(--title-font-size));
}

.hero__title {
  font-size: var(--title-font-size);
  font-weight: 600;
  line-height: var(--lh-0975);
  letter-spacing: 0;
}

.hero__description {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: var(--desc-font-size);
  line-height: var(--lh-140);
  letter-spacing: 0.25px;
}

.hero__outer--overlay .hero__content .hero__description {
  max-width: 550px;
}

.hero__buttons .button {
  background: var(--color-yellow-300);
  border-radius: 8px;
  padding: 10px 38px 10px 42px;
  color: var(--color-black-100);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--body-xl);
  line-height: var(--lh-150);
  column-gap: 10px;
  border: 2px solid var(--color-yellow-border);

}

.button.button--hero_main {
  border: 2px solid transparent;
}

.button.button--hero_main svg {
  margin-left: 10px;
}

.hero__buttons .button:hover {
  color: var(--color-black-100);
  background: var(--color-yellow-hover-1);
  border-color: var(--color-yellow-hover-1);
}

.hero__buttons .button .icon-button-arrow {
  transform: rotate(45deg);
  margin-top: 5px;
}

.hero__outer--overlay .hero__captions-item span {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: var(--body-p-xs);
  line-height: var(--lh-140);
  letter-spacing: 2px;
  color: var(--color-grey-300);
}

.hero__outer.hero__outer--vertical .hero__title span {
  display: inline-block;
  border-radius: 7px;
  padding: 0 13px 13px 13px;
  background: var(--color-line);
  margin-top: 10px;
  text-decoration: none !important;
}

.custom__caption-separator {
  width: 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom__caption-separator span {
  width: 5px;
  display: block;
  height: 5px;
  background: var(--color-grey-300);
  border-radius: 100%;
}

.hero__captions {
  gap: 4px;
}

.hero__outer--vertical .hero__image-inner img {
  border-radius: 20px;
}

.section-hero .container {
  padding-left: 44px;
  padding-right: 44px;
}

.hero__outer.hero__outer--horizontal.hero__outer--subtle
  .hero__buttons
  .button.button--tertiary {
  background: transparent;
  color: var(--color-black-100);
  border: 1px solid var(--color-black-100);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--body-xl);
  line-height: var(--lh-150);
  padding: 10px 42px 10px 42px;
}

.collection .custom__caption-separator span,
.product .custom__caption-separator span {
  background: var(--color-black-200);
}

.collection .hero__captions,
.product .hero__captions {
  background: var(--color-white);
  border-radius: 100px;
  padding: 7px 28px;
}

.collection .hero__captions-item span,
.product .hero__captions-item span {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: var(--body-p-xs);
  line-height: var(--lh-140);
  color: var(--color-black-200);
}

.hero-image__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.hero-image__wrapper img {
  width: 100%;
  height: auto;
  max-height: 400px;
  border-radius: var(--image-border-radius);
  object-fit: cover;
}

.hero-image__wrapper .picture-responsive-image {
  width: 100%;
}

.hero-image__wrapper.hero-image__wrapper--full-width img {
  max-width: 100%;
}

.hero-image__wrapper.hero-image__wrapper--small img {
  max-width: 300px;
}

.hero-image__wrapper.hero-image__wrapper--medium img {
  max-width: 650px;
}

.hero-image__wrapper.hero-image__wrapper--large img {
  max-width: 900px;
}

.image-with-text-custom .hero__outer .hero__content {
  max-width: 100%;
}

.image-with-text-custom .container {
  padding-left: 44px;
  padding-right: 44px;
}

.hero__text-with-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 18px;
}

.hero__text-with-buttons .hero__text-with-buttons-title {
  font-family: var(--font-primary);
  font-size: var(--subheading-mobile-h1);
  font-weight: 600;
  line-height: var(--lh-150);
  color: var(--color-black-200);
  margin: 0;
}

.hero__text-with-buttons .button.card__quote {
  background: var(--color-yellow-200);
  border: 2px solid var(--color-yellow-200);
  border-radius: 8px;
  padding: 10px 32px 10px 36px;
  color: var(--color-black-100);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--body-p-md);
  line-height: var(--lh-150);
  letter-spacing: 0.17px;
  display: flex;
  column-gap: 10px;
}

.hero__text-with-buttons .button.card__quote svg {
  transform: rotate(45deg);
}

.hero__text-with-buttons .button.card__explore {
  border: 1px solid var(--color-black-500);
  border-radius: 8px;
  padding: 10px 32px;
  color: var(--color-white);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--body-p-md);
  line-height: var(--lh-150);
  letter-spacing: 0.17px;
  color: var(--color-black-100);
}

.hero_text-with-buttons-buttons {
  display: flex;
  gap: 12px;
}

.page .custom__caption-separator span {
  background: var(--color-black-200);
}

.page .hero__captions {
  padding: 7px 28px;
  background: var(--color-white-800);
  border-radius: 100px;
}

.page .hero__content.hero_content__layout--left {
  align-items: flex-start;
  text-align: left;
}

.page .hero__content.hero_content__layout--center {
  align-items: center;
  text-align: center;
}

.page .hero__content.hero_content__layout--right {
  align-items: flex-end;
  text-align: right;
}

.stars-rating-large h2,
.stars-rating-large h3,
.stars-rating-large {
  display: flex;
  gap: 10px;
}

.hero__outer.hero__outer--horizontal {
  min-height: 496px;
}

.hero-image__wrapper {
  margin-top: 40px;
}

.product .hero__outer.hero__outer--horizontal .hero__description {
  font-family: var(--font-secondary);
  font-weight: 500;
}

@media (min-width: 990px) {
  .hero-arrow {
    display: none;
  }
}

@media (max-width: 989px) {
  .stars-rating {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .content-for-layout--german .stars-rating {
    max-width: 75%;
    margin: 0 auto;
  }

  .hero-custom .hero__outer .hero__content {
    padding-bottom: 0;
  }

  .hero-custom .hero__outer .hero__image {
    padding-top: 0;
  }

  .hero-custom .hero__outer .hero__image {
    padding-bottom: 36px;
  }

  .mobile-centered-btns {
    justify-content: center;
  }

  .hero__outer--custom-border-radius,
  .hero__outer--custom-border-radius .hero__image-inner .hero__overlay,
  .hero__outer--custom-border-radius .hero__image-inner img {
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px;
  }

  .hero__outer.hero__outer--custom-content-width .hero__content {
    max-width: 100%;
    padding-left: 18px;
    padding-right: 18px;
    justify-content: center;
    align-items: center;
    padding-bottom: 100px;
  }

  .hero.section--has-overlay .hero__outer--overlay .hero__content {
    padding-top: 170px;
  }

  .hero__title {
    font-size: var(--title-font-size-mobile);
  }

  .hero__outer--overlay .hero__content .hero__title {
    text-align: center;
    max-width: unset;
  }

  .hero__outer--overlay .hero__title br {
    display: none;
  }

  .hero__outer--overlay .hero__content .hero__description {
    text-align: center;
  }

  .hero__description {
    font-size: var(--desc-font-size-mobile);
  }

  .hero__outer--vertical .hero__image-inner img {
    border-radius: 14px;
  }

  .hero__subtitle {
    font-size: var(--subheading_size_mobile);
    padding-top: 10px;
  }

  .hero__outer.hero__outer--vertical .hero__title span {
    display: inline-block;
    border-radius: 7px;
    padding: 0 10px 6px;
    background: var(--color-blue-100);
    margin-top: 10px;
  }

  .section-hero .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .about-us .hero__outer.hero__outer--vertical .hero__title br:nth-child(1) {
    display: none;
  }

  .hero__outer.hero__outer--horizontal .hero__content {
    padding: 0;
  }

  .hero__outer .hero__content {
    padding: 36px 0;
  }

  .collection
    .hero__outer.hero__outer--horizontal.hero__outer--subtle
    .hero__description {
    text-align: center;
  }

  .collection .hero__captions {
    width: 100%;
    justify-content: center;
  }

  .collection .hero__subtitle {
    width: 100%;
    justify-content: center;
  }

  .image-with-text-custom .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .hero_text-with-buttons-buttons {
    display: none;
  }

  .hero-arrow svg {
    transform: rotate(45deg);
    width: 30px;
    height: 30px;
  }

  .hero__text-with-buttons {
    align-items: flex-end;
  }

  .image-with-text-custom .hero__outer.hero__outer--vertical .hero__title br {
    display: none;
  }

  .hero-image__wrapper img {
    max-height: 170px;
  }

  .hero__outer.hero__outer--horizontal .hero__content,
  .hero__outer.hero__outer--horizontal .hero__content .hero__buttons {
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .hero__outer.hero__outer--horizontal .hero__content .hero__buttons {
    gap: 10px;
  }

  .hero__outer.hero__outer--horizontal .hero__content .hero__buttons > * {
    width: 100%;
    max-width: 256px;
    text-align: center;
    justify-content: center;
  }

  .hero-image__wrapper {
    margin-top: 12px;
  }

  .hero__outer--horizontal .hero__image {
    padding: 0;
    margin-top: 36px;

  }

  .hero__title {
    font-size: var(--heading-mobile-h2);
  }

  .content-for-layout--german .hero__captions,
  .content-for-layout--spanish .hero__captions {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .content-for-layout--spanish .hero__outer.hero__outer--horizontal .hero__content .hero__buttons>* {
    padding-left: 5px;
    padding-right: 5px;
  }
}