@font-face {
  font-family: "Old English Text MT";
  src: url("/cdn/shop/files/oldenglishtextmt.ttf?v=1769531000") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --Scents-HopelessRomantic-HopelessRomanticPrimary: #D5A2AE;
  --Scents-HopelessRomantic-HopelessRomanticSecondary: #371529;

  --Scents-HopelessRomantic-HopelessRomanticPrimary-80: #D5A2AE80;

  --font-old-english: "Old English Text MT", serif;
}

.template-page-hopeless-romantic {
    color: var(--Scents-HopelessRomantic-HopelessRomanticSecondary);

  .heroLander__Content {
    gap: var(--Spacing-Spacing-400);
  }

  .heroLander__Title {
    color: var(--Scents-HopelessRomantic-HopelessRomanticPrimary);
    font-family: var(--font-old-english);
    font-size: var(--Headings-Heading-700);
    font-weight: 400;
    text-shadow: 0 0 10px var(--Scents-HopelessRomantic-HopelessRomanticPrimary-80);

    @media (min-width: 1440px) {
      font-size: var(--Headings-Heading-1000);
    }
  }

  .heroLander__Body {
    color: var(--Scents-HopelessRomantic-HopelessRomanticPrimary);
  }

  .heroLander__Buttons {
    margin-top: var(--Spacing-Spacing-400);
  }

  .heroLander__Buttons .Button--Primary {
    background-color: var(--Scents-HopelessRomantic-HopelessRomanticPrimary);
    border: none;
    color: var(--Scents-HopelessRomantic-HopelessRomanticSecondary);

    @media (hover: hover) {
      &:not([disabled]):not(.Button--Disabled):hover {
        background-color: var(--Scents-HopelessRomantic-HopelessRomanticSecondary);
        color: var(--Scents-HopelessRomantic-HopelessRomanticPrimary);
      }
    }
  }

  .richtext__Title {
    font-family: var(--font-old-english);
    font-size: var(--Headings-Heading-500);
    font-weight: 400;
    letter-spacing: var(--Typography-Spacing-300);

    @media (min-width: 1024px) {
        font-size: var(--Headings-Heading-700);
    }
  }

  .klaviyo-form button {
    background-color: var(--Scents-HopelessRomantic-HopelessRomanticSecondary) !important;
    color: white !important;

    @media (hover: hover) {
      &:not([disabled]):not(.Button--Disabled):hover {
        background-color: var(--Scents-HopelessRomantic-HopelessRomanticPrimary) !important;
        color: var(--Scents-HopelessRomantic-HopelessRomanticSecondary) !important;
      }
    }
  }

  .splitMedia__Title {
    font-family: var(--font-old-english);
    font-size: var(--Headings-Heading-500);
    font-weight: 400;
    letter-spacing: var(--Typography-Spacing-300);

    @media (min-width: 1024px) {
        font-size: var(--Headings-Heading-600);
    }
  }

  .splitMedia__Footer .Button {
    background-color: var(--Scents-HopelessRomantic-HopelessRomanticSecondary);
    color: white;

    @media (hover: hover) {
      &:not([disabled]):not(.Button--Disabled):hover {
        background-color: var(--Scents-HopelessRomantic-HopelessRomanticPrimary);
        color: var(--Scents-HopelessRomantic-HopelessRomanticSecondary);
      }
    }
  }

  .splitOffset__Title  {
    font-family: var(--font-old-english);
    font-size: var(--Headings-Heading-500);
    font-weight: 400;
    letter-spacing: var(--Typography-Spacing-300);

    @media (min-width: 1024px) {
        font-size: var(--Headings-Heading-600);
    }
  }

  .splitOffset__Footer .Button {
    background-color: var(--Scents-HopelessRomantic-HopelessRomanticSecondary);
    color: white;

    @media (hover: hover) {
      &:not([disabled]):not(.Button--Disabled):hover {
        background-color: var(--Scents-HopelessRomantic-HopelessRomanticPrimary);
        color: var(--Scents-HopelessRomantic-HopelessRomanticSecondary);
      }
    }
  }
}