@charset "UTF-8";
/* ---------------  PHONE EXTREMES --------------- */
/* “Small-phone” – older / compact devices like iPhone SE (≤ 374 px) */
/* “Large-phone” – plus-size & Pro-Max class handsets (≥ 431 px, still < tablet) */
html body {
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
}
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body b,
html body span,
html body p {
  margin: 0;
  padding: 0;
}
html body p {
  line-height: 130%;
}

input[type=text],
input[type=search] {
  font-size: 16px !important;
}

html body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  min-height: 100vh;
}
html body .hidden {
  display: none;
}
html body .disabled {
  pointer-events: none;
  opacity: 0.6;
}
html body .inactive {
  pointer-events: none;
}
html body a {
  color: inherit;
  text-decoration: none;
}
html body a:visited {
  color: inherit;
}
html body svg,
html body img {
  user-select: none;
}

*::-webkit-scrollbar {
  width: 10px;
}
*::-webkit-scrollbar-track {
  border-radius: 10px;
}
*::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background: #6e6e6e;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 100, 100, 0.4);
}

.divider {
  width: 100%;
  height: 2px;
  background-color: #b3bfb8;
  opacity: 0.2;
  border-radius: 5px;
  margin: 0.5rem 0;
}

button,
.btn {
  padding: 0.75rem 2rem;
  background-color: #000;
  box-shadow: 0 1px 7.5px rgba(85, 82, 77, 0.1);
  border: none;
  outline: none;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
button:hover,
.btn:hover {
  opacity: 0.9;
}
@media (hover: none) {
  button:hover,
.btn:hover {
    opacity: 1;
  }
}
button b,
.btn b {
  font-size: 16px;
  color: #fff;
}
button svg,
.btn svg {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.5rem;
}
button svg path,
.btn svg path {
  fill: #fff;
}

html body footer {
  width: 80vw;
  padding: 2rem 10vw;
  background-color: #000;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
html body footer p,
html body footer span,
html body footer b,
html body footer input {
  color: #fff;
}
html body footer .emailSubmitInput {
  border: none;
  outline: none;
  border-radius: inherit;
  padding-left: 1rem;
  height: 100%;
  width: 12vw;
  font-size: 16px;
  background-color: rgba(255, 255, 255, 0);
  caret-color: #fff;
}
html body footer .emailSubmitInput::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
html body footer .emailSubmitInput:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.footerLogoContainer {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 17.5vw;
}
.footerLogoContainer .footerLogo {
  width: 12vw;
  position: relative;
  right: 7.5%;
}

.legalDetails {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}
.legalDetails .copyright {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: flex-start;
  margin-bottom: 0.5rem;
  font-size: 12px;
}
.legalDetails .copyright svg,
.legalDetails .copyright img {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.35rem;
}
.legalDetails .copyright svg path,
.legalDetails .copyright img path {
  stroke: #fff;
}
.legalDetails .legalAddress {
  font-size: 12px;
}
.legalDetails .legalContact {
  margin-top: 0.5rem;
  display: flex;
}
.legalDetails .legalContact .contactMethod {
  font-size: 12px;
}
.legalDetails .legalContact .verticalDivider {
  align-self: stretch;
  width: 1px;
  background-color: #fff;
  margin: 0 0.5rem;
  border-radius: 10px;
}

.primaryDisclaimer {
  border: 1px solid;
  border-color: rgba(255, 255, 255, 0.8);
  padding: 0.75vw;
  text-align: left;
  width: 28.5vw;
  margin-bottom: 0.75rem;
}

.disclaimer {
  color: rgba(255, 255, 255, 0.8);
}

.footerMenu {
  margin-top: 2rem;
  width: 100%;
  display: flex;
  align-items: center;
  color: #fff;
}

.footerMenuBtn {
  font-size: 14px;
  margin-right: 1.5rem;
  cursor: pointer;
}
.footerMenuBtn:hover {
  color: #a9e5d9;
}
@media (hover: none) {
  .footerMenuBtn:hover {
    color: #fff;
  }
}

.footerConnectContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 25vw;
  align-self: stretch;
}

.signUpBtnContainer {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.25rem;
  border-radius: 25px;
  box-shadow: 0 5px 15px rgba(85, 82, 77, 0.2);
  border: 1px solid #fafafa;
}

.signUpPromptContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.signUpPromptTxt {
  font-size: 18px;
  margin: 0 0 1rem 0.5rem;
  color: #fff;
}

.signUpBtn {
  border-radius: inherit;
  padding: 0.75rem 0;
  width: 10vw;
  background-color: #fff;
}
.signUpBtn b {
  color: #000;
}
.signUpBtn b,
.signUpBtn svg,
.signUpBtn img {
  position: relative;
  left: 0.5rem;
}
.signUpBtn svg,
.signUpBtn img {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.5rem;
}
.signUpBtn svg path,
.signUpBtn img path {
  fill: #000;
  stroke: #000;
}

.socialBtnContainer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 90%;
  padding: 0 5%;
}
.socialBtnContainer .socialBtn {
  margin-right: 2rem;
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25%;
}
.socialBtnContainer .socialBtn:last-of-type img {
  transform: scale(0.85);
}
.socialBtnContainer .socialBtn:hover {
  background-color: rgba(169, 229, 217, 0.5);
}
@media (hover: none) {
  .socialBtnContainer .socialBtn:hover svg path,
.socialBtnContainer .socialBtn:hover img path {
    fill: #fff;
  }
}
.socialBtnContainer svg,
.socialBtnContainer img {
  width: 2rem;
  height: 2rem;
}
.socialBtnContainer svg path,
.socialBtnContainer img path {
  fill: #fff;
}

