/* ==================================================
   Fonts
================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-wght-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("../fonts/work-sans-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("../fonts/work-sans-latin-wght-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-primary: "Work Sans", sans-serif;
  --font-secondary: "Fraunces", serif;
  --spacing-20: 1.25rem;
  --spacing-28: 1.75rem;
  --spacing-56: 3.5rem;
  --spacing-84: 5.25rem;
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-24: 1.5rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --clr-tide: #b6ccc3;
  --clr-ink: #262626;
  --clr-air: #f0f1ec;
  --clr-spark: #da1d52;
  --clr-main: #602633;
}

html,
body {
  overflow-x: clip;
  min-height: 2000px;
}

body {
  font-size: 1.125rem;
  line-height: 1.5 !important;
  background-color: var(--clr-air);
}

.ebp-algolia-search-popup__dialog,
.ebp-algolia-search-popup__submit {
  font-family: var(--font-primary);
  border-radius: 0;
}

a {
  color: inherit;
  display: inline-block;
}

.e-con > .e-con-inner,
.ebp-footer-1__inner {
  max-width: 100% !important;
  padding-block: 0 !important;
  padding-inline: 3rem !important;
  box-sizing: border-box;
}

p {
  margin: 0 0 1em 0;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}

.e-con {
  padding-inline: 0 !important;
}

/* ==================================================
   BASE
================================================== */

html {
  font-size: 16px;
}

/* ==================================================
   DESKTOP — based on 1440px design
   1rem = 16px @ 1440px
================================================== */

@media (min-width: 1025px) {
  html {
    font-size: max(14px, 1.111111vw);
  }
}

/* ==================================================
   TABLET
================================================== */

@media (max-width: 767px) {
  html {
    font-size: 14px;
  }

  .wrapper,
  .wrapper-medium,
  #ais-wrapper,
  .woocommerce-page .site-main {
    width: auto !important;
  }
}

/* ==================================================
   MOBILE — based on 390px design
================================================== */

@media (max-width: 390px) {
  html {
    font-size: clamp(12px, 4.102564vw, 16px);
  }
}

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

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  text-wrap: balance;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}