/* Large customer headings only. Keep the body, controls, cards and Thai typography. */
@font-face {
  font-family: "KC Hidebeast Blocky";
  src: url("../fonts/hidebeast-blocky-demo-regular.df5d7661ec0e.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0020-007E;
}

html:lang(en) .kc-hero .kc-hero__title,
html:lang(en) .kc-main .kc-section-title > h2,
html:lang(en) .kc-catalog__main .kc-section-title > div > h2,
html:lang(en) .kc-main .kc-section-title > div > h2,
html:lang(en) .kc-home__shop > div:first-child > h2,
html:lang(en) #product_details h1[itemprop="name"],
html:lang(en) #kc-customer-auth-title {
  font-family: "KC Hidebeast Blocky", var(--kc-display-font) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  font-synthesis: none;
  line-height: 1.2;
  overflow-wrap: break-word;
  word-break: normal;
}

html:lang(en) .kc-hero .kc-hero__title em {
  font-family: inherit !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
}

@media (max-width: 767.98px), (max-width: 991.98px) and (max-height: 500px) {
  html:lang(en) .kc-main .kc-section-title > h2,
html:lang(en) .kc-catalog__main .kc-section-title > div > h2,
html:lang(en) .kc-main .kc-section-title > div > h2,
  html:lang(en) .kc-home__shop > div:first-child > h2,
  html:lang(en) #product_details h1[itemprop="name"],
  html:lang(en) #kc-customer-auth-title {
    font-size: clamp(28px, 7.6vw, 34px);
    line-height: 1.2;
  }
  html:lang(en) .kc-hero .kc-hero__title {
    font-size: clamp(30px, 8.8vw, 38px);
    line-height: 1.15;
  }
}

/* Soft opposite-colour edges for the two hero lines only. */
.kc-hero .kc-hero__title {
  -webkit-text-stroke: .012em rgba(255, 214, 0, .68);
  paint-order: stroke fill;
  text-shadow: 0 0 .075em rgba(255, 214, 0, .35), 0 0 .18em rgba(255, 214, 0, .14);
}
.kc-hero .kc-hero__title em {
  -webkit-text-stroke: .012em rgba(255, 255, 255, .7);
  paint-order: stroke fill;
  text-shadow: 0 0 .075em rgba(255, 255, 255, .38), 0 0 .18em rgba(255, 255, 255, .14);
}