@media (min-width: 901px) and (max-width: 1400px) and (orientation: landscape) {
  footer {
    width: 90vw;
    padding: 2rem 5vw;
  }
  footer .legalDetails .copyright {
    font-size: 12px;
  }
  footer .legalDetails .copyright svg,
footer .legalDetails .copyright img {
    width: 1rem;
    height: 1rem;
  }
  footer .socialBtnContainer .socialBtn {
    margin-right: 1.5rem;
  }

  .legalContainer {
    width: 35vw;
  }

  .primaryDisclaimer {
    width: 32.5vw;
  }

  .footerConnectContainer {
    width: 30vw;
  }

  .emailSubmitInput {
    width: 15vw;
  }

  .signUpBtn {
    width: 12vw;
  }
}
@media (min-width: 901px) and (max-width: 1250px) and (orientation: landscape) {
  .legalContainer {
    width: 30vw;
  }

  .primaryDisclaimer {
    width: 28.5vw;
  }

  .footerConnectContainer {
    width: 35vw;
  }

  .emailSubmitInput {
    width: 16vw;
    font-size: 14px;
  }

  .signUpBtn {
    width: 16vw;
  }

  .footerLogo {
    width: 14.4vw;
  }

  .copyright {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .copyright svg {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
  }
  .copyright svg path {
    stroke: #fff;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  footer {
    flex-direction: column-reverse;
    width: 90vw;
    align-items: center;
    padding: 2rem 5vw;
  }
  footer .footerConnectContainer {
    width: 90vw;
    margin-bottom: 2rem;
    align-self: auto;
  }
  footer .footerConnectContainer .signUpPromptContainer {
    align-self: center;
  }
  footer .footerConnectContainer .signUpPromptContainer .emailSubmitInput {
    width: 35vw;
    font-size: 14px;
  }
  footer .signUpPromptTxt {
    font-size: 16px;
  }
  footer .emailSubmitInput {
    width: 40vw;
    font-size: 14px;
  }
  footer .signUpBtn {
    width: 40vw;
  }
  footer .socialBtnContainer {
    margin-top: 1rem;
    justify-content: center;
  }
  footer .legalContainer {
    width: 80vw;
  }
  footer .primaryDisclaimer {
    width: 70vw;
    padding: 5vw;
  }
  footer .footerLogoContainer {
    align-self: auto;
    margin-top: 3rem;
    width: 100%;
    align-items: center;
  }
  footer .socialBtnContainer .socialBtn {
    margin-right: 5vw;
    width: 2rem;
    height: 2rem;
  }
  footer .socialBtnContainer .socialBtn svg,
footer .socialBtnContainer .socialBtn img {
    width: 1.5rem;
    height: 1.5rem;
  }
  footer .footerMenu {
    width: 80vw;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  footer .footerLogoContainer .footerLogo {
    margin-left: 7.5vw;
    width: 40vw;
  }
  footer .footerLogoContainer .legalDetails {
    align-items: center;
  }
  footer .footerLogoContainer .legalDetails .copyright {
    font-size: 12px;
    justify-content: center;
  }
  footer .footerLogoContainer .legalDetails .copyright svg,
footer .footerLogoContainer .legalDetails .copyright img {
    width: 1rem;
    height: 1rem;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  footer {
    flex-direction: column-reverse;
    width: 60vw;
    align-items: center;
    padding: 2rem 20vw;
  }
  footer .footerConnectContainer {
    width: 60vw;
    margin-bottom: 2rem;
    align-self: auto;
  }

  .signUpPromptTxt {
    font-size: 16px;
  }

  .signUpBtn {
    width: 25vw;
  }

  .socialBtnContainer {
    margin-top: 1rem;
    justify-content: center;
  }

  .legalContainer {
    width: 60vw;
  }

  .primaryDisclaimer {
    width: 50vw;
    padding: 5vw;
  }

  .footerLogoContainer {
    align-self: auto;
    margin-top: 1rem;
    width: 60vw;
    align-items: flex-start;
  }
  .footerLogoContainer .footerLogo {
    align-self: flex-start;
    width: 15vw;
    text-align: start;
    position: relative;
    right: 1vw;
    margin-bottom: 0.5rem;
  }
}
.signUpStatus {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.75rem 0 0.5rem 0.5vw;
}
.signUpStatus svg,
.signUpStatus img {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
}
.signUpStatus svg path,
.signUpStatus img path {
  fill: #fff;
}
.signUpStatus b {
  font-size: 15px;
  color: #fff;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body footer {
    width: 85vw;
    padding: 2rem 15vw;
  }
  html body footer .legalContainer {
    width: 35vw;
  }
  html body footer .primaryDisclaimer {
    width: 32.5vw;
  }
  html body footer .footerMenu .footerMenuBtn {
    font-size: 12px;
  }
}
@media (min-width: 1401px) and (max-width: 1650px) and (orientation: landscape) {
  html body footer {
    width: 85vw;
    padding: 2rem 15vw;
  }
  html body footer .legalContainer {
    width: 35vw;
  }
  html body footer .primaryDisclaimer {
    width: 32.5vw;
  }
  html body footer .footerMenu .footerMenuBtn {
    font-size: 12px;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  html body footer .footerConnectContainer {
    width: 60vw;
    margin-bottom: 2rem;
    align-self: auto;
  }
  html body footer .footerConnectContainer .signUpPromptContainer {
    align-self: center;
  }
  html body footer .footerConnectContainer .signUpPromptContainer .emailSubmitInput {
    width: 27.5vw;
    font-size: 14px;
  }
  html body footer .legalContainer {
    width: 60vw;
  }
  html body footer .legalContainer .generalDisclaimer {
    width: 60vw;
  }
  html body footer .legalContainer .primaryDisclaimer {
    width: 53vw;
    padding: 2.5vw;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body footer .footerLogo {
    align-self: center;
    width: 40vw;
    margin-bottom: 1rem;
    transform: translateX(10%);
  }
  html body footer .legalDetails .legalContact {
    margin-left: 4vw;
    align-self: center;
  }
  html body footer .legalDetails .verticalDivider {
    display: flex;
  }
  html body footer .legalDetails .legalAddress {
    margin: 0.5rem 0;
    text-align: center;
  }
  html body .copyright {
    width: 100%;
    margin-left: 0;
    align-self: center;
  }
  html body .signUpStatus {
    margin: 0.5rem 0;
    margin-left: 2vw;
  }
  html body .signUpStatus b {
    font-size: 12px;
  }
  html body .socialBtnContainer .socialBtn {
    margin-right: 5vw;
  }
  html body .socialBtnContainer .socialBtn:last-of-type {
    margin-right: 2.5vw;
  }
  html body .socialBtnContainer svg {
    width: 8.5vw;
    height: 8.5vw;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body footer {
    flex-direction: column-reverse;
    width: 60vw;
    align-items: center;
    padding: 2rem 20vw;
  }
  html body footer .legalDetails .verticalDivider {
    display: flex;
  }
  html body footer .legalDetails .copyright svg,
html body footer .legalDetails .copyright img {
    width: 1rem;
    height: 1rem;
  }
  html body footer .emailSubmitInput {
    width: 30vw;
    font-size: 14px;
  }
  html body .footerConnectContainer {
    width: 60vw;
    margin-bottom: 2rem;
    align-self: auto;
  }
  html body .signUpPromptTxt {
    font-size: 16px;
  }
  html body .signUpBtn {
    width: 25vw;
  }
  html body .socialBtnContainer {
    margin-top: 1rem;
    justify-content: center;
  }
  html body .legalContainer {
    width: 60vw;
  }
  html body .primaryDisclaimer {
    width: 55vw;
    padding: 2.5vw;
  }
  html body .footerLogoContainer {
    align-self: flex-start;
    align-items: flex-start;
    margin-top: 1rem;
    width: 50vw;
    align-items: center;
  }
  html body .footerLogoContainer .footerLogo {
    margin-left: 2vw;
    align-self: flex-start;
    width: 20vw;
    margin-bottom: 1rem;
    text-align: start;
  }
  html body .footerLogoContainer .copyright {
    justify-content: flex-start;
    align-self: flex-start;
  }
}
.legalContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 12px;
  width: 30vw;
  height: fit-content;
}

html body footer .modal {
  color: #000;
}
html body footer .modal h2,
html body footer .modal h3,
html body footer .modal p,
html body footer .modal b,
html body footer .modal span {
  color: #000;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 8;
}

.modal {
  position: absolute;
  width: 40vw;
  height: 80vh;
  padding: 4vh 2vw;
  background-color: #fff;
  box-shadow: 0 5px 15px rgba(85, 82, 77, 0.2);
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  border-radius: 5px;
  overflow-x: hidden;
}
.modal p {
  font-size: 12px;
  width: 80%;
}

.closeModalBtn {
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 10;
  padding: 0.5rem;
  border-radius: 50%;
  position: absolute;
  top: 4vh;
  right: 25vw;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.closeModalBtn svg {
  width: 1.25vw;
  height: 1.25vw;
}
.closeModalBtn svg path {
  stroke: #fff;
}
.closeModalBtn:hover svg {
  transition: all 1s;
  transform: rotate(-90deg);
  opacity: 0.6;
}
@media (hover: none) {
  .closeModalBtn:hover svg {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

.meetingOverlay .closeModalBtn {
  top: 5vh;
  right: 12vw;
}

.meetingModal {
  width: 70vw;
  height: 70vh;
  padding: 4rem 0;
  max-height: none;
  max-width: none;
  background-color: #fafafa;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  /* Track */
  /* Handle */
  /* Handle on hover */
}
.meetingModal::-webkit-scrollbar {
  width: 7.5px;
}
.meetingModal::-webkit-scrollbar-track {
  border-radius: 7.5px;
}
.meetingModal::-webkit-scrollbar-thumb {
  border-radius: 7.5px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background: #646464;
  cursor: pointer;
}
.meetingModal::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 100, 100, 0.4);
}
.meetingModal .contactInfo {
  background-color: #445f32;
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 2.5px;
}
.meetingModal .contactInfo .contactMethod {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.5rem 0;
}
.meetingModal .contactInfo .contactMethod svg {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 1rem;
}
.meetingModal .contactInfo .contactMethod svg path {
  fill: #fff;
}
.meetingModal .contactInfo b,
.meetingModal .contactInfo span {
  color: #fff;
  font-size: 14px;
}
.meetingModal .meetings-iframe-container {
  width: 100%;
  height: 100%;
}

@media (max-width: 600px) and (orientation: portrait) {
  .modal {
    max-height: 80vh;
    width: 70vw;
    padding: 2.5vw;
    overflow-x: hidden;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  .modal {
    max-height: 80vh;
    width: 70vw;
    padding: 2.5vw;
    overflow-x: hidden;
  }
}
@media (max-width: 900px) and (orientation: landscape) {
  .modal {
    max-height: 80vh;
    width: 70vw;
    padding: 2.5vw;
    overflow-x: hidden;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  html body .overlay .closeModalBtn {
    position: fixed;
    top: 1rem;
    right: 1rem;
  }
  html body .overlay .closeModalBtn svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .overlay .closeModalBtn {
    position: fixed;
    top: 1rem;
    right: 1rem;
  }
  html body .overlay .closeModalBtn svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .overlay .closeModalBtn {
    position: fixed;
    top: 1rem;
    right: 1rem;
  }
  html body .overlay .closeModalBtn svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}
.productCard .addToCartBtn,
.productCard .cartUpdateContainer {
  width: 24vw;
  height: 8vh;
  padding: 0;
  border-radius: 50px;
  overflow: hidden;
}
.productCard .cartUpdateContainer {
  display: none;
  justify-content: space-between;
  align-items: center;
}
.productCard .cartUpdateContainer .cartUpdateBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 5vh;
  padding: 0 1rem;
  background-color: #000;
  cursor: pointer;
  position: relative;
  border-radius: 5px;
}
.productCard .cartUpdateContainer .cartUpdateBtn svg,
.productCard .cartUpdateContainer .cartUpdateBtn img {
  margin: 0;
  width: 2.5vh;
  height: 2.5vh;
  position: relative;
}
.productCard .cartUpdateContainer .cartUpdateBtn svg path,
.productCard .cartUpdateContainer .cartUpdateBtn img path {
  fill: #fff;
}
.productCard .cartUpdateContainer .cartUpdateBtn:first-of-type svg,
.productCard .cartUpdateContainer .cartUpdateBtn:first-of-type img {
  left: 10%;
}
.productCard .cartUpdateContainer .cartUpdateBtn:last-of-type svg,
.productCard .cartUpdateContainer .cartUpdateBtn:last-of-type img {
  right: 10%;
}
.productCard .cartUpdateContainer .cartUpdateBtn:hover {
  opacity: 0.8;
}
@media (hover: none) {
  .productCard .cartUpdateContainer .cartUpdateBtn:hover {
    background-color: #000;
    opacity: 1;
  }
  .productCard .cartUpdateContainer .cartUpdateBtn:hover svg path,
.productCard .cartUpdateContainer .cartUpdateBtn:hover img path {
    fill: #fff;
  }
}
.productCard .cartUpdateContainer .quantityTxt {
  font-size: 28px;
  user-select: none;
}
.productCard .cartUpdateContainer .decreaseBtn {
  border-right: 2px solid #000;
}
.productCard .cartUpdateContainer .increaseBtn {
  border-left: 2px solid #000;
}
.productCard .addToCartBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  background-color: #000;
  cursor: pointer;
}
.productCard .addToCartBtn b {
  color: #fff;
  font-size: 20px;
}
.productCard .addToCartBtn:hover {
  opacity: 0.8;
}
@media (hover: none) {
  .productCard .addToCartBtn:hover {
    opacity: 1;
  }
}
.productCard.addedToCart .addToCartBtn {
  display: none;
}
.productCard.addedToCart .cartUpdateContainer {
  display: flex;
}

@media (min-width: 601px) and (orientation: portrait) {
  html body .cartUpdateContainer {
    width: 70vw;
    height: 6vh;
  }
  html body .cartUpdateContainer .cartUpdateBtn {
    height: 4vh;
    padding: 1vh 1.5vh;
    border: 2px solid #000;
  }
  html body .cartUpdateContainer .cartUpdateBtn svg,
html body .cartUpdateContainer .cartUpdateBtn img {
    width: 2.5vh;
    height: 2.5vh;
  }
  html body .cartUpdateContainer .increaseBtn {
    position: relative;
    left: 1px;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .cartUpdateContainer {
    width: 70vw;
    height: 6vh;
  }
  html body .cartUpdateContainer .cartUpdateBtn {
    height: 4vh;
    padding: 1vh 1.5vh;
    border: 2px solid #000;
  }
  html body .cartUpdateContainer .cartUpdateBtn svg,
html body .cartUpdateContainer .cartUpdateBtn img {
    width: 2.5vh;
    height: 2.5vh;
  }
  html body .cartUpdateContainer .increaseBtn {
    position: relative;
    left: 1px;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .cartUpdateContainer {
    width: 70vw;
    height: 8vh;
  }
  html body .cartUpdateContainer .cartUpdateBtn {
    height: 6vh;
    padding: 1vh 1.5vh;
    border: 2px solid #000;
  }
  html body .cartUpdateContainer .cartUpdateBtn svg,
html body .cartUpdateContainer .cartUpdateBtn img {
    width: 2.5vh;
    height: 2.5vh;
  }
  html body .cartUpdateContainer .increaseBtn {
    position: relative;
    left: 1px;
  }
}
.viewCartBtn {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5.75vh;
  height: 5.75vh;
  position: relative;
}
.viewCartBtn * {
  user-select: none;
}
.viewCartBtn svg {
  width: 5.25vh;
  height: 5.25vh;
}
.viewCartBtn svg path {
  fill: #000;
}
.viewCartBtn:hover {
  opacity: 0.9;
}
@media (hover: none) {
  .viewCartBtn:hover {
    opacity: 1;
  }
}
.viewCartBtn .cartNumberBadge {
  position: absolute;
  top: -0.35vh;
  right: -0.65vh;
  background-color: #ff6b5e;
  color: #000;
  box-shadow: 0 5px 15px rgba(85, 82, 77, 0.2);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.75vh;
  height: 2.75vh;
}
.viewCartBtn .cartNumberBadge .cartNumberTxt {
  font-size: 12px;
  color: #000;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.viewCartBtn .cartNumberBadge.hidden {
  display: none;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body .viewCartBtn {
    width: 5.5vh;
    height: 5.5vh;
  }
  html body .viewCartBtn svg {
    width: 5.5vh;
    height: 5.5vh;
  }
  html body .viewCartBtn .cartNumberBadge {
    width: 2.75vh;
    height: 2.75vh;
    top: -0.75vh;
    right: -1vh;
  }
}
@media (min-width: 1401px) and (max-width: 1650px) and (orientation: landscape) {
  html body .viewCartBtn {
    width: 5.5vh;
    height: 5.5vh;
  }
  html body .viewCartBtn svg {
    width: 5.5vh;
    height: 5.5vh;
  }
  html body .viewCartBtn .cartNumberBadge {
    width: 2.75vh;
    height: 2.75vh;
    top: -0.75vh;
    right: -1vh;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  html body .viewCartBtn {
    width: 5vh;
    height: 5vh;
  }
  html body .viewCartBtn svg {
    width: 4.5vh;
    height: 4.5vh;
  }
  html body .viewCartBtn .cartNumberBadge {
    top: -0.4rem;
    right: -0.5rem;
    width: 2.5vh;
    height: 2.5vh;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .viewCartBtn {
    width: 5.25vh;
    height: 5.25vh;
  }
  html body .viewCartBtn .cartNumberBadge {
    width: 2.5vh;
    height: 2.5vh;
    top: -0.6vh;
    right: -0.6vh;
  }
  html body .viewCartBtn .cartNumberBadge .cartNumberTxt {
    font-size: 9px;
    position: relative;
    top: -2%;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .viewCartBtn {
    width: 8.5vh;
    height: 8.5vh;
  }
  html body .viewCartBtn svg {
    width: 8.5vh;
    height: 8.5vh;
  }
  html body .viewCartBtn .cartNumberBadge {
    width: 4.25vh;
    height: 4.25vh;
    top: -1vh;
    right: -1.5vh;
  }
  html body .viewCartBtn .cartNumberBadge .cartNumberTxt {
    font-size: 8px;
    position: relative;
    top: 7.5%;
  }
}
html body .cartOverlay .closeModalBtn {
  top: 2.5vh;
  right: 20vw;
}

html body .cartModal {
  background-color: #fafafa;
  padding: 2vw 4vw;
  width: 47vw;
  max-height: 90vh;
  height: auto;
}
html body .cartModal h2 {
  font-size: 32px;
  margin-bottom: 0.5rem;
}
html body .cartModal .cartInfoBanner {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #000;
  border-radius: 10px;
  padding: 0.5rem 5%;
  width: 90%;
  margin-bottom: 2rem;
  background-color: #fff;
  box-shadow: 0 1px 7.5px rgba(85, 82, 77, 0.05);
  z-index: 2;
}
html body .cartModal .cartInfoBanner b {
  font-size: 17px;
}
html body .cartModal .cartInfoBanner b span {
  font-size: 19px;
  color: #b91b02;
}
html body .cartModal .cartInfoBanner svg {
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 0.5rem;
}
html body .cartModal .cartInfoBanner svg path {
  fill: #b91b02;
}
html body .cartModal .toCheckoutBtnContainer {
  display: flex;
  align-self: flex-end;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 2vh;
}
html body .cartModal .toCheckoutBtnContainer .savingsContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #445f32;
  margin-bottom: 0.35rem;
}
html body .cartModal .toCheckoutBtnContainer .savingsContainer svg {
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 0.25rem;
}
html body .cartModal .toCheckoutBtnContainer .savingsContainer svg path {
  fill: #445f32;
}
html body .cartModal .toCheckoutBtnContainer .cartToCheckoutBtn {
  padding: 1.25rem 3vw;
  border-radius: 50px;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body .cartOverlay .closeModalBtn {
    position: fixed;
    top: 1vh;
    right: 19vw;
  }
  html body .cartOverlay .cartModal h2 {
    font-size: 28px;
    margin: 0.5rem 0;
  }
  html body .cartOverlay .cartModal .cartInfoBanner {
    padding: 0.5rem 2.5%;
    width: 95%;
    margin-bottom: 1rem;
  }
  html body .cartOverlay .cartModal .cartInfoBanner b {
    font-size: 14px;
  }
  html body .cartOverlay .cartModal .cartInfoBanner b span {
    font-size: 18px;
  }
  html body .cartOverlay .cartModal .cartInfoBanner svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  html body .cartOverlay .closeModalBtn {
    position: fixed;
    top: 1vh;
    right: 1vh;
  }
  html body .cartOverlay .cartModal {
    background-color: #fafafa;
    padding: 4vw 5vw;
    width: 84vw;
  }
  html body .cartOverlay .cartModal .toCheckoutBtnContainer {
    margin-top: 2vh;
  }
  html body .cartOverlay .cartModal .toCheckoutBtnContainer .cartToCheckoutBtn {
    padding: 2vw 4vw 2vw 4vw;
    margin-right: 0.75vw;
  }
  html body .cartOverlay .cartModal .toCheckoutBtnContainer .cartToCheckoutBtn b {
    font-size: 16px;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .cartOverlay .closeModalBtn {
    position: fixed;
    top: 2vh;
    right: 2vh;
  }
  html body .cartOverlay .cartModal {
    background-color: #fafafa;
    padding: 3.5vh 5vw 6.5vh 5vw;
    width: 90vw;
    height: 90vh;
    max-height: none;
    background-color: #fff;
    z-index: 4;
    border-radius: 0;
  }
  html body .cartOverlay .cartModal h2 {
    font-size: 24px;
    margin: 0.5rem 0;
  }
  html body .cartOverlay .cartModal .cartInfoBanner {
    padding: 0.5rem 2.5%;
    width: 95%;
    margin-bottom: 0;
  }
  html body .cartOverlay .cartModal .cartInfoBanner b {
    font-size: 12px;
    transform: translateY(-6.5%);
  }
  html body .cartOverlay .cartModal .cartInfoBanner b span {
    font-size: 19px;
  }
  html body .cartOverlay .cartModal .cartInfoBanner svg {
    width: 1.25em;
    height: 1.25em;
    margin-right: 0.5rem;
  }
  html body .cartOverlay .cartModal .toCheckoutBtnContainer {
    margin-top: 0;
    align-self: center;
  }
  html body .cartOverlay .cartModal .toCheckoutBtnContainer .savingsContainer {
    font-size: 17px;
    margin-bottom: 0.5rem;
  }
  html body .cartOverlay .cartModal .toCheckoutBtnContainer .savingsContainer svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  html body .cartOverlay .cartModal .toCheckoutBtnContainer .cartToCheckoutBtn {
    width: 50vw;
    padding: 1rem 2rem;
    margin-right: 0.75vw;
  }
  html body .cartOverlay .cartModal .toCheckoutBtnContainer .cartToCheckoutBtn b {
    font-size: 16px;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .cartOverlay .closeModalBtn {
    position: fixed;
    top: 1vh;
    right: 1vh;
  }
  html body .cartOverlay .cartModal {
    background-color: #fafafa;
    padding: 2vw 5vw;
    width: 84vw;
  }
  html body .cartOverlay .cartModal h2 {
    display: none;
    margin: 2vh 0 4vh 0;
  }
  html body .cartOverlay .cartModal .toCheckoutBtnContainer {
    margin-top: 2vh;
  }
  html body .cartOverlay .cartModal .toCheckoutBtnContainer .savingsContainer {
    font-size: 12px;
  }
  html body .cartOverlay .cartModal .toCheckoutBtnContainer .savingsContainer svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  html body .cartOverlay .cartModal .toCheckoutBtnContainer .cartToCheckoutBtn {
    padding: 0.75rem 1.5rem;
    margin-right: 0.75vw;
  }
  html body .cartOverlay .cartModal .toCheckoutBtnContainer .cartToCheckoutBtn b {
    font-size: 12px;
  }
}
.cartTable {
  background-color: #fff;
  border-radius: 7.5px;
  box-shadow: 0 5px 15px rgba(85, 82, 77, 0.2);
  padding: 1vw;
  width: 45vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cartTable .goodTxt p,
.cartTable .goodTxt span,
.cartTable .goodTxt b {
  color: #445f32;
  font-weight: bold;
}
.cartTable .shippingInfo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.cartTable .shippingInfo .shippingLogo {
  width: 4vw;
  height: 1.2vw;
}
.cartTable .shippingInfo .cartDisclaimerTxt {
  align-self: center;
}
.cartTable .shippingInfo .verticalDivider {
  width: 2px;
  border-radius: 10px;
  background-color: #e1e1e1;
  align-self: stretch;
  margin: 0 0.75rem;
}
.cartTable .cartTableHeader,
.cartTable .cartTableBody {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cartTable .cartTableBody {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 36vh;
  overflow: auto;
}
.cartTable .tableRow {
  width: 100%;
  display: flex;
  align-items: center;
}
.cartTable .tableCell {
  padding: 0.5vw;
  display: flex;
  text-align: start;
}
.cartTable .imgCell {
  height: 3vw;
  width: 3vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cartTable .imgCell .carouselBtn .carouselBtnFilter {
  width: 100%;
  height: 100%;
  border-radius: 0;
  z-index: 3;
}
.cartTable .imgCell .carouselBtn .carouselBtnFilter .openCarouselBtn svg,
.cartTable .imgCell .carouselBtn .carouselBtnFilter .openCarouselBtn img {
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2rem;
  height: 2rem;
}
.cartTable .imgCell img {
  width: 3vw;
  height: 3vw;
  border-radius: 10px;
}
.cartTable .itemCell {
  width: 13.5vw;
}
.cartTable .priceCell {
  width: 7vw;
}
.cartTable .quantityCell {
  width: 7vw;
}
.cartTable .quantityCell > b {
  margin-left: 1.5vw;
}
.cartTable .quantityCell > b span {
  font-size: 19px;
  color: #b91b02;
}
.cartTable .totalCell {
  width: 7vw;
}
.cartTable .disclaimerCell {
  width: 30.5vw;
  position: relative;
  right: 0.75vw;
}
.cartTable .deleteCell {
  width: 2vw;
}
.cartTable .deleteCell svg,
.cartTable .deleteCell img {
  width: 2vw;
  height: 2vw;
}
.cartTable .imgCell,
.cartTable .itemCell,
.cartTable .priceCell,
.cartTable .totalCell,
.cartTable .quantityTxt {
  user-select: none;
}
.cartTable .quantityToggleContainer {
  display: flex;
  align-items: center;
  width: 100%;
}
.cartTable .quantityToggleContainer .quantityContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
}
.cartTable .quantityToggleContainer .quantityBtn {
  align-self: stretch;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.cartTable .quantityToggleContainer .quantityBtn svg,
.cartTable .quantityToggleContainer .quantityBtn img {
  width: 1vw;
  height: 1vw;
}
.cartTable .quantityToggleContainer .quantityBtn:hover {
  opacity: 0.7;
}
@media (hover: none) {
  .cartTable .quantityToggleContainer .quantityBtn:hover svg path,
.cartTable .quantityToggleContainer .quantityBtn:hover img path {
    fill: #000;
  }
}
.cartTable .quantityToggleContainer .decreaseBtn svg,
.cartTable .quantityToggleContainer .decreaseBtn img {
  transform: rotate(-90deg);
}
.cartTable .quantityToggleContainer .increaseBtn svg,
.cartTable .quantityToggleContainer .increaseBtn img {
  transform: rotate(90deg);
}
.cartTable .bar {
  width: 100%;
  align-self: flex-start;
  margin: 2vh 0;
  height: 2px;
  border-radius: 10px;
  background-color: #ededed;
}
.cartTable .mobileBar {
  display: none;
}
.cartTable .cartSummaryContainer .cartTotalTxt {
  margin-left: 1.5vw;
  color: #445f32;
}
.cartTable .cartSummaryContainer .disclaimerCell span {
  margin-left: 0;
}
.cartTable .cartDeleteBtn {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2vw;
  height: 2vw;
  border-radius: 25%;
}
.cartTable .cartDeleteBtn svg,
.cartTable .cartDeleteBtn img {
  width: 1.25vw;
  height: 1.25vw;
}
.cartTable .cartDeleteBtn svg path,
.cartTable .cartDeleteBtn img path {
  fill: #000;
}
.cartTable .cartDeleteBtn:hover {
  opacity: 0.7;
}
@media (hover: none) {
  .cartTable .cartDeleteBtn:hover svg path,
.cartTable .cartDeleteBtn:hover img path {
    fill: #000;
  }
}
.cartTable .cartStatusContainer {
  display: none;
  justify-content: center;
  align-items: center;
}
.cartTable .cartStatusContainer svg,
.cartTable .cartStatusContainer img {
  width: 2rem;
  height: 2rem;
}
.cartTable .cartToCheckoutBtn {
  background-color: #000;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body .cartTable {
    font-size: 14px;
  }
  html body .cartTable .itemCell {
    width: 22vw;
  }
  html body .cartTable .quantityToggleContainer .quantityContainer {
    width: 2rem;
  }
  html body .cartTable .cartSummaryContainer .cartTotalTxt {
    margin-left: 2.75vw;
  }
  html body .cartTable .cartStatusContainer svg,
html body .cartTable .cartStatusContainer img {
    width: 1.5rem;
    height: 1.5rem;
  }
}
@media (min-width: 1401px) and (max-width: 1650px) and (orientation: landscape) {
  html body .cartTable {
    font-size: 14px;
  }
  html body .cartTable .itemCell {
    width: 22vw;
  }
  html body .cartTable .quantityToggleContainer .quantityContainer {
    width: 2rem;
  }
  html body .cartTable .cartSummaryContainer .cartTotalTxt {
    margin-left: 2.75vw;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  html body .cartTable {
    width: 82vw;
    padding: 2vh 0;
    font-size: 12px;
  }
  html body .cartTable .imgCell {
    width: 8vw;
    margin-right: 2vw;
  }
  html body .cartTable .imgCell img {
    width: 4vw;
    height: 4vw;
    border-radius: 10px;
  }
  html body .cartTable .itemCell {
    width: 26vw;
    padding-right: 2vw;
  }
  html body .cartTable .priceCell {
    width: 12vw;
  }
  html body .cartTable .quantityCell {
    width: 15vw;
  }
  html body .cartTable .totalCell {
    width: 10vw;
  }
  html body .cartTable .disclaimerCell {
    width: 43vw;
  }
  html body .cartTable .quantityToggleContainer .quantityContainer {
    width: 1.5rem;
  }
  html body .cartTable .quantityToggleContainer .quantityBtn svg,
html body .cartTable .quantityToggleContainer .quantityBtn img {
    width: 2vw;
    height: 2vw;
  }
  html body .cartTable .deleteCell {
    width: 7vw;
  }
  html body .cartTable .cartDeleteBtn {
    width: 7vw;
    height: 7vw;
  }
  html body .cartTable .cartDeleteBtn svg,
html body .cartTable .cartDeleteBtn img {
    width: 2.5vw;
    height: 2.5vw;
  }
  html body .cartTable .cartSummaryContainer .cartTotalTxt {
    margin-left: 10vw;
  }
  html body .cartTable .shippingInfo .shippingLogo {
    width: 8vw;
    height: 2.4vw;
  }
  html body .cartTable .cartStatusContainer svg,
html body .cartTable .cartStatusContainer img {
    width: 1.35rem;
    height: 1.35rem;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .cartTable {
    width: 96vw;
    padding: 2vh 0;
    font-size: 15px;
    box-shadow: none;
  }
  html body .cartTable .imgCell {
    width: 14vw;
    height: 14vw;
    margin-right: 2vw;
    display: flex;
    justify-content: center;
    margin-left: 1vw;
  }
  html body .cartTable .imgCell img {
    width: 13vw;
    height: 13vw;
    border-radius: 10px;
    z-index: 2;
  }
  html body .cartTable .itemCell {
    display: none;
  }
  html body .cartTable .priceCell {
    width: 20vw;
    margin-left: 2vw;
  }
  html body .cartTable .quantityCell {
    width: 30vw;
  }
  html body .cartTable .totalCell {
    width: 18vw;
  }
  html body .cartTable .disclaimerCell {
    width: 50vw;
  }
  html body .cartTable .quantityToggleContainer {
    justify-content: space-between;
    padding: 0 8vw 0 0;
  }
  html body .cartTable .quantityToggleContainer .quantityContainer {
    width: 1.5rem;
    font-size: 16px;
  }
  html body .cartTable .quantityToggleContainer .quantityBtn svg,
html body .cartTable .quantityToggleContainer .quantityBtn img {
    width: 4.5vw;
    height: 4.5vw;
  }
  html body .cartTable .cartStatusContainer svg,
html body .cartTable .cartStatusContainer img {
    width: 1.5rem;
    height: 1.5rem;
  }
  html body .cartTable .deleteCell {
    width: 12vw;
  }
  html body .cartTable .deleteCell .cartDeleteBtn {
    width: 8vw;
    height: 8vw;
  }
  html body .cartTable .deleteCell .cartDeleteBtn svg,
html body .cartTable .deleteCell .cartDeleteBtn img {
    width: 5vw;
    height: 5vw;
  }
  html body .cartTable .cartSummaryContainer .cartTotalTxt {
    margin-left: 12vw;
  }
  html body .cartTable .shippingInfo .cartDisclaimerTxt {
    display: none;
  }
  html body .cartTable .shippingInfo .verticalDivider {
    display: none;
  }
  html body .cartTable .shippingInfo .shippingLogo {
    width: 12vw;
    height: 3.6vw;
    margin-right: 0.5rem;
  }
  html body .cartTable .mobileBar {
    display: flex;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .cartTable {
    width: 82vw;
    padding: 2vh 0;
    font-size: 12px;
  }
  html body .cartTable .cartTableBody {
    height: 45vh;
  }
  html body .cartTable .imgCell {
    width: 7vw;
    margin-right: 2vw;
  }
  html body .cartTable .imgCell img {
    width: 6vw;
    height: 6vw;
    border-radius: 10px;
  }
  html body .cartTable .itemCell {
    width: 26vw;
    padding-right: 2vw;
  }
  html body .cartTable .priceCell {
    width: 12vw;
  }
  html body .cartTable .quantityCell {
    width: 15vw;
  }
  html body .cartTable .totalCell {
    width: 10vw;
  }
  html body .cartTable .disclaimerCell {
    width: 43vw;
  }
  html body .cartTable .quantityToggleContainer .quantityContainer {
    width: 1.5rem;
  }
  html body .cartTable .quantityToggleContainer .quantityBtn svg,
html body .cartTable .quantityToggleContainer .quantityBtn img {
    width: 2vw;
    height: 2vw;
  }
  html body .cartTable .deleteCell {
    width: 7vw;
  }
  html body .cartTable .cartDeleteBtn {
    width: 7vw;
    height: 7vw;
  }
  html body .cartTable .cartDeleteBtn svg,
html body .cartTable .cartDeleteBtn img {
    width: 2.5vw;
    height: 2.5vw;
  }
  html body .cartTable .cartStatusContainer svg,
html body .cartTable .cartStatusContainer img {
    width: 1.5rem;
    height: 1.5rem;
  }
  html body .cartTable .cartSummaryContainer .cartTotalTxt {
    margin-left: 10vw;
  }
  html body .cartTable .shippingInfo .shippingLogo {
    width: 7vw;
    height: 2.1vw;
    margin-right: 1rem;
  }
  html body .cartTable .shippingInfo .cartDisclaimerTxt {
    display: none;
  }
  html body .cartTable .shippingInfo .verticalDivider {
    display: none;
  }
}
.nav {
  width: 90vw;
  padding: 1vh 5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  background-color: #fff;
  box-shadow: 0 1px 7.5px rgba(85, 82, 77, 0.1);
  height: 6vh;
}
.nav .navLogoContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.nav .navLogoContainer .verticalDivider {
  height: 75%;
  width: 2px;
  margin: 0 2vw 0 1vw;
  background-color: #e8e8e8;
}
.nav .navLogo {
  height: 6vh;
  width: 24vh;
}
.nav .navBtns {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 1vw;
  gap: 0.5vw;
}
.nav .navCartCta {
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav .navCartCta .productCard {
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav .navCartCta .addToCartBtn,
.nav .navCartCta .cartUpdateContainer,
.nav .navCartCta .buyNowBtn,
.nav .navCartCta .openFiltersBtn {
  box-sizing: border-box;
  order: 1;
  width: 12vw;
  height: 4.8vh;
  border-radius: 35px;
}
.nav .navCartCta .addToCartBtn .cartUpdateBtn,
.nav .navCartCta .cartUpdateContainer .cartUpdateBtn,
.nav .navCartCta .buyNowBtn .cartUpdateBtn,
.nav .navCartCta .openFiltersBtn .cartUpdateBtn {
  width: 3vh;
}
.nav .navCartCta .addToCartBtn .cartUpdateBtn svg,
.nav .navCartCta .addToCartBtn .cartUpdateBtn img,
.nav .navCartCta .cartUpdateContainer .cartUpdateBtn svg,
.nav .navCartCta .cartUpdateContainer .cartUpdateBtn img,
.nav .navCartCta .buyNowBtn .cartUpdateBtn svg,
.nav .navCartCta .buyNowBtn .cartUpdateBtn img,
.nav .navCartCta .openFiltersBtn .cartUpdateBtn svg,
.nav .navCartCta .openFiltersBtn .cartUpdateBtn img {
  margin: 0;
  width: 2vh;
  height: 2vh;
}
.nav .navCartCta .addToCartBtn .quantityTxt,
.nav .navCartCta .cartUpdateContainer .quantityTxt,
.nav .navCartCta .buyNowBtn .quantityTxt,
.nav .navCartCta .openFiltersBtn .quantityTxt {
  font-size: 22px;
}
.nav .navCartCta .addToCartBtn b {
  font-size: 16px;
}
.nav .navCartCta .buyNowBtn {
  order: 2;
  border: 2px solid #000;
  background-color: #fff;
}
.nav .navCartCta .buyNowBtn b {
  color: #000;
}
.nav .navCartCta.cartEmpty .addToCartBtn,
.nav .navCartCta.cartEmpty .cartUpdateContainer {
  order: 2;
  border: 2px solid rgba(0, 0, 0, 0);
}
.nav .navCartCta.cartEmpty .addToCartBtn {
  background-color: #fff;
  border: 2px solid #000;
}
.nav .navCartCta.cartEmpty .addToCartBtn b {
  color: #000;
}
.nav .navCartCta.cartEmpty .addToCartBtn svg path {
  fill: #000;
}
.nav .navCartCta.cartEmpty .buyNowBtn {
  order: 1;
  background-color: #000;
  border: 2px solid #000;
}
.nav .navCartCta.cartEmpty .buyNowBtn b {
  color: #fff;
}
.nav .navCartCta.indexNavBtns.cartEmpty .openFiltersBtn {
  order: 1;
  background-color: #000;
  border: 2px solid #000;
}
.nav .navCartCta.indexNavBtns.cartEmpty .openFiltersBtn b {
  color: #fff;
}
.nav .navCartCta.indexNavBtns.cartEmpty .openFiltersBtn svg path {
  fill: #fff;
}
.nav .navCartCta.indexNavBtns.cartEmpty .buyNowBtn {
  order: 2;
  background-color: #fff;
  border: 2px solid #000;
}
.nav .navCartCta.indexNavBtns.cartEmpty .buyNowBtn b {
  color: #000;
}
.nav .navCartCta.indexNavBtns.cartEmpty .buyNowBtn svg path {
  fill: #000;
}
.nav .navCartCta.indexNavBtns:not(.cartEmpty) .openFiltersBtn {
  order: 2;
  background-color: #fff;
  border: 2px solid #000;
}
.nav .navCartCta.indexNavBtns:not(.cartEmpty) .openFiltersBtn b {
  color: #000;
}
.nav .navCartCta.indexNavBtns:not(.cartEmpty) .openFiltersBtn svg path {
  fill: #000;
}
.nav .navCartCta.indexNavBtns:not(.cartEmpty) .buyNowBtn {
  order: 2;
  background-color: #fff;
  background-color: #000;
}
.nav .navCartCta.indexNavBtns:not(.cartEmpty) .buyNowBtn b {
  color: #fff;
}
.nav .stockMessage {
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav .stockMessage .longStockMessage {
  display: flex;
}
.nav .stockMessage .shortStockMessage {
  display: none;
}
.nav .stockMessage b {
  font-size: 17px;
}
.nav .stockMessage svg {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2.5px;
  margin-left: 0.75rem;
}
.nav .stockMessage svg:first-of-type {
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 0.5rem;
  margin-left: 0;
}
.nav .hidden {
  display: none;
}
.nav .navBtn {
  height: 5.5vh;
  width: 22vh;
  padding: 0 1vw;
}
.nav .mobileCloseSearchBtn {
  display: none;
}
.nav .mobileSearchAndFilterSection {
  display: none;
}
.nav .mobileSearchAndFilterSection .mobileBtn {
  width: 3.5vh;
  height: 3.5vh;
}
.nav .mobileSearchAndFilterSection .mobileBtn svg {
  width: 3.5vh;
  height: 3.5vh;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body .nav .navCartCta .addToCartBtn,
html body .nav .navCartCta .cartUpdateContainer,
html body .nav .navCartCta .buyNowBtn {
    width: 14.4vw;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  html body .nav {
    width: 96vw;
    padding: 1vh 3vw 1vh 1vw;
    height: 5vh;
  }
  html body .nav .navLogoContainer .navLogo {
    height: 5vh;
    width: 5vh;
  }
  html body .nav .navLogoContainer .verticalDivider {
    display: none;
  }
  html body .nav .stockMessage {
    display: none;
  }
  html body .nav .orderProgressImg {
    height: 5vh;
  }
  html body .nav.indexNav .searchAndFilterSection .shopFilters {
    flex-direction: row;
  }
  html body .nav.productNav .navCartCta .productCard, html body .nav.indexNav .navCartCta .productCard {
    flex-grow: 1;
  }
  html body .nav.productNav .navCartCta .buyNowBtn, html body .nav.indexNav .navCartCta .buyNowBtn {
    width: 27vw;
  }
  html body .nav.productNav .navCartCta .addToCartBtn,
html body .nav.productNav .navCartCta .cartUpdateContainer,
html body .nav.productNav .navCartCta .openFiltersBtn, html body .nav.indexNav .navCartCta .addToCartBtn,
html body .nav.indexNav .navCartCta .cartUpdateContainer,
html body .nav.indexNav .navCartCta .openFiltersBtn {
    width: 27vw;
    margin-right: 0;
  }
  html body .nav.productNav .navCartCta .addToCartBtn .cartUpdateBtn,
html body .nav.productNav .navCartCta .cartUpdateContainer .cartUpdateBtn,
html body .nav.productNav .navCartCta .openFiltersBtn .cartUpdateBtn, html body .nav.indexNav .navCartCta .addToCartBtn .cartUpdateBtn,
html body .nav.indexNav .navCartCta .cartUpdateContainer .cartUpdateBtn,
html body .nav.indexNav .navCartCta .openFiltersBtn .cartUpdateBtn {
    width: 1.8vh;
  }
  html body .nav.productNav .navCartCta .addToCartBtn .quantityTxt,
html body .nav.productNav .navCartCta .cartUpdateContainer .quantityTxt,
html body .nav.productNav .navCartCta .openFiltersBtn .quantityTxt, html body .nav.indexNav .navCartCta .addToCartBtn .quantityTxt,
html body .nav.indexNav .navCartCta .cartUpdateContainer .quantityTxt,
html body .nav.indexNav .navCartCta .openFiltersBtn .quantityTxt {
    font-size: 22px;
  }
  html body .nav.productNav .navCartCta .addToCartBtn b, html body .nav.indexNav .navCartCta .addToCartBtn b {
    font-size: 16px;
  }
  html body .nav.productNav .stockMessage, html body .nav.indexNav .stockMessage {
    position: static;
    top: 0;
    left: 0;
    transform: none;
  }
  html body .nav.productNav .stockMessage .longStockMessage, html body .nav.indexNav .stockMessage .longStockMessage {
    display: none;
  }
  html body .nav.productNav .stockMessage .shortStockMessage, html body .nav.indexNav .stockMessage .shortStockMessage {
    display: flex;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .nav {
    width: 96vw;
    padding: 0.5vh 3vw 0.5vh 1vw;
  }
  html body .nav .verticalDivider {
    display: none;
  }
  html body .nav .navLogo {
    display: flex;
    height: 5.5vh;
    width: 5.5vh;
  }
  html body .nav .searchAndFilterSection {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  html body .nav .searchAndFilterSection .searchBar .searchBarInput {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
  }
  html body .nav .searchAndFilterSection .searchBar .searchBtn {
    display: none;
  }
  html body .nav .searchAndFilterSection.activeMobileSearch {
    opacity: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: all;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    z-index: 8;
    display: flex;
  }
  html body .nav .searchAndFilterSection.activeMobileSearch .shopSelect {
    display: none;
  }
  html body .nav .searchAndFilterSection.activeMobileSearch .searchBar {
    width: 70vw;
    background-color: #fff;
    padding: 0.5rem;
  }
  html body .nav .searchAndFilterSection.activeMobileSearch .searchBar .searchBarInput {
    position: relative;
    left: 0;
    width: 50vw;
    height: auto;
    opacity: 1;
    font-size: 15px;
  }
  html body .nav .searchAndFilterSection.activeMobileSearch .searchBar svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 2vw;
  }
  html body .nav .searchAndFilterSection.activeMobileSearch .searchBtn {
    display: flex;
  }
  html body .nav .searchAndFilterSection.activeMobileSearch .mobileCloseSearchBtn {
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10;
    padding: 0.5rem;
    border-radius: 50%;
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  html body .nav .searchAndFilterSection.activeMobileSearch .mobileCloseSearchBtn svg,
html body .nav .searchAndFilterSection.activeMobileSearch .mobileCloseSearchBtn img {
    width: 1.25rem;
    height: 1.25rem;
  }
  html body .nav .searchAndFilterSection.activeMobileSearch .mobileCloseSearchBtn svg path,
html body .nav .searchAndFilterSection.activeMobileSearch .mobileCloseSearchBtn img path {
    stroke: #fff;
  }
  html body .nav .mobileSearchAndFilterSection {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
  }
  html body .nav .mobileBtn {
    width: 4vh;
    height: 4vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  html body .nav .mobileBtn:last-of-type {
    margin-left: 5vw;
    margin-right: 5vw;
  }
  html body .nav .mobileBtn svg {
    width: 4.5vh;
    height: 4.5vh;
  }
  html body .nav .mobileBtn svg path {
    fill: #000;
  }
  html body .nav .stockMessage {
    display: none;
  }
  html body .nav .productCard {
    flex-grow: 1;
  }
  html body .nav .navBtns {
    flex-grow: 1;
    justify-content: space-between;
    margin: 0;
    padding: 0 0.5vw;
  }
  html body .nav .navBtns .addToCartBtn,
html body .nav .navBtns .cartUpdateContainer,
html body .nav .navBtns .buyNowBtn,
html body .nav .navBtns .openFiltersBtn {
    width: 49.5%;
    height: 5vh;
  }
  html body .nav .navBtns .addToCartBtn svg,
html body .nav .navBtns .cartUpdateContainer svg,
html body .nav .navBtns .buyNowBtn svg,
html body .nav .navBtns .openFiltersBtn svg {
    width: 2.5vh;
    height: 2.5vh;
  }
  html body .nav .navBtns .addToCartBtn b,
html body .nav .navBtns .cartUpdateContainer b,
html body .nav .navBtns .buyNowBtn b,
html body .nav .navBtns .openFiltersBtn b {
    white-space: nowrap;
    font-size: 12px;
  }
  html body .nav .navCartCta {
    flex-grow: 1;
    /* 🔧 NEW: ensure the same sizing when .cartEmpty is present */
  }
  html body .nav .navCartCta.cartEmpty .addToCartBtn,
html body .nav .navCartCta.cartEmpty .cartUpdateContainer,
html body .nav .navCartCta.cartEmpty .buyNowBtn {
    width: 49.5%;
    box-sizing: border-box;
    /* same border rule */
  }
  html body .nav .navCartCta .navBtns {
    gap: 0;
  }
  html body .nav .navCartCta .addToCartBtn .cartUpdateBtn,
html body .nav .navCartCta .cartUpdateContainer .cartUpdateBtn {
    padding: 0 1vh;
    width: 2vh;
  }
  html body .nav .navCartCta .addToCartBtn .cartUpdateBtn svg,
html body .nav .navCartCta .addToCartBtn .cartUpdateBtn img,
html body .nav .navCartCta .cartUpdateContainer .cartUpdateBtn svg,
html body .nav .navCartCta .cartUpdateContainer .cartUpdateBtn img {
    width: 1.5vh;
    height: 1.5vh;
    z-index: 6;
  }
  html body .nav .navCartCta .addToCartBtn .cartUpdateBtn svg path,
html body .nav .navCartCta .addToCartBtn .cartUpdateBtn img path,
html body .nav .navCartCta .cartUpdateContainer .cartUpdateBtn svg path,
html body .nav .navCartCta .cartUpdateContainer .cartUpdateBtn img path {
    fill: #fff;
  }
  html body .nav .navCartCta .addToCartBtn .quantityTxt,
html body .nav .navCartCta .cartUpdateContainer .quantityTxt {
    font-size: 16px;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .nav {
    top: 0;
    height: 8vh;
    padding: 2vh 5vw;
  }
  html body .nav .navLogo {
    height: 8vh;
    width: 8vh;
  }
  html body .nav .orderProgressImg {
    height: 8vh;
  }
  html body .nav.indexNav .searchAndFilterSection .shopFilters {
    flex-direction: row;
  }
  html body .nav.productNav .stockMessage, html body .nav.indexNav .stockMessage {
    display: none;
  }
  html body .nav.productNav .navCartCta .productCard, html body .nav.indexNav .navCartCta .productCard {
    flex-grow: 1;
  }
  html body .nav.productNav .navCartCta .addToCartBtn,
html body .nav.productNav .navCartCta .cartUpdateContainer,
html body .nav.productNav .navCartCta .buyNowBtn,
html body .nav.productNav .navCartCta .openFiltersBtn, html body .nav.indexNav .navCartCta .addToCartBtn,
html body .nav.indexNav .navCartCta .cartUpdateContainer,
html body .nav.indexNav .navCartCta .buyNowBtn,
html body .nav.indexNav .navCartCta .openFiltersBtn {
    width: 25vw;
    height: 8vh;
  }
  html body .nav.productNav .navCartCta .addToCartBtn b,
html body .nav.productNav .navCartCta .cartUpdateContainer b,
html body .nav.productNav .navCartCta .buyNowBtn b,
html body .nav.productNav .navCartCta .openFiltersBtn b, html body .nav.indexNav .navCartCta .addToCartBtn b,
html body .nav.indexNav .navCartCta .cartUpdateContainer b,
html body .nav.indexNav .navCartCta .buyNowBtn b,
html body .nav.indexNav .navCartCta .openFiltersBtn b {
    font-size: 13px;
  }
  html body .nav.productNav .navCartCta .addToCartBtn .cartUpdateBtn,
html body .nav.productNav .navCartCta .cartUpdateContainer .cartUpdateBtn,
html body .nav.productNav .navCartCta .buyNowBtn .cartUpdateBtn,
html body .nav.productNav .navCartCta .openFiltersBtn .cartUpdateBtn, html body .nav.indexNav .navCartCta .addToCartBtn .cartUpdateBtn,
html body .nav.indexNav .navCartCta .cartUpdateContainer .cartUpdateBtn,
html body .nav.indexNav .navCartCta .buyNowBtn .cartUpdateBtn,
html body .nav.indexNav .navCartCta .openFiltersBtn .cartUpdateBtn {
    width: 1vw;
  }
  html body .nav.productNav .navCartCta .addToCartBtn .quantityTxt,
html body .nav.productNav .navCartCta .cartUpdateContainer .quantityTxt,
html body .nav.productNav .navCartCta .buyNowBtn .quantityTxt,
html body .nav.productNav .navCartCta .openFiltersBtn .quantityTxt, html body .nav.indexNav .navCartCta .addToCartBtn .quantityTxt,
html body .nav.indexNav .navCartCta .cartUpdateContainer .quantityTxt,
html body .nav.indexNav .navCartCta .buyNowBtn .quantityTxt,
html body .nav.indexNav .navCartCta .openFiltersBtn .quantityTxt {
    font-size: 16px;
  }
}
.content {
  padding-top: 11.5vh;
  min-width: 100vw;
  width: 100vw;
  min-height: 91vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

@media (min-width: 601px) and (orientation: portrait) {
  html body .content {
    padding-top: 10vh;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .content {
    padding-top: 17vh;
  }
}
.promoBar {
  z-index: 4;
  position: fixed;
  top: 8vh;
  left: 0;
  width: 100vw;
  padding: 0;
  height: 5.5vh;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.promoBar h1,
.promoBar h2,
.promoBar b,
.promoBar span {
  color: #fff;
  font-size: 16px;
  margin: 0;
  padding: 0;
  width: fit-content;
  letter-spacing: 0.5px;
}
.promoBar svg,
.promoBar img {
  width: 2vh;
  height: 2vh;
}
.promoBar svg path,
.promoBar img path {
  fill: #fff;
}
.promoBar svg:first-of-type,
.promoBar img:first-of-type {
  margin-right: 0.5vw;
}
.promoBar svg:last-of-type,
.promoBar img:last-of-type {
  margin-left: 0.5vw;
}
.promoBar .verticalBar {
  width: 0.1vw;
  height: 2vh;
  background-color: #fff;
  margin: 0 1vw;
  border-radius: 10px;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body .promoBar h1,
html body .promoBar h2,
html body .promoBar b {
    font-size: 10px;
  }
  html body .promoBar svg:first-of-type,
html body .promoBar img:first-of-type {
    margin-right: 0.75vw;
  }
  html body .promoBar svg:last-of-type,
html body .promoBar img:last-of-type {
    margin-left: 0.75vw;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .promoBar {
    top: 7vh;
  }
  html body .promoBar .verticalBar {
    margin: 0 2vw;
    display: none;
  }
  html body .promoBar h1,
html body .promoBar h2,
html body .promoBar b {
    font-size: 10px;
    margin: 0;
  }
  html body .promoBar b:last-of-type {
    display: none;
  }
  html body .promoBar h2 {
    display: none;
  }
  html body .promoBar svg:first-of-type,
html body .promoBar img:first-of-type {
    margin-right: 0.75vw;
  }
  html body .promoBar svg:last-of-type,
html body .promoBar img:last-of-type {
    margin-left: 0.75vw;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .promoBar {
    height: 5vh;
  }
  html body .promoBar .verticalBar {
    margin: 0 2vw;
  }
  html body .promoBar h1,
html body .promoBar h2,
html body .promoBar b {
    font-size: 10px;
  }
  html body .promoBar svg,
html body .promoBar img {
    width: 3vh;
    height: 3vh;
  }
  html body .promoBar svg:first-of-type,
html body .promoBar img:first-of-type {
    margin-right: 0.75vw;
  }
  html body .promoBar svg:last-of-type,
html body .promoBar img:last-of-type {
    margin-left: 0.75vw;
  }
}
html body .spinnerOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
}
html body .spinnerOverlay.hidden {
  display: none;
}

.spinner {
  display: inline-block;
  width: 80px;
  height: 80px;
}

.spinner:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: transparent #fff transparent;
  animation: spinner 1.2s linear infinite;
}

@keyframes spinner {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.contactModal .contactLogo {
  width: 15vw;
}
.contactModal .contactIntro {
  margin: 1rem 0 1rem 0;
}
.contactModal .contactIntro h3 {
  font-size: 28px;
  margin-bottom: 0.25rem;
}
.contactModal .contactIntro .contactModalMethods {
  display: flex;
  justify-content: center;
  align-items: center;
}
.contactModal .contactIntro .contactModalMethods span {
  font-size: 15px;
}
.contactModal .contactIntro .contactModalMethods .verticalDivider {
  background-color: #000;
  margin: 0 0.5rem;
  width: 2px;
  border-radius: 10px;
  align-self: stretch;
}
.contactModal p {
  margin-bottom: 1.5rem;
  font-size: 15px;
  width: 20vw;
}
.contactModal .contactForm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.contactModal .formField {
  align-items: flex-start;
}
.contactModal .formField label {
  font-size: 17px;
  margin-bottom: 0.5rem;
  color: #000;
}
.contactModal .formField input,
.contactModal .formField select,
.contactModal .formField textarea {
  color: #000;
}
.contactModal .formField input::placeholder,
.contactModal .formField select::placeholder,
.contactModal .formField textarea::placeholder {
  color: gray;
}
.contactModal .contactBtn {
  margin-top: 1rem;
  padding: 1.25rem 0;
  width: 17vw;
}
.contactModal .contactBtn b {
  color: #fff;
}
.contactModal .contactSuccess {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(85, 82, 77, 0.2);
  width: 17vw;
  padding: 2vw 3vw;
}
.contactModal .contactSuccess svg {
  width: 10vw;
  height: 10vw;
}
.contactModal .contactSuccess svg path {
  fill: #445f32;
}
.contactModal .contactSuccess b {
  font-size: 20px;
  margin-top: 1rem;
}
.contactModal .hidden {
  display: none;
}
.contactModal .contactFailMessage {
  margin-top: 0.5rem;
  color: #b91b02;
}

@media (min-width: 601px) and (orientation: portrait) {
  html body .contactModal .contactLogo {
    width: 25vw;
  }
  html body .contactModal .contactForm {
    padding: 4vw;
  }
  html body .contactModal .formField input,
html body .contactModal .formField textarea,
html body .contactModal .formField select {
    width: 36vw;
    padding: 0.75rem 1vw;
    color: #000;
  }
  html body .contactModal .formField select {
    width: 38vw;
  }
  html body .contactModal .contactSuccess {
    width: 38vw;
    padding: 4vw;
  }
  html body .contactModal .contactBtn {
    width: 38vw;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .contactModal {
    width: 90vw;
  }
  html body .contactModal .contactLogo {
    width: 45vw;
  }
  html body .contactModal .contactIntro .contactModalMethods span {
    font-size: 14px;
  }
  html body .contactModal .contactIntro .contactModalMethods .verticalDivider {
    display: flex;
  }
  html body .contactModal .contactForm {
    padding: 8vw 4vw;
  }
  html body .contactModal .formField input,
html body .contactModal .formField textarea,
html body .contactModal .formField select {
    width: 70vw;
    padding: 0.75rem 2vw;
    color: #000;
  }
  html body .contactModal .formField select {
    width: 74vw;
    padding: 0.75rem 2vw;
  }
  html body .contactModal .contactSuccess {
    width: 80vw;
    padding: 4vw;
  }
  html body .contactModal .contactSuccess svg {
    width: 20vw;
    height: 20vw;
  }
  html body .contactModal .contactSuccess b {
    font-size: 16px;
    margin-top: 1rem;
  }
  html body .contactModal .contactBtn {
    width: 70vw;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .contactModal .contactLogo {
    width: 25vw;
  }
  html body .contactModal .contactForm {
    padding: 4vw;
  }
  html body .contactModal .contactIntro .contactModalMethods span {
    font-size: 14px;
  }
  html body .contactModal .contactIntro .contactModalMethods .verticalDivider {
    display: flex;
  }
  html body .contactModal .formField input,
html body .contactModal .formField textarea,
html body .contactModal .formField select {
    width: 36vw;
    padding: 0.75rem 1vw;
    color: #000;
  }
  html body .contactModal .formField select {
    width: 38vw;
  }
  html body .contactModal .contactSuccess {
    width: 38vw;
    padding: 4vw;
  }
  html body .contactModal .contactSuccess b {
    font-size: 16px;
  }
  html body .contactModal .contactBtn {
    width: 38vw;
  }
}
/* ------------------------------------------------------------------
   Stripe-aligned form styles
   (Drop-in replacement for the file you shared – layout & breakpoints
   remain untouched, only the “look & feel” of the fields changes)
   ----------------------------------------------------------------- */
/* --- Stripe colour tokens (override if you already have these) --- */
/* fall back to your existing palette for anything we didn’t touch */
/* ------------------------------------------------------------------
   Base container
------------------------------------------------------------------- */
.form {
  display: flex;
  justify-content: center;
  align-items: stretch;
  box-shadow: 0 5px 15px rgba(85, 82, 77, 0.2);
  border-radius: 12px;
  /* 10 ➜ 12, closer to Stripe */
  background-color: #fff;
  padding: 2vw 3vw;
}

/* ------------------------------------------------------------------
   Field wrapper + label
------------------------------------------------------------------- */
.formField {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.formField label {
  font-size: 15px;
  margin-bottom: 0.5rem;
  color: #000;
  font-weight: 500;
  /* Stripe uses semibold labels */
}

/* ------------------------------------------------------------------
   Inputs, selects & textareas
------------------------------------------------------------------- */
input,
select,
textarea {
  background-color: #ffffff;
  padding: 0.75rem 0.9rem;
  /* room for 16 px font */
  border-radius: 4px;
  /* Stripe radius */
  font-size: 16px;
  /* Stripe default size */
  width: 16vw;
  border: 1px solid #cfd7df;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder,
select::placeholder,
textarea::placeholder {
  color: #8898aa;
  opacity: 1;
  /* keep consistent across browsers */
}
input:disabled, input[readonly],
select:disabled,
select[readonly],
textarea:disabled,
textarea[readonly] {
  background-color: #f6f9fc;
  cursor: not-allowed;
}
input:focus,
select:focus,
textarea:focus {
  border-color: #635bff;
  box-shadow: 0 0 0 1px #635bff;
  /* Stripe focus ring */
}
input.validField,
select.validField,
textarea.validField {
  border-color: #5bcdb6;
}
input.validField:focus,
select.validField:focus,
textarea.validField:focus {
  box-shadow: 0 0 0 1px #5bcdb6;
}
input.invalidField,
select.invalidField,
textarea.invalidField {
  border-color: #df1b41;
}
input.invalidField:focus,
select.invalidField:focus,
textarea.invalidField:focus {
  box-shadow: 0 0 0 1px #df1b41;
}

/* select is normally slightly wider so it lines up – keep that */
select {
  width: 17vw;
}

/* ------------------------------------------------------------------
   Column layout (unchanged)
------------------------------------------------------------------- */
.formColumn {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  width: 17vw;
}
.formColumn h2 {
  margin-bottom: 2rem;
}

/* ------------------------------------------------------------------
   Generic validation helpers (in case you add classes manually)
------------------------------------------------------------------- */
.invalidField {
  border: 1px solid #df1b41;
}

.validField {
  border: 1px solid #5bcdb6;
}

/* ==================================================================
   RESPONSIVE BREAKPOINTS — your original mixins left in place
================================================================== */
/* -------- Desktop sizes (unchanged – your mixins handle widths) */
/* -------- Tablet ------------------------------------------------ */
@media (min-width: 601px) and (orientation: portrait) {
  html body .form {
    padding: 2vw 3vw;
  }
  html body .formColumn {
    width: 37.5vw;
  }
  html body input,
html body select {
    width: 36vw;
  }
}
/* -------- Mobile portrait -------------------------------------- */
@media (max-width: 600px) and (orientation: portrait) {
  html body .form {
    flex-direction: column;
    align-items: flex-start;
    padding: 4vw 6vw;
    margin: 4vh 0;
  }
  html body input,
html body select {
    padding: 0.6rem 3vw;
    font-size: 16px;
    width: 55vw;
  }
  html body select {
    width: 60vw;
  }
  html body .securityBadge {
    width: 100%;
  }
}
/* -------- Mobile landscape ------------------------------------- */
@media (max-width: 950px) and (orientation: landscape) {
  html body .form {
    flex-direction: column;
    align-items: flex-start;
    padding: 4vw 6vw;
    margin: 4vh 0;
  }
  html body input,
html body select {
    padding: 0.6rem 3vw;
    font-size: 16px;
    width: 40vw;
  }
  html body select {
    width: 45.5vw;
  }
}
.stickyWarning {
  position: absolute;
  transform: translateY(100%);
  z-index: 4;
  bottom: -6.5vh;
  background-color: #fff;
  border: 2px solid #000;
  box-shadow: 0 1px 7.5px rgba(85, 82, 77, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.25rem 2vw;
  width: 46vw;
  left: 25vw;
  border-radius: 10px;
  min-height: 2rem;
  font-size: 18px;
}
.stickyWarning svg,
.stickyWarning img {
  width: 2rem;
  height: 2rem;
  margin-right: 0.5rem;
}
.stickyWarning svg path,
.stickyWarning img path {
  fill: #e69500;
}

@media (min-width: 601px) and (orientation: portrait) {
  html body .stickyWarning {
    width: 85vw;
    left: 5vw;
    font-size: 16px;
    padding: 0.5rem 2.5vw;
    font-size: 15px;
    min-height: 1.5rem;
    bottom: -5.5vh;
  }
  html body .stickyWarning svg,
html body .stickyWarning img {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.25rem;
  }
  html body .stickyWarning svg path,
html body .stickyWarning img path {
    fill: #e69500;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .stickyWarning {
    width: 85vw;
    left: 5vw;
    font-size: 16px;
    padding: 0.5rem 2.5vw;
    font-size: 12px;
    min-height: 1.5rem;
    bottom: -6vh;
  }
  html body .stickyWarning svg,
html body .stickyWarning img {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.25rem;
  }
  html body .stickyWarning svg path,
html body .stickyWarning img path {
    fill: #e69500;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .stickyWarning {
    width: 85vw;
    left: 5vw;
    font-size: 16px;
    padding: 0.5rem 2.5vw;
    font-size: 12px;
    min-height: 1.5rem;
    bottom: -10vh;
  }
  html body .stickyWarning svg,
html body .stickyWarning img {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.25rem;
  }
  html body .stickyWarning svg path,
html body .stickyWarning img path {
    fill: #e69500;
  }
}
.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 75vw;
  height: 92vh;
}
.hero .heroImg {
  width: 85vh;
  height: 85vh;
  border-radius: 25px;
}
.hero .heroTxtContainer {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 2.5vw;
  border-radius: 25px;
}
.hero .heroTxtContainer h1 {
  font-size: 48px;
  width: 100%;
  text-align: center;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body .hero {
    width: 85vw;
  }
  html body .hero .heroImg {
    width: 80vh;
    height: 80vh;
  }
  html body .hero .heroTxtContainer h1 {
    font-size: 36px;
  }
}
@media (min-width: 1401px) and (max-width: 1650px) and (orientation: landscape) {
  html body .hero {
    width: 85vw;
  }
  html body .hero .heroImg {
    width: 80vh;
    height: 80vh;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  html body .hero {
    flex-direction: column-reverse;
    justify-content: flex-start;
    height: auto;
    padding: 4vh;
    width: 80vw;
  }
  html body .hero .heroImg {
    width: 80vw;
    height: 80vw;
  }
  html body .hero .heroTxtContainer {
    width: 90%;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .hero {
    flex-direction: column-reverse;
    justify-content: flex-start;
    height: auto;
    padding: 4vh 0;
  }
  html body .hero .heroImg {
    width: 90vw;
    height: 90vw;
  }
  html body .hero .heroTxtContainer {
    margin-right: 0;
    width: 90vw;
  }
  html body .hero .heroTxtContainer h1 {
    width: 100%;
    font-size: 30px;
    margin-top: 2vh;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .hero {
    flex-direction: column-reverse;
    justify-content: flex-start;
    height: auto;
    padding: 6vh 0 10vh 0;
  }
  html body .hero .heroImg {
    width: 60vw;
    height: 60vw;
  }
  html body .hero .heroTxtContainer {
    margin-right: 0;
    width: 60vw;
  }
  html body .hero .heroTxtContainer h1 {
    width: 100%;
    font-size: 30px;
    margin-top: 2vh;
  }
}
html body .searchAndFilterSection {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
html body .searchAndFilterSection .searchBar {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #b3bfb8;
  border-radius: 5px;
  width: 14vw;
  height: 4vh;
  padding: 0 0.5vw;
}
html body .searchAndFilterSection .searchBar .searchBtn {
  cursor: pointer;
  display: flex;
  align-items: center;
}
html body .searchAndFilterSection .searchBar .searchBtn svg,
html body .searchAndFilterSection .searchBar .searchBtn img {
  width: 2.5vh;
  height: 2.5vh;
}
html body .searchAndFilterSection .searchBar .searchBtn svg path,
html body .searchAndFilterSection .searchBar .searchBtn img path {
  fill: #000;
}
html body .searchAndFilterSection .searchBar .searchBarInput {
  border: none;
  outline: none;
  width: 12.5vw;
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-left: 0.5vw;
  color: #000;
  background-color: #fff;
  padding: 0;
}
html body .searchAndFilterSection .searchBar .searchBarInput:focus {
  border: none;
  outline: none;
  color: #000;
  box-shadow: none;
}
html body .searchAndFilterSection input:focus {
  border: none;
  outline: none;
}
html body .searchAndFilterSection input:active {
  border: none;
  outline: none;
}

@media (min-width: 601px) and (orientation: portrait) {
  html body .searchAndFilterSection {
    position: relative;
    right: 1vw;
    justify-content: center;
  }
  html body .searchAndFilterSection .searchBar {
    width: 20vw;
  }
  html body .searchAndFilterSection .searchBar .searchBarInput {
    width: 15.5vw;
    font-size: 14px;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .searchAndFilterSection {
    display: none;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .searchAndFilterSection {
    position: relative;
    right: 1vw;
  }
  html body .searchAndFilterSection .searchBar {
    width: 22vw;
    height: 6vh;
  }
  html body .searchAndFilterSection .searchBar .searchBarInput {
    width: 17.5vw;
    font-size: 12px;
  }
}
.shopFilters {
  display: flex;
  justify-content: center;
  align-items: center;
}

.customDropdown {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
  margin-left: 1rem;
  font-size: 14px;
  width: 15vw;
}
.customDropdown svg,
.customDropdown img {
  width: 2.5vh;
  height: 2.5vh;
  margin-right: 0.5vw;
}
.customDropdown svg path,
.customDropdown img path {
  fill: #000;
}
.customDropdown .selectedOption {
  border: 1px solid #b3bfb8;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  width: 100%;
  height: 4vh;
  padding: 0 0.5vw;
}
.customDropdown .selectedOption .chevronIcon {
  margin-left: auto;
  transition: transform 0.3s ease;
}
.customDropdown .selectedOption .chevronIcon svg,
.customDropdown .selectedOption .chevronIcon img {
  width: 1.5vh;
  height: 1.5vh;
}
.customDropdown .selectedOption .chevronIcon.open {
  transform: rotate(180deg);
}
.customDropdown .optionsList {
  display: none;
  position: absolute;
  width: 100%;
  background-color: white;
  border-radius: 10px;
  border: 1px solid #b3bfb8;
  box-shadow: 0 5px 15px rgba(85, 82, 77, 0.2);
  border-radius: 5px;
  bottom: -0.5rem;
  transform: translateY(100%);
  z-index: 4;
}
.customDropdown .optionsList.show {
  display: block;
}
.customDropdown .optionsList .option {
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 4vh;
  padding: 0 0.5vw;
  border-radius: 2.5px;
}
.customDropdown .optionsList .option:hover {
  background-color: #b3bfb8;
}
.customDropdown .optionsList .option:hover svg path,
.customDropdown .optionsList .option:hover img path {
  fill: #000;
}
@media (hover: none) {
  .customDropdown .optionsList .option:hover {
    background-color: #fff;
    color: #000;
  }
  .customDropdown .optionsList .option:hover svg path,
.customDropdown .optionsList .option:hover img path {
    fill: #000;
  }
}
.customDropdown .optionsList .option .option-emoji {
  margin-right: 0.5rem;
}

@media (min-width: 601px) and (orientation: portrait) {
  html body .shopFilters {
    flex-direction: column;
  }
  html body .shopFilters .customDropdown {
    width: 19vw;
    font-size: 12px;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .shopFilters {
    flex-direction: column;
  }
  html body .customDropdown svg,
html body .customDropdown img {
    width: 2.5vh;
    height: 2.5vh;
    margin-right: 2vw;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .shopFilters {
    flex-direction: column;
  }
  html body .shopFilters .customDropdown {
    width: 20vw;
    font-size: 12px;
  }
  html body .shopFilters .customDropdown .selectedOption,
html body .shopFilters .customDropdown .option {
    height: 6vh;
  }
}
.filterModal {
  height: fit-content;
  padding: 2vh 5vw 4vh 5vw;
  position: relative;
}
.filterModal h2 {
  margin-bottom: 1vh;
}
.filterModal .shopSelect {
  padding: 2vw 2vw;
  margin-left: 0;
  margin-bottom: 3vh;
}
.filterModal .filterViewProductsBtn {
  padding: 1rem 0;
  border-radius: 25px;
  position: absolute;
  bottom: 8vh;
}
.filterModal .filterViewProductsBtn b {
  font-size: 14px;
}

@media (min-width: 601px) and (orientation: portrait) {
  html body .filterModal {
    width: 50vw;
    height: 55vh;
  }
  html body .filterModal h2 {
    font-size: 22px;
  }
  html body .filterModal .shopSelect {
    width: 40vw;
  }
  html body .filterModal .shopSelect .selectedOption {
    padding: 1vw 2vw;
  }
  html body .filterModal .shopSelect svg {
    width: 3vh;
    height: 3vh;
    margin-right: 2vw;
  }
  html body .filterModal .shopSelect svg path {
    fill: #000;
  }
  html body .filterModal .shopSelect .optionsList {
    width: 36vw;
    padding: 2vw 2vw;
  }
  html body .filterModal .shopSelect .optionsList .option {
    height: 5vh;
  }
  html body .filterModal .filterViewProductsBtn {
    padding: 2vh 0;
    width: 40vw;
  }
  html body .filterModal .filterViewProductsBtn b {
    font-size: 16px;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .filterModal {
    width: 70vw;
    height: 55vh;
  }
  html body .filterModal h2 {
    font-size: 22px;
  }
  html body .filterModal .shopSelect {
    width: 60vw;
  }
  html body .filterModal .shopSelect .selectedOption {
    padding: 1vw 2vw;
  }
  html body .filterModal .shopSelect svg {
    width: 3vh;
    height: 3vh;
    margin-right: 2vw;
  }
  html body .filterModal .shopSelect svg path {
    fill: #000;
  }
  html body .filterModal .shopSelect .optionsList {
    width: 56vw;
    padding: 2vw 2vw;
  }
  html body .filterModal .shopSelect .optionsList .option {
    height: 5vh;
  }
  html body .filterModal .filterViewProductsBtn {
    width: 60vw;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .filterModal {
    width: 45vw;
    height: 90vh;
    max-height: none;
  }
  html body .filterModal h2 {
    font-size: 20px;
  }
  html body .filterModal .shopSelect {
    width: 40vw;
  }
  html body .filterModal .shopSelect .selectedOption {
    padding: 1.5vw 3vw;
  }
  html body .filterModal .shopSelect svg {
    width: 5vh;
    height: 5vh;
    margin-right: 2vw;
  }
  html body .filterModal .shopSelect svg path {
    fill: #000;
  }
  html body .filterModal .shopSelect .chevronIcon svg {
    width: 3vh;
    height: 3vh;
  }
  html body .filterModal .shopSelect .optionsList {
    width: 36vw;
    padding: 2vh 2vw;
  }
  html body .filterModal .shopSelect .optionsList .option {
    height: 8vh;
  }
  html body .filterModal .filterViewProductsBtn {
    padding: 2vh 0;
    width: 40vw;
  }
}
.browseProductContainer {
  width: 100vw;
  background-color: #f0f0f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 50vh;
}
.browseProductContainer .carouselBtn .carouselBtnFilter .openCarouselBtn svg,
.browseProductContainer .carouselBtn .carouselBtnFilter .openCarouselBtn img {
  position: absolute;
  top: 0.25vw;
  left: 0.25vw;
  width: 0.75rem;
  height: 0.75rem;
  padding: 0.75rem;
}
.browseProductContainer .productCardContainer {
  width: 81vw;
  padding: 2vw 1vw 0 1vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.browseProductContainer .productCard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  box-shadow: 0 5px 15px rgba(85, 82, 77, 0.2);
  border-radius: 25px;
  padding: 1vw 0 1vw 0;
  background-color: #fff;
  width: 18vw;
  margin: 0 1vw 2vw 1vw;
  align-self: stretch;
  user-select: none;
  cursor: pointer;
}
.browseProductContainer .productCard.last-of-type {
  margin-bottom: 0;
}
.browseProductContainer .productCard .productImgContainer {
  width: 15vw;
  height: 15vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  margin-bottom: 1rem;
}
.browseProductContainer .productCard .productImgContainer .carouselBtn .openCarouselBtn img,
.browseProductContainer .productCard .productImgContainer .carouselBtn svg {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
}
.browseProductContainer .productCard .productImg {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.browseProductContainer .productCard .productTitle {
  font-size: 1.25rem;
  height: 3rem;
}
.browseProductContainer .productCard .productDescription {
  font-size: 13px;
}
.browseProductContainer .productCard .productDetails {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  text-align: center;
  width: 15vw;
}
.browseProductContainer .productCard .inCartBadgeContainer {
  justify-content: center;
  align-items: center;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.5rem;
  border-radius: 0 25px 0 5px;
  background-color: #000;
  z-index: 3;
}
.browseProductContainer .productCard .inCartBadgeContainer svg,
.browseProductContainer .productCard .inCartBadgeContainer img {
  width: 2rem;
  height: 2rem;
}
.browseProductContainer .productCard .inCartBadgeContainer svg path,
.browseProductContainer .productCard .inCartBadgeContainer img path {
  fill: #fff;
}
.browseProductContainer .productCard.addedToCart .inCartBadgeContainer {
  display: flex;
}
.browseProductContainer .hidden {
  display: none;
}
.browseProductContainer .fullPrice {
  font-size: 22px;
  margin-bottom: 0.25rem;
  color: #000;
  text-decoration: line-through;
}
.browseProductContainer .productActionContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.browseProductContainer .productActionContainer .productPriceContainer {
  margin-bottom: 1vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.browseProductContainer .productActionContainer .productPriceContainer .productPrice {
  color: #445f32;
  font-size: 22px;
  margin-right: 0.25rem;
}
.browseProductContainer .addToCartBtn,
.browseProductContainer .cartUpdateContainer {
  width: 14.4vw;
  height: 5.6vh;
  border-radius: 35px;
}
.browseProductContainer .addToCartBtn .cartUpdateBtn,
.browseProductContainer .cartUpdateContainer .cartUpdateBtn {
  width: 3vh;
}
.browseProductContainer .addToCartBtn .cartUpdateBtn svg,
.browseProductContainer .addToCartBtn .cartUpdateBtn img,
.browseProductContainer .cartUpdateContainer .cartUpdateBtn svg,
.browseProductContainer .cartUpdateContainer .cartUpdateBtn img {
  margin: 0;
  width: 2vh;
  height: 2vh;
}
.browseProductContainer .addToCartBtn .quantityTxt,
.browseProductContainer .cartUpdateContainer .quantityTxt {
  font-size: 22px;
}
.browseProductContainer .addToCartBtn b {
  font-size: 16px;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body .browseProductContainer {
    width: 100vw;
  }
  html body .browseProductContainer .productCardContainer {
    width: 97.5vw;
  }
  html body .browseProductContainer .productCard {
    width: 22vw;
  }
  html body .browseProductContainer .productCard .productImgContainer {
    width: 18vw;
    height: 18vw;
  }
  html body .browseProductContainer .productCard .productDetails {
    width: 18vw;
  }
  html body .browseProductContainer .productCard .productActionBtnContainer {
    width: 17vw;
  }
  html body .browseProductContainer .productCard .productActionBtnContainer .productActionBtn b {
    font-size: 13px;
  }
  html body .browseProductContainer .productCard .productActionBtnContainer .addToCartBtn,
html body .browseProductContainer .productCard .productActionBtnContainer .cartUpdateContainer {
    width: 17vw;
    height: 6vh;
  }
}
@media (min-width: 1401px) and (max-width: 1650px) and (orientation: landscape) {
  html body .browseProductContainer {
    width: 100vw;
  }
  html body .browseProductContainer .productCardContainer {
    width: 95vw;
  }
  html body .browseProductContainer .productCard {
    width: 21.5vw;
  }
  html body .browseProductContainer .productCard .productImgContainer {
    width: 18vw;
    height: 18vw;
  }
  html body .browseProductContainer .productCard .productDetails {
    width: 18vw;
  }
  html body .browseProductContainer .productCard .productActionBtnContainer {
    width: 17vw;
  }
  html body .browseProductContainer .productCard .productActionBtnContainer .productActionBtn b {
    font-size: 13px;
  }
  html body .browseProductContainer .productCard .productActionBtnContainer .addToCartBtn,
html body .browseProductContainer .productCard .productActionBtnContainer .cartUpdateContainer {
    width: 17vw;
    height: 6vh;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  html body .browseProductContainer {
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  html body .browseProductContainer .productCardContainer {
    width: 100%;
    padding: 1.5vh 0 1.5vh 0;
    margin-bottom: 1vw;
    justify-content: space-evenly;
  }
  html body .browseProductContainer .productCardContainer .productCard {
    width: 45vw;
    margin: 2vw 0;
    padding: 2vw 0 4vw 0;
    align-self: stretch;
  }
  html body .browseProductContainer .productCardContainer .productCard picture {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  html body .browseProductContainer .productCardContainer .productCard .productImgContainer {
    height: 36vw;
    width: 36vw;
    margin-bottom: 1.5vw;
  }
  html body .browseProductContainer .productCardContainer .productCard .productDetails {
    width: 38vw;
  }
  html body .browseProductContainer .productCardContainer .productCard .productActionBtnContainer {
    width: 34vw;
  }
  html body .browseProductContainer .productCardContainer .productCard .productActionBtnContainer .addToCartBtn,
html body .browseProductContainer .productCardContainer .productCard .productActionBtnContainer .cartUpdateContainer {
    width: 34vw;
    height: 5vh;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .browseProductContainer {
    width: 100vw;
  }
  html body .browseProductContainer .carouselBtn .carouselBtnFilter .openCarouselBtn svg,
html body .browseProductContainer .carouselBtn .carouselBtnFilter .openCarouselBtn img {
    position: absolute;
    top: 0.5vw;
    left: 0.5vw;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0.75rem;
  }
  html body .browseProductContainer .productCardContainer {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 91vw;
  }
  html body .browseProductContainer .productCardContainer .productCard {
    width: 80vw;
    margin: 3vw 1vw 2vw 1vw;
    padding: 2vh 0 5vh 0;
    align-self: center;
  }
  html body .browseProductContainer .productCardContainer .productCard .productImgContainer {
    height: 70vw;
    width: 70vw;
    margin-bottom: 2vh;
  }
  html body .browseProductContainer .productCardContainer .productCard .productDetails {
    width: 65vw;
  }
  html body .browseProductContainer .productCardContainer .productCard .productDetails .productTitle {
    font-size: 18px;
  }
  html body .browseProductContainer .productCardContainer .productCard .productActionBtnContainer {
    width: 70vw;
  }
  html body .browseProductContainer .productCardContainer .productCard .productActionBtnContainer .productActionBtn b {
    font-size: 13px;
  }
  html body .browseProductContainer .productCardContainer .productCard .productActionBtnContainer .addToCartBtn,
html body .browseProductContainer .productCardContainer .productCard .productActionBtnContainer .cartUpdateContainer {
    width: 70vw;
    height: 7vh;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .browseProductContainer {
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  html body .browseProductContainer .productCardContainer {
    width: 100%;
    margin-bottom: 1vw;
    justify-content: space-evenly;
  }
  html body .browseProductContainer .productCardContainer .productCard {
    width: 40vw;
    margin: 2vw 0;
    padding: 2vw 0 4vw 0;
    align-self: stretch;
  }
  html body .browseProductContainer .productCardContainer .productCard picture {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  html body .browseProductContainer .productCardContainer .productCard .productImgContainer {
    height: 36vw;
    width: 36vw;
    margin-bottom: 1.5vw;
  }
  html body .browseProductContainer .productCardContainer .productCard .productDetails {
    width: 32vw;
  }
  html body .browseProductContainer .productCardContainer .productCard .productActionBtnContainer {
    width: 30vw;
  }
  html body .browseProductContainer .productCardContainer .productCard .productActionBtnContainer .addToCartBtn,
html body .browseProductContainer .productCardContainer .productCard .productActionBtnContainer .cartUpdateContainer {
    width: 30vw;
    height: 12vh;
  }
  html body .browseProductContainer .productCardContainer .productCard .productActionBtnContainer .addToCartBtn b,
html body .browseProductContainer .productCardContainer .productCard .productActionBtnContainer .cartUpdateContainer b {
    font-size: 14px;
  }
  html body .browseProductContainer .productCardContainer .productCard .productActionBtnContainer .addToCartBtn .cartUpdateBtn,
html body .browseProductContainer .productCardContainer .productCard .productActionBtnContainer .cartUpdateContainer .cartUpdateBtn {
    width: 3vw;
  }
  html body .browseProductContainer .productCardContainer .productCard .productActionBtnContainer .addToCartBtn .cartUpdateBtn svg,
html body .browseProductContainer .productCardContainer .productCard .productActionBtnContainer .addToCartBtn .cartUpdateBtn img,
html body .browseProductContainer .productCardContainer .productCard .productActionBtnContainer .cartUpdateContainer .cartUpdateBtn svg,
html body .browseProductContainer .productCardContainer .productCard .productActionBtnContainer .cartUpdateContainer .cartUpdateBtn img {
    width: 3.5vh;
    height: 3.5vh;
  }
}
.noProductNotificationContainer {
  width: 100%;
  min-height: 87vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}
.noProductNotificationContainer .noProductNotification {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  padding: 1vw 2vw 1vw 1vw;
  border-radius: 10px;
  margin-bottom: 4vh;
}
.noProductNotificationContainer .noProductNotification .svgContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 2vh;
}
.noProductNotificationContainer .noProductNotification .svgContainer svg,
.noProductNotificationContainer .noProductNotification .svgContainer img {
  width: 5vw;
  height: 5vw;
}
.noProductNotificationContainer .noProductNotification .svgContainer svg path,
.noProductNotificationContainer .noProductNotification .svgContainer img path {
  fill: #000;
}
.noProductNotificationContainer .noProductNotification .noProductDetails {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.noProductNotificationContainer .noProductNotification .noProductDetails b {
  font-size: 36px;
  margin: 1.5vh 0 1.5vh 0;
}
.noProductNotificationContainer .noProductNotification .noProductDetails span {
  font-size: 26px;
}

@media (max-width: 600px) and (orientation: portrait) {
  html body .noProductNotificationContainer .noProductNotification {
    font-size: 16px;
    padding: 2vw 3vw 2vw 2vw;
    margin-bottom: 2vh;
  }
  html body .noProductNotificationContainer .noProductNotification .svgContainer {
    margin-bottom: 1vh;
  }
  html body .noProductNotificationContainer .noProductNotification .svgContainer svg,
html body .noProductNotificationContainer .noProductNotification .svgContainer img {
    width: 15vw;
    height: 15vw;
  }
  html body .noProductNotificationContainer .noProductNotification .noProductDetails b {
    font-size: 24px;
    margin: 1vh 0 1vh 0;
    text-align: center;
  }
  html body .noProductNotificationContainer .noProductNotification .noProductDetails span {
    font-size: 18px;
    text-align: center;
  }
}
.productBenefits {
  width: 14vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 1rem 0 1.25rem 0;
}
.productBenefits .productBenefit {
  width: 12vw;
  padding: 0.5vw 1vw;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(85, 82, 77, 0.2);
  display: flex;
  align-items: center;
  align-self: stretch;
  text-align: left;
  margin-bottom: 0.5rem;
}
.productBenefits .productBenefit b {
  font-size: 13px;
}
.productBenefits .productBenefit:last-of-type {
  margin-bottom: 0;
}
.productBenefits svg,
.productBenefits img {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 1rem;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body .productBenefits {
    width: 19vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1rem 0 1.25rem 0;
  }
  html body .productBenefits .productBenefit {
    width: 16vw;
  }
  html body .productBenefits .productBenefit b {
    font-size: 12px;
  }
}
@media (min-width: 1401px) and (max-width: 1650px) and (orientation: landscape) {
  html body .productBenefits {
    width: 17vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1rem 0 1.25rem 0;
  }
  html body .productBenefits .productBenefit {
    width: 15vw;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  html body .productBenefits {
    width: 38vw;
    margin: 2vh 0;
  }
  html body .productBenefits .productBenefit {
    width: 34vw;
    padding: 1.5vw 2vw;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .productBenefits {
    width: 65vw;
    margin: 0.5rem;
  }
  html body .productBenefits .productBenefit {
    width: 61vw;
    padding: 2vw 2vw;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .productBenefits {
    width: 35vw;
    margin: 1rem 0;
  }
  html body .productBenefits .productBenefit {
    width: 33vw;
    padding: 1vw 1vw;
  }
}
.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 75vw;
  height: 92vh;
}
.hero .heroImg {
  width: 85vh;
  height: 85vh;
  border-radius: 25px;
}
.hero .heroTxtContainer {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 2.5vw;
  border-radius: 25px;
}
.hero .heroTxtContainer h1 {
  font-size: 48px;
  width: 100%;
  text-align: center;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body .hero {
    width: 85vw;
  }
  html body .hero .heroImg {
    width: 80vh;
    height: 80vh;
  }
  html body .hero .heroTxtContainer h1 {
    font-size: 36px;
  }
}
@media (min-width: 1401px) and (max-width: 1650px) and (orientation: landscape) {
  html body .hero {
    width: 85vw;
  }
  html body .hero .heroImg {
    width: 80vh;
    height: 80vh;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  html body .hero {
    flex-direction: column-reverse;
    justify-content: flex-start;
    height: auto;
    padding: 4vh;
    width: 80vw;
  }
  html body .hero .heroImg {
    width: 80vw;
    height: 80vw;
  }
  html body .hero .heroTxtContainer {
    width: 90%;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .hero {
    flex-direction: column-reverse;
    justify-content: flex-start;
    height: auto;
    padding: 4vh 0;
  }
  html body .hero .heroImg {
    width: 90vw;
    height: 90vw;
  }
  html body .hero .heroTxtContainer {
    margin-right: 0;
    width: 90vw;
  }
  html body .hero .heroTxtContainer h1 {
    width: 100%;
    font-size: 30px;
    margin-top: 2vh;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .hero {
    flex-direction: column-reverse;
    justify-content: flex-start;
    height: auto;
    padding: 6vh 0 10vh 0;
  }
  html body .hero .heroImg {
    width: 60vw;
    height: 60vw;
  }
  html body .hero .heroTxtContainer {
    margin-right: 0;
    width: 60vw;
  }
  html body .hero .heroTxtContainer h1 {
    width: 100%;
    font-size: 30px;
    margin-top: 2vh;
  }
}
.benefits {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 1rem;
  width: 100%;
  margin: 2rem 0;
}
.benefits .benefit {
  align-self: center;
  width: 90%;
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 1.25rem 6% 1.25rem 4%;
  box-shadow: 0 5px 15px rgba(85, 82, 77, 0.2);
  border-radius: 25px;
  background-color: #fff;
}
.benefits .benefit:last-of-type {
  margin-bottom: 0;
}
.benefits .benefit svg,
.benefits .benefit img {
  background-color: #000;
  padding: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  margin-right: 1rem;
  overflow: visible;
}
.benefits .benefit svg path,
.benefits .benefit img path {
  fill: #fff;
}
.benefits .benefit .benefitDetails {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.benefits .benefit .benefitDetails b {
  font-size: 22px;
  margin-bottom: 0.25rem;
}
.benefits .benefit .benefitDetails span {
  font-size: 18px;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body .benefits {
    margin: 1.5rem 0;
  }
  html body .benefits .benefit {
    padding: 1rem 6% 1rem 4%;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .benefits .benefit {
    padding: 1rem 5%;
    width: 90%;
    border-radius: 20px;
  }
  html body .benefits .benefit svg,
html body .benefits .benefit img {
    width: 2rem;
    height: 2rem;
  }
  html body .benefits .benefit .benefitDetails b {
    font-size: 16px;
  }
  html body .benefits .benefit .benefitDetails span {
    font-size: 14px;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .benefits .benefit {
    padding: 0.75rem 5%;
    width: 90%;
    border-radius: 20px;
  }
  html body .benefits .benefit svg,
html body .benefits .benefit img {
    width: 2rem;
    height: 2rem;
  }
  html body .benefits .benefit .benefitDetails b {
    font-size: 16px;
  }
  html body .benefits .benefit .benefitDetails span {
    font-size: 14px;
  }
}
.features,
.details {
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6vh 0;
  background-color: #fafafa;
}
.features .featuresContent,
.features .detailsContent,
.details .featuresContent,
.details .detailsContent {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-direction: row-reverse;
}
.features .featuresContent .featuresImg,
.features .featuresContent .detailsImg,
.features .detailsContent .featuresImg,
.features .detailsContent .detailsImg,
.details .featuresContent .featuresImg,
.details .featuresContent .detailsImg,
.details .detailsContent .featuresImg,
.details .detailsContent .detailsImg {
  max-height: 80vh;
  max-width: 70vw;
  border-radius: 10px;
}

.featuresIntro,
.detailsIntro,
.ingredientsIntro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  margin-bottom: 4vh;
}
.featuresIntro h2,
.detailsIntro h2,
.ingredientsIntro h2 {
  text-align: center;
  margin: 0 0 0.5rem 0;
  font-size: 40px;
}
.featuresIntro p,
.detailsIntro p,
.ingredientsIntro p {
  font-size: 18px;
  margin: 1rem 0 2rem 0;
  text-align: center;
  margin-bottom: 4vh;
}

@media (min-width: 601px) and (orientation: portrait) {
  html body .features .featuresIntro,
html body .features .detailsIntro,
html body .details .featuresIntro,
html body .details .detailsIntro {
    width: 60vw;
  }
  html body .features .featuresIntro h2,
html body .features .detailsIntro h2,
html body .details .featuresIntro h2,
html body .details .detailsIntro h2 {
    margin: 0 0 0.5rem 0;
    font-size: 36px;
    text-align: center;
  }
  html body .features .featuresIntro p,
html body .features .detailsIntro p,
html body .details .featuresIntro p,
html body .details .detailsIntro p {
    font-size: 18px;
    margin: 2vh 0 0 0;
  }
  html body .features .featuresContent,
html body .features .detailsContent,
html body .details .featuresContent,
html body .details .detailsContent {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: auto;
    width: 60vw;
  }
  html body .features .featuresContent .featuresImg,
html body .features .featuresContent .detailsImg,
html body .features .detailsContent .featuresImg,
html body .features .detailsContent .detailsImg,
html body .details .featuresContent .featuresImg,
html body .details .featuresContent .detailsImg,
html body .details .detailsContent .featuresImg,
html body .details .detailsContent .detailsImg {
    height: auto;
    width: 60vw;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 4vh;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .features .featuresIntro,
html body .features .detailsIntro,
html body .details .featuresIntro,
html body .details .detailsIntro {
    width: 80vw;
  }
  html body .features .featuresIntro h2,
html body .features .detailsIntro h2,
html body .details .featuresIntro h2,
html body .details .detailsIntro h2 {
    margin: 0 0 0.5rem 0;
    font-size: 28px;
    text-align: center;
  }
  html body .features .featuresIntro p,
html body .features .detailsIntro p,
html body .details .featuresIntro p,
html body .details .detailsIntro p {
    font-size: 16px;
    margin: 2vh 0 2vh 0;
  }
  html body .features .featuresContent,
html body .features .detailsContent,
html body .details .featuresContent,
html body .details .detailsContent {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: auto;
    width: 80vw;
  }
  html body .features .featuresContent .featuresImg,
html body .features .featuresContent .detailsImg,
html body .features .detailsContent .featuresImg,
html body .features .detailsContent .detailsImg,
html body .details .featuresContent .featuresImg,
html body .details .featuresContent .detailsImg,
html body .details .detailsContent .featuresImg,
html body .details .detailsContent .detailsImg {
    width: 80vw;
    max-width: none;
    height: auto;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 4vh;
  }
  html body .features .detailsContent,
html body .details .detailsContent {
    flex-direction: column-reverse;
  }
  html body .details {
    padding-bottom: 0;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .features .featuresIntro,
html body .features .detailsIntro,
html body .details .featuresIntro,
html body .details .detailsIntro {
    width: 60vw;
    margin-bottom: 2rem;
  }
  html body .features .featuresIntro h2,
html body .features .detailsIntro h2,
html body .details .featuresIntro h2,
html body .details .detailsIntro h2 {
    margin: 0 0 0.5rem 0;
    font-size: 28px;
    text-align: center;
  }
  html body .features .featuresIntro p,
html body .features .detailsIntro p,
html body .details .featuresIntro p,
html body .details .detailsIntro p {
    font-size: 14px;
    margin: 2vh 0 0 0;
  }
  html body .features .featuresContent,
html body .features .detailsContent,
html body .details .featuresContent,
html body .details .detailsContent {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: auto;
    width: 60vw;
  }
  html body .features .featuresContent .featuresImg,
html body .features .featuresContent .detailsImg,
html body .features .detailsContent .featuresImg,
html body .features .detailsContent .detailsImg,
html body .details .featuresContent .featuresImg,
html body .details .featuresContent .detailsImg,
html body .details .detailsContent .featuresImg,
html body .details .detailsContent .detailsImg {
    height: auto;
    width: 60vw;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 4vh;
  }
  html body .features .featuresContent .featuresList,
html body .features .featuresContent .detailList,
html body .features .detailsContent .featuresList,
html body .features .detailsContent .detailList,
html body .details .featuresContent .featuresList,
html body .details .featuresContent .detailList,
html body .details .detailsContent .featuresList,
html body .details .detailsContent .detailList {
    height: auto;
    justify-content: flex-start;
  }
  html body .features .featuresContent .featuresList .feature,
html body .features .featuresContent .featuresList .detail,
html body .features .featuresContent .detailList .feature,
html body .features .featuresContent .detailList .detail,
html body .features .detailsContent .featuresList .feature,
html body .features .detailsContent .featuresList .detail,
html body .features .detailsContent .detailList .feature,
html body .features .detailsContent .detailList .detail,
html body .details .featuresContent .featuresList .feature,
html body .details .featuresContent .featuresList .detail,
html body .details .featuresContent .detailList .feature,
html body .details .featuresContent .detailList .detail,
html body .details .detailsContent .featuresList .feature,
html body .details .detailsContent .featuresList .detail,
html body .details .detailsContent .detailList .feature,
html body .details .detailsContent .detailList .detail {
    width: 60vw;
    padding: 0.75vw 1.5vw 0.5vw 1.5vw;
    border-radius: 5px;
    margin-bottom: 3vh;
  }
  html body .features .featuresContent .featuresList .feature b,
html body .features .featuresContent .featuresList .detail b,
html body .features .featuresContent .detailList .feature b,
html body .features .featuresContent .detailList .detail b,
html body .features .detailsContent .featuresList .feature b,
html body .features .detailsContent .featuresList .detail b,
html body .features .detailsContent .detailList .feature b,
html body .features .detailsContent .detailList .detail b,
html body .details .featuresContent .featuresList .feature b,
html body .details .featuresContent .featuresList .detail b,
html body .details .featuresContent .detailList .feature b,
html body .details .featuresContent .detailList .detail b,
html body .details .detailsContent .featuresList .feature b,
html body .details .detailsContent .featuresList .detail b,
html body .details .detailsContent .detailList .feature b,
html body .details .detailsContent .detailList .detail b {
    padding: 1vw 2vw;
    border-radius: 2.5px 10px 10px 2.5px;
    font-size: 14px;
  }
  html body .features .detailsContent,
html body .details .detailsContent {
    flex-direction: column-reverse;
  }
}
.featuresList,
.detailList {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 10px;
}
.featuresList .feature:last-of-type,
.featuresList .detail:last-of-type,
.detailList .feature:last-of-type,
.detailList .detail:last-of-type {
  margin-bottom: 0;
}

.feature,
.detail {
  width: 25vw;
  display: flex;
  flex-direction: column;
  padding: 0.75vw 1.5vw 1vw 1vw;
  margin-bottom: 1rem;
}
.feature b,
.detail b {
  background-color: #000;
  width: fit-content;
  padding: 0.4vw 0.75vw;
  border-radius: 10px;
  font-size: 17px;
  color: #fff;
  margin-bottom: 0.5rem;
}
.feature p,
.detail p {
  font-size: 17px;
  margin-left: 0.25vw;
}
.feature:last-of-type,
.detail:last-of-type {
  margin-bottom: 0;
}

.featuresList {
  margin-right: 5vw;
  margin-left: 0;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body .feature,
html body .detail {
    width: 30vw;
  }
  html body .feature b,
html body .detail b {
    font-size: 16px;
    padding: 0.5vw 1vw;
  }
  html body .feature p,
html body .detail p {
    font-size: 16px;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  html body .featuresList,
html body .detailList {
    height: auto;
    justify-content: flex-start;
    width: 63vw;
    margin-bottom: 4vh;
    margin-left: 0;
  }
  html body .featuresList .feature,
html body .featuresList .detail,
html body .detailList .feature,
html body .detailList .detail {
    width: 60vw;
    padding: 0.75vw 1.5vw 0.5vw 1.5vw;
    border-radius: 5px;
    margin-bottom: 3vh;
  }
  html body .featuresList .feature b,
html body .featuresList .detail b,
html body .detailList .feature b,
html body .detailList .detail b {
    padding: 1.5vw 1.5vw;
    border-radius: 2.5px 10px 10px 2.5px;
    font-size: 15px;
  }
  html body .featuresList .feature p,
html body .featuresList .detail p,
html body .detailList .feature p,
html body .detailList .detail p {
    font-size: 15px;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .featuresList,
html body .detailList {
    height: auto;
    justify-content: flex-start;
    width: 80vw;
    margin-bottom: 4vh;
    margin-left: 0;
  }
  html body .featuresList .feature,
html body .featuresList .detail,
html body .detailList .feature,
html body .detailList .detail {
    width: 80vw;
    padding: 0.75vw 1.5vw 0.5vw 1.5vw;
    border-radius: 5px;
    margin-bottom: 3vh;
  }
  html body .featuresList .feature b,
html body .featuresList .detail b,
html body .detailList .feature b,
html body .detailList .detail b {
    padding: 2vw 2.5vw;
    border-radius: 2.5px 10px 10px 2.5px;
    font-size: 15px;
  }
  html body .featuresList .feature p,
html body .featuresList .detail p,
html body .detailList .feature p,
html body .detailList .detail p {
    font-size: 15px;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .featuresList,
html body .detailList {
    height: auto;
    justify-content: flex-start;
    width: 63vw;
    margin-bottom: 4vh;
    margin-left: 0;
  }
  html body .featuresList .feature,
html body .featuresList .detail,
html body .detailList .feature,
html body .detailList .detail {
    width: 60vw;
    padding: 0.75vw 1.5vw 0.5vw 1.5vw;
    border-radius: 5px;
    margin-bottom: 3vh;
  }
  html body .featuresList .feature b,
html body .featuresList .detail b,
html body .detailList .feature b,
html body .detailList .detail b {
    padding: 1.5vw 1.5vw;
    border-radius: 2.5px 10px 10px 2.5px;
    font-size: 14px;
  }
  html body .featuresList .feature p,
html body .featuresList .detail p,
html body .detailList .feature p,
html body .detailList .detail p {
    font-size: 14px;
  }
}
.detailList {
  margin-right: 0;
  margin-left: 5vw;
}

.ingredients {
  padding: 4vh 0;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ingredientContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 2rem;
  height: 70vh;
}
.ingredientContainer picture {
  height: 100%;
}
.ingredientContainer .ingredientImg,
.ingredientContainer .carouselBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  margin-right: 5vw;
  border-radius: 10px;
  height: 100%;
}

@media (min-width: 601px) and (orientation: portrait) {
  html body .ingredients {
    padding: 4vh 0 0 0;
  }
  html body .ingredients .ingredientsIntro {
    width: 60vw;
    margin: 0;
  }
  html body .ingredients h2 {
    width: 100%;
    font-size: 28px;
    line-height: 40px;
    margin: 2vh 0 1vh 0;
  }
  html body .ingredients .ingredientImg,
html body .ingredients .carouselBtn {
    margin-right: 0;
    width: 60vw;
    height: auto;
    margin-bottom: 4vh;
  }
  html body .ingredientContainer {
    flex-direction: column;
    padding-bottom: 4vh;
    width: 60vw;
    height: auto;
  }
  html body .ingredientList {
    height: auto;
    justify-content: flex-start;
  }
  html body .ingredientDetail {
    height: auto;
    width: 60vw;
    margin-bottom: 4vh;
  }
  html body .ingredientDetail .circleContainer {
    position: relative;
    bottom: 0;
    margin-right: 3vw;
  }
  html body .ingredientDetail .circleContainer svg {
    width: 3.5vw;
    height: 3.5vw;
  }
  html body .ingredientDetail p {
    margin-top: 2vh;
    font-size: 14px;
  }
  html body .ingredientBadgeContainer {
    width: 40vw;
    padding-top: 4vh;
  }
  html body .ingredientBadgeContainer svg {
    width: 3.5vw;
    height: 3.5vw;
    margin: 0 4vw;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .ingredients {
    padding: 4vh 0 0 0;
    width: 80vw;
  }
  html body .ingredients .ingredientsIntro {
    width: 80vw;
    margin: 0 0 4vh 0;
  }
  html body .ingredients .ingredientsIntro h2 {
    width: 100%;
    font-size: 28px;
    line-height: 40px;
    margin: 2vh 0 1vh 0;
  }
  html body .ingredients .ingredientsIntro p {
    font-size: 16px;
    margin: 2vh 0 2vh 0;
  }
  html body .ingredients .ingredientImg,
html body .ingredients .carouselBtn {
    margin-right: 0;
    width: 80vw;
    height: auto;
    margin-bottom: 4vh;
  }
  html body .ingredientContainer {
    flex-direction: column;
    padding-bottom: 4vh;
    width: 80vw;
    height: auto;
  }
  html body .ingredientList {
    height: auto;
    justify-content: flex-start;
  }
  html body .ingredientDetail {
    height: auto;
    width: 80vw;
    margin-bottom: 4vh;
  }
  html body .ingredientDetail .circleContainer {
    position: relative;
    bottom: 0;
    margin-right: 3vw;
  }
  html body .ingredientDetail .circleContainer svg {
    width: 7vw;
    height: 7vw;
  }
  html body .ingredientDetail p {
    margin-top: 2vh;
    font-size: 14px;
  }
  html body .ingredientBadgeContainer {
    width: 60vw;
    padding-top: 4vh;
  }
  html body .ingredientBadgeContainer svg {
    width: 7vw;
    height: 7vw;
    margin: 0 4vw;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .ingredients {
    padding: 4vh 0 0 0;
  }
  html body .ingredients h2 {
    width: 100%;
    font-size: 28px;
    line-height: 40px;
    margin: 2vh 0 4vh 0;
  }
  html body .ingredientContainer {
    flex-direction: column;
    padding-bottom: 4vh;
    width: 60vw;
    height: auto;
  }
  html body .ingredientContainer .ingredientImg,
html body .ingredientContainer .carouselBtn {
    margin-right: 0;
    width: 60vw;
    height: auto;
    margin-bottom: 4vh;
  }
  html body .ingredientList {
    height: auto;
    justify-content: flex-start;
  }
  html body .ingredientDetail {
    height: auto;
    width: 60vw;
    margin-bottom: 4vh;
  }
  html body .ingredientDetail .circleContainer {
    position: relative;
    bottom: 0;
    margin-right: 3vw;
  }
  html body .ingredientDetail .circleContainer svg {
    width: 3.5vw;
    height: 3.5vw;
  }
  html body .ingredientDetail p {
    margin-top: 2vh;
    font-size: 14px;
  }
  html body .ingredientBadgeContainer {
    width: 40vw;
    padding-top: 4vh;
  }
  html body .ingredientBadgeContainer svg {
    width: 3.5vw;
    height: 3.5vw;
    margin: 0 4vw;
  }
}
.ingredientList {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.ingredientList .ingredient {
  width: 25vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 3rem;
}
.ingredientList .ingredient svg,
.ingredientList .ingredient img {
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 1rem;
}
.ingredientList .ingredient svg path,
.ingredientList .ingredient img path {
  fill: #000;
}
.ingredientList .ingredient .ingredientDetails {
  display: flex;
  flex-direction: column;
  width: 70%;
}
.ingredientList .ingredient .ingredientDetails b {
  font-size: 22px;
  margin-bottom: 0.25rem;
}
.ingredientList .ingredient .ingredientDetails span {
  font-size: 17px;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body .ingredientList .ingredient {
    width: 30vw;
  }
  html body .ingredientList .ingredient svg,
html body .ingredientList .ingredient img {
    width: 3.75rem;
    height: 3.75rem;
    margin-bottom: 0.75rem;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  html body .ingredientList .ingredient {
    width: 60vw;
  }
  html body .ingredientList .ingredient svg,
html body .ingredientList .ingredient img {
    width: 10vw;
    height: 10vw;
    margin-bottom: 0.75rem;
  }
  html body .ingredientList .ingredient .ingredientDetails b {
    font-size: 20px;
  }
  html body .ingredientList .ingredient .ingredientDetails span {
    font-size: 16px;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .ingredientList .ingredient {
    width: 100%;
    margin-bottom: 2rem;
  }
  html body .ingredientList .ingredient svg,
html body .ingredientList .ingredient img {
    width: 20vw;
    height: 20vw;
    margin-bottom: 2vh;
  }
  html body .ingredientList .ingredient .ingredientDetails b {
    font-size: 18px;
  }
  html body .ingredientList .ingredient .ingredientDetails span {
    font-size: 14px;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .ingredientList .ingredient {
    width: 60vw;
  }
  html body .ingredientList .ingredient svg,
html body .ingredientList .ingredient img {
    width: 10vw;
    height: 10vw;
    margin-bottom: 0.75rem;
  }
  html body .ingredientList .ingredient .ingredientDetails b {
    font-size: 20px;
  }
  html body .ingredientList .ingredient .ingredientDetails span {
    font-size: 16px;
  }
}
.faqs {
  width: 100vw;
  padding: 4rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fafafa;
}
.faqs h2 {
  font-size: 40px;
  margin-bottom: 2rem;
}
.faqs .faqList {
  margin-top: 2rem;
}
.faqs .faq {
  width: 40vw;
  padding: 1.5rem 0;
  border-top: 1px solid #f4f4f4;
  cursor: pointer;
  user-select: none;
}
.faqs .faq .faqQ {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}
.faqs .faq p {
  font-weight: normal;
  font-size: 15px;
  margin-top: 1rem;
}
.faqs .faq:last-of-type {
  border-bottom: 1px solid #fafafa;
}
.faqs .qBtn {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faqs .qBtn svg,
.faqs .qBtn img {
  width: 1rem;
  height: 1rem;
}

@media (min-width: 601px) and (orientation: portrait) {
  html body .faqs {
    padding: 4vh 0 6vh 0;
  }
  html body .faqs h2 {
    width: 80%;
    font-size: 28px;
    margin-bottom: 6vh;
    text-align: center;
  }
  html body .faq {
    width: 60vw;
    padding: 1.5rem 0;
    user-select: none;
  }
  html body .faq p {
    margin-top: 4vh;
  }
  html body .faq:last-of-type {
    border-bottom: 1px solid #fafafa;
  }
  html body .qBtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  html body .qBtn svg {
    width: 1rem;
    height: 1rem;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .faqs {
    padding: 4vh 0 6vh 0;
  }
  html body .faqs h2 {
    width: 80%;
    font-size: 28px;
    margin-bottom: 6vh;
    text-align: center;
  }
  html body .faq {
    width: 80vw;
    padding: 3vh 0;
    user-select: none;
  }
  html body .faq p {
    margin-top: 4vh;
  }
  html body .faq:last-of-type {
    border-bottom: 1px solid #fafafa;
  }
  html body .qBtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  html body .qBtn svg {
    width: 1rem;
    height: 1rem;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .faqs {
    padding: 8vh 0 10vh 0;
  }
  html body .faqs h2 {
    width: 80%;
    font-size: 28px;
    margin-bottom: 6vh;
    text-align: center;
  }
  html body .faq {
    width: 80vw;
    padding: 1.5rem 0;
    user-select: none;
  }
  html body .faq p {
    margin-top: 4vh;
  }
  html body .faq:last-of-type {
    border-bottom: 1px solid #fafafa;
  }
  html body .qBtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  html body .qBtn svg {
    width: 1rem;
    height: 1rem;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  html body .faqs .faqList .faq {
    width: 70vw;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .faqs .faqList .faq {
    width: 80vw;
  }
  html body .faqs .faqList .faq .qBtn .faqQ {
    font-size: 14px;
  }
  html body .faqs .faqList .faq .faqA,
html body .faqs .faqList .faq p {
    font-size: 14px;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .faqs .faqList .faq {
    width: 70vw;
  }
  html body .faqs .faqList .faq .qBtn .faqQ {
    font-size: 14px;
  }
  html body .faqs .faqList .faq .faqA,
html body .faqs .faqList .faq p {
    font-size: 14px;
  }
}
body {
  max-height: 100vh;
}
body .content.legal {
  background-color: #f0f0f0;
}
body .content.legal .legalContent {
  min-height: auto;
  height: 70vh;
  overflow-y: auto;
}
body .content.legal .legalContent a {
  color: #0066cc;
}
body .content.legal .legalContent a a:visited {
  color: #551a8b;
}
body .content.legal .legalContent ul {
  margin: 0 0 1rem 0;
}

.legalContent {
  background-color: #fff;
  border-radius: 10px;
  flex-grow: 1;
  margin: 4vh 0 2vh 0;
  width: 50vw;
  padding: 5vh 5vw;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.legalContent p {
  margin-bottom: 2rem;
}
.legalContent h1,
.legalContent h2,
.legalContent h3 {
  margin-bottom: 1rem;
}
.legalContent h1 {
  font-size: 30px;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body .legalContent {
    width: 80vw;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  html body .content {
    height: auto;
  }
  html body .legalContent {
    height: 60vh;
    width: 80vw;
    flex-grow: none;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .content {
    height: auto;
  }
  html body .legalContent {
    height: 60vh;
    width: 75vw;
    flex-grow: none;
  }
  html body .legalContent h2,
html body .legalContent h1 {
    font-size: 20px;
  }
  html body .legalContent h3 {
    font-size: 18px;
  }
  html body .legalContent p,
html body .legalContent li {
    font-size: 14px;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .content {
    height: auto;
  }
  html body .legalContent {
    height: 60vh;
    width: 75vw;
    flex-grow: none;
  }
  html body .legalContent h2,
html body .legalContent h1 {
    font-size: 20px;
  }
  html body .legalContent h3 {
    font-size: 18px;
  }
  html body .legalContent p {
    font-size: 14px;
  }
}
body {
  max-height: 100vh;
}

.content.notFoundContent {
  min-height: auto;
  height: 89vh;
  overflow-y: auto;
  background-color: #f0f0f0;
}

.notFoundContainer {
  width: 100vw;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}

.notFoundCard {
  width: 20vw;
  background-color: #fff;
  box-shadow: 0 5px 15px rgba(85, 82, 77, 0.2);
  border-radius: 25px;
  padding: 5vh 5vw;
  display: flex;
  justify-content: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.notFoundCard h2 {
  color: #b91b02;
}
.notFoundCard p {
  text-align: center;
  margin: 1rem 0 2rem 0;
}
.notFoundCard .notFoundBtn {
  padding: 1.5rem 0;
  width: 15vw;
}

@media (min-width: 601px) and (orientation: portrait) {
  html body .content {
    height: auto;
  }
  html body .notFoundContainer {
    width: 80vw;
    flex-grow: none;
    padding: 10vh 0;
  }
  html body .notFoundContainer .notFoundCard {
    width: 50vw;
  }
  html body .notFoundContainer .notFoundCard .notFoundBtn {
    width: 35vw;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .content {
    height: auto;
  }
  html body .notFoundContainer {
    flex-grow: none;
    padding: 10vh 0;
  }
  html body .notFoundContainer .notFoundCard {
    width: 60vw;
    padding: 10vw;
  }
  html body .notFoundContainer .notFoundCard h1 {
    font-size: 24px;
  }
  html body .notFoundContainer .notFoundCard p {
    font-size: 14px;
  }
  html body .notFoundContainer .notFoundCard .notFoundBtn {
    width: 50vw;
    padding: 1.25rem 0;
  }
  html body .notFoundContainer .notFoundCard .notFoundBtn b {
    font-size: 14px;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .content {
    height: auto;
  }
  html body .notFoundContainer {
    flex-grow: none;
    padding: 10vh 0;
  }
  html body .notFoundContainer .notFoundCard {
    width: 60vw;
    padding: 5vw;
  }
  html body .notFoundContainer .notFoundCard h1 {
    font-size: 24px;
  }
  html body .notFoundContainer .notFoundCard p {
    font-size: 14px;
  }
  html body .notFoundContainer .notFoundCard .notFoundBtn {
    width: 50vw;
    padding: 1.25rem 0;
  }
  html body .notFoundContainer .notFoundCard .notFoundBtn b {
    font-size: 14px;
  }
}
html body .crisp-client [aria-label="Open chat"] {
  position: relative !important;
  transition: none !important;
  transform: scale(1.4) translate(-10%, -10%) !important;
  box-shadow: 0 5px 15px rgba(85, 82, 77, 0.2) !important;
}

html body .crisp-client [aria-label="Open chat"]::after {
  content: "" !important;
  position: absolute !important;
  top: -8px !important;
  left: -8px !important;
  width: 25px !important;
  height: 25px !important;
  z-index: 1000 !important;
  background: url("/static/shop/shared/images/svgs/chatHeart.svg") no-repeat center center !important;
  background-size: contain !important;
  transform: scaleX(-1) !important;
  pointer-events: none !important;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body .crisp-client [aria-label="Open chat"] {
    transition: none !important;
    transform: scale(1.3) translate(-7.5%, -7.5%) !important;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  html body .crisp-client [aria-label="Open chat"] {
    transition: none !important;
    transform: scale(1.3) translate(-7.5%, -7.5%) !important;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .crisp-client [aria-label="Open chat"] {
    transform: scale(1) translate(10%, 10%) !important;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .crisp-client[aria-label="Open chat"] {
    transform: none !important;
  }
}
.exitIntentOverlay,
.welcomeOverlay {
  z-index: 10;
}
.exitIntentOverlay .closeModalBtn,
.welcomeOverlay .closeModalBtn {
  top: 0.5vw;
  right: 25vw;
  border: 1px solid #b3bfb8;
}

.emphasisDiv {
  width: 6vw;
  height: 100vh;
  background-color: #000;
}

.exitIntentModal,
.welcomeModal {
  height: 96vh;
  width: 40vw;
  padding: 2vh 0;
  border-radius: 0;
  position: relative;
}
.exitIntentModal .exitIntro,
.exitIntentModal .welcomeIntro,
.welcomeModal .exitIntro,
.welcomeModal .welcomeIntro {
  display: flex;
  justify-content: center;
  align-items: center;
}
.exitIntentModal .exitIntro .exitLogo,
.exitIntentModal .welcomeIntro .exitLogo,
.welcomeModal .exitIntro .exitLogo,
.welcomeModal .welcomeIntro .exitLogo {
  width: 7.5vw;
  height: 1.875vw;
  display: flex;
}
.exitIntentModal .exitIntro .veritcalDivider,
.exitIntentModal .welcomeIntro .veritcalDivider,
.welcomeModal .exitIntro .veritcalDivider,
.welcomeModal .welcomeIntro .veritcalDivider {
  margin: 0 0.5vw 0 0.5vw;
  width: 2px;
  height: 70%;
  background-color: #ededed;
}
.exitIntentModal .exitIntro b,
.exitIntentModal .exitIntro h1,
.exitIntentModal .welcomeIntro b,
.exitIntentModal .welcomeIntro h1,
.welcomeModal .exitIntro b,
.welcomeModal .exitIntro h1,
.welcomeModal .welcomeIntro b,
.welcomeModal .welcomeIntro h1 {
  font-size: 24px;
}
.exitIntentModal .exitIntro b span,
.exitIntentModal .exitIntro h1 span,
.exitIntentModal .welcomeIntro b span,
.exitIntentModal .welcomeIntro h1 span,
.welcomeModal .exitIntro b span,
.welcomeModal .exitIntro h1 span,
.welcomeModal .welcomeIntro b span,
.welcomeModal .welcomeIntro h1 span {
  color: #00a8a8;
}
.exitIntentModal .exitIntro .exitLogoMobile,
.exitIntentModal .welcomeIntro .exitLogoMobile,
.welcomeModal .exitIntro .exitLogoMobile,
.welcomeModal .welcomeIntro .exitLogoMobile {
  display: none;
}
.exitIntentModal .modalGif,
.welcomeModal .modalGif {
  width: 30vw;
  height: 30vw;
  border-radius: 10px;
  margin: 2.5vh 0;
}
.exitIntentModal .modalGif video,
.exitIntentModal .modalGif img,
.welcomeModal .modalGif video,
.welcomeModal .modalGif img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.exitIntentModal .exitCta,
.welcomeModal .exitCta {
  width: 30vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.exitIntentModal .exitCta b:first-of-type,
.welcomeModal .exitCta b:first-of-type {
  font-size: 24px;
}
.exitIntentModal .exitCta .salesPoints,
.welcomeModal .exitCta .salesPoints {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5rem;
}
.exitIntentModal .exitCta .salesPoints .salesPoint,
.welcomeModal .exitCta .salesPoints .salesPoint {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.exitIntentModal .exitCta .salesPoints .salesPoint svg,
.welcomeModal .exitCta .salesPoints .salesPoint svg {
  width: 2.5vw;
  height: 2.5vw;
  margin-bottom: 1vh;
}
.exitIntentModal .exitCta .salesPoints .salesPoint svg path,
.welcomeModal .exitCta .salesPoints .salesPoint svg path {
  fill: #000;
}
.exitIntentModal .exitCta .salesPoints .salesPoint b,
.welcomeModal .exitCta .salesPoints .salesPoint b {
  font-size: 18px;
  margin: 0;
  padding: 0;
  color: #282e2f;
}
.exitIntentModal .exitCta .salesPoints .verticalDivider,
.welcomeModal .exitCta .salesPoints .verticalDivider {
  width: 2px;
  height: 100%;
  background-color: #f0f0f0;
  margin: 0 1.5vw;
}
.exitIntentModal .exitCta .backToShopBtnContainer .guarantee,
.welcomeModal .exitCta .backToShopBtnContainer .guarantee {
  margin-top: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  position: relative;
}
.exitIntentModal .exitCta .backToShopBtnContainer .guarantee svg,
.welcomeModal .exitCta .backToShopBtnContainer .guarantee svg {
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 0.25rem;
}
.exitIntentModal .exitCta .backToShopBtnContainer .guarantee svg path,
.welcomeModal .exitCta .backToShopBtnContainer .guarantee svg path {
  fill: #445f32;
}
.exitIntentModal .exitCta .backToShopBtnContainer .guarantee span,
.welcomeModal .exitCta .backToShopBtnContainer .guarantee span {
  font-size: 18px;
  color: #445f32;
}
.exitIntentModal .exitCta .backToShopBtnContainer .backToShopBtn,
.welcomeModal .exitCta .backToShopBtnContainer .backToShopBtn {
  width: 30vw;
  padding: 1.25rem 0;
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body .exitIntentOverlay .exitIntentModal .welcomeIntro b,
html body .exitIntentOverlay .exitIntentModal .welcomeIntro h1,
html body .exitIntentOverlay .exitIntentModal .exitIntro b,
html body .exitIntentOverlay .exitIntentModal .exitIntro h1,
html body .exitIntentOverlay .welcomeModal .welcomeIntro b,
html body .exitIntentOverlay .welcomeModal .welcomeIntro h1,
html body .exitIntentOverlay .welcomeModal .exitIntro b,
html body .exitIntentOverlay .welcomeModal .exitIntro h1,
html body .welcomeOverlay .exitIntentModal .welcomeIntro b,
html body .welcomeOverlay .exitIntentModal .welcomeIntro h1,
html body .welcomeOverlay .exitIntentModal .exitIntro b,
html body .welcomeOverlay .exitIntentModal .exitIntro h1,
html body .welcomeOverlay .welcomeModal .welcomeIntro b,
html body .welcomeOverlay .welcomeModal .welcomeIntro h1,
html body .welcomeOverlay .welcomeModal .exitIntro b,
html body .welcomeOverlay .welcomeModal .exitIntro h1 {
    font-size: 23px;
  }
  html body .exitIntentOverlay .exitIntentModal .exitCta .salesPoints .salesPoint b,
html body .exitIntentOverlay .welcomeModal .exitCta .salesPoints .salesPoint b,
html body .welcomeOverlay .exitIntentModal .exitCta .salesPoints .salesPoint b,
html body .welcomeOverlay .welcomeModal .exitCta .salesPoints .salesPoint b {
    font-size: 15px;
  }
  html body .exitIntentOverlay .exitIntentModal .exitCta .salesPoints .salesPoint svg,
html body .exitIntentOverlay .welcomeModal .exitCta .salesPoints .salesPoint svg,
html body .welcomeOverlay .exitIntentModal .exitCta .salesPoints .salesPoint svg,
html body .welcomeOverlay .welcomeModal .exitCta .salesPoints .salesPoint svg {
    width: 2.5rem;
    height: 2.5rem;
  }
  html body .exitIntentOverlay .exitIntentModal .exitCta .backToShopBtnContainer .backToShopBtn,
html body .exitIntentOverlay .welcomeModal .exitCta .backToShopBtnContainer .backToShopBtn,
html body .welcomeOverlay .exitIntentModal .exitCta .backToShopBtnContainer .backToShopBtn,
html body .welcomeOverlay .welcomeModal .exitCta .backToShopBtnContainer .backToShopBtn {
    width: 30vw;
  }
  html body .exitIntentOverlay .exitIntentModal .exitCta .backToShopBtnContainer .backToShopBtn b,
html body .exitIntentOverlay .welcomeModal .exitCta .backToShopBtnContainer .backToShopBtn b,
html body .welcomeOverlay .exitIntentModal .exitCta .backToShopBtnContainer .backToShopBtn b,
html body .welcomeOverlay .welcomeModal .exitCta .backToShopBtnContainer .backToShopBtn b {
    font-size: 19px;
  }
}
@media (min-width: 1401px) and (max-width: 1650px) and (orientation: landscape) {
  html body .exitIntentOverlay .exitIntentModal .welcomeIntro b,
html body .exitIntentOverlay .exitIntentModal .welcomeIntro h1,
html body .exitIntentOverlay .exitIntentModal .exitIntro b,
html body .exitIntentOverlay .exitIntentModal .exitIntro h1,
html body .exitIntentOverlay .welcomeModal .welcomeIntro b,
html body .exitIntentOverlay .welcomeModal .welcomeIntro h1,
html body .exitIntentOverlay .welcomeModal .exitIntro b,
html body .exitIntentOverlay .welcomeModal .exitIntro h1,
html body .welcomeOverlay .exitIntentModal .welcomeIntro b,
html body .welcomeOverlay .exitIntentModal .welcomeIntro h1,
html body .welcomeOverlay .exitIntentModal .exitIntro b,
html body .welcomeOverlay .exitIntentModal .exitIntro h1,
html body .welcomeOverlay .welcomeModal .welcomeIntro b,
html body .welcomeOverlay .welcomeModal .welcomeIntro h1,
html body .welcomeOverlay .welcomeModal .exitIntro b,
html body .welcomeOverlay .welcomeModal .exitIntro h1 {
    font-size: 26px;
  }
  html body .exitIntentOverlay .exitIntentModal .exitCta .backToShopBtnContainer .backToShopBtn,
html body .exitIntentOverlay .welcomeModal .exitCta .backToShopBtnContainer .backToShopBtn,
html body .welcomeOverlay .exitIntentModal .exitCta .backToShopBtnContainer .backToShopBtn,
html body .welcomeOverlay .welcomeModal .exitCta .backToShopBtnContainer .backToShopBtn {
    width: 30vw;
  }
  html body .exitIntentOverlay .exitIntentModal .exitCta .backToShopBtnContainer .backToShopBtn b,
html body .exitIntentOverlay .welcomeModal .exitCta .backToShopBtnContainer .backToShopBtn b,
html body .welcomeOverlay .exitIntentModal .exitCta .backToShopBtnContainer .backToShopBtn b,
html body .welcomeOverlay .welcomeModal .exitCta .backToShopBtnContainer .backToShopBtn b {
    font-size: 19px;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  html body .exitIntentOverlay .emphasisDiv,
html body .welcomeOverlay .emphasisDiv {
    display: none;
  }
  html body .exitIntentOverlay .exitIntentModal,
html body .exitIntentOverlay .welcomeModal,
html body .welcomeOverlay .exitIntentModal,
html body .welcomeOverlay .welcomeModal {
    width: 60vw;
    padding: 5vw;
    border-radius: 5px;
    height: auto;
  }
  html body .exitIntentOverlay .exitIntentModal .welcomeIntro .exitLogo,
html body .exitIntentOverlay .exitIntentModal .exitIntro .exitLogo,
html body .exitIntentOverlay .welcomeModal .welcomeIntro .exitLogo,
html body .exitIntentOverlay .welcomeModal .exitIntro .exitLogo,
html body .welcomeOverlay .exitIntentModal .welcomeIntro .exitLogo,
html body .welcomeOverlay .exitIntentModal .exitIntro .exitLogo,
html body .welcomeOverlay .welcomeModal .welcomeIntro .exitLogo,
html body .welcomeOverlay .welcomeModal .exitIntro .exitLogo {
    width: 12.5vw;
  }
  html body .exitIntentOverlay .exitIntentModal .welcomeIntro b,
html body .exitIntentOverlay .exitIntentModal .welcomeIntro h1,
html body .exitIntentOverlay .exitIntentModal .exitIntro b,
html body .exitIntentOverlay .exitIntentModal .exitIntro h1,
html body .exitIntentOverlay .welcomeModal .welcomeIntro b,
html body .exitIntentOverlay .welcomeModal .welcomeIntro h1,
html body .exitIntentOverlay .welcomeModal .exitIntro b,
html body .exitIntentOverlay .welcomeModal .exitIntro h1,
html body .welcomeOverlay .exitIntentModal .welcomeIntro b,
html body .welcomeOverlay .exitIntentModal .welcomeIntro h1,
html body .welcomeOverlay .exitIntentModal .exitIntro b,
html body .welcomeOverlay .exitIntentModal .exitIntro h1,
html body .welcomeOverlay .welcomeModal .welcomeIntro b,
html body .welcomeOverlay .welcomeModal .welcomeIntro h1,
html body .welcomeOverlay .welcomeModal .exitIntro b,
html body .welcomeOverlay .welcomeModal .exitIntro h1 {
    font-size: 22px;
  }
  html body .exitIntentOverlay .exitIntentModal .modalGif,
html body .exitIntentOverlay .welcomeModal .modalGif,
html body .welcomeOverlay .exitIntentModal .modalGif,
html body .welcomeOverlay .welcomeModal .modalGif {
    width: 60vw;
    height: 60vw;
  }
  html body .exitIntentOverlay .exitIntentModal .salesPoints .salesPoint svg,
html body .exitIntentOverlay .welcomeModal .salesPoints .salesPoint svg,
html body .welcomeOverlay .exitIntentModal .salesPoints .salesPoint svg,
html body .welcomeOverlay .welcomeModal .salesPoints .salesPoint svg {
    width: 5vw;
    height: 5vw;
    margin-bottom: 1vh;
  }
  html body .exitIntentOverlay .exitIntentModal .salesPoints .salesPoint svg path,
html body .exitIntentOverlay .welcomeModal .salesPoints .salesPoint svg path,
html body .welcomeOverlay .exitIntentModal .salesPoints .salesPoint svg path,
html body .welcomeOverlay .welcomeModal .salesPoints .salesPoint svg path {
    fill: #000;
  }
  html body .exitIntentOverlay .exitIntentModal .salesPoints .salesPoint b,
html body .exitIntentOverlay .welcomeModal .salesPoints .salesPoint b,
html body .welcomeOverlay .exitIntentModal .salesPoints .salesPoint b,
html body .welcomeOverlay .welcomeModal .salesPoints .salesPoint b {
    font-size: 16px;
    margin: 0;
    padding: 0;
    color: #282e2f;
  }
  html body .exitIntentOverlay .exitIntentModal .salesPoints .verticalDivider,
html body .exitIntentOverlay .welcomeModal .salesPoints .verticalDivider,
html body .welcomeOverlay .exitIntentModal .salesPoints .verticalDivider,
html body .welcomeOverlay .welcomeModal .salesPoints .verticalDivider {
    width: 2px;
    height: 7.5vw;
    margin: 0 3vw;
    display: flex;
  }
  html body .exitIntentOverlay .exitIntentModal .backToShopBtnContainer .backToShopBtn,
html body .exitIntentOverlay .welcomeModal .backToShopBtnContainer .backToShopBtn,
html body .welcomeOverlay .exitIntentModal .backToShopBtnContainer .backToShopBtn,
html body .welcomeOverlay .welcomeModal .backToShopBtnContainer .backToShopBtn {
    width: 45vw;
  }
  html body .exitIntentOverlay .exitIntentModal .backToShopBtnContainer .backToShopBtn b,
html body .exitIntentOverlay .welcomeModal .backToShopBtnContainer .backToShopBtn b,
html body .welcomeOverlay .exitIntentModal .backToShopBtnContainer .backToShopBtn b,
html body .welcomeOverlay .welcomeModal .backToShopBtnContainer .backToShopBtn b {
    font-size: 20px;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .exitIntentOverlay,
html body .welcomeOverlay,
html body .videoPlayerOverlay {
    height: 100dvh;
  }
  html body .exitIntentOverlay .closeModalBtn,
html body .welcomeOverlay .closeModalBtn,
html body .videoPlayerOverlay .closeModalBtn {
    top: 1.5dvh;
    right: 2.5dvh;
  }
  html body .exitIntentOverlay .exitIntentModal,
html body .exitIntentOverlay .welcomeModal,
html body .exitIntentOverlay .videoPlayerModal,
html body .welcomeOverlay .exitIntentModal,
html body .welcomeOverlay .welcomeModal,
html body .welcomeOverlay .videoPlayerModal,
html body .videoPlayerOverlay .exitIntentModal,
html body .videoPlayerOverlay .welcomeModal,
html body .videoPlayerOverlay .videoPlayerModal {
    position: fixed;
    top: 0;
    border-radius: 0 0 10px 10px;
    width: 85vw;
    height: auto;
    max-height: 100dvh;
    padding: 1dvh 7.5vw 2.5dvh 7.5vw;
    max-height: none;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  html body .exitIntentOverlay .exitIntentModal .welcomeIntro,
html body .exitIntentOverlay .exitIntentModal .exitIntro,
html body .exitIntentOverlay .exitIntentModal .playerIntro,
html body .exitIntentOverlay .welcomeModal .welcomeIntro,
html body .exitIntentOverlay .welcomeModal .exitIntro,
html body .exitIntentOverlay .welcomeModal .playerIntro,
html body .exitIntentOverlay .videoPlayerModal .welcomeIntro,
html body .exitIntentOverlay .videoPlayerModal .exitIntro,
html body .exitIntentOverlay .videoPlayerModal .playerIntro,
html body .welcomeOverlay .exitIntentModal .welcomeIntro,
html body .welcomeOverlay .exitIntentModal .exitIntro,
html body .welcomeOverlay .exitIntentModal .playerIntro,
html body .welcomeOverlay .welcomeModal .welcomeIntro,
html body .welcomeOverlay .welcomeModal .exitIntro,
html body .welcomeOverlay .welcomeModal .playerIntro,
html body .welcomeOverlay .videoPlayerModal .welcomeIntro,
html body .welcomeOverlay .videoPlayerModal .exitIntro,
html body .welcomeOverlay .videoPlayerModal .playerIntro,
html body .videoPlayerOverlay .exitIntentModal .welcomeIntro,
html body .videoPlayerOverlay .exitIntentModal .exitIntro,
html body .videoPlayerOverlay .exitIntentModal .playerIntro,
html body .videoPlayerOverlay .welcomeModal .welcomeIntro,
html body .videoPlayerOverlay .welcomeModal .exitIntro,
html body .videoPlayerOverlay .welcomeModal .playerIntro,
html body .videoPlayerOverlay .videoPlayerModal .welcomeIntro,
html body .videoPlayerOverlay .videoPlayerModal .exitIntro,
html body .videoPlayerOverlay .videoPlayerModal .playerIntro {
    flex-direction: column;
  }
  html body .exitIntentOverlay .exitIntentModal .welcomeIntro .exitLogo,
html body .exitIntentOverlay .exitIntentModal .welcomeIntro .veritcalDivider,
html body .exitIntentOverlay .exitIntentModal .exitIntro .exitLogo,
html body .exitIntentOverlay .exitIntentModal .exitIntro .veritcalDivider,
html body .exitIntentOverlay .exitIntentModal .playerIntro .exitLogo,
html body .exitIntentOverlay .exitIntentModal .playerIntro .veritcalDivider,
html body .exitIntentOverlay .welcomeModal .welcomeIntro .exitLogo,
html body .exitIntentOverlay .welcomeModal .welcomeIntro .veritcalDivider,
html body .exitIntentOverlay .welcomeModal .exitIntro .exitLogo,
html body .exitIntentOverlay .welcomeModal .exitIntro .veritcalDivider,
html body .exitIntentOverlay .welcomeModal .playerIntro .exitLogo,
html body .exitIntentOverlay .welcomeModal .playerIntro .veritcalDivider,
html body .exitIntentOverlay .videoPlayerModal .welcomeIntro .exitLogo,
html body .exitIntentOverlay .videoPlayerModal .welcomeIntro .veritcalDivider,
html body .exitIntentOverlay .videoPlayerModal .exitIntro .exitLogo,
html body .exitIntentOverlay .videoPlayerModal .exitIntro .veritcalDivider,
html body .exitIntentOverlay .videoPlayerModal .playerIntro .exitLogo,
html body .exitIntentOverlay .videoPlayerModal .playerIntro .veritcalDivider,
html body .welcomeOverlay .exitIntentModal .welcomeIntro .exitLogo,
html body .welcomeOverlay .exitIntentModal .welcomeIntro .veritcalDivider,
html body .welcomeOverlay .exitIntentModal .exitIntro .exitLogo,
html body .welcomeOverlay .exitIntentModal .exitIntro .veritcalDivider,
html body .welcomeOverlay .exitIntentModal .playerIntro .exitLogo,
html body .welcomeOverlay .exitIntentModal .playerIntro .veritcalDivider,
html body .welcomeOverlay .welcomeModal .welcomeIntro .exitLogo,
html body .welcomeOverlay .welcomeModal .welcomeIntro .veritcalDivider,
html body .welcomeOverlay .welcomeModal .exitIntro .exitLogo,
html body .welcomeOverlay .welcomeModal .exitIntro .veritcalDivider,
html body .welcomeOverlay .welcomeModal .playerIntro .exitLogo,
html body .welcomeOverlay .welcomeModal .playerIntro .veritcalDivider,
html body .welcomeOverlay .videoPlayerModal .welcomeIntro .exitLogo,
html body .welcomeOverlay .videoPlayerModal .welcomeIntro .veritcalDivider,
html body .welcomeOverlay .videoPlayerModal .exitIntro .exitLogo,
html body .welcomeOverlay .videoPlayerModal .exitIntro .veritcalDivider,
html body .welcomeOverlay .videoPlayerModal .playerIntro .exitLogo,
html body .welcomeOverlay .videoPlayerModal .playerIntro .veritcalDivider,
html body .videoPlayerOverlay .exitIntentModal .welcomeIntro .exitLogo,
html body .videoPlayerOverlay .exitIntentModal .welcomeIntro .veritcalDivider,
html body .videoPlayerOverlay .exitIntentModal .exitIntro .exitLogo,
html body .videoPlayerOverlay .exitIntentModal .exitIntro .veritcalDivider,
html body .videoPlayerOverlay .exitIntentModal .playerIntro .exitLogo,
html body .videoPlayerOverlay .exitIntentModal .playerIntro .veritcalDivider,
html body .videoPlayerOverlay .welcomeModal .welcomeIntro .exitLogo,
html body .videoPlayerOverlay .welcomeModal .welcomeIntro .veritcalDivider,
html body .videoPlayerOverlay .welcomeModal .exitIntro .exitLogo,
html body .videoPlayerOverlay .welcomeModal .exitIntro .veritcalDivider,
html body .videoPlayerOverlay .welcomeModal .playerIntro .exitLogo,
html body .videoPlayerOverlay .welcomeModal .playerIntro .veritcalDivider,
html body .videoPlayerOverlay .videoPlayerModal .welcomeIntro .exitLogo,
html body .videoPlayerOverlay .videoPlayerModal .welcomeIntro .veritcalDivider,
html body .videoPlayerOverlay .videoPlayerModal .exitIntro .exitLogo,
html body .videoPlayerOverlay .videoPlayerModal .exitIntro .veritcalDivider,
html body .videoPlayerOverlay .videoPlayerModal .playerIntro .exitLogo,
html body .videoPlayerOverlay .videoPlayerModal .playerIntro .veritcalDivider {
    display: none;
  }
  html body .exitIntentOverlay .exitIntentModal .welcomeIntro b,
html body .exitIntentOverlay .exitIntentModal .welcomeIntro h1,
html body .exitIntentOverlay .exitIntentModal .welcomeIntro h2,
html body .exitIntentOverlay .exitIntentModal .exitIntro b,
html body .exitIntentOverlay .exitIntentModal .exitIntro h1,
html body .exitIntentOverlay .exitIntentModal .exitIntro h2,
html body .exitIntentOverlay .exitIntentModal .playerIntro b,
html body .exitIntentOverlay .exitIntentModal .playerIntro h1,
html body .exitIntentOverlay .exitIntentModal .playerIntro h2,
html body .exitIntentOverlay .welcomeModal .welcomeIntro b,
html body .exitIntentOverlay .welcomeModal .welcomeIntro h1,
html body .exitIntentOverlay .welcomeModal .welcomeIntro h2,
html body .exitIntentOverlay .welcomeModal .exitIntro b,
html body .exitIntentOverlay .welcomeModal .exitIntro h1,
html body .exitIntentOverlay .welcomeModal .exitIntro h2,
html body .exitIntentOverlay .welcomeModal .playerIntro b,
html body .exitIntentOverlay .welcomeModal .playerIntro h1,
html body .exitIntentOverlay .welcomeModal .playerIntro h2,
html body .exitIntentOverlay .videoPlayerModal .welcomeIntro b,
html body .exitIntentOverlay .videoPlayerModal .welcomeIntro h1,
html body .exitIntentOverlay .videoPlayerModal .welcomeIntro h2,
html body .exitIntentOverlay .videoPlayerModal .exitIntro b,
html body .exitIntentOverlay .videoPlayerModal .exitIntro h1,
html body .exitIntentOverlay .videoPlayerModal .exitIntro h2,
html body .exitIntentOverlay .videoPlayerModal .playerIntro b,
html body .exitIntentOverlay .videoPlayerModal .playerIntro h1,
html body .exitIntentOverlay .videoPlayerModal .playerIntro h2,
html body .welcomeOverlay .exitIntentModal .welcomeIntro b,
html body .welcomeOverlay .exitIntentModal .welcomeIntro h1,
html body .welcomeOverlay .exitIntentModal .welcomeIntro h2,
html body .welcomeOverlay .exitIntentModal .exitIntro b,
html body .welcomeOverlay .exitIntentModal .exitIntro h1,
html body .welcomeOverlay .exitIntentModal .exitIntro h2,
html body .welcomeOverlay .exitIntentModal .playerIntro b,
html body .welcomeOverlay .exitIntentModal .playerIntro h1,
html body .welcomeOverlay .exitIntentModal .playerIntro h2,
html body .welcomeOverlay .welcomeModal .welcomeIntro b,
html body .welcomeOverlay .welcomeModal .welcomeIntro h1,
html body .welcomeOverlay .welcomeModal .welcomeIntro h2,
html body .welcomeOverlay .welcomeModal .exitIntro b,
html body .welcomeOverlay .welcomeModal .exitIntro h1,
html body .welcomeOverlay .welcomeModal .exitIntro h2,
html body .welcomeOverlay .welcomeModal .playerIntro b,
html body .welcomeOverlay .welcomeModal .playerIntro h1,
html body .welcomeOverlay .welcomeModal .playerIntro h2,
html body .welcomeOverlay .videoPlayerModal .welcomeIntro b,
html body .welcomeOverlay .videoPlayerModal .welcomeIntro h1,
html body .welcomeOverlay .videoPlayerModal .welcomeIntro h2,
html body .welcomeOverlay .videoPlayerModal .exitIntro b,
html body .welcomeOverlay .videoPlayerModal .exitIntro h1,
html body .welcomeOverlay .videoPlayerModal .exitIntro h2,
html body .welcomeOverlay .videoPlayerModal .playerIntro b,
html body .welcomeOverlay .videoPlayerModal .playerIntro h1,
html body .welcomeOverlay .videoPlayerModal .playerIntro h2,
html body .videoPlayerOverlay .exitIntentModal .welcomeIntro b,
html body .videoPlayerOverlay .exitIntentModal .welcomeIntro h1,
html body .videoPlayerOverlay .exitIntentModal .welcomeIntro h2,
html body .videoPlayerOverlay .exitIntentModal .exitIntro b,
html body .videoPlayerOverlay .exitIntentModal .exitIntro h1,
html body .videoPlayerOverlay .exitIntentModal .exitIntro h2,
html body .videoPlayerOverlay .exitIntentModal .playerIntro b,
html body .videoPlayerOverlay .exitIntentModal .playerIntro h1,
html body .videoPlayerOverlay .exitIntentModal .playerIntro h2,
html body .videoPlayerOverlay .welcomeModal .welcomeIntro b,
html body .videoPlayerOverlay .welcomeModal .welcomeIntro h1,
html body .videoPlayerOverlay .welcomeModal .welcomeIntro h2,
html body .videoPlayerOverlay .welcomeModal .exitIntro b,
html body .videoPlayerOverlay .welcomeModal .exitIntro h1,
html body .videoPlayerOverlay .welcomeModal .exitIntro h2,
html body .videoPlayerOverlay .welcomeModal .playerIntro b,
html body .videoPlayerOverlay .welcomeModal .playerIntro h1,
html body .videoPlayerOverlay .welcomeModal .playerIntro h2,
html body .videoPlayerOverlay .videoPlayerModal .welcomeIntro b,
html body .videoPlayerOverlay .videoPlayerModal .welcomeIntro h1,
html body .videoPlayerOverlay .videoPlayerModal .welcomeIntro h2,
html body .videoPlayerOverlay .videoPlayerModal .exitIntro b,
html body .videoPlayerOverlay .videoPlayerModal .exitIntro h1,
html body .videoPlayerOverlay .videoPlayerModal .exitIntro h2,
html body .videoPlayerOverlay .videoPlayerModal .playerIntro b,
html body .videoPlayerOverlay .videoPlayerModal .playerIntro h1,
html body .videoPlayerOverlay .videoPlayerModal .playerIntro h2 {
    font-size: 20px;
  }
  html body .exitIntentOverlay .exitIntentModal .exitLogoMobile,
html body .exitIntentOverlay .welcomeModal .exitLogoMobile,
html body .exitIntentOverlay .videoPlayerModal .exitLogoMobile,
html body .welcomeOverlay .exitIntentModal .exitLogoMobile,
html body .welcomeOverlay .welcomeModal .exitLogoMobile,
html body .welcomeOverlay .videoPlayerModal .exitLogoMobile,
html body .videoPlayerOverlay .exitIntentModal .exitLogoMobile,
html body .videoPlayerOverlay .welcomeModal .exitLogoMobile,
html body .videoPlayerOverlay .videoPlayerModal .exitLogoMobile {
    display: flex;
    width: 30vw;
    margin-bottom: 0.5rem;
  }
  html body .exitIntentOverlay .exitIntentModal .modalGif,
html body .exitIntentOverlay .welcomeModal .modalGif,
html body .exitIntentOverlay .videoPlayerModal .modalGif,
html body .welcomeOverlay .exitIntentModal .modalGif,
html body .welcomeOverlay .welcomeModal .modalGif,
html body .welcomeOverlay .videoPlayerModal .modalGif,
html body .videoPlayerOverlay .exitIntentModal .modalGif,
html body .videoPlayerOverlay .welcomeModal .modalGif,
html body .videoPlayerOverlay .videoPlayerModal .modalGif {
    width: 85vw;
    height: 85vw;
    margin: 1.5dvh 0;
  }
  html body .exitIntentOverlay .emphasisDiv,
html body .welcomeOverlay .emphasisDiv,
html body .videoPlayerOverlay .emphasisDiv {
    display: none;
  }
  html body .exitIntentOverlay .exitCta .salesPoints,
html body .welcomeOverlay .exitCta .salesPoints,
html body .videoPlayerOverlay .exitCta .salesPoints {
    margin-bottom: 0;
  }
  html body .exitIntentOverlay .exitCta .salesPoints .verticalDivider,
html body .welcomeOverlay .exitCta .salesPoints .verticalDivider,
html body .videoPlayerOverlay .exitCta .salesPoints .verticalDivider {
    display: flex;
    margin: 0 5vw;
    width: 3px;
    height: 12.5dvh;
  }
  html body .exitIntentOverlay .exitCta .salesPoints .salesPoint,
html body .welcomeOverlay .exitCta .salesPoints .salesPoint,
html body .videoPlayerOverlay .exitCta .salesPoints .salesPoint {
    margin-bottom: 0;
  }
  html body .exitIntentOverlay .exitCta .salesPoints .salesPoint b,
html body .welcomeOverlay .exitCta .salesPoints .salesPoint b,
html body .videoPlayerOverlay .exitCta .salesPoints .salesPoint b {
    font-size: 11px;
  }
  html body .exitIntentOverlay .exitCta .salesPoints .salesPoint svg,
html body .welcomeOverlay .exitCta .salesPoints .salesPoint svg,
html body .videoPlayerOverlay .exitCta .salesPoints .salesPoint svg {
    width: 8vw;
    height: 8vw;
  }
  html body .exitIntentOverlay .exitCta .backToShopBtnContainer .backToShopBtn,
html body .welcomeOverlay .exitCta .backToShopBtnContainer .backToShopBtn,
html body .videoPlayerOverlay .exitCta .backToShopBtnContainer .backToShopBtn {
    width: 85vw;
    padding: 1rem 0;
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  html body .exitIntentOverlay .exitCta .backToShopBtnContainer .backToShopBtn b,
html body .welcomeOverlay .exitCta .backToShopBtnContainer .backToShopBtn b,
html body .videoPlayerOverlay .exitCta .backToShopBtnContainer .backToShopBtn b {
    font-size: 15px;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .exitIntentOverlay .emphasisDiv,
html body .welcomeOverlay .emphasisDiv {
    display: none;
  }
  html body .exitIntentOverlay .exitIntentModal,
html body .exitIntentOverlay .welcomeModal,
html body .welcomeOverlay .exitIntentModal,
html body .welcomeOverlay .welcomeModal {
    width: 70vw;
    padding: 5vw;
    border-radius: 5px;
    height: auto;
  }
  html body .exitIntentOverlay .exitIntentModal .welcomeIntro .exitLogo,
html body .exitIntentOverlay .exitIntentModal .exitIntro .exitLogo,
html body .exitIntentOverlay .welcomeModal .welcomeIntro .exitLogo,
html body .exitIntentOverlay .welcomeModal .exitIntro .exitLogo,
html body .welcomeOverlay .exitIntentModal .welcomeIntro .exitLogo,
html body .welcomeOverlay .exitIntentModal .exitIntro .exitLogo,
html body .welcomeOverlay .welcomeModal .welcomeIntro .exitLogo,
html body .welcomeOverlay .welcomeModal .exitIntro .exitLogo {
    width: 12.5vw;
  }
  html body .exitIntentOverlay .exitIntentModal .welcomeIntro b,
html body .exitIntentOverlay .exitIntentModal .welcomeIntro h1,
html body .exitIntentOverlay .exitIntentModal .exitIntro b,
html body .exitIntentOverlay .exitIntentModal .exitIntro h1,
html body .exitIntentOverlay .welcomeModal .welcomeIntro b,
html body .exitIntentOverlay .welcomeModal .welcomeIntro h1,
html body .exitIntentOverlay .welcomeModal .exitIntro b,
html body .exitIntentOverlay .welcomeModal .exitIntro h1,
html body .welcomeOverlay .exitIntentModal .welcomeIntro b,
html body .welcomeOverlay .exitIntentModal .welcomeIntro h1,
html body .welcomeOverlay .exitIntentModal .exitIntro b,
html body .welcomeOverlay .exitIntentModal .exitIntro h1,
html body .welcomeOverlay .welcomeModal .welcomeIntro b,
html body .welcomeOverlay .welcomeModal .welcomeIntro h1,
html body .welcomeOverlay .welcomeModal .exitIntro b,
html body .welcomeOverlay .welcomeModal .exitIntro h1 {
    font-size: 20px;
  }
  html body .exitIntentOverlay .exitIntentModal .modalGif,
html body .exitIntentOverlay .welcomeModal .modalGif,
html body .welcomeOverlay .exitIntentModal .modalGif,
html body .welcomeOverlay .welcomeModal .modalGif {
    width: 55vw;
    height: 55vw;
  }
  html body .exitIntentOverlay .exitIntentModal .salesPoints .salesPoint,
html body .exitIntentOverlay .welcomeModal .salesPoints .salesPoint,
html body .welcomeOverlay .exitIntentModal .salesPoints .salesPoint,
html body .welcomeOverlay .welcomeModal .salesPoints .salesPoint {
    margin-top: 1rem;
  }
  html body .exitIntentOverlay .exitIntentModal .salesPoints .salesPoint svg,
html body .exitIntentOverlay .welcomeModal .salesPoints .salesPoint svg,
html body .welcomeOverlay .exitIntentModal .salesPoints .salesPoint svg,
html body .welcomeOverlay .welcomeModal .salesPoints .salesPoint svg {
    width: 5vw;
    height: 5vw;
    margin-bottom: 1vh;
  }
  html body .exitIntentOverlay .exitIntentModal .salesPoints .salesPoint svg path,
html body .exitIntentOverlay .welcomeModal .salesPoints .salesPoint svg path,
html body .welcomeOverlay .exitIntentModal .salesPoints .salesPoint svg path,
html body .welcomeOverlay .welcomeModal .salesPoints .salesPoint svg path {
    fill: #000;
  }
  html body .exitIntentOverlay .exitIntentModal .salesPoints .salesPoint b,
html body .exitIntentOverlay .welcomeModal .salesPoints .salesPoint b,
html body .welcomeOverlay .exitIntentModal .salesPoints .salesPoint b,
html body .welcomeOverlay .welcomeModal .salesPoints .salesPoint b {
    font-size: 14px;
    margin: 0;
    padding: 0;
    color: #282e2f;
  }
  html body .exitIntentOverlay .exitIntentModal .salesPoints .verticalDivider,
html body .exitIntentOverlay .welcomeModal .salesPoints .verticalDivider,
html body .welcomeOverlay .exitIntentModal .salesPoints .verticalDivider,
html body .welcomeOverlay .welcomeModal .salesPoints .verticalDivider {
    width: 2px;
    height: 7.5vw;
    margin: 0 3vw;
    display: flex;
  }
  html body .exitIntentOverlay .exitIntentModal .backToShopBtnContainer .backToShopBtn,
html body .exitIntentOverlay .welcomeModal .backToShopBtnContainer .backToShopBtn,
html body .welcomeOverlay .exitIntentModal .backToShopBtnContainer .backToShopBtn,
html body .welcomeOverlay .welcomeModal .backToShopBtnContainer .backToShopBtn {
    width: 45vw;
  }
  html body .exitIntentOverlay .exitIntentModal .backToShopBtnContainer .backToShopBtn b,
html body .exitIntentOverlay .welcomeModal .backToShopBtnContainer .backToShopBtn b,
html body .welcomeOverlay .exitIntentModal .backToShopBtnContainer .backToShopBtn b,
html body .welcomeOverlay .welcomeModal .backToShopBtnContainer .backToShopBtn b {
    font-size: 16px;
  }
}
.welcomeModal .introTxt {
  width: 100%;
  text-align: center;
  margin-top: 1rem;
}
.welcomeModal .introTxt p,
.welcomeModal .introTxt h2 {
  width: 30vw;
  font-size: 16px;
  font-weight: normal;
  display: inline-block;
}
.welcomeModal .introTxt svg {
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: -0.25rem;
}
.welcomeModal .introTxt svg:first-of-type {
  margin-left: 0.2rem;
}
.welcomeModal .introTxt svg path {
  fill: #ea4c89;
}
.welcomeModal .exitCta .salesPoints .salesPoint svg {
  width: 2vw;
  height: 2vw;
}
.welcomeModal .exitCta .salesPoints .salesPoint b {
  font-size: 18px;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body .welcomeOverlay .welcomeModal .introTxt h2 {
    font-size: 15px;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  html body .welcomeOverlay .welcomeModal .introTxt {
    width: 90%;
  }
  html body .welcomeOverlay .welcomeModal .introTxt h2 {
    width: 100%;
    font-size: 16px;
  }
  html body .welcomeOverlay .welcomeModal .introTxt h2 svg {
    width: 1rem;
    height: 1rem;
    vertical-align: -0.2rem;
    margin-left: 0;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .welcomeOverlay {
    height: 100dvh;
    width: 100vw;
  }
  html body .welcomeOverlay .closeModalBtn {
    top: 1dvh;
    right: 1dvh;
    transform: scale(0.8);
  }
  html body .welcomeOverlay .welcomeModal {
    height: 90dvh;
    width: 90vw;
    padding: 3dvh 5vw 8dvh 5vw;
    border-radius: 0;
  }
  html body .welcomeOverlay .welcomeModal .welcomeIntro h1 {
    font-size: 20px;
  }
  html body .welcomeOverlay .welcomeModal .introTxt {
    width: 80%;
    margin-bottom: 1dvh;
  }
  html body .welcomeOverlay .welcomeModal .introTxt h2 {
    width: 100%;
    font-size: 14px;
  }
  html body .welcomeOverlay .welcomeModal .introTxt h2 svg {
    width: 1rem;
    height: 1rem;
    vertical-align: -0.2rem;
    margin-left: 0;
  }
  html body .welcomeOverlay .welcomeModal .backToShopBtnContainer .backToShopBtn {
    margin-top: 2dvh;
  }
}
@media (max-width: 380px) and (orientation: portrait) {
  html body .welcomeOverlay .welcomeModal .backToShopBtnContainer .backToShopBtn {
    margin-top: 2dvh;
  }
  html body .welcomeOverlay .welcomeModal .backToShopBtnContainer .backToShopBtn b {
    padding: 0.25dvh 0;
    font-size: 15px;
  }
  html body .welcomeOverlay .welcomeModal .exitCta .salesPoints {
    margin: 0.5dvh 0;
  }
  html body .welcomeOverlay .welcomeModal .exitCta .salesPoints .verticalDivider {
    display: flex;
    margin: 0 5vw;
    width: 3px;
    height: 85%;
  }
  html body .welcomeOverlay .welcomeModal .exitCta .salesPoints .salesPoint b {
    font-size: 11px;
    white-space: nowrap;
  }
  html body .welcomeOverlay .welcomeModal .exitCta .salesPoints .salesPoint svg {
    width: 4.5dvh;
    height: 4.5dvh;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .welcomeOverlay .welcomeModal .introTxt {
    width: 90%;
  }
  html body .welcomeOverlay .welcomeModal .introTxt h2 {
    width: 100%;
    font-size: 14px;
  }
  html body .welcomeOverlay .welcomeModal .introTxt h2 svg {
    width: 1rem;
    height: 1rem;
    vertical-align: -0.2rem;
    margin-left: 0;
  }
}
html body .promoBar .slogan span {
  color: #95dfd0;
  margin-right: 0.25rem;
}
html body .promoBar .videoPitch span:first-of-type {
  color: #95dfd0;
}
html body .promoBar .videoPitch span:last-of-type {
  margin: 0 0.25rem;
}
html body .promoBar .learnMoreVideoBtn {
  margin-left: 0.75rem;
  border: none;
  padding: 0.5vh 1.75rem;
  background-color: #fff;
  border-radius: 7.5px;
}
html body .promoBar .learnMoreVideoBtn > div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
html body .promoBar .learnMoreVideoBtn svg,
html body .promoBar .learnMoreVideoBtn img {
  width: 2.75vh;
  height: 2.75vh;
  margin: 0 0.35rem 0 0;
}
html body .promoBar .learnMoreVideoBtn svg path,
html body .promoBar .learnMoreVideoBtn img path {
  fill: #000;
}
html body .promoBar .learnMoreVideoBtn b,
html body .promoBar .learnMoreVideoBtn span {
  color: #000;
}
html body .promoBar .learnMoreVideoBtn .smallPitch {
  display: none;
}
html body .promoBar .learnMoreVideoBtn .bigPitch {
  display: flex;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body .promoBar .slogan {
    font-size: 14px;
    margin: 0;
    display: flex;
  }
  html body .promoBar .slogan span {
    font-size: 14px;
  }
  html body .promoBar .videoPitch {
    font-size: 14px;
  }
  html body .promoBar .videoPitch span {
    font-size: 14px;
  }
  html body .promoBar .learnMoreVideoBtn b {
    font-size: 14px;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  html body .promoBar {
    top: 7vh;
    height: 4.5vh;
  }
  html body .promoBar .videoPitch,
html body .promoBar .verticalBar {
    display: none;
  }
  html body .promoBar .slogan {
    font-size: 17px;
  }
  html body .promoBar .learnMoreVideoBtn {
    margin-left: 1.5rem;
    padding: 0.35vh 1.75rem 0.35vh 1.5rem;
  }
  html body .promoBar .learnMoreVideoBtn .smallPitch {
    display: flex;
  }
  html body .promoBar .learnMoreVideoBtn .bigPitch {
    display: none;
  }
  html body .promoBar .learnMoreVideoBtn b {
    font-size: 15px;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .promoBar {
    padding: 0;
    height: 4.75vh;
  }
  html body .promoBar .slogan {
    font-size: 11px;
    margin: 0;
    display: flex;
  }
  html body .promoBar .slogan span {
    font-size: 11px;
  }
  html body .promoBar .videoPitch {
    display: none;
  }
  html body .promoBar .learnMoreVideoBtn {
    border-radius: 5px;
    padding: 0.35vh 1rem 0.35vh 0.75rem;
  }
  html body .promoBar .learnMoreVideoBtn .smallPitch {
    display: flex;
  }
  html body .promoBar .learnMoreVideoBtn .bigPitch {
    display: none;
  }
  html body .promoBar.checkoutPromoBar {
    top: 8vh;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .promoBar {
    top: 12vh;
    height: 8vh;
  }
  html body .promoBar .slogan {
    font-size: 11px;
    margin: 0;
    display: flex;
  }
  html body .promoBar .slogan span {
    font-size: 10.5px;
  }
  html body .promoBar .videoPitch {
    font-size: 10.5px;
  }
  html body .promoBar .videoPitch span {
    font-size: 10.5px;
  }
  html body .promoBar .learnMoreVideoBtn {
    border-radius: 5px;
    padding: 1vh 1rem 1vh 0.75rem;
  }
  html body .promoBar .learnMoreVideoBtn img,
html body .promoBar .learnMoreVideoBtn svg {
    width: 4vh;
    height: 4vh;
  }
}
.videoPlayerOverlay .closeModalBtn {
  top: 2vh;
  right: 22.5vw;
  border: 1px solid #fff;
}

.videoPlayerModal {
  width: 40vw;
  padding: 4vh 5vw;
}
.videoPlayerModal .playerIntro {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 39vw;
  padding: 0 0.5vw;
}
.videoPlayerModal .playerIntro .exitLogoMobile {
  display: none;
}
.videoPlayerModal .playerIntro .exitLogo {
  width: 7.5vw;
}
.videoPlayerModal .playerIntro .veritcalDivider {
  margin: 0 0.5vw;
  width: 2px;
  height: 70%;
  background-color: #ededed;
}
.videoPlayerModal .playerIntro b,
.videoPlayerModal .playerIntro h2 {
  font-size: 30px;
}
.videoPlayerModal .playerIntro b span,
.videoPlayerModal .playerIntro h2 span {
  color: #00a8a8;
}
.videoPlayerModal .videoPlayer {
  width: 40vw;
  height: 22.5vw;
  margin: 2vh 0 1vh 0;
}
.videoPlayerModal .videoDetails {
  width: 39vw;
  display: flex;
  align-items: center;
  padding: 0 0.5vw;
}
.videoPlayerModal .videoDetails .authorCard {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.25vw;
  border-radius: 10px;
}
.videoPlayerModal .videoDetails .authorCard img {
  width: 3.5vw;
  height: 3.5vw;
  border-radius: 50%;
  margin-right: 1rem;
}
.videoPlayerModal .videoDetails .authorCard .authorDetails {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  width: 10vw;
}
.videoPlayerModal .videoDetails .authorCard .authorDetails b {
  font-size: 18px;
  margin-bottom: 0.25rem;
}
.videoPlayerModal .videoDetails .authorCard .authorDetails span {
  font-size: 16px;
  color: #7c9084;
}
.videoPlayerModal .videoDetails .veritcalDivider {
  margin: 0 1.5vw;
  width: 2px;
  height: 3vw;
  background-color: #ededed;
}
.videoPlayerModal .videoDetails .socialBtnContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: fit-content;
  flex-grow: 1;
}
.videoPlayerModal .videoDetails .socialBtnContainer .socialBtn {
  background-color: #000;
  padding: 0.2vw;
  border-radius: 50%;
  margin: 0;
}
.videoPlayerModal .videoDetails .socialBtnContainer .socialBtn img,
.videoPlayerModal .videoDetails .socialBtnContainer .socialBtn svg {
  width: 1.5vw;
  height: 1.5vw;
}
.videoPlayerModal .videoDescription {
  width: 39vw;
  padding: 0 0.5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 1.5vh 0;
  border-radius: 10px;
}
.videoPlayerModal .videoDescription p {
  font-size: 17px;
}
.videoPlayerModal .exitVideoPlayerBtn {
  width: 20vw;
  padding: 2vh 0;
  margin-top: 1vh;
}
.videoPlayerModal .exitVideoPlayerBtn b {
  font-size: 18px;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body .videoPlayerOverlay .closeModalBtn {
    top: 2vh;
    right: 21.5vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .playerIntro .exitLogo {
    width: 7.5vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .playerIntro .veritcalDivider {
    margin: 0 0.5vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .playerIntro b,
html body .videoPlayerOverlay .videoPlayerModal .playerIntro h2 {
    font-size: 20px;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails {
    margin-top: 0.5rem;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .authorCard .authorDetails b {
    font-size: 15px;
    margin-bottom: 0.2rem;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .authorCard .authorDetails span {
    font-size: 15px;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .socialBtnContainer .socialBtn {
    width: 3vw;
    height: 3vw;
    padding: 0;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .socialBtnContainer .socialBtn img,
html body .videoPlayerOverlay .videoPlayerModal .videoDetails .socialBtnContainer .socialBtn svg {
    width: 1.5vw;
    height: 1.5vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDescription {
    margin: 2.5vh 0;
    border-radius: 10px;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDescription p {
    font-size: 15px;
  }
  html body .videoPlayerOverlay .videoPlayerModal .exitVideoPlayerBtn {
    width: 25vw;
    padding: 2.5vh 0;
  }
  html body .videoPlayerOverlay .videoPlayerModal .exitVideoPlayerBtn b {
    font-size: 18px;
  }
}
@media (min-width: 1401px) and (max-width: 1650px) and (orientation: landscape) {
  html body .videoPlayerOverlay .videoPlayerModal .playerIntro .exitLogo {
    width: 7.5vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .playerIntro .veritcalDivider {
    margin: 0 0.5vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .playerIntro b,
html body .videoPlayerOverlay .videoPlayerModal .playerIntro h2 {
    font-size: 24px;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails {
    width: 39vw;
    display: flex;
    align-items: center;
    padding: 0 0.5vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .authorCard {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.25vw;
    border-radius: 10px;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .authorCard img {
    width: 3.5vw;
    height: 3.5vw;
    border-radius: 50%;
    margin-right: 1rem;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .authorCard .authorDetails {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    width: 10vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .authorCard .authorDetails b {
    font-size: 18px;
    margin-bottom: 0.25rem;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .authorCard .authorDetails span {
    font-size: 16px;
    color: #7c9084;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .veritcalDivider {
    margin: 0 1.5vw;
    width: 2px;
    height: 3vw;
    background-color: #ededed;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .socialBtnContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: fit-content;
    flex-grow: 1;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .socialBtnContainer .socialBtn {
    background-color: #000;
    padding: 0.2vw;
    border-radius: 50%;
    margin: 0;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .socialBtnContainer .socialBtn img,
html body .videoPlayerOverlay .videoPlayerModal .videoDetails .socialBtnContainer .socialBtn svg {
    width: 1.5vw;
    height: 1.5vw;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  html body .videoPlayerOverlay .closeModalBtn {
    top: 2vh;
    right: 4vh;
  }
  html body .videoPlayerOverlay .videoPlayerModal {
    width: 60vw;
    height: auto;
  }
  html body .videoPlayerOverlay .videoPlayerModal .playerIntro {
    width: 100%;
  }
  html body .videoPlayerOverlay .videoPlayerModal .playerIntro .exitLogo {
    width: 12vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .playerIntro .veritcalDivider {
    margin: 0 1.25vw 0 0;
  }
  html body .videoPlayerOverlay .videoPlayerModal .playerIntro b,
html body .videoPlayerOverlay .videoPlayerModal .playerIntro h2 {
    font-size: 18px;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoPlayer {
    width: 60vw;
    height: 33.75vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails {
    width: 60vw;
    padding: 0;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .authorCard img {
    width: 5vw;
    height: 5vw;
    margin-right: 0.5rem;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .authorCard .authorDetails {
    width: 17.5vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .authorCard .authorDetails b {
    font-size: 15px;
    margin-bottom: 0.2rem;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .authorCard .authorDetails span {
    font-size: 15px;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .veritcalDivider {
    display: none;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .socialBtnContainer {
    margin: 0 0 0 1vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .socialBtnContainer .socialBtn {
    padding: 0;
    width: 4.5vw;
    height: 4.5vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .socialBtnContainer .socialBtn img,
html body .videoPlayerOverlay .videoPlayerModal .videoDetails .socialBtnContainer .socialBtn svg {
    width: 2.25vw;
    height: 2.25vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDescription {
    width: 100%;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDescription p {
    font-size: 15px;
  }
  html body .videoPlayerOverlay .videoPlayerModal .exitVideoPlayerBtn {
    width: 35vw;
    padding: 2vh 0;
  }
  html body .videoPlayerOverlay .videoPlayerModal .exitVideoPlayerBtn b {
    font-size: 16px;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .videoPlayerOverlay .videoPlayerModal .playerIntro {
    width: 100%;
  }
  html body .videoPlayerOverlay .videoPlayerModal .playerIntro h2 {
    font-size: 16px;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoPlayer {
    width: 90vw;
    height: 50.625vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails {
    width: 90vw;
    padding: 0;
    flex-direction: column;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .authorCard {
    width: 80vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .authorCard img {
    width: 12.5vw;
    height: 12.5vw;
    margin-right: 0.5rem;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .authorCard .authorDetails {
    flex-grow: 1;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .authorCard .authorDetails b {
    font-size: 15px;
    margin-bottom: 0.2rem;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .authorCard .authorDetails span {
    font-size: 15px;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .veritcalDivider {
    display: none;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .socialBtnContainer {
    margin: 0.75rem 0 0.75rem 5vw;
    align-self: flex-start;
    width: 65vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .socialBtnContainer .socialBtn {
    padding: 0;
    width: 9vw;
    height: 9vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .socialBtnContainer .socialBtn img,
html body .videoPlayerOverlay .videoPlayerModal .videoDetails .socialBtnContainer .socialBtn svg {
    width: 4vw;
    height: 4vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDescription {
    width: 100%;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDescription p {
    width: 95%;
    font-size: 14px;
  }
  html body .videoPlayerOverlay .videoPlayerModal .exitVideoPlayerBtn {
    width: 65vw;
    padding: 2.5vh 0;
    margin: 1rem 0;
  }
  html body .videoPlayerOverlay .videoPlayerModal .exitVideoPlayerBtn b {
    font-size: 16px;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .videoPlayerOverlay .closeModalBtn {
    top: 3vh;
    right: 6vh;
  }
  html body .videoPlayerOverlay .videoPlayerModal {
    width: 70vw;
    height: auto;
  }
  html body .videoPlayerOverlay .videoPlayerModal .playerIntro {
    width: 100%;
  }
  html body .videoPlayerOverlay .videoPlayerModal .playerIntro .exitLogo {
    width: 12vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .playerIntro .veritcalDivider {
    margin: 0 1.25vw 0 0;
  }
  html body .videoPlayerOverlay .videoPlayerModal .playerIntro b,
html body .videoPlayerOverlay .videoPlayerModal .playerIntro h2 {
    font-size: 18px;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoPlayer {
    width: 70vw;
    height: 39.375vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails {
    width: 70vw;
    padding: 0;
    margin-top: 0.5rem;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .authorCard img {
    width: 6vw;
    height: 6vw;
    margin-right: 0.5rem;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .authorCard .authorDetails {
    width: 20vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .authorCard .authorDetails b {
    font-size: 12px;
    margin-bottom: 0.2rem;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .authorCard .authorDetails span {
    font-size: 12px;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .veritcalDivider {
    display: none;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .socialBtnContainer {
    margin: 0 0 0 1vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .socialBtnContainer .socialBtn {
    padding: 0;
    width: 5vw;
    height: 5vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDetails .socialBtnContainer .socialBtn img,
html body .videoPlayerOverlay .videoPlayerModal .videoDetails .socialBtnContainer .socialBtn svg {
    width: 2.25vw;
    height: 2.25vw;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDescription {
    width: 100%;
    margin: 1rem 0;
  }
  html body .videoPlayerOverlay .videoPlayerModal .videoDescription p {
    font-size: 14px;
  }
  html body .videoPlayerOverlay .videoPlayerModal .exitVideoPlayerBtn {
    width: 50vw;
    padding: 5vh 0;
  }
  html body .videoPlayerOverlay .videoPlayerModal .exitVideoPlayerBtn b {
    font-size: 16px;
  }
}
.reviewsSection {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.reviewsSection h2 {
  font-size: 40px;
  margin-bottom: 3rem;
  text-align: center;
}

@media (min-width: 601px) and (orientation: portrait) {
  html body .reviewsSection h2 {
    font-size: 32px;
    margin-bottom: 2.5rem;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .reviewsSection h2 {
    width: 80%;
    font-size: 24px;
    margin-bottom: 2rem;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .reviewsSection h2 {
    font-size: 28px;
    margin-bottom: 2rem;
  }
}
.featuredReviews {
  width: 100%;
  padding: 6vh 0 6vh 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f0f0f0;
}
.featuredReviews .reviewCardContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 72vw;
}
.featuredReviews .reviewCardContainer .reviewCard {
  width: 20vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 5px 15px rgba(85, 82, 77, 0.2);
  border-radius: 15px;
  padding: 2vw 1.25vw 2.5vw 1.25vw;
  position: relative;
}
.featuredReviews .reviewCardContainer .reviewCard .featureBadge {
  position: absolute;
  top: 1.5rem;
  left: 1.25vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  padding: 0.35rem 1rem 0.35rem 0.75rem;
  border-radius: 10px;
}
.featuredReviews .reviewCardContainer .reviewCard .featureBadge svg {
  width: 1.5rem;
  height: 1.5rem;
}
.featuredReviews .reviewCardContainer .reviewCard .featureBadge svg path {
  fill: #fff;
}
.featuredReviews .reviewCardContainer .reviewCard .featureBadge b {
  color: #fff;
  font-size: 1.25rem;
  margin-left: 0.5rem;
  font-size: 14px;
}
.featuredReviews .reviewCardContainer .reviewCard .reviewerImg {
  width: 17.5vw;
  height: 17.5vw;
  border-radius: 15px;
  align-self: center;
}
.featuredReviews .reviewCardContainer .reviewCard .reviewerDetails {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.5rem 0 1rem 0;
  border: 1px solid #f0f0f0;
  box-shadow: 0 1px 7.5px rgba(85, 82, 77, 0.05);
  padding: 0.75vw 1vw;
  border-radius: 15px;
  width: 80%;
}
.featuredReviews .reviewCardContainer .reviewCard .reviewerDetails svg {
  border-radius: 25%;
  width: 3.25rem;
  height: 3.25rem;
}
.featuredReviews .reviewCardContainer .reviewCard .reviewerDetails .reviewer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 1rem;
}
.featuredReviews .reviewCardContainer .reviewCard .reviewerDetails .reviewer b {
  font-size: 20px;
  margin-bottom: 0.1rem;
}
.featuredReviews .reviewCardContainer .reviewCard .reviewerDetails .reviewer span {
  font-size: 18px;
}
.featuredReviews .reviewCardContainer .reviewCard .reviewerDetails .reviewer .reviewerContact {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
.featuredReviews .reviewCardContainer .reviewCard .reviewerDetails .reviewer .reviewerContact .veritcalDivider {
  border-radius: 10px;
  width: 2px;
  height: 1.25rem;
  background-color: #ededed;
  margin: 0 0.25rem 0 0.75rem;
}
.featuredReviews .reviewCardContainer .reviewCard .reviewerDetails .reviewer .reviewerContact svg {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.25rem;
  cursor: pointer;
}
.featuredReviews .reviewCardContainer .reviewCard .reviewerDetails .reviewer .reviewerContact svg path {
  fill: #000;
}
.featuredReviews .reviewCardContainer .reviewCard .reviewerDetails .reviewer .reviewerContact svg:last-of-type {
  margin-right: 0;
}
.featuredReviews .reviewCardContainer .reviewCard .reviewRating {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.25rem 0 0.5rem 0;
}
.featuredReviews .reviewCardContainer .reviewCard .reviewRating svg,
.featuredReviews .reviewCardContainer .reviewCard .reviewRating img {
  width: 2rem;
  height: 2rem;
  margin-right: 0.25rem;
}
.featuredReviews .reviewCardContainer .reviewCard .reviewRating svg path,
.featuredReviews .reviewCardContainer .reviewCard .reviewRating img path {
  fill: #00a8a8;
}
.featuredReviews .reviewCardContainer .reviewCard .reviewRating svg:last-of-type,
.featuredReviews .reviewCardContainer .reviewCard .reviewRating img:last-of-type {
  margin-right: 0;
}
.featuredReviews .reviewCardContainer .reviewCard .review {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 17vw;
  margin-top: 0.75rem;
}
.featuredReviews .reviewCardContainer .reviewCard .review .reviewTitle {
  font-size: 20px;
  margin-bottom: 0.5rem;
}
.featuredReviews .reviewCardContainer .reviewCard .review .reviewDetails {
  font-size: 16px;
  text-align: center;
  margin-top: 0.5rem;
  line-height: 140%;
}
.featuredReviews .reviewCardContainer .reviewCard .divider {
  width: 85%;
  margin: 1.5rem 0 1.5rem 0;
}
.featuredReviews .reviewCardContainer .reviewCard .reviewDisclaimer {
  font-size: 15px;
  color: #464f51;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.featuredReviews .reviewCardContainer .reviewCard .reviewDisclaimer span {
  text-align: center;
}
.featuredReviews .reviewCardContainer .reviewCard .reviewDisclaimer span:first-of-type {
  margin-bottom: 0.2rem;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body .featuredReviews .reviewCardContainer {
    width: 80vw;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard {
    width: 22.5vw;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerImg {
    width: 14vw;
    height: 14vw;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerDetails {
    width: 80%;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerDetails svg {
    border-radius: 25%;
    width: 2.75rem;
    height: 2.75rem;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerDetails .reviewer b {
    font-size: 19px;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerDetails .reviewer span {
    font-size: 17px;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .review {
    font-size: 17px;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewDisclaimer {
    font-size: 14px;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewDisclaimer span:first-of-type {
    margin-bottom: 0.1rem;
  }
}
@media (min-width: 1401px) and (max-width: 1650px) and (orientation: landscape) {
  html body .featuredReviews .reviewCardContainer {
    width: 80vw;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard {
    width: 22.5vw;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerImg {
    width: 14vw;
    height: 14vw;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerDetails {
    width: 80%;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerDetails svg {
    border-radius: 25%;
    width: 2.75rem;
    height: 2.75rem;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerDetails .reviewer b {
    font-size: 19px;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerDetails .reviewer span {
    font-size: 17px;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .review {
    font-size: 17px;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewDisclaimer {
    font-size: 14px;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewDisclaimer span:first-of-type {
    margin-bottom: 0.1rem;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  html body .featuredReviews .reviewCardContainer {
    width: 94vw;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard {
    width: 27vw;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerImg {
    margin-top: 1rem;
    width: 18vw;
    height: 18vw;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerDetails {
    padding: 0.75rem 0;
    width: 90%;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerDetails svg {
    width: 2.25rem;
    height: 2.25rem;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerDetails .reviewer b {
    font-size: 14px;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerDetails .reviewer span {
    font-size: 13px;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewRating svg,
html body .featuredReviews .reviewCardContainer .reviewCard .reviewRating img {
    width: 1.6rem;
    height: 1.6rem;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .review {
    width: 90%;
    font-size: 14px;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewDisclaimer {
    font-size: 12px;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewDisclaimer span:first-of-type {
    margin-bottom: 0.1rem;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .featuredReviews {
    padding: 4vh 0 4vh 0;
  }
  html body .featuredReviews .reviewCardContainer {
    flex-direction: column;
    justify-content: flex-start;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard {
    width: 80vw;
    margin-bottom: 1.5rem;
    padding-bottom: 2rem;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard:last-of-type {
    margin-bottom: 0;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerImg {
    margin-top: 1.5rem;
    width: 45vw;
    height: 45vw;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerDetails {
    padding: 0.6rem 0;
    width: 85%;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerDetails svg {
    width: 2.5rem;
    height: 2.5rem;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerDetails .reviewer b {
    font-size: 17px;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerDetails .reviewer span {
    font-size: 16px;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .review {
    font-size: 16px;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewDisclaimer {
    font-size: 12px;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewDisclaimer span:first-of-type {
    margin-bottom: 0.1rem;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .featuredReviews .reviewCardContainer {
    width: 94vw;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard {
    width: 27vw;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerImg {
    margin-top: 1rem;
    width: 18vw;
    height: 18vw;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerDetails {
    padding: 0.75rem 0;
    width: 90%;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerDetails svg {
    width: 2.25rem;
    height: 2.25rem;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerDetails .reviewer b {
    font-size: 14px;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewerDetails .reviewer span {
    font-size: 13px;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewRating svg,
html body .featuredReviews .reviewCardContainer .reviewCard .reviewRating img {
    width: 1.6rem;
    height: 1.6rem;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .review {
    width: 90%;
    font-size: 14px;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewDisclaimer {
    font-size: 12px;
  }
  html body .featuredReviews .reviewCardContainer .reviewCard .reviewDisclaimer span:first-of-type {
    margin-bottom: 0.1rem;
  }
}
.videoPlayer {
  border-radius: 10px;
  margin: 2vh 0 1vh 0;
  position: relative;
}
.videoPlayer .playVideoBtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem;
  border-radius: 25%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 2;
}
.videoPlayer .playVideoBtn svg {
  width: 3rem;
  height: 3rem;
}
.videoPlayer .playVideoBtn svg path {
  fill: #fff;
}
.videoPlayer .playVideoBtn.hidden {
  display: none;
}
.videoPlayer video,
.videoPlayer img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body .videoPlayer .playVideoBtn {
    padding: 0.75rem;
  }
  html body .videoPlayer .playVideoBtn svg {
    width: 2.5rem;
    height: 2.5rem;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  html body .videoPlayer .playVideoBtn {
    padding: 0.75rem;
  }
  html body .videoPlayer .playVideoBtn svg {
    width: 2.5rem;
    height: 2.5rem;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .videoPlayer .playVideoBtn {
    padding: 0.5rem;
  }
  html body .videoPlayer .playVideoBtn svg {
    width: 2rem;
    height: 2rem;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .videoPlayer .playVideoBtn {
    padding: 0.5rem;
  }
  html body .videoPlayer .playVideoBtn svg {
    width: 2rem;
    height: 2rem;
  }
}
html body .optOut {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}
html body .optOut .optOutOptions {
  margin-bottom: 2.5rem;
}
html body .optOut .optOutOptions .optOutBtn,
html body .optOut .optOutOptions .optInBtn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
html body .optOut .optOutOptions button {
  padding: 1rem 0;
  width: 18vw;
  border-radius: 15px;
  margin-bottom: 0.5rem;
}
html body .optOut .optOutOptions .optedInMsg,
html body .optOut .optOutOptions .optedOutMsg {
  text-align: center;
  align-self: stretch;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
html body .optOut .optOutOptions .optedInMsg {
  color: #445f32;
}
html body .optOut .optOutOptions .optedOutMsg {
  color: #b91b02;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body .optOut .optOutOptions button {
    width: 22vw;
  }
  html body .optOut .optOutOptions .optedInMsg,
html body .optOut .optOutOptions .optedOutMsg {
    font-size: 14px;
  }
}
@media (min-width: 1401px) and (max-width: 1650px) and (orientation: landscape) {
  html body .optOut .optOutOptions button {
    width: 22vw;
  }
  html body .optOut .optOutOptions .optedInMsg,
html body .optOut .optOutOptions .optedOutMsg {
    font-size: 14px;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  html body .optOut .optOutOptions button {
    width: 40vw;
  }
  html body .optOut .optOutOptions .optedInMsg,
html body .optOut .optOutOptions .optedOutMsg {
    font-size: 13px;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .optOut .optOutOptions button {
    width: 70vw;
  }
  html body .optOut .optOutOptions .optedInMsg,
html body .optOut .optOutOptions .optedOutMsg {
    font-size: 12px;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .optOut .optOutOptions button {
    width: 35vw;
  }
  html body .optOut .optOutOptions .optedInMsg,
html body .optOut .optOutOptions .optedOutMsg {
    font-size: 13px;
  }
}
.invalidLocationOverlay {
  z-index: 11;
}
.invalidLocationOverlay .invalidLocationModal {
  height: auto;
  max-height: none;
  min-height: auto;
  padding-bottom: 3rem;
}
.invalidLocationOverlay .invalidLocationModal svg {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 25%;
}
.invalidLocationOverlay .invalidLocationModal .invalidIntro {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.invalidLocationOverlay .invalidLocationModal .invalidIntro h3 {
  font-size: 26px;
}
.invalidLocationOverlay .invalidLocationModal p {
  font-size: 19px;
  margin: 1rem 0;
}
.invalidLocationOverlay .invalidLocationModal p:first-of-type {
  margin-top: 3rem;
}
.invalidLocationOverlay .invalidLocationModal p:last-of-type {
  margin-bottom: 2rem;
}
.invalidLocationOverlay .invalidLocationModal .closeInvalidLocationModalBtn {
  width: auto;
  padding: 1rem 1.5rem;
}

@media (min-width: 601px) and (orientation: portrait) {
  html body .invalidLocationOverlay .invalidLocationModal {
    padding-top: 3rem;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .invalidLocationOverlay {
    height: 100dvh;
  }
  html body .invalidLocationOverlay .invalidLocationModal {
    max-height: 100dvh;
    height: auto;
    min-height: auto;
    padding-top: 5dvh;
  }
  html body .invalidLocationOverlay .invalidLocationModal .invalidIntro h3 {
    font-size: 18px;
  }
  html body .invalidLocationOverlay .invalidLocationModal p {
    font-size: 14px;
    margin: 0.5rem 0;
  }
  html body .invalidLocationOverlay .invalidLocationModal p:first-of-type {
    margin-top: 1rem;
  }
  html body .invalidLocationOverlay .invalidLocationModal p:last-of-type {
    margin-bottom: 1rem;
  }
  html body .invalidLocationOverlay .invalidLocationModal .closeInvalidLocationModalBtn b {
    font-size: 12px;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .invalidLocationOverlay .invalidLocationModal {
    max-height: 80vh;
    width: 70vw;
    padding: 2.5vw;
    overflow-x: hidden;
  }
}
.scrollBtn {
  position: fixed;
  bottom: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  background-color: #000;
  border-radius: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.25rem;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(85, 82, 77, 0.2);
}
.scrollBtn:hover {
  opacity: 0.8;
}
.scrollBtn svg {
  width: 3rem;
  height: 3rem;
}
.scrollBtn svg path {
  fill: #fff;
}
.scrollBtn.scrollUp {
  transform: rotate(180deg);
  background-color: #fff;
}
.scrollBtn.scrollUp svg path {
  fill: #000;
}
.scrollBtn.scrollToTopBtn {
  transform: rotate(180deg);
  bottom: 4.5rem;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body .scrollBtn svg {
    width: 2.5rem;
    height: 2.5rem;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .scrollBtn svg {
    width: 2.5rem;
    height: 2.5rem;
  }
}
.offerCtaBanner {
  width: 40%;
  padding: 2rem 30% 3rem 30%;
  background-color: whitesmoke;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1px 7.5px rgba(85, 82, 77, 0.05);
}

.offerCta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.offerCta .offerSection {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.offerCta .offerSection .productPriceContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}
.offerCta .offerSection .productPriceContainer .productPrice {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.25rem;
}
.offerCta .fullPrice {
  font-size: 28px;
  margin-bottom: 0.25rem;
  color: #000;
  text-decoration: line-through;
}
.offerCta .productPriceContainer {
  margin-bottom: 1vh;
}
.offerCta .productPriceContainer span {
  font-size: 24px;
}
.offerCta .productPriceContainer .productPrice {
  color: #445f32;
  font-size: 32px;
}
.offerCta .ctaDualBtn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.offerCta .ctaDualBtn .addToCartBtn,
.offerCta .ctaDualBtn .cartUpdateContainer,
.offerCta .ctaDualBtn .buyNowBtn {
  box-sizing: border-box;
  /* same border rule */
  width: 49%;
  height: 7vh;
  border: 2px solid #000;
}
.offerCta .ctaDualBtn .addToCartBtn b,
.offerCta .ctaDualBtn .cartUpdateContainer b,
.offerCta .ctaDualBtn .buyNowBtn b {
  font-size: 19px;
}
.offerCta .ctaDualBtn .addToCartBtn,
.offerCta .ctaDualBtn .cartUpdateContainer {
  order: 1;
}
.offerCta .ctaDualBtn .buyNowBtn {
  order: 2;
  background-color: #fff;
}
.offerCta .ctaDualBtn .buyNowBtn b {
  color: #000;
}
.offerCta .ctaDualBtn .cartUpdateContainer {
  border: 2px solid rgba(0, 0, 0, 0);
}
.offerCta .ctaDualBtn .cartUpdateContainer b {
  font-size: 26px;
}
.offerCta .ctaDualBtn .addToCartBtn {
  background-color: #000;
}
.offerCta .ctaDualBtn .addToCartBtn b {
  color: #fff;
}
.offerCta .ctaDualBtn.cartEmpty .addToCartBtn,
.offerCta .ctaDualBtn.cartEmpty .cartUpdateContainer,
.offerCta .ctaDualBtn.cartEmpty .buyNowBtn {
  width: 49%;
  height: 7vh;
}
.offerCta .ctaDualBtn.cartEmpty .addToCartBtn,
.offerCta .ctaDualBtn.cartEmpty .cartUpdateContainer {
  order: 2;
}
.offerCta .ctaDualBtn.cartEmpty .addToCartBtn {
  background-color: #fff;
  border: 2px solid #000;
}
.offerCta .ctaDualBtn.cartEmpty .addToCartBtn b {
  color: #000;
}
.offerCta .ctaDualBtn.cartEmpty .buyNowBtn {
  order: 1;
  background-color: #000;
}
.offerCta .ctaDualBtn.cartEmpty .buyNowBtn b {
  color: #fff;
}

.guarantee {
  margin-top: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  position: relative;
}
.guarantee svg {
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 0.25rem;
}
.guarantee svg path {
  fill: #445f32;
}
.guarantee span {
  font-size: 18px;
  color: #445f32;
}

@media (min-width: 951px) and (max-width: 1400px) and (orientation: landscape) {
  html body .offerCta .addToCartBtn,
html body .offerCta .cartUpdateContainer {
    width: 25vw;
    height: 8vh;
  }
}
@media (min-width: 1401px) and (max-width: 1650px) and (orientation: landscape) {
  html body .offerCta .addToCartBtn,
html body .offerCta .cartUpdateContainer {
    width: 25vw;
    height: 8vh;
  }
}
@media (min-width: 601px) and (orientation: portrait) {
  html body .offerCtaBanner {
    width: 70%;
    padding: 2rem 15% 3rem 15%;
  }
  html body .offerCta .productPriceContainer {
    margin-bottom: 1vh;
  }
  html body .offerCta .productPriceContainer span {
    font-size: 18px;
  }
  html body .offerCta .productPriceContainer .productPrice {
    font-size: 24px;
  }
  html body .offerCta .addToCartBtn,
html body .offerCta .cartUpdateContainer {
    width: 50vw;
    height: 6.5vh;
  }
  html body .offerCta .addToCartBtn b,
html body .offerCta .cartUpdateContainer b {
    font-size: 20px;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .offerCtaBanner {
    width: 90%;
    padding: 2rem 5% 3rem 5%;
  }
  html body .offerCta .productPriceContainer {
    margin-bottom: 1vh;
  }
  html body .offerCta .productPriceContainer span {
    font-size: 18px;
  }
  html body .offerCta .productPriceContainer .productPrice {
    font-size: 24px;
  }
  html body .offerCta .addToCartBtn,
html body .offerCta .cartUpdateContainer {
    width: 80vw;
    height: 8vh;
  }
  html body .offerCta .addToCartBtn .cartUpdateBtn,
html body .offerCta .cartUpdateContainer .cartUpdateBtn {
    width: 2.4vh;
  }
  html body .offerCta .addToCartBtn .cartUpdateBtn svg,
html body .offerCta .addToCartBtn .cartUpdateBtn img,
html body .offerCta .cartUpdateContainer .cartUpdateBtn svg,
html body .offerCta .cartUpdateContainer .cartUpdateBtn img {
    margin: 0;
    width: 1.6vh;
    height: 1.6vh;
  }
  html body .offerCta .addToCartBtn b,
html body .offerCta .cartUpdateContainer b {
    font-size: 18px;
  }
  html body .offerCta .ctaDualBtn .addToCartBtn,
html body .offerCta .ctaDualBtn .cartUpdateContainer,
html body .offerCta .ctaDualBtn .buyNowBtn {
    height: 6vh;
  }
  html body .offerCta .ctaDualBtn .addToCartBtn b,
html body .offerCta .ctaDualBtn .cartUpdateContainer b,
html body .offerCta .ctaDualBtn .buyNowBtn b {
    font-size: 16px;
  }
  html body .offerCta .ctaDualBtn .cartUpdateContainer b {
    font-size: 20px;
  }
  html body .offerCta .guarantee {
    margin-top: 1vh;
  }
  html body .offerCta .guarantee svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.25rem;
  }
  html body .offerCta .guarantee span {
    font-size: 16px;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .offerCtaBanner {
    width: 70%;
    padding: 2rem 15% 3rem 15%;
  }
  html body .offerCta .productPriceContainer {
    margin-bottom: 1vh;
  }
  html body .offerCta .productPriceContainer span {
    font-size: 18px;
  }
  html body .offerCta .productPriceContainer .productPrice {
    font-size: 24px;
  }
  html body .offerCta .addToCartBtn,
html body .offerCta .cartUpdateContainer {
    width: 50vw;
    height: 15vh;
  }
  html body .offerCta .addToCartBtn b,
html body .offerCta .cartUpdateContainer b {
    font-size: 18px;
  }
  html body .offerCta .ctaDualBtn .addToCartBtn,
html body .offerCta .ctaDualBtn .cartUpdateContainer,
html body .offerCta .ctaDualBtn .buyNowBtn {
    height: 15vh;
  }
  html body .offerCta .ctaDualBtn .addToCartBtn b,
html body .offerCta .ctaDualBtn .cartUpdateContainer b,
html body .offerCta .ctaDualBtn .buyNowBtn b {
    font-size: 16px;
  }
  html body .offerCta .ctaDualBtn .cartUpdateContainer b {
    font-size: 20px;
  }
  html body .offerCta .ctaDualBtn.cartEmpty .addToCartBtn,
html body .offerCta .ctaDualBtn.cartEmpty .cartUpdateContainer,
html body .offerCta .ctaDualBtn.cartEmpty .buyNowBtn {
    height: 15vh;
  }
  html body .offerCta .guarantee {
    margin-top: 1vh;
  }
  html body .offerCta .guarantee svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.25rem;
  }
  html body .offerCta .guarantee span {
    font-size: 16px;
  }
}
/* ───────────────────────────────────────────────
   Overlay (unchanged)
   ──────────────────────────────────────────── */
.imgCarouselOverlay .closeModalBtn {
  right: 3rem;
  top: 1.5rem;
  transform: scale(1.1);
}

/* ───────────────────────────────────────────────
   Carousel container + arrows
   ──────────────────────────────────────────── */
.imgCarouselContainer {
  position: relative;
  background-color: transparent;
  /* clear backdrop */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  border-radius: 15px;
  /* ← / → arrows */
  /* ± zoom controls */
  /* ───────────────────────────────────────────
     Visible viewport
     ──────────────────────────────────────── */
}
.imgCarouselContainer .changeImgBtn {
  position: absolute;
  z-index: 10;
  padding: 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.75rem;
}
.imgCarouselContainer .changeImgBtn svg {
  width: 2rem;
  height: 2rem;
}
.imgCarouselContainer .changeImgBtn svg path {
  fill: #fff;
}
.imgCarouselContainer .changeImgBtn[data-direction=left] {
  left: 3rem;
}
.imgCarouselContainer .changeImgBtn[data-direction=right] {
  right: 3rem;
}
.imgCarouselContainer .changeImgBtn:hover {
  opacity: 0.9;
}
.imgCarouselContainer .zoomBtns {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1.5rem;
  z-index: 10;
}
.imgCarouselContainer .zoomBtns .zoomBtn {
  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25%;
}
.imgCarouselContainer .zoomBtns .zoomBtn svg {
  width: 1.5rem;
  height: 1.5rem;
}
.imgCarouselContainer .zoomBtns .zoomBtn svg path {
  fill: #fff;
}
.imgCarouselContainer .zoomBtns .zoomBtn:hover {
  opacity: 0.9;
}
.imgCarouselContainer .imgCarousel {
  position: relative;
  width: 96vh;
  height: 96vh;
  /* stacked images; only .active is visible */
}
.imgCarouselContainer .imgCarousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  box-shadow: 0 5px 15px rgba(85, 82, 77, 0.2);
  background-color: #fff;
  /* zoom / pan cursors */
  transition: transform 0.2s ease;
  cursor: zoom-in;
}
.imgCarouselContainer .imgCarousel img.dragging {
  cursor: grabbing;
}
.imgCarouselContainer .imgCarousel img.active {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 601px) and (orientation: portrait) {
  html body .imgCarouselContainer .imgCarousel {
    width: 95vw;
    height: 95vw;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .imgCarouselContainer .imgCarousel {
    width: 95vw;
    height: 95vw;
  }
  html body .imgCarouselContainer .changeImgBtn {
    padding: 0.5rem;
  }
  html body .imgCarouselContainer .changeImgBtn svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  html body .imgCarouselContainer .changeImgBtn[data-direction=left] {
    left: 1rem;
  }
  html body .imgCarouselContainer .changeImgBtn[data-direction=right] {
    right: 1rem;
  }
  html body .imgCarouselContainer .zoomBtns {
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    gap: 1rem;
  }
  html body .imgCarouselContainer .zoomBtns .zoomBtn {
    padding: 0.75rem;
  }
  html body .imgCarouselContainer .zoomBtns .zoomBtn svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}
.carouselBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 15px;
}
.carouselBtn .carouselBtnFilter {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  border-radius: inherit;
  z-index: 2;
}
.carouselBtn .carouselBtnFilter .openCarouselBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.carouselBtn .carouselBtnFilter .openCarouselBtn svg,
.carouselBtn .carouselBtnFilter .openCarouselBtn img {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 2rem;
  height: 2rem;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 25%;
  padding: 1rem;
}
.carouselBtn .carouselBtnFilter .openCarouselBtn svg path,
.carouselBtn .carouselBtnFilter .openCarouselBtn img path {
  fill: #fff;
}
.carouselBtn:hover .carouselBtnFilter {
  display: flex;
}

@media (max-width: 600px) and (orientation: portrait) {
  html body .carouselBtn .carouselBtnFilter .openCarouselBtn svg,
html body .carouselBtn .carouselBtnFilter .openCarouselBtn img {
    position: absolute;
    top: 1vw;
    left: 1vw;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0.75rem;
  }
}
.openFiltersBtn svg,
.openFiltersBtn img {
  margin-right: 0.5rem;
}
.openFiltersBtn svg,
.openFiltersBtn img,
.openFiltersBtn b {
  transform: translateX(-0.25rem);
}

.filterOverlay .closeModalBtn {
  top: 1rem;
  right: 22vw;
}

.filterModal {
  width: 45vw;
  height: 80vh;
  max-height: 80vh;
  padding: 5vh 2.5vw;
}
.filterModal .filterActionBtns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.filterModal .filterActionBtns button {
  width: 49%;
  padding: 1.25rem 0;
  border: 1px solid #000;
}
.filterModal .filterActionBtns button b {
  font-size: 17px;
}
.filterModal .filterActionBtns .resetFilterBtn {
  background-color: #fff;
}
.filterModal .filterActionBtns .resetFilterBtn b {
  color: #000;
}
.filterModal .categoryOptionsContainer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-left: 0.5vw;
  flex-grow: 1;
  overflow-y: auto;
}
.filterModal .searchAndSortContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.filterModal .searchAndSortContainer .sortTabs {
  display: flex;
  justify-content: center;
  align-items: center;
}
.filterModal .searchAndSortContainer .sortTabs .sortTab {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
  cursor: pointer;
  user-select: none;
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
  color: #000;
  font-size: 14px;
  height: 1.5rem;
  padding: 1rem 2rem;
}
.filterModal .searchAndSortContainer .sortTabs .sortTab.selected {
  background-color: #000;
  color: #fff;
}
.filterModal .searchAndSortContainer .sortTabs .sortTab:first-of-type {
  border-radius: 25px 0 0 25px;
  border-right: 1px solid #e1e1e1;
}
.filterModal .searchAndSortContainer .sortTabs .sortTab:last-of-type {
  border-radius: 0 25px 25px 0;
}
.filterModal .searchAndSortContainer .searchBar {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #e8e8e8;
  border-radius: 25px;
  padding: 0.25rem 1rem;
  margin-right: 2rem;
}
.filterModal .searchAndSortContainer .searchBar svg,
.filterModal .searchAndSortContainer .searchBar img {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
}
.filterModal .searchAndSortContainer .searchBar input {
  border: none;
  outline: none;
  box-shadow: none;
  height: 1.5rem;
}
.filterModal .searchAndSortContainer .searchBar input:focus {
  border: none;
  outline: none;
  box-shadow: none;
}
.filterModal .divider {
  width: 100%;
  margin: 2.5rem 0;
}

.groupOptions {
  display: flex;
  flex-direction: column;
  text-align: left;
  display: none;
}

.categoryGroup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  width: 20vw;
  margin-right: 1vw;
  margin-bottom: 1rem;
}
.categoryGroup.selected .groupTitle {
  background-color: #000;
  border-radius: 25px;
}
.categoryGroup.selected .groupTitle b {
  color: #fff;
}
.categoryGroup.selected .groupTitle img,
.categoryGroup.selected .groupTitle svg {
  filter: invert(1);
  transform: rotate(180deg);
}
.categoryGroup.selected .groupOptions {
  display: flex;
}

.groupTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.5vw 1rem 0.5vw;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0.5rem;
}
.groupTitle b {
  font-size: 14px;
  margin-left: 1vw;
}
.groupTitle svg,
.groupTitle img {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.groupTitle svg:hover,
.groupTitle img:hover {
  opacity: 0.8;
}

.categoryOption {
  text-align: center;
  margin-bottom: 0.5rem;
  background-color: whitesmoke;
  border-radius: 25px;
  padding: 0.75rem 1rem;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.categoryOption.selected {
  background-color: #000;
  color: #fff;
}
.categoryOption.selected svg,
.categoryOption.selected img {
  filter: invert(1);
}

@media (min-width: 601px) and (orientation: portrait) {
  html body .filterOverlay .closeModalBtn {
    top: 0.75rem;
    right: 0.75rem;
  }
  html body .filterOverlay .filterModal {
    width: 90vw;
    height: auto;
    padding: 5vh 5vw;
    border-radius: 0;
    max-height: none;
    padding: 2.5vh 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer {
    flex-direction: column-reverse;
    align-items: center;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer .sortTabs {
    margin-bottom: 0.75rem;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer .sortTabs .sortTab {
    padding: 0.5rem 2rem;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer .sortTabs .sortTab b {
    white-space: nowrap;
    font-size: 10px;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer .sortTabs .sortTab:first-of-type {
    padding-right: 1.5rem;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer .sortTabs .sortTab:last-of-type {
    padding-left: 1.5rem;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer .searchBar {
    width: 50%;
    margin-right: 0;
    border-radius: 15px;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer .searchBar input {
    height: 1rem;
    font-size: 14px;
  }
  html body .filterOverlay .filterModal .divider {
    margin: 2vh 0;
  }
  html body .filterOverlay .categoryOptionsContainer {
    flex-grow: 0;
  }
  html body .filterOverlay .categoryGroup {
    width: 45%;
    padding: 0.5rem 2.5%;
    margin: 0;
  }
  html body .filterOverlay .categoryGroup .groupTitle {
    padding: 0.75rem 3vw;
  }
  html body .filterOverlay .categoryGroup .groupTitle b {
    font-size: 12px;
  }
  html body .filterOverlay .categoryGroup:last-of-type {
    margin-bottom: 0;
  }
  html body .filterOverlay .filterActionBtns {
    width: 100%;
    padding: 0.25rem 0;
  }
  html body .filterOverlay .filterActionBtns button {
    padding: 1rem 0;
  }
  html body .filterOverlay .filterActionBtns button b {
    font-size: 14px;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .filterOverlay {
    height: 100dvh;
  }
  html body .filterOverlay .closeModalBtn {
    top: 0.25rem;
    right: 0.25rem;
  }
  html body .filterOverlay .filterModal {
    width: 90vw;
    height: 95dvh;
    padding: 5dvh 5vw;
    border-radius: 0;
    max-height: none;
    padding: 2.5dvh 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer {
    flex-direction: column-reverse;
    align-items: center;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer .sortTabs {
    margin-bottom: 0.75rem;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer .sortTabs .sortTab {
    padding: 0.5rem 2rem;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer .sortTabs .sortTab b {
    white-space: nowrap;
    font-size: 10px;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer .sortTabs .sortTab:first-of-type {
    padding-right: 1.5rem;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer .sortTabs .sortTab:last-of-type {
    padding-left: 1.5rem;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer .searchBar {
    width: 80%;
    margin-right: 0;
    border-radius: 15px;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer .searchBar input {
    height: 1rem;
    font-size: 14px;
  }
  html body .filterOverlay .filterModal .divider {
    margin: 2dvh 0;
  }
  html body .filterOverlay .categoryOptionsContainer {
    flex-grow: 1;
  }
  html body .filterOverlay .categoryGroup {
    width: 90%;
    padding: 0.5rem 5%;
    margin: 0;
  }
  html body .filterOverlay .categoryGroup .groupTitle {
    padding: 0.75rem 3vw;
  }
  html body .filterOverlay .categoryGroup .groupTitle b {
    font-size: 12px;
  }
  html body .filterOverlay .categoryGroup:last-of-type {
    margin-bottom: 0;
  }
  html body .filterOverlay .filterActionBtns {
    width: 105%;
    padding: 0.25rem 0;
  }
  html body .filterOverlay .filterActionBtns button {
    padding: 1rem 0;
  }
  html body .filterOverlay .filterActionBtns button b {
    font-size: 14px;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .filterOverlay .closeModalBtn {
    top: 0.25rem;
    right: 0.25rem;
  }
  html body .filterOverlay .filterModal {
    width: 90vw;
    height: 95vh;
    padding: 5vh 5vw;
    border-radius: 0;
    max-height: none;
    padding: 2.5vh 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer {
    flex-direction: column-reverse;
    align-items: center;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer .sortTabs {
    margin-bottom: 0.75rem;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer .sortTabs .sortTab {
    padding: 0.5rem 2rem;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer .sortTabs .sortTab b {
    white-space: nowrap;
    font-size: 10px;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer .sortTabs .sortTab:first-of-type {
    padding-right: 1.5rem;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer .sortTabs .sortTab:last-of-type {
    padding-left: 1.5rem;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer .searchBar {
    width: 80%;
    margin-right: 0;
    border-radius: 15px;
  }
  html body .filterOverlay .filterModal .searchAndSortContainer .searchBar input {
    height: 1rem;
    font-size: 14px;
  }
  html body .filterOverlay .filterModal .divider {
    margin: 2vh 0;
  }
  html body .filterOverlay .categoryOptionsContainer {
    flex-grow: 1;
  }
  html body .filterOverlay .categoryGroup {
    width: 40%;
    padding: 0.5rem 5%;
    margin: 0;
  }
  html body .filterOverlay .categoryGroup .groupTitle {
    padding: 0.75rem 3vw;
  }
  html body .filterOverlay .categoryGroup .groupTitle b {
    font-size: 12px;
  }
  html body .filterOverlay .categoryGroup:last-of-type {
    margin-bottom: 0;
  }
  html body .filterOverlay .filterActionBtns {
    width: 105%;
    padding: 0.25rem 0;
  }
  html body .filterOverlay .filterActionBtns button {
    padding: 1rem 0;
  }
  html body .filterOverlay .filterActionBtns button b {
    font-size: 14px;
  }
}
@keyframes slideIn {
  from {
    transform: translateX(120%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(120%);
    opacity: 0;
  }
}
.notification {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 14.5vh;
  right: 1vw;
  padding: 1rem 2rem 1rem 1.5rem;
  z-index: 1001;
  background-color: #fff;
  border-radius: 20px;
  width: auto;
  max-width: 30vw;
  box-shadow: 0 5px 15px rgba(85, 82, 77, 0.2);
  transform: translateX(120%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* children */
  /* state modifiers */
}
.notification svg {
  width: 3rem;
  height: 3rem;
  margin-right: 0.5rem;
}
.notification p {
  font-size: 18px;
  margin: 0;
}
.notification--visible {
  visibility: visible;
  pointer-events: auto;
  animation: slideIn 0.4s ease-out forwards;
}
.notification--hiding {
  animation: slideOut 0.4s ease-in forwards;
}

/* keep any existing breakpoint helpers */
@media (min-width: 601px) and (orientation: portrait) {
  html body .notification {
    top: 12.5vh;
    right: 3vw;
    width: 50vw;
    max-width: 50vw;
    padding: 0.75rem 3vw;
  }
  html body .notification svg {
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
  }
  html body .notification p {
    font-size: 16px;
    flex-grow: 1;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  html body .notification {
    top: 13vh;
    right: 2vw;
    width: 90vw;
    max-width: 90vw;
    padding: 0.75rem 3vw;
  }
  html body .notification svg {
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
  }
  html body .notification p {
    font-size: 14px;
    flex-grow: 1;
  }
}
@media (max-width: 950px) and (orientation: landscape) {
  html body .notification {
    top: 20vh;
    right: 3vw;
    width: 50vw;
    max-width: 50vw;
    padding: 0.5rem 3vw;
  }
  html body .notification svg {
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
  }
  html body .notification p {
    font-size: 16px;
    flex-grow: 1;
  }
}

/*# sourceMappingURL=app.css.map */