.hkd-product-header-widget {
  --hkd-product-header-image-height: 500px;
  --hkd-product-header-content: 1400px;
  --hkd-product-header-content-offset: max(
    2rem,
    calc(
      (
          min(100vw, var(--hkd-product-header-max)) -
            var(--hkd-product-header-content)
        ) /
        2 - 1rem
    )
  );
  --hkd-product-header-max: 2550px;
  --hkd-product-header-overhang: 94px;
  --hkd-product-header-panel-height: 280px;
  --hkd-product-header-radius: 4rem;
  --hkd-product-header-space-after: 0px;

  background: linear-gradient(
    to bottom,
    #fff 0 var(--hkd-product-header-image-height),
    #f5f5f5 var(--hkd-product-header-image-height) 100%
  );
  box-sizing: border-box;
  color: #fff;
  isolation: isolate;
  margin-left: calc(50% - min(50vw, calc(var(--hkd-product-header-max) / 2)));
  margin-right: calc(50% - min(50vw, calc(var(--hkd-product-header-max) / 2)));
  min-height: calc(
    var(--hkd-product-header-image-height) +
      var(--hkd-product-header-overhang) + var(--hkd-product-header-space-after)
  );
  padding: 0;
  position: relative;
  width: min(100vw, var(--hkd-product-header-max));
}

.hkd-product-header-widget::before {
  background-color: #fff;
  background-image: var(--hkd-product-header-background-image, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: var(--hkd-product-header-radius)
    var(--hkd-product-header-radius) 0 0;
  content: "";
  height: var(--hkd-product-header-image-height);
  inset: 0 0 auto;
  position: absolute;
  z-index: -1;
}

.hkd-product-header-widget__inner {
  align-items: flex-start;
  box-sizing: border-box;
  display: flex;
  min-height: calc(
    var(--hkd-product-header-image-height) +
      var(--hkd-product-header-overhang) + var(--hkd-product-header-space-after)
  );
  width: 100%;
}

.hkd-product-header-widget__content {
  align-items: flex-start;
  align-self: flex-start;
  background: rgba(30, 29, 27, 0.82);
  border-radius: 0 var(--hkd-product-header-radius)
    var(--hkd-product-header-radius) 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: calc(
    var(--hkd-product-header-image-height) +
      var(--hkd-product-header-overhang) -
      var(--hkd-product-header-panel-height)
  );
  min-height: var(--hkd-product-header-panel-height);
  padding: clamp(2rem, 3vw, 3rem) clamp(2rem, 3vw, 4rem) clamp(2rem, 3vw, 3rem)
    var(--hkd-product-header-content-offset);
  width: min(60%, calc(var(--hkd-product-header-content-offset) + 34rem));
}

.hkd-product-header-widget__content h1 {
  color: #fff;
  left: 15px;
  line-height: 1.1;
  margin: 0 0 0.2rem;
  overflow-wrap: anywhere;
  position: relative;
}

.hkd-product-header-widget .hkd-product-header-widget__subline {
  color: #fff;
  font-size: 28px !important;
  left: 15px;
  line-height: 1.25;
  margin: 0;
  overflow-wrap: anywhere;
  padding-top: 0 !important;
  position: relative;
}

.hkd-product-header-widget-empty {
  margin: 0;
}

.elementor-widget-hkd-product-header,
.elementor-widget-hkd-product-header > .elementor-widget-container,
.elementor-element:has(
  > .elementor-widget-container > .hkd-product-header-widget
) {
  background: transparent !important;
}

.elementor-widget-hkd-product-header > .elementor-widget-container {
  margin: 0 !important;
  max-width: var(--hkd-product-header-max, 2550px) !important;
  padding: 0 !important;
  width: 100% !important;
}

@media (max-width: 1024px) {
  .hkd-product-header-widget {
    --hkd-product-header-image-height: clamp(380px, 58vw, 500px);
    --hkd-product-header-overhang: 70px;
    --hkd-product-header-panel-height: 240px;
    --hkd-product-header-radius: 3rem;
    --hkd-product-header-space-after: 0px;

    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  .hkd-product-header-widget__content {
    padding: 2rem;
    width: min(68%, 680px);
  }
}

@media (max-width: 767px) {
  .hkd-product-header-widget {
    --hkd-product-header-image-height: 320px;
    --hkd-product-header-overhang: 48px;
    --hkd-product-header-panel-height: 190px;
    --hkd-product-header-radius: 2rem;
    --hkd-product-header-space-after: 0px;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
    width: 100vw;
  }

  .hkd-product-header-widget::before {
    border-radius: 0;
  }

  .hkd-product-header-widget__content {
    padding: 1.5rem 2rem;
    width: calc(100% - 1.5rem);
  }

  .hkd-product-header-widget__content h1 {
    margin-bottom: 0.75rem;
  }
}