button {
  font-family: var(--body-font-family);
}

/* buttons */
a.button:any-link,
button,
button.primary {
  border-radius: 28px;
  border: 2px solid transparent;
  font-size: 1.6rem;
  font-weight: var(--font-weight-bold);
  line-height: 2rem;
  padding: 1.5rem 2.5rem;
  color: #fff;
  background-color: #15884C;
  cursor: pointer;
  outline-color: #fff;
  outline-style: solid;
  outline-width: 1px;
  outline-offset: 0;
  display: inline-block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
a.button:any-link:hover,
button:hover,
button.primary:hover {
  text-decoration: none;
}
a.button:any-link:focus,
button:focus,
button.primary:focus {
  -webkit-box-shadow: 0 0 0 2px #8BB1FF;
  -moz-box-shadow: 0 0 0 2px #8BB1FF;
  box-shadow: 0 0 0 2px #8BB1FF;
}
a.button:any-link:active,
button:active,
button.primary:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
a.button:any-link.small,
button.small,
button.primary.small {
  padding: 1rem 1.5rem;
}

button:disabled,
button:disabled:hover {
  background-color: var(--overlay-background-color);
  cursor: unset;
}

button:disabled:has(.loadingDots) {
  background: #15884C;
}

a.button.secondary,
button.secondary {
  border-radius: 28px;
  font-size: 1.6rem;
  line-height: 2rem;
  font-weight: var(--font-weight-bold);
  padding: 1.5rem 2.5rem;
  background-color: #fff;
  color: #15884C;
  border: 2px solid #15884C;
  font-style: normal;
  cursor: pointer;
  outline-style: solid;
  outline-width: 1px;
  outline-offset: 0;
  outline-color: transparent;
  display: inline-block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
a.button.secondary:focus,
button.secondary:focus {
  -webkit-box-shadow: 0 0 0 2px #8BB1FF;
  -moz-box-shadow: 0 0 0 2px #8BB1FF;
  box-shadow: 0 0 0 2px #8BB1FF;
  /*outline-offset: 0px ;
  outline-color: #fff ;*/
}
a.button.secondary:active,
button.secondary:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
a.button.secondary.small,
button.secondary.small {
  padding: 1rem 1.5rem;
}

a.button.tertiary,
button.tertiary {
  border-radius: 28px;
  font-size: 1.6rem;
  line-height: 2rem;
  font-weight: 400;
  padding: 1.5rem 2.5rem;
  background-color: var(--clr-white);
  color: var(--clr-black);
  border: 1px solid var(--clr-border);
  font-style: normal;
  cursor: pointer;
  outline-style: solid;
  outline-width: 1px;
  outline-offset: 0;
  outline-color: transparent;
  display: inline-block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
a.button.tertiary:hover,
button.tertiary:hover {
  text-decoration: none;
  background-color: var(--clr-white);
  color: var(--clr-black);
  border: 1px solid var(--clr-action);
}
a.button.tertiary:focus,
button.tertiary:focus {
  -webkit-box-shadow: 0 0 0 2px var(--clr-action);
  -moz-box-shadow: 0 0 0 2px var(--clr-action);
  box-shadow: 0 0 0 2px var(--clr-action);
  /*outline-offset: 0px;
  outline-color: #fff;*/
}
a.button.tertiary:active,
button.tertiary:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
a.button.tertiary.small,
button.tertiary.small {
  padding: 0.6rem 1.5rem;
  line-height: 1.9rem;
}

a.icon-button,
button.icon-button {
  border-radius: 50%;
  border: 1px solid #15884C;
  font-size: 1.6rem;
  line-height: 2rem;
  padding: 1.5rem 2.5rem;
  color: #fff;
  background-color: #fff;
  cursor: pointer;
  outline-color: #fff;
  outline-style: solid;
  outline-width: 0px;
  outline-offset: 0;
  display: inline-block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
button.reset,
a.button.reset {
  border-radius: 0px;
  border: none;
  font-size: 1.6rem;
  line-height: 1.2em;
  padding: 0;
  color: #3577FF;
  font-weight: 600;
  background-color: transparent;
  cursor: pointer;
  outline-color: transparent;
  outline-style: none;
  outline-width: 0;
  outline-offset: 0;
  display: inline-block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
button.reset:focus, button.reset:hover,
a.button.reset:focus,
a.button.reset:hover {
  text-decoration: underline;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a:link,
a:visited {
  font-size: 1.6rem;
  line-height: 1.2em;
  color: var(--clr-black);
  font-weight: 600;
  background-color: transparent;
  cursor: pointer;
  outline-color: transparent;
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media (min-width: 1025px) {
  main .section.product-recommendations-container:not(.product-details-container) {
    padding-top: var(--spacing-30) !important;
  }
}
main .section .product-recommendations-wrapper {
  max-width: 100%;
  padding: 0;
  text-align: left;
  margin-bottom: var(--spacing-30);
}
main .section .product-recommendations-wrapper:empty {
  margin-bottom: 0;
}
@media (max-width: 1024px) {
  main .section .product-recommendations.you-may-also-like {
    padding-top: var(--spacing-15);
  }
}
main .section .product-recommendations.you-may-also-like:empty {
  display: none;
}
main .section .product-recommendations ol {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  row-gap: var(--spacing-30);
  column-gap: var(--spacing-15);
}
@media (min-width: 1025px) {
  main .section .product-recommendations ol {
    column-gap: var(--spacing-20);
  }
}
main .section .product-recommendations ol li {
  list-style: none;
}
main .section .product-recommendations ol li a {
  text-decoration: none;
}
main .section .product-recommendations ol li a:hover {
  text-decoration: none;
}
main .section .product-recommendations ol .product-card {
  flex: 0 0 calc(50% - 7.5px);
}
@media (min-width: 1025px) {
  main .section .product-recommendations ol .product-card {
    flex: 0 0 calc(50% - 10px);
  }
}
main .section .recently-viewed.block, main .section .recommendationsBottom-wrapper {
  max-width: 100%;
  padding: 0;
  padding-top: var(--spacing-30);
  text-align: left;
  margin-bottom: var(--spacing-30);
}
main .section .recently-viewed.block:has(ol:empty), main .section .recommendationsBottom-wrapper:has(ol:empty) {
  display: none;
}
main .section .recently-viewed.block a, main .section .recently-viewed.block a:hover, main .section .recently-viewed.block a:focus, main .section .recommendationsBottom-wrapper a, main .section .recommendationsBottom-wrapper a:hover, main .section .recommendationsBottom-wrapper a:focus {
  text-decoration: none;
  border-bottom: 0;
}
@media (min-width: 1025px) {
  main .section .recently-viewed.block ol, main .section .recommendationsBottom-wrapper ol {
    gap: var(--spacing-20) !important;
  }
}
main .section .recently-viewed.block ol, main .section .recommendationsBottom-wrapper ol {
  display: flex;
  padding: 0;
  row-gap: var(--spacing-30);
  column-gap: var(--spacing-15);
  flex-wrap: wrap;
}
main .section .recently-viewed.block ol li, main .section .recommendationsBottom-wrapper ol li {
  list-style: none;
  max-width: calc(33% - 11px);
}
main .section .recently-viewed.block ol .product-card, main .section .recommendationsBottom-wrapper ol .product-card {
  flex: 1 0 calc(33% - var(--spacing-15));
}
@media (max-width: 767px) {
  main .section .recently-viewed.block ol .product-card, main .section .recommendationsBottom-wrapper ol .product-card {
    flex: 1 0 calc(50% - var(--spacing-15));
  }
  main .section .recently-viewed.block ol li, main .section .recommendationsBottom-wrapper ol li {
    max-width: calc(50% - 7px);
  }
}
@media (min-width: 1025px) {
  main .section .recommendationsBottom-wrapper {
    display: none;
  }
  main .section .product-recommendations-container {
    display: block;
  }
}