.tpb--trusted_product_banner {
  position: relative;
  color: var(--schemes-on-primary);

  .tpb__media {
    position: relative;

    .tpb__image {
      display: block;
      width: 100%;
      height: auto;
      object-fit: cover;
    }

    .tpb__overlay {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 22.4rem;
      background: var(--tpb-overlay-gradient);
    }
  }

  .tpb__content {
    position: absolute;
    bottom: 0;
    padding: 0 0 var(--spacing-l) 19px;

    .tpb__title {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-feature-settings: var(--font-settings);
        font-size: var(--fs-large);
        font-weight: var(--fw-500);
        line-height: var(--lh-xlarge);
      }
    }

    .tpb__subtitle {
      font-size: var(--fs-small);
      font-weight: var(--fw-400);
      line-height: var(--lh-17);
      width: 72%;

      @media (width >= 768px) {
        font-size: var(--fs-medium);
        line-height: var(--lh-large);
      }

      @media (width >= 1024px) {
        font-size: var(--fs-xmedium);
        font-weight: var(--fw-600);
        line-height: 2.7rem;
      }
    }

    @media (width >= 768px) {
      padding: 0 0 var(--spacing-medium) var(--spacing-l);

      .tpb__title {
        gap: var(--spacing-xsmall);

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          font-weight: var(--fw-400);
          line-height: var(--line-height-body-low);
          font-size: var(--fs-xlarge);
        }
      }
    }

    @media (width >= 1024px) {
      padding: 0 var(--container-margin) 46px;

      .tpb__title {
        gap: var(--spacing-xs);

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          font-size: var(--fs-xxlarge);
          font-weight: var(--fw-400);
          line-height: var(--lh-xlarge);
        }
      }
    }
  }
}

.tpb--buy_genuine {
  display: flex;
  background: var(--semantic-surface-tonal-info);
  padding: var(--spacing-small);
  margin: var(--spacing-medium) var(--container-margin);

  @media (width >= 768px) {
    display: none;
  }

  .tpb__media {
    picture,
    .tpb__overlay {
      display: none;
    }

    &::before {
      content: '';
      display: inline-block;
      width: 51px;
      height: 51px;
      background: url('/genuine-accessories/icons/buy-genuine-iocn.svg') no-repeat center/contain;
      margin-right: var(--spacing-xs);
      flex-shrink: 0;
      backdrop-filter: blur(calc(var(--background-blur, 80px) / 2));
    }
  }

  .tpb__content {
    position: static;
    padding: var(--spacing-m);
    color: var(--ui-text-icon-high);

    .tpb__title {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-size: var(--fs-small);
        font-weight: var(--fw-700);
        line-height: var(--lh-medium);
        letter-spacing: 0.14px;
      }
    }

    .tpb__subtitle {
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-400);
      line-height: var(--line-height-body-low);
      letter-spacing: 0.24px;
    }
  }
}

.home {
  .trusted-product-banner-wrapper {
    .trusted-product-banner {
      .tpb--buy_genuine {
        margin: 0;
        width: 100%;
        padding: var(--sizing-xl) var(--container-margin);

        @media (width >= 768px) {
          display: flex;
          margin: 0;
        }
      }
    }
  }
}

.cart {
  .commerce-cart-container {
    .trusted-product-banner-wrapper {
      .trusted-product-banner {
        .tpb--buy_genuine {
          margin-block: 0 var(--spacing-medium);

          @media screen and (width >= 768px) {
            display: flex;
          }

          .tpb__media {
            &::before {
              margin-inline: 0 var(--spacing-small);

              @media screen and (width >= 1024px) {
                margin-inline: 0 var(--spacing-xs);
              }
            }
          }

          .tpb__content {
            .tpb__title h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
              @media screen and (width >= 768px) {
                font-size: var(--fs-medium);
                font-weight: var(--fw-600);
              }

              @media screen and (width >= 1024px) {
                font-size: var(--fs-large);
              }
            }

            .tpb__subtitle {
              @media screen and (width >= 768px) {
                font-size: var(--fs-small);
              }

              @media screen and (width >= 1024px) {
                font-size: var(--fs-medium);
              }
            }
          }
        }
      }
    }
  }
}