@font-face {
  font-family: "Nanum Pen";
  font-style: normal;
  font-weight: 400;
  src: local(""),
    url("./fonts/nanum-pen-script-v15-latin-regular.woff2") format("woff2"),
    url("./fonts/nanum-pen-script-v15-latin-regular.woff") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: local(""), url("./fonts/roboto-v27-latin-500.woff2") format("woff2"),
    url("./fonts/roboto-v27-latin-500.woff") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: local(""), url("/fonts/roboto-v27-latin-700.woff2") format("woff2"),
    url("./fonts/roboto-v27-latin-700.woff") format("woff");
}

body {
  margin: 0;
  min-height: 100vh;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #f2fbfd;
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.shoptimist--search-embed-content {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 2;
  width: 55%;
}

.shoptimist--logo {
  max-width: 100px;
  margin-bottom: 10px;
}

.shoptimist--product-left,
.shoptimist--product-right {
  background-repeat: no-repeat;
  background-size: auto 130%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.shoptimist--product-left {
  background-image: url("./products-left.png");
  background-position: 0%;
}

.shoptimist--product-right {
  background-image: url("./products-right.png");
  background-position: 100%;
}

.shoptimist--embed-headline {
  font-family: "Roboto", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
  font-size: 18px;
  line-height: 1.3;
  display: block;
  text-align: center;
  color: #36354a;
}

.shoptimist--search-form {
  display: flex;
  min-width: 100%;
  position: relative;
}

.shoptimist--search-input {
  height: 48px;
  width: 100%;
  padding: 12px 0px 12px 62px;
  outline: 0;
  border: 1px solid #d8dcee;
  border-right: 0;
  border-radius: 50px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  font-family: "Roboto", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.35;
  background-color: #fff;
  appearance: none;
  color: #36354a;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M19.4869 18.014L14.046 12.5732C15.2336 11.012 15.7839 9.05808 15.5855 7.10662C15.3872 5.15516 14.455 3.3519 12.9775 2.06166C11.5001 0.771421 9.58773 0.0905361 7.62733 0.156758C5.66693 0.22298 3.80488 1.03137 2.41788 2.41837C1.03088 3.80537 0.222492 5.66742 0.15627 7.62782C0.0900479 9.58821 0.770933 11.5006 2.06117 12.978C3.35141 14.4555 5.15467 15.3877 7.10613 15.586C9.05759 15.7844 11.0115 15.2341 12.5727 14.0465L18.0135 19.4873C18.2106 19.6795 18.4749 19.7871 18.7502 19.7871C19.0254 19.7871 19.2898 19.6795 19.4869 19.4873C19.6821 19.2919 19.7917 19.0269 19.7917 18.7507C19.7917 18.4744 19.6821 18.2095 19.4869 18.014ZM2.29185 7.91484C2.29185 6.80232 2.62175 5.71478 3.23983 4.78976C3.85792 3.86473 4.73642 3.14376 5.76426 2.71802C6.79209 2.29227 7.92309 2.18088 9.01423 2.39792C10.1054 2.61496 11.1077 3.15069 11.8943 3.93736C12.681 4.72403 13.2167 5.72631 13.4338 6.81746C13.6508 7.9086 13.5394 9.0396 13.1137 10.0674C12.6879 11.0953 11.967 11.9738 11.0419 12.5919C10.1169 13.2099 9.02937 13.5398 7.91685 13.5398C6.42555 13.5381 4.99583 12.9449 3.94132 11.8904C2.88681 10.8359 2.29361 9.40614 2.29185 7.91484Z' fill='%23A3A9C3'/%3E %3C/svg%3E ");
  background-repeat: no-repeat;
  background-position: 24px center;
  box-shadow: 0px 10px 16px rgba(15, 39, 45, 0.13);
}

.shoptimist--hidden-input {
  display: none;
}

.shoptimist--search-input::placeholder {
  color: #a3a9c3;
}

.shoptimist--submit-button {
  font-family: "Roboto", system-ui, sans-serif;
  height: 48px;
  cursor: pointer;
  outline: 0;
  border: 0;
  min-width: 48px;
  border-radius: 84px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background-color: #55a747;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 48px 15px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  box-shadow: 0px 10px 16px rgba(15, 39, 45, 0.13);
  position: relative;
  z-index: 3;
}

.shoptimist--embed-subline {
  font-family: "Nanum Pen", system-ui, sans-serif;
  font-size: 22px;
  line-height: 1.1;
  text-align: center;
  margin-top: 18px;
  letter-spacing: -0.03em;
  color: #55a747;
  display: block;
  display: flex;
  justify-content: center;
  align-items: top;
}

.shoptimist--animated-placeholder {
  position: absolute;
  left: 62px;
  top: 14px;
  display: inline-block;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #36354a;
  font-weight: 500;
  font-family: "Roboto", system-ui, sans-serif;
  pointer-events: none;
}

.shoptimist--animated-placeholder-line {
  position: absolute;
  height: 100%;
  width: 1px;
  background-color: #36354a;
  transform-origin: 0 50%;
  top: 0;
  left: 0;
}

.shoptimist--animated-placeholder-letter {
  display: inline-block;
  line-height: 1em;
}

@media only screen and (max-width: 600px) {
  .shoptimist--search-embed-content {
    width: 80%;
  }

  .shoptimist--product-left,
  .shoptimist--product-right {
    display: none;
  }
}

@media only screen and (max-width: 400px) {
  .shoptimist--submit-button span {
    display: none;
  }

  .shoptimist--submit-button::after {
    content: url("data:image/svg+xml,%3Csvg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M20.2884 18.1567L14.5793 12.626C15.8254 11.0391 16.4029 9.05286 16.1947 7.06916C15.9866 5.08546 15.0084 3.25241 13.4581 1.94086C11.9078 0.629305 9.90116 -0.0628287 7.8441 0.00448732C5.78703 0.0718033 3.83315 0.893543 2.37776 2.30346C0.922366 3.71337 0.0741195 5.60619 0.00463208 7.59897C-0.0648554 9.59175 0.649605 11.5357 2.00347 13.0376C3.35733 14.5394 5.24951 15.487 7.2972 15.6886C9.34488 15.8903 11.3952 15.3309 13.0333 14.1237L18.7424 19.6544C18.9492 19.8498 19.2266 19.9591 19.5154 19.9591C19.8043 19.9591 20.0817 19.8498 20.2884 19.6544C20.4932 19.4557 20.6083 19.1864 20.6083 18.9056C20.6083 18.6248 20.4932 18.3554 20.2884 18.1567ZM2.24552 7.89073C2.24552 6.75983 2.59169 5.65433 3.24025 4.71402C3.88881 3.77371 4.81063 3.04083 5.88915 2.60806C6.96767 2.17528 8.15444 2.06205 9.29939 2.28267C10.4443 2.5033 11.496 3.04788 12.3215 3.84755C13.147 4.64721 13.7091 5.66605 13.9369 6.77522C14.1646 7.88439 14.0477 9.03407 13.601 10.0789C13.1542 11.1237 12.3977 12.0167 11.4271 12.645C10.4564 13.2733 9.31527 13.6087 8.14789 13.6087C6.58305 13.6069 5.08284 13.0039 3.97633 11.9319C2.86982 10.86 2.24737 9.40667 2.24552 7.89073Z' fill='white'/%3E %3C/svg%3E ");
    height: 20px;
    width: 21px;
  }

  .shoptimist--submit-button {
    padding: 12px 20px 12px 18px;
  }

  .shoptimist--search-embed-content {
    width: 100%;
  }
}