/* =========================================================
   TYPOGRAPHY SYSTEM
   ========================================================= */


/* =========================================================
   FONT FACE
   ========================================================= */

@font-face {
  font-family: "Teko";
  src: url("/sfsites/c/resource/Teko/Teko/Teko-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Teko";
  src: url("/sfsites/c/resource/Teko/Teko/Teko-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Teko";
  src: url("/sfsites/c/resource/Teko/Teko/Teko-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Teko";
  src: url("/sfsites/c/resource/Teko/Teko/Teko-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/sfsites/c/resource/PlusJakartaSans/PlusJakartaSans/PlusJakartaSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/sfsites/c/resource/PlusJakartaSans/PlusJakartaSans/PlusJakartaSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/sfsites/c/resource/PlusJakartaSans/PlusJakartaSans/PlusJakartaSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/sfsites/c/resource/PlusJakartaSans/PlusJakartaSans/PlusJakartaSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ======================
   HEADLINES
   ====================== */

.h1-headline {
  font-weight: 600;
  font-size: 66px;
  line-height: 80px;
}

.h2-headline {
  font-weight: 600;
  font-size: 48px;
  line-height: 58px;
}

.h3-headline {
  font-weight: 600;
  font-size: 40px;
  line-height: 48px;
}

.h4-headline {
  font-weight: 600;
  font-size: 32px;
  line-height: 38px;
}

.h5-headline {
  font-weight: 600;
  font-size: 28px;
  line-height: 34px;
}

.h6-headline {
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
}

/* ======================
   SUBTITLES
   ====================== */

.s1-subtitle {
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
}

.s2-subtitle {
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
}

.s3-subtitle {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
}

/* ======================
   BODY TEXT
   ====================== */

/* B1 */
.b1-body-r {
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
}

.b1-body-m {
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}

.b1-body-b {
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
}

/* B2 */
.b2-body-r {
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
}

.b2-body-m {
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
}

.b2-body-b {
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
}

/* B3 */
.b3-body-r {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.b3-body-m {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

.b3-body-b {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
}

/* B4 */
.b4-body-r {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}

.b4-body-m {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}

.b4-body-b {
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
}

/* ======================
   CAPTIONS
   ====================== */

.c1-caption {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
}

.c2-caption {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
}

.c3-caption {
  font-weight: 500;
  font-size: 10px;
  line-height: 14px;
}

/* ======================
   LABEL
   ====================== */

.l-label {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
}


/* =========================================================
   BUTTON TYPOGRAPHY SCALE – MEDIUM WEIGHT
   ========================================================= */

/* Extra Large */
.button-xl {
  font-weight: 500; /* Medium */
  font-size: 18px;
  line-height: 24px;
}

/* Large */
.button-l {
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
}

/* Medium */
.button-m {
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
}

/* Small */
.button-s {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
}

/* Extra Small – two variants */

.button-xs {
  font-weight: 500;
  font-size: 10px;
  line-height: 12px;
}

/*.button-xs {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
}*/


/* =========================================================
   LINK TYPOGRAPHY
   ========================================================= */
/* ====== BASE ====== */
.link {
  text-decoration: none;
  color: var(--color-text-secondary-dark-grey);
  /*border-radius: 6px;*/
  /*display: inline-block;*/
  /*transition: all 0.2s ease;*/
  cursor: pointer;
}

/* ====== HOVER ====== */
.link:hover {
  color: var(--color-text-accent);
  /*background-color: rgba(0, 119, 204, 0.1);*/
  /*text-decoration: underline;*/
}

/* ====== FOCUS ====== */
.link:focus {
  color: var(--color-text-accent);
  /*outline: 2px solid #80bdff;*/
  /*outline-offset: 2px;*/
}

/* ====== ACTIVE (press) ====== */
.link:active {
  color: var(--color-text-primary-black);
  /*transform: scale(0.97);*/
  /*background-color: rgba(0, 119, 204, 0.2);*/
}

/* ====== DISABLED ====== */
.link.disabled,
.link:disabled {
  color: var(--color-text-disabled);
  pointer-events: none;
  cursor: not-allowed;
  /*background-color: transparent;*/
  text-decoration: none;
  /*opacity: 0.6;*/
}

/* ====== SIZE ====== */
.link-tiny {
  font-size: 12px;
  font-weight: 500;
}

.link-small {
  font-size: 14px;
  font-weight: 500;
}

.link-medium {
  font-size: 16px;
  font-weight: 500;
}


/* =========================================================
   FONT FAMILY
   ========================================================= */


.font-inter {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, sans-serif;
}

.font-teko,
.font-teko * {
  font-family: "Teko", sans-serif !important;
}

.font-jakarta,
.font-jakarta * {
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

/* =========================================================
   OTHERS
   ========================================================= */

commerce-breadcrumbs,
commerce-breadcrumbs * {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
}

commerce-breadcrumbs p {
  margin-right: 20px !important;
  margin-left: 20px !important;
}