/* ==========================================================================
   CSS Variables
   ========================================================================== */

.st-product-headline {
  --st-headline-font-family: inherit;
  --st-headline-font-weight: 700;
  --st-headline-font-style: normal;
  --st-headline-font-size: 22px;
  --st-headline-font-size-mobile: 18px;
  --st-headline-color: #000;
  --st-tagline-font-family: inherit;
  --st-tagline-font-weight: 400;
  --st-tagline-font-style: normal;
  --st-tagline-font-size: 16px;
  --st-tagline-font-size-mobile: 14px;
  --st-tagline-color: #444;
  --st-headline-gap: 4px;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.st-product-headline {
  display: flex;
  flex-direction: column;
  gap: var(--st-headline-gap);
}

.st-product-headline--empty {
  display: none !important;
}

/* ==========================================================================
   Primary Headline
   ========================================================================== */

.st-product-headline__primary {
  margin: 0;
  font-family: var(--st-headline-font-family);
  font-weight: var(--st-headline-font-weight);
  font-style: var(--st-headline-font-style);
  font-size: var(--st-headline-font-size);
  color: var(--st-headline-color);
}

/* ==========================================================================
   Tagline
   ========================================================================== */

.st-product-headline__tagline {
  margin: 0;
  font-family: var(--st-tagline-font-family);
  font-weight: var(--st-tagline-font-weight);
  font-style: var(--st-tagline-font-style);
  font-size: var(--st-tagline-font-size);
  color: var(--st-tagline-color);
  line-height: 150%;
}

/* ==========================================================================
   Mobile (max-width: 959px)
   ========================================================================== */

@media (max-width: 959px) {
  .st-product-headline__primary {
    font-size: var(--st-headline-font-size-mobile);
  }

  .st-product-headline__tagline {
    font-size: var(--st-tagline-font-size-mobile);
  }
}