@font-face {
  font-family: "Poppins";
  src: url("./font/Poppins/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Poppins";
  src: url("./font/Poppins/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Poppins";
  src: url("./font/Poppins/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Poppins";
  src: url("./font/Poppins/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
:root {
  --gold-gradient: linear-gradient(
    82.15deg,
    #beaa88 0%,
    #fff2cd 35%,
    #fff3cd 65%,
    #d7be97 100%
  );
  --gold-gradient-button: linear-gradient(
    90deg,
    rgba(231, 191, 136, 1) 0%,
    rgb(255, 253, 198) 17%,
    rgba(255, 242, 205, 1) 35%,
    rgb(255, 253, 202) 44%,
    rgba(231, 191, 136, 1) 57%,
    rgba(163, 126, 86, 1) 68%,
    rgba(163, 126, 86, 1) 68%,
    rgba(163, 126, 86, 1) 68%,
    rgba(255, 242, 205, 1) 89%,
    rgba(163, 126, 86, 1) 100%
  );
  --card-padding-1: 1.125rem;
  --card-margin-1: 1.125rem;
  --section-head-margin: 1.978rem 1.103rem 0.6rem 1.103rem;
  --image-card-padding-1: 0.375rem 0.375rem 1rem;
  --image-card-padding-2: 0.375rem;
  --product-list-pad-var-1: 0.588rem 0.45rem;
  --product-card-pad-1: 0.45rem;
  --card-text-padding-1: 0.75rem;
  --common-font-sz-1: 1rem;
  --common-font-sz-large: 2.5rem;
  --common-font-sz-sub-large: 1.3rem;
  --common-font-sz-head: 1.765rem;
  --common-font-sz-xhead: 2.059rem;
  --common-font-sz-sub-head: 1.5rem;
  --common-font-sz-sub-title: 1.125rem;
  --common-font-sz-small: 0.882rem;
  --common-font-sz-small-x: 0.75rem;
}
* {
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.4 !important;
}
input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield; /* Standard */
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; /* Chrome, Safari, Edge */
  margin: 0; /* Optional, for better alignment */
}
img {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
body,
html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}
html {
  font-size: 87.5%;
}
body {
  font-family: "Poppins", sans-serif;
  background-color: #fff;
  color: #000;
}
button {
  border: none;
  outline: none;
  cursor: pointer;
  transition: filter 0.3s ease;
}
ol {
  padding-left: 16px !important;
}
button:hover {
  filter: brightness(0.9);
}
div#R10-ProgressComponent {
  height: auto;
  margin-top: 1rem;
  font-size: var(--common-font-sz-1);
  font-weight: 500;
  padding: 0 5px;
  color: #444;
}
div#R10-ProgressComponent.new-loads {
  padding: 0 1.3571428571428572rem;
}
#spinner {
  background: #fff;
}

.voice-btn {
  display: none !important;
  position: absolute;
  top: 1.4rem;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border-radius: 50%;
}

#sl-bin {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10000;
  width: 100%;
  transform: translateX(-50%) translateY(-50%);
  background-color: #fff;

  width: 85% !important;
  height: 100%;
  max-height: 550px !important;
}
.sl-close-button {
  filter: invert(1);
  margin-left: auto;
}

.beuaty-loader-wrap {
  display: flex;
  align-items: center;
  margin-top: 0.7rem;
}
.beauty-suggestion-loader-container {
  height: 24px;
  font-family: monospace;
  color: #75654a;
  font-size: 1rem;
  font-weight: 500;
}

.beauty-suggestion-loader-text,
.welcome-subtext {
  position: relative;
  display: inline-block;
  min-width: 1ch;
  min-height: 1em;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.welcome-subtext {
  transition: opacity 0.5s ease-in-out;
}
.beauty-suggestion-loader-text.visible,
.welcome-subtext.visible {
  opacity: 1;
}

.welcome-subtext {
  margin-top: 0.515rem;
  min-height: 60px;
  font-size: var(--common-font-sz-sub-head);
  font-weight: 500;
  color: #666666;
}
.beauty-suggestion-loader-text::after {
  content: "|";
  position: absolute;
  right: -2px;
  animation: beautySuggestionLoaderBlink 1s infinite;
}

@keyframes beautySuggestionLoaderBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.chatContainer {
  padding-top: 54px;
}
.chat-header {
  background-color: #000;
  position: absolute;
  top: 0;
  z-index: 198;
  width: 100%;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chat-header img {
  width: 4rem;
}

.loading-shimmer {
  -webkit-text-fill-color: transparent;
  animation-delay: 0.5s;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: loading-shimmer;
  background: #a69372
    linear-gradient(to right, #a69372 0%, #fff3cd 50%, #a69372 100%);
  background-clip: text;
  -webkit-background-clip: text;
  background-repeat: no-repeat;
  background-size: 50% 200%;
  display: inline-block;
}

[dir="ltr"] .loading-shimmer {
  background-position: -100% top;
}

[dir="rtl"] .loading-shimmer {
  background-position: 200% top;
}

@keyframes loading-shimmer {
  0% {
    background-position: -100% top;
  }
  100% {
    background-position: 250% top;
  }
}
.avatar-image,
.feedback-container,
.interactiveContainer,
.bot-text .bubble-botname,
.bot-text .bubble-assist-text,
.bot-text div::before,
.botName,
.profileContainer,
.time-stamp,
.menuOptionsHeading,
.text-box span.inFlow {
  display: none !important;
}
.no-scroll {
  overflow: hidden;
}
em {
  font-size: var(--common-font-sz-1) !important;
  font-weight: 600 !important;
  color: #000 !important;
  font-style: normal !important;
}
.appear {
  opacity: 0;
  animation: fadeIn 0.4s forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Alert Box Styles */
.alert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.alert-box {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
  max-width: 300px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.alert-overlay.show {
  opacity: 1;
  display: flex;
}

.alert-overlay.show .alert-box {
  transform: scale(1);
  opacity: 1;
}

.alert-message {
  margin-bottom: 20px;
  font-size: 1rem;
}
.cart-toast {
  visibility: hidden;
  min-width: 250px;
  margin: 0 auto;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 10px;
  position: fixed;
  z-index: 1;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.cart-toast.show {
  visibility: visible;
  animation: fadeInOut 3s ease;
}
@keyframes fadeInOut {
  0%,
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.button-load-svg {
  display: none;
  width: 1.25em;
  transform-origin: center;
  animation: rotate4 2s linear infinite;
}

.button-load-svg circle {
  fill: none;
  stroke: #e7bf88;
  stroke-width: 4;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: dash4 1.5s ease-in-out infinite;
}

@keyframes rotate4 {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash4 {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 200;
    stroke-dashoffset: -35px;
  }

  100% {
    stroke-dashoffset: -125px;
  }
}

.YMK-module-wrapper,
.aiba-module-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 205;
  width: 100%;
  height: 100%;

  left: 50%;
  transform: translateX(-50%);
  max-width: 630px;
}
.YMK-module-wrapper {
  display: flex;
  align-items: end;
}
.aiba-module-wrapper {
  background-color: #000;
  /* zoom: 0.37 !important; */
}
.a-module-close-btn {
  background-color: #00000070;
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: absolute;
  border-radius: 0.8rem;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 205;
}
.a-module-close-btn img {
  width: 50%;
}

#YMK-module {
  width: 100%;
  height: 100%;
}
.YMK-module-wrapper.none,
.aiba-module-wrapper.none {
  visibility: hidden;
  pointer-events: none;
}
.YMK-module-wrapper.the-looks {
  position: absolute;
  overflow: hidden;
}
.YMK-iframe-box {
  width: 100%;
  height: calc(100% - 54px);
}
.effect-button-container {
  flex-direction: column;
  gap: 0.7rem;
  z-index: 1;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
}
.effect-button {
  background-color: red;
  color: #fff;
  padding: 1rem;
}
.playgroundContainer,
.titleContainer {
  background: #fff !important;
}
.playgroundContainer {
  position: relative;
  box-shadow: none !important;
}
.playgroundContainer.copyDisabled {
  user-select: none;
  -webkit-user-select: none;
}
.playgroundContainer.expUX {
  max-width: 630px;
}
.terms-consent {
  display: none;
  font-size: 90%;
  flex-direction: column;
  color: #252525;
  overflow-y: auto;
  padding: var(--card-padding-1);
  position: fixed;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 630px;
  transform: translateX(-50%);
  height: 100%;
  z-index: 201;
  background-color: #fff;
}
.welcome-page {
  position: fixed;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 630px;
  transform: translateX(-50%);
  height: 100%;
  z-index: 200;
  background: url(./images/welcome_image.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}
.welcome-wrapper {
  /* background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 14.87%,
    rgba(0, 0, 0, 0.2) 100%
  ); */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  padding: 2.5rem 1.103rem;
  position: relative;
  overflow: hidden;
}
.welcome-wrapper video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
.video-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%; /* Covers bottom half */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.2) 10.87%,
    rgba(0, 0, 0, 0.3) 20.87%,
    rgba(0, 0, 0, 0.4) 30.87%,
    rgba(0, 0, 0, 0.7) 100%
  );
  left: 0;
}
.welcome-wrapper .welcome-title,
.welcome-wrapper .welcome-subhead,
.welcome-wrapper .welcome-brief,
.welcome-wrapper .welcome-button {
  z-index: 2;
}
.welcome-page.hideWelcome {
  display: none;
  transform: translateX(100%);
}

.login-open-btn,
.alert-button {
  background: #000;
  min-height: 3rem;
  margin-top: 0.5rem;
  border-radius: 1rem;
}
.login-open-btn {
  /* margin-top: 0;
  background: var(--gold-gradient);
  border-radius: 0.7rem;
  padding: 0 1rem; */
  min-height: 0;
  padding: 0;
}
.login-open-btn span {
  font-size: var(--common-font);
  font-weight: 600;
  color: #fff;
}
.alert-button {
  min-height: 2.5rem;
  min-width: 7rem;
  border-radius: 8px;
}
/* .login-open-btn span, */
.alert-button span {
  font-size: var(--common-font);
  font-weight: 600;
  background: linear-gradient(
    89.69deg,
    #e7bf88 0.24%,
    #ffdd9d 20.13%,
    #fff2cd 49.97%,
    #ffdd9d 79.31%,
    #e7bf88 99.7%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.alert-button span {
  font-size: 1rem;
}
.login-page {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  width: 100%;
  background-color: #fff;
  z-index: 199;
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: 1.471rem;
}
.login-page.view {
  display: flex;
}
.login-img-wrapper {
  width: 100%;
  height: 14rem;
  border-radius: 0.5rem;
  overflow: hidden;
  align-self: center;
  flex-shrink: 0;
}
.login-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.login-header {
  font-size: 1.324rem;
  font-weight: 600;
}
.consent-box {
  max-height: 15rem;
  overflow-y: auto;
  margin-top: 1.1rem;
  padding: 1.1rem;
  border-radius: 8px;
  border: 1px solid #d3d3d3;
}
.consent-box p {
  margin-top: 0;
  margin-bottom: 0.9rem;
  font-size: 0.9rem;
  color: #444;
}
.consent-box h3 {
  margin-top: 0;
  margin-bottom: 0.9rem;
  color: #333;
}
.consent-box span,
.consent-box a {
  cursor: pointer;
  border-bottom: 1px solid;
  border-color: #bf9854;
  color: #bf9854;
}
.subscribe-checkbox-wrap a {
  cursor: pointer;
  border-bottom: 1px solid;
  border-color: #bf9854;
  color: #bf9854;
}
.consent-box::-webkit-scrollbar {
  display: block;
  width: 4px;
}
.consent-box::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
  width: 4px;
}
.consent-box::-webkit-scrollbar-thumb:hover {
  background: #999;
}
.login-decription {
  margin-top: 0.588rem;
  font-size: 1.029rem;
  color: #afafaf;
}
.login-field {
  display: flex;
  flex-direction: column;
  font-size: 1.029rem;
  margin-top: 1rem;
}
.login-field:first-child {
  margin-top: 0;
}
.login-field input {
  margin-top: 0.294rem;
  font-size: 1.029rem;
  padding: 0.882rem;
  background-color: #f4f5f7;
  outline: none;
  border: 1px solid #d3d3d3;
  border-radius: 6px;
}
.login-field input:focus {
  border-color: #d7be97;
}
.login-field.hidden {
  display: none;
}
.login-error {
  font-size: 12px;
  min-height: 36.4px;
  padding-top: 0.5rem;
  text-align: center;
  color: #b61b28;
}
/* .login-error:empty {
  display: none;
} */
.name-fields-wrap.hidden,
.number-fields-wrap.hidden,
.login-close-btn.hidden {
  display: none !important;
}
.number-fields-wrap {
  margin-top: 1.5rem;
}
.login-button {
  width: 100%;
  margin-top: 1.2rem;
  display: flex;
  min-height: 3rem;
  min-width: 9rem;
  background: var(--gold-gradient);
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.login-close-btn {
  background: transparent;
  padding: 0;
  margin-top: 1.15rem;
  font-size: 0.9rem;
}
.login-button span,
.login-close-btn span {
  font-weight: 600;
  color: #000;
}

.login-button .btn-loader {
  border: 2px solid #000;
  border-left-color: transparent;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  animation: spin89345 1s linear infinite;
}
@keyframes spin89345 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.terms-checks {
  min-height: 21px;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  font-size: 0.9rem;
  margin-top: 1rem;
}
.terms-checkbox-wrap {
  font-size: 0.9rem;
  margin-top: 0.9rem;
}
.terms-checks.hidden {
  display: none;
}
.terms-checkbox-wrap,
.subscribe-checkbox-wrap {
  display: flex;
  /* align-items: center; */
}
.terms-checks input,
.terms-checkbox-wrap input {
  outline: none;
  border: 1px solid #222;
  flex-shrink: 0;
  margin-right: 0.5rem;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.15rem;
}
.subscribe-checkbox-wrap span,
.terms-checkbox-wrap span,
.number-fields-wrap label span {
  display: inline-block;
  color: #8e8e8e;
  font-size: 0.9rem;
}
.terms-checkbox-wrap .terms-view-btn {
  display: inline-block;
  cursor: pointer;
  border-bottom: 1px solid;
  border-color: #bf9854;
  color: #bf9854;
}
.terms-checkbox-wrap.error label {
  color: #b61b28;
}
.terms-checkbox-wrap.error input {
  border-color: #b61b28;
}
.top-bar {
  position: fixed;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 630px;
  transform: translateX(-50%);
  z-index: 201;
  background-color: #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  height: 3.375rem;
}
.right-section {
  display: flex;
  gap: 0.625rem;
  align-items: center;
}
.main-cart-button,
.more-options-button {
  cursor: pointer;
}
.main-cart-button {
  position: relative;
}
.count-badge {
  position: absolute;
  background-color: #ffdd9d;
  color: #7e5b33;
  bottom: -0.6rem;
  right: -0.3rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: var(--common-font-sz-small);
  border-radius: 50%;
}
.count-badge:empty {
  display: none;
}
.company-logo img {
  width: 4.4rem;
}
.welcome-title,
.welcome-subhead {
  background: linear-gradient(89.69deg, #ffdd9d 69.31%, #d3ab73 90.7%);
  background: linear-gradient(
    90deg,
    rgba(231, 191, 136, 1) 0%,
    rgba(126, 91, 51, 1) 4%,
    rgba(163, 126, 86, 1) 9%,
    rgb(255, 253, 198) 17%,
    rgba(255, 242, 205, 1) 35%,
    rgb(255, 253, 202) 44%,
    rgba(231, 191, 136, 1) 57%,
    rgba(126, 91, 51, 1) 63%,
    rgba(163, 126, 86, 1) 68%,
    rgba(231, 191, 136, 1) 75%,
    rgba(255, 242, 205, 1) 89%,
    rgba(163, 126, 86, 1) 100%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: var(--common-font-sz-large);
  font-weight: 700;
  margin-bottom: -2px;
}
.welcome-subhead {
  font-size: var(--common-font-sz-sub-large);
  margin-bottom: 0.75rem;
}
.welcome-brief {
  background: #000;
  color: #ddd;
  font-size: var(--common-font-sz-1);
  font-weight: 400;
  margin-bottom: 1rem;
  padding: 1.103rem;
  border-radius: 0 1rem 1rem 1rem;
  width: 100%;
  max-width: 20.625rem;
  min-height: 144px;
}
.welcome-brief.alt {
  background: #fff;
  color: #000;
}
.welcome-button {
  z-index: 10;
  position: relative;
  background: var(--gold-gradient);
  font-size: var(--common-font-sz-1);
  font-weight: 700;

  padding: 0.969rem 0.6rem;
  border-radius: 9px;
  overflow: hidden;
  transition: box-shadow 0.3s ease-in-out;
}
.welcome-button:hover {
  cursor: pointer;
}
.welcome-button span {
  position: relative;
  z-index: 10;
}
.welcome-button::before,
.card-container.skin-tone .card-tag::before,
.card-container.skin-concern .card-tag::before,
.card-container.buttons .card-tag::before,
.single-concern.active::before,
.snd-conern-btn::before,
#analyzeButton::before,
.product-button::before .login-button::before {
  z-index: 1;
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 100%;
  height: 200%;
  background: rgba(255, 255, 255, 0.7);
  filter: blur(6px);
  transform: rotate(45deg);
  opacity: 0;
  animation: shine 3s 2 forwards;
  pointer-events: none;
}
.welcome-button span,
#analyzeButton span,
#analyzeButton img,
.product-button span,
.product-button img,
.login-button span {
  z-index: 10;
}
@keyframes shine {
  0% {
    transform: translateX(-150%) rotate(45deg);
    opacity: 0;
  }
  50% {
    transform: translateX(50%) rotate(45deg);
    opacity: 0.7;
  }
  100% {
    transform: translateX(120%) rotate(45deg);
    opacity: 0;
  }
}
.playgroundInfoContainer {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: 1.103rem 1.103rem 0 1.103rem !important;
  width: 100%;
  max-width: unset !important;
  min-height: unset !important;
}
.playgroundInfoContainer div {
  padding: 0 !important;
}
.playgroundContainer .top-hero {
  display: flex;
}
.playgroundContainer .avatar-profile {
  margin-top: 0.4rem;
}
.playgroundInfoContainer .sayHello {
  font-weight: 700;
  font-size: var(--common-font-sz-xhead);
}
@media only screen and (max-width: 362px) {
  .playgroundInfoContainer .sayHello {
    font-size: var(--common-font-sz-sub-head);
  }
  .welcome-subtext {
    font-size: var(--common-font-sz-sub-large);
  }
}
.playgroundInfoContainer .subheading {
  width: 100%;
  margin-top: 0.809rem !important;
  font-size: var(--common-font-sz-sub-title);
  font-weight: 500;
  color: #666666;
}
.playgroundInfoContainer.home .subheading,
.playgroundInfoContainer.home .welcome-subtext {
  display: none !important;
}

.card-container {
  display: flex;
  margin: 0 var(--card-margin-1);
  background-color: #f4f5f7;
  border-radius: 1rem;
  margin-bottom: 0.75rem;
  max-width: 25rem;
}
.card-container.log-out-button {
  border-radius: 0;
  background-color: transparent;
}
.home-card {
  opacity: 0;
  pointer-events: none;
}
.lumi-not-available {
  pointer-events: none;
}
@keyframes homeCardFadeIn {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.card-container.vert-one {
  cursor: pointer;
  flex-direction: column;
}
.card-container.vert-two {
  cursor: pointer;
  flex-direction: column;
  padding: 0.375rem 0.375rem 1rem;
}
.card-container.horz-one {
  cursor: pointer;
  padding: var(--image-card-padding-2);
}
.card-container.vert-one,
.card-container.vert-two,
.card-container.horz-one {
  max-width: unset;
}
.card-container.skin-concern,
.card-container.buttons,
.card-container.skin-tone,
.card-container.locations {
  width: 85%;
  max-width: unset;
  flex-direction: column;
  padding: var(--card-padding-1);
  background-color: #000;
  color: #fff;
  border-radius: 0 1rem 1rem 1rem;
}
.card-container.skin-concern {
  width: auto;
}
.card-container.skin-concern.home-card {
  border-radius: 0 1rem 0 0;
}
.card-container.locations,
.card-container.skin-tone {
  max-width: 20.635rem;
}
.card-container.skin-tone {
  max-width: 26.635rem;
}
.card-container.buttons {
  background-color: transparent;
  margin: 0.6rem 1.103rem;
  padding: 0;
  transition: all 350ms ease-in-out;
}
.card-container.buttons .black-container {
  background-color: #000;
  padding: var(--card-padding-1);
  border-radius: 0 1rem 1rem 1rem;
}
.card-container.buttons .black-container.no-brd-btm {
  border-radius: 0 1rem 0 0;
}
.card-container.buttons.hidden {
  opacity: 0;
}
.card-container.locations {
  background-color: #f4f5f7;
  color: #666;
  border-radius: 1rem;
  padding: 0.375rem;
  gap: 1rem;
  overflow: hidden;
}
.card-container.try-look-buttons,
.card-container.analyze-buttons {
  margin-top: 1rem;
  background-color: transparent;
  flex-direction: column;
  align-items: flex-start;
}
.card-container.analyze-buttons {
  margin-top: 0;
  max-width: unset;
}
.card-container.try-look-buttons .alt-message,
.card-container.analyze-buttons .alt-message {
  background-color: #f4f5f7;
  border-radius: 0 1rem 1rem 1rem;
  padding: 0.875rem 1.125rem;
}
.card-container.try-look-buttons .vert-button span {
  margin-left: 0 !important;
}
.card-container.try-look-buttons .vert-button:disabled,
.vert-button:disabled {
  opacity: 0.5;
}
.analyze-loader {
  margin-top: 1rem;
}
.card-container.locations .address-card {
  background-color: #fff;
  border: 1px solid #d3d3d3;
  padding: 0.375rem;
  border-radius: 1rem;
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.address-card .map-wrapper {
  height: 8.75rem;
  width: 100%;
  border-radius: 0.75rem;
  overflow: hidden;
}
.address-card .map-wrapper iframe {
  width: 100%;
  height: 100%;
}
.address-card .info-box {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: var(--common-font-sz-small);
}
.address-card .info-box .name-info {
  font-weight: 600;
  color: #000;
}
.address-card .bottom-info {
  width: 100%;
  display: flex;
  margin-top: 1rem;
}
.address-card .bottom-info .address-link {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-left: auto;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  border-bottom: none !important;
}
.address-card .bottom-info .address-link img {
  margin-left: 4px;
}

.card-container .info-wrapper {
  display: flex;
  flex-direction: column;
  padding: 0 var(--card-padding-1);
}
.card-container.vert-two .info-wrapper,
.card-container.skin-tone .info-wrapper,
.card-container.skin-concern .info-wrapper,
.card-container.buttons .info-wrapper {
  flex-direction: column-reverse;
}
.card-container.skin-tone .info-wrapper,
.card-container.skin-concern .info-wrapper,
.card-container.buttons .info-wrapper {
  padding: 0;
}
.card-container.vert-one .image-wrapper,
.card-container.vert-two .image-wrapper {
  height: 16.7rem;
  border-radius: 0.75rem;
  overflow: hidden;
}
.card-container.vert-one .image-wrapper {
  border-radius: 0;
}
.card-container.vert-one .image-wrapper img,
.card-container.vert-two .image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.card-container.vert-one .card-description,
.card-container.vert-one .card-title {
  font-size: var(--common-font-sz-1);
}
.card-container.vert-one .card-description {
  font-weight: 400;
  margin-top: 1rem;
}
.card-container.vert-one .card-title {
  font-weight: 600;
}
.card-container.horz-one .image-wrapper {
  height: 7.5rem;
  width: 7.5rem;
  border-radius: 0.75rem;
  overflow: hidden;
  flex-shrink: 0;
}
.card-container.horz-one .image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.card-container.horz-one .card-description,
.card-container.vert-two .card-description {
  color: #666666;
  font-size: var(--common-font-sz-small);
  font-weight: 400;
  margin-top: 0.75rem;
}
.card-container.vert-two .card-description {
  margin-top: 0.25rem;
}
.card-container.horz-one .card-title,
.card-container.vert-two .card-title {
  font-size: var(--common-font-sz-1);
  font-weight: 600;
}
.card-container.vert-two .card-title {
  margin-top: 1rem;
}
.card-container.horz-one .card-title {
  margin-top: 0.4rem;
}
.card-container.skin-tone .card-tag,
.card-container.skin-concern .card-tag,
.card-container.buttons .card-tag {
  align-self: flex-start;
  font-size: var(--common-font-sz-small);
  font-weight: 500;
  margin-bottom: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  text-transform: uppercase;
  background: var(--gold-gradient);
  color: #7e5b33;
  position: relative;
  overflow: hidden;
}
.card-container.skin-tone .card-title,
.card-container.skin-concern .card-title,
.card-container.buttons .card-title {
  font-size: var(--common-font-sz-1);
  font-weight: 500;
}
.card-container.skin-tone .card-description,
.card-container.skin-concern .card-description,
.card-container.buttons .card-description {
  color: #a2a2a2;
  font-size: var(--common-font-sz-small);
  font-weight: 400;
}
.card-container.skin-concern .concerns,
.card-container.buttons .concerns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: var(--card-margin-1);
}
.card-container.skin-concern .single-concern,
.card-container.buttons .single-concern {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--common-font-sz-small);
  padding: 0.75rem;
  border-radius: 0.375rem;
  background: transparent;
  color: #ffdd9d;
  border: 1px solid #ffdd9d;
  display: flex;
  align-items: center;
}

.card-container.look-card {
  background: transparent;
  border-radius: 0;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: unset;
  padding-bottom: 1.4rem;
}
.single-look-container {
  width: calc(100% / 3 - 0.7rem);
}
.single-look-wrap {
  width: 100%;
  border-radius: 1rem;
  border: 1px solid #333;
  overflow: hidden;
}
.single-look-wrap .single-image-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
}
.single-look-wrap .single-image-wrap img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}
.single-look-container .look-name,
.single-look-wrap .image-query {
  font-size: clamp(0.8rem, 2.5vw, 1rem);
  text-align: center;
  font-weight: 600;
  margin: 0.5rem 0;
  text-transform: uppercase;
}

.buttons.multi-select {
  width: auto;
}
.buttons.multi-select .single-concern {
  min-height: 3.1rem;
}
.single-concern .check-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  margin-right: 0.5rem;
  border: 1px solid #ffdd9d;
}
.single-concern .check-circle img {
  visibility: hidden;
  transform: translateY(1px);
  width: 78%;
}
.card-container.skin-concern .single-concern.active,
.card-container.buttons .single-concern.active {
  background: var(--gold-gradient);
  color: #7e5b33;
  position: relative;
  overflow: hidden;
}
.card-container.skin-concern .single-concern.active .check-circle,
.card-container.buttons .single-concern.active .check-circle {
  border-color: #000;
}
.card-container.skin-concern .single-concern.active .check-circle img,
.card-container.buttons .single-concern.active .check-circle img {
  visibility: visible;
}
.card-container.skin-concern .concerns.disabled,
.card-container.buttons .concerns.disabled {
  pointer-events: none;
}
.card-container.skin-concern .single-concern.disabled,
.card-container.buttons .single-concern.disabled {
  pointer-events: none;
}
.snd-conern-btn {
  position: relative;
  overflow: hidden;
  width: 3rem;
  min-height: 1.799rem;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--common-font-sz-small);
  padding: 0.4rem 0.8rem;
  border-radius: 0.375rem;
  margin-top: 0.8rem;
  margin-left: auto;
  background: var(--gold-gradient);
  color: #7e5b33;
  display: flex;
  justify-content: center;
  align-items: center;
}
.snd-conern-btn img {
  width: 1rem;
}
.snd-conern-btn:disabled,
.snd-conern-btn[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

.concerns.multi-select-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.multi-select .single-concern.with-image {
  background-color: #fff;
  color: #000;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.multi-select .single-concern.with-image .check-circle {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  margin-right: 0;
  background-color: transparent;
  border-color: #fff;
}
.multi-select .single-concern.with-image .check-circle img {
  filter: invert(1);
}
.multi-select .single-concern.with-image.active .check-circle {
  background: var(--gold-gradient);
  border: none;
}
.multi-select .single-concern.with-image .multi-choose-image-wrap {
  aspect-ratio: 1 / 1;
}
.multi-select .single-concern.with-image .concern-text {
  width: 100%;
  text-align: center;
  padding: 0.5rem 0;
}

.new-loader {
  display: inline-block;
  margin-left: 1.103rem;
}
.card-container.skin-tone .tones {
  display: flex;
  flex-wrap: wrap;
  gap: 1.35rem;
  margin-top: 1.125rem;
}
.card-container.skin-tone .single-tone {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card-container.skin-tone .single-tone .shade {
  width: 3.971rem;
  height: 3.971rem;
  border-radius: 50%;
  outline: 1px solid transparent;
  outline-offset: 3px;
  display: grid;
  place-items: center;
}
.card-container.skin-tone .single-tone .shade img {
  filter: brightness(0);
  width: 1.5rem;
  opacity: 0;
}
.card-container.skin-tone .single-tone.active .shade img {
  opacity: 1;
}
.card-container.skin-tone .single-tone .name {
  display: none;
  margin-top: 0.5rem;
  color: #a2a2a2;
  font-weight: 400;
  font-size: var(--common-font-sz-small);
}
.card-container.skin-tone .single-tone.active .name {
  color: #fff;
  font-weight: 500;
}
.card-container.section-head,
.articles-heading {
  background-color: transparent;
  border-radius: 0;
  margin: var(--section-head-margin);
  font-weight: 500;
  font-size: var(--common-font-sz-sub-head);
}
.card-container.section-head.sub {
  margin-top: -0.6rem;
  font-size: 1.2rem;
}
.articles-heading {
  margin-top: 0 !important;
  margin-bottom: 1.48rem !important;
}
.card-container.only-image {
  flex-direction: column;
  cursor: pointer;
  max-width: unset;
}
.card-container.home-card {
  overflow: hidden;
  margin-bottom: 1.48rem !important;
}
.card-container.skin-concern {
  margin-bottom: 0 !important;
}
.image-query {
  font-weight: 400;
  font-size: var(--common-font-sz-1);
  margin: 1rem 0;
  padding: 0 var(--card-text-padding-1);
}
.card-container.only-image .single-image-wrap {
  width: 100%;
  overflow: hidden;
  height: auto;
  aspect-ratio: 16 / 9;
}
.card-container.only-image .single-image-wrap img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}
/* SInlge IMage Cards Styles End */
/* Articles One Cards Styles */
.card-container.articles-one {
  max-width: unset;
  flex-direction: column;
  background-color: transparent;
  border-radius: 0;
}
.card-container.articles-one .articles {
  overflow-x: auto;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
  gap: 0.75rem;
}
.card-container.articles-one.modified {
  margin: 0;
  margin-bottom: 0.75rem;
}
.card-container.articles-one.modified .card-heading {
  margin: 0 var(--card-margin-1) 0.75rem var(--card-margin-1);
}
.card-container.articles-one.modified .articles {
  opacity: 1 !important;
  display: flex;
  padding: 0 var(--card-margin-1);
}
.card-container.articles-one .articles.two-item {
  grid-template-rows: auto;
  grid-template-columns: repeat(2, 1fr);
}
.card-container.articles-one .single-article {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #000;
  outline: none;
  background-color: #f4f5f7;
  border: 2px solid #fff;
  min-width: 10.563rem;
  padding-bottom: 0.75rem;
  border-radius: 1rem;
  overflow: hidden;
}
.card-container.articles-one .single-article.active {
  position: relative;
  overflow: hidden;
  background: var(--gold-gradient);
}
.card-container.articles-one .single-article.active::before {
  z-index: 1;
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 100%;
  height: 200%;
  background: rgba(255, 255, 255, 0.7);
  filter: blur(6px);
  transform: rotate(45deg);
  opacity: 0;
  animation: shine 750ms 1 forwards;
  pointer-events: none;
}
.card-container.articles-one.modified .single-article {
  width: 19rem;
  flex-shrink: 0;
}
.card-container.articles-one .image-wrapper {
  height: 9.563rem;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}
.card-container.articles-one.modified .image-wrapper {
  height: 12.647rem;
}
.card-container.articles-one .image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.card-container.articles-one .card-heading {
  color: #666;
  font-size: var(--common-font-sz-sub-title);
  font-weight: 500;
  margin-bottom: 0.75rem;
}
.card-container.articles-one .article-title {
  font-size: var(--common-font-sz-1);
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  padding: 0 var(--card-text-padding-1);
  line-break: normal !important;
}
.card-container.articles-one .article-subtitle {
  margin-top: auto;
  font-size: var(--common-font-sz-small-x);
  color: #606060;
  padding: 0 var(--card-text-padding-1);
}
/* Quiz Cards Styles */
.card-container.quiz,
.card-container.try-looks {
  flex-direction: column;
  background-color: transparent;
  border-radius: 0;
  margin: var(--card-margin-1);
}
.card-container.quiz {
  max-width: unset;
  border-radius: 1rem;
  overflow: hidden;
  cursor: pointer;
}
.card-container.quiz .card-response {
  padding: 0.875rem 1.125rem 1rem 1.125rem;
  background-color: #f4f5f7;
  border-radius: 0 1rem 1rem 1rem;
  margin-bottom: 0.5rem;
}
.card-container.quiz .image-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background-color: transparent;
  overflow: hidden;
  flex-shrink: 0;
}
.card-container.quiz .image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.card-container.quiz .image-wrapper .image-title {
  display: none;
  color: #fff;
  position: absolute;
  left: 1.125rem;
  bottom: 1.125rem;
  font-weight: 500;
}
.card-container.quiz .quiz-button,
.card-container.persona-card .try-looks-button {
  width: 100%;
  cursor: pointer;
  align-self: flex-start;
  background: #000;
  padding: 0.75rem;
  border-radius: 0;
  text-transform: uppercase;
}
.card-container.quiz .quiz-button:disabled {
  opacity: 0.7;
}
.card-container.quiz .quiz-button span,
.card-container.persona-card .try-looks-button span {
  font-size: var(--common-font-sz-small);
  font-weight: 600;
  background: linear-gradient(
    89.69deg,
    #e7bf88 0.24%,
    #ffdd9d 20.13%,
    #fff2cd 49.97%,
    #ffdd9d 79.31%,
    #e7bf88 99.7%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.card-container.quiz .quiz-button {
  text-align: left;
  padding: 1rem 0.75rem !important;
}
.card-container.quiz .quiz-button span {
  text-transform: capitalize;
}
.card-container.persona-card {
  overflow: hidden;
  flex-direction: column;
  border-radius: 1.176rem !important;
  padding: 0 !important;
  width: fit-content !important;
}
.card-container.persona-card img {
  border-radius: 1rem 1rem 0 0 !important;
}
.card-container.persona-card .persona-image-wrapper {
  background: var(--gold-gradient) !important;
  padding: 2px !important;
  aspect-ratio: 1 / 1;
  width: 22rem !important;
}
.card-container.persona-card .persona-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 1rem 1rem 0 0 !important;
}
/* Extra buttons Style */
.card-container.gps,
.card-container.upload {
  background-color: transparent;
}
.gps-button,
.upload-button,
.gps-allow-btn {
  cursor: pointer;
  align-self: flex-start;
  background: #000;
  padding: 0.75rem;
  border-radius: 0.375rem;
  text-transform: uppercase;
  margin-top: 1rem;
}
.gps-button,
.upload-button {
  display: flex;
  align-items: center;
}
.gps-button img,
.upload-button img {
  margin-right: 0.375rem;
}
.gps-button span,
.upload-button span,
.gps-allow-btn span {
  font-size: var(--common-font-sz-small);
  font-weight: 600;
  background: linear-gradient(
    89.69deg,
    #e7bf88 0.24%,
    #ffdd9d 20.13%,
    #fff2cd 49.97%,
    #ffdd9d 79.31%,
    #e7bf88 99.7%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gps-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000cc;
  z-index: 13;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.gps-modal-overlay.show {
  display: flex;
}
.gps-modal {
  position: relative;
  width: 90%;
  max-width: 20.625rem;
  border-radius: 1rem;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: var(--card-padding-1);
}
.gps-title {
  margin-top: 1rem;
  font-size: var(--common-font-sz-sub-title);
  font-weight: 600;
}
.gps-close-btn {
  cursor: pointer;
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  background-color: transparent;
}
.gps-close-btn img {
  filter: invert(1) brightness(100%);
}
.gps-allow-btn,
.gps-deny-btn {
  cursor: pointer;
  width: 100%;
  padding: 0.75rem;
  border-radius: 0.375rem;
  margin-top: 2rem;
  font-size: var(--common-font-sz-small);
}
.gps-deny-btn {
  margin-top: 0.75rem;
}
/* Extra buttons Style */
/* Card Container for Product Listing */
.card-container.product-listing {
  background: transparent;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.6rem 0;
  scrollbar-width: thin;
  max-width: unset;
  margin: 0;
  width: 100%;
  border-radius: 0 !important;
}
.card-container.product-listing .product-list-wrapper {
  padding: 0.6rem var(--card-padding-1) 0 var(--card-padding-1);
}
.card-container.product-listing::-webkit-scrollbar {
  height: 8px;
}
.card-container.product-listing::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}
.card-container.product-listing::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* Product Card */
.product-card-container {
  flex: 0 0 auto;
  background: #f4f5f7;
  border: 1px solid #f4f5f7;
  border-radius: 1rem;
  overflow: hidden;
  width: 25rem;
  width: calc(25rem * 0.75);
  display: flex;
  flex-direction: column;
}
.product-card-container .buttons-container {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
}
.product-card-container .buttons-container button {
  flex: 1;
  min-width: unset;
  min-height: unset;
  font-size: var(--common-font-sz-small) !important;
  padding: 0.9rem 0.2rem;
  border-radius: 0 !important;
}
.product-button {
  display: flex;
  min-height: 3rem;
  min-width: 9rem;
  background: var(--gold-gradient);
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.product-button img {
  filter: brightness(0);
}
.product-button span {
  z-index: 10;
  color: #000;
  margin-left: 0.5rem;
  font-size: var(--common-font-sz-small);
  font-weight: 600;
  text-transform: uppercase;
}
/* Slider Wrapper */
.slider-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 25rem;
  height: calc(25rem * 0.75);
}
.new-slide-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--gold-gradient);
  color: #fff;
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
}
.new-slide-btn img {
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 400px) {
  .product-card-container {
    width: 20rem;
  }
  .slider-wrapper {
    height: 20rem;
  }
}
/* Slider */
.slider {
  position: relative;
  display: flex;
  transition: transform 0.3s ease;
  height: 100%;
}
.product-rating {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #7e5b33;
  position: absolute;
  top: 0.375rem;
  left: 0.375rem;
  font-size: var(--common-font-sz-small);
  padding: 0.25rem 0.375rem;
  color: #fff;
  border-radius: 0.375rem;
}
.product-rating img {
  width: 1rem;
  margin-left: 2px;
}
/* Product Image */
.product-image {
  flex-shrink: 0;
  width: 100%;
  object-fit: cover;
}
/* Pagination Dots */
.slider-pagination {
  display: none !important;
  position: absolute;
  bottom: 0.8rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
  gap: 0.25rem;
}

.pagination-dot {
  width: 4px;
  height: 4px;
  background: #d3d3d3;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}
.slider-pagination.odd .pagination-dot:nth-child(odd) {
  opacity: 0;
}
.pagination-dot.active {
  opacity: 1 !important;
  width: 1.103rem;
  background: #7e5b33;
  border-radius: 50px;
}
.product-name {
  margin-top: 1rem;
  min-height: 3.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-name,
.product-price {
  font-size: var(--common-font-sz-1);
  font-weight: 500;
  padding: 0 0.75rem;
}
.product-brief {
  display: none !important;
  min-height: 1.563rem;
  margin-top: 2px;
  margin-bottom: 1rem;
  font-size: var(--common-font-sz-1);
  color: #666;
  padding: 0 0.75rem;
}
.product-price {
  font-weight: 600;
  color: #333;
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
}
.product-price span {
  font-size: var(--common-font-sz-small);
  color: #666;
  text-decoration: line-through;
}
.product-review-container {
  display: none;
  width: calc(100% + 20px);
  margin-left: -10px;
  margin-bottom: -10px;
  background: #d3d3d333;
  color: #666;
  padding: 0.75rem 1.125rem;
  font-size: var(--common-font-sz-small-x);
}
.product-review {
  font-style: italic;
  margin-bottom: 4px;
}
.brief-wrapper {
  display: flex;
  justify-content: space-between;
}
.card-container.product-listing.new-list {
  margin: 0 var(--card-margin-1) 0.588rem var(--card-margin-1);
  padding: var(--product-list-pad-var-1);
  background-color: #f4f5f7;
  flex-direction: column;
  max-width: 30rem;
}
.card-container.product-listing.new-list .prod-section-heading {
  padding: 0 var(--product-card-pad-1);
}
.card-container.product-listing.new-list .card-heading {
  font-size: var(--common-font-sz-head);
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
}
.card-container.product-listing.new-list .card-subheading {
  font-weight: 500;
  font-size: var(--common-font-sz-1);
  margin-bottom: 0.5rem;
}
.product-list-wrapper {
  display: flex;
  gap: var(--product-card-pad-1);
  overflow-x: auto;
}
.card-container.product-listing.new-list .product-card {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 0;
  width: 13.5rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0.75rem;
}
.card-container.product-listing.new-list .product-card .slider-wrapper {
  height: 13.5rem;
}
.card-container.product-listing.new-list .brief-wrapper {
  padding: 0 1.029rem;
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important;
}
.card-container.product-listing.new-list .product-name,
.card-container.product-listing.new-list .product-brief,
.card-container.product-listing.new-list .product-price {
  padding: 0;
}
.card-container.product-listing.new-list .product-name {
  margin-top: 0.75rem;
}
.card-container.product-listing.new-list .product-price {
  align-items: flex-start;
  margin-top: auto;
}
.card-container.product-listing.new-list .product-list-wrapper {
  padding: 0 !important;
  flex-direction: column;
}
.card-container.product-listing.new-list .product-card-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  background-color: #fff;
  padding: var(--product-card-pad-1);
  border-radius: 1rem;
}
.card-container.product-listing.new-list .shades-container {
  display: none !important;
}
.card-container.product-listing.new-list .product-button {
  width: 100%;
  border-radius: 0.6rem;
  opacity: 1 !important;
  margin-bottom: 0.75rem;
}
.card-container.product-listing.new-list .product-button img,
.card-container.product-listing.new-list .product-button span {
  filter: brightness(0);
}

/* Regimes Styles Start */
.card-container.regimes {
  background-color: transparent;
  flex-direction: column;
  max-width: unset;
  margin: 0;
}
.card-container.regimes .regimes-heading {
  padding: 8px 15px;
  border-radius: 15px;
  width: fit-content;
  background: #f0f0f0;
  font-weight: 500;
  margin: 0.8rem 0;
  margin-left: 1.103rem;
}
.card-container.regimes .regimes-container {
  display: flex;
  overflow-x: auto;
  gap: 0.625rem;
  padding: 0 1.103rem;
}
.card-container.regimes .card-container {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  max-width: calc(25rem * 0.75);
  border: 1px solid #d3d3d3;
  padding: 0;
}
.card-container.regimes .product-list-wrapper {
  padding: 0 !important;
  flex: 1;
}
.card-container.regimes .card-container .regime-wrapper {
  padding: 0 1rem;
  margin-top: 0.7rem;
}
.card-container.regimes .card-container .regime-image-wrap {
  min-height: 7.5rem;
  width: fit-content;
  height: fit-content;
  position: relative;
}
.card-container.regimes .card-container .regime-image {
  width: 7.5rem;
}
.card-container.regimes .card-container .regime-index {
  font-size: var(--common-font-sz-large);
  font-weight: 700;
  color: #666;
  position: absolute;
  bottom: 0;
  left: 0;
}
.card-container.regimes .card-container .regime-title {
  font-size: var(--common-font-sz-sub-large);
  margin-bottom: 0.4rem;
}
.card-container.regimes .card-container .regime-subtitle {
  position: relative;
  font-size: var(--common-font-sz-1);
  color: #afafaf;
  min-height: 5.91rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-container.regimes .card-container .regime-subtitle p {
  margin: 0;
}
.card-container.regimes .card-container .regime-subtitle.expanded {
  -webkit-line-clamp: unset;
  max-height: none;
  overflow: visible;
}
.card-container.regimes .card-container .regime-subtitle.overflowing::after {
  position: absolute;
  right: 0;
  bottom: 0;
  content: "... see more";
  font-weight: 500;
  padding-left: 1rem;
  background: linear-gradient(90deg, #ffffff00 0%, #f4f5f7 12%);
  color: #333;
}
.card-container.regimes .card-container .product-card-container,
.card-container.regimes .card-container .product-card-container .product-card {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
}
.card-container.regimes .card-container .product-card-container .product-card {
  border-radius: 0;
  padding: 0;
  background-color: transparent;
}
.card-container.regimes .card-container .brief-wrapper {
  margin-bottom: 1rem;
}
.card-container.regimes .card-container .product-brief {
  display: none;
}
.card-container.regimes
  .card-container
  .product-card-container
  .slider-wrapper {
  border-radius: 0;
  height: calc(25rem * 0.75);
}
.card-container.regimes .card-container .product-button {
  width: 100%;
  border-radius: 0;
}
.card-container.regimes .card-container .product-button img {
  filter: brightness(0);
}
/* Regimes Styles End */

.product-listing.new-list .product-image {
  object-fit: unset;
}

.card-container.try-look-buttons .vert-button,
.try-look-button,
.vert-button,
.shade-finder-button {
  display: flex;
  align-items: center;
  width: fit-content;
  cursor: pointer;
  background: #000;
  padding: 0.75rem;
  border-radius: 0.375rem;
  text-transform: uppercase;
  margin-top: 1rem;
}
.vert-button {
  margin-top: 0;
}
.product-button.sold-out {
  font-weight: 500;
  color: #000;
  background-color: grey;
  font-size: var(--common-font-sz-small);
}
.product-button.disabled {
  pointer-events: none !important;
  opacity: 0.5 !important;
}

.try-look-button {
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  min-width: 9rem;
  margin-top: 0;
}

.card-container.try-look-buttons .vert-button span,
.try-look-button span,
.vert-button span,
.shade-finder-button span {
  margin-left: 0.5rem;
  font-size: var(--common-font-sz-small);
  font-weight: 600;
  background: linear-gradient(
    89.69deg,
    #e7bf88 0.24%,
    #ffdd9d 20.13%,
    #fff2cd 49.97%,
    #ffdd9d 79.31%,
    #e7bf88 99.7%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.product-button.loading img,
.product-button.loading span {
  display: none;
}
.product-button.loading .button-load-svg {
  display: block;
}

#analyzeButton {
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--gold-gradient);
  width: 100%;
  border-radius: 0 0 1rem 1rem;
}
#analyzeButton span {
  background: unset;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  color: #000;
}
#analyzeButton img {
  margin-top: -1px;
  width: 1.5rem;
  filter: brightness(0);
}
.shade-finder-button img {
  width: 1.5rem;
}

.shades-container {
  display: none !important;
  align-items: center;
  width: calc(100% + 20px);
  min-height: calc(7.941rem * 0.75rem);
}
.shades-container .shades-toggler {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.938rem 1.125rem;
  cursor: pointer;
  font-size: var(--common-font-sz-small);
  font-weight: 600;
  text-transform: uppercase;
}
.shades-toggler img {
  transition: transform 0.2s ease-out;
}
.shades-container .shades-toggler.active img {
  transform: rotate(-180deg);
}
.shades-container.show {
  display: flex !important;
}
.shades-container.disabled .shades-toggler,
.shades-container.disabled .shades-wrapper {
  visibility: hidden;
  pointer-events: none;
}
.card-container.product-listing.new-list .shades-container.disabled {
  display: none !important;
}
.shades-list {
  padding: 0.938rem 2.938rem 0.938rem 0.938rem;
  padding: 0.7035rem 2.2035rem 0.7035rem 0.7035rem;
  overflow-x: auto;
  display: flex;
  gap: 1rem;
}
.shade-name {
  display: none !important;
  padding: 0 0.938rem;
  font-size: var(--common-font-sz-small);
  color: #666;
}
.single-shade-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.single-shade {
  cursor: pointer;
  flex-shrink: 0;
  background-color: #fff;
  border-radius: 50%;
  width: calc(4.2rem * 0.75);
  height: calc(4.2rem * 0.75);
}
.single-shade-name {
  font-size: calc(var(--common-font-sz-small) * 0.8);
  font-weight: 500;
  margin-top: 0.5rem;
  text-align: center;
  max-width: 5rem;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  max-height: calc(1.4em * 2);
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.single-shade.active {
  outline: 1px solid #000;
  outline-offset: 2px;
}

/* Video Card Styles */
.card-container.video {
  overflow-x: auto;
  background-color: transparent;
  width: 100%;
  gap: 0.7rem;
  max-width: unset;
  padding: 0 var(--card-padding-1);
  margin: 0;
  margin-bottom: 0.75rem;
}
.card-container.video .video-container {
  flex-shrink: 0;
  width: 258px;
  margin-top: 1rem;
  background-color: #f4f5f7;
  overflow: hidden;
  border-radius: 1rem;
  height: fit-content;
}
.card-container.video .video-wrapper {
  position: relative;
  display: flex;
  width: 100%;
  height: fit-content;
  overflow: hidden;
}
.card-container.video .card-response {
  position: relative;
  padding: 0 0.75rem;
  margin: 0.8rem 0;
  font-weight: 400;
  font-size: var(--common-font-sz-1);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  max-height: calc(1.4em * 2);
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-container.video .card-response.expanded {
  -webkit-line-clamp: unset;
  max-height: none;
  overflow: visible;
}
.card-container.video .card-response.overflowing::after {
  position: absolute;
  right: 0.75rem;
  bottom: 0;
  content: "... see more";
  font-weight: 500;
  padding-left: 1rem;
  background: linear-gradient(90deg, #ffffff00 0%, #f4f5f7 12%);
  color: #333;
}
.card-container.video .video-wrapper video {
  width: 100%;
}
.card-container.video .video-wrapper .play-button {
  cursor: pointer;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.card-container.video .video-wrapper .play-button.hide-play {
  display: none;
}
.card-container.video .video-wrapper .play-button img {
  width: 100%;
  height: 100%;
}
.card-container.video .video-wrapper .plyr {
  width: 100%;
  height: 458px;
}
.card-container.video .video-wrapper .plyr__video-embed iframe {
  height: calc(100% + 460px);
  top: -230px;
}
.card-container.video .video-wrapper .plyr__controls {
  display: none;
}
.card-container.video .video-wrapper .plyr__control--overlaid {
  background-color: #00000086;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-container.video .video-wrapper .plyr__control--overlaid svg {
  display: none !important;
}
.card-container.video .video-wrapper .plyr__control--overlaid::before {
  content: "";
  display: inline-block;
  background: url('data:image/svg+xml,<svg width="32" height="40" viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 2L30 20L2 38V2Z" fill="url(%23paint0_linear_1988_374)" stroke="url(%23paint1_linear_1988_374)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><defs><linearGradient id="paint0_linear_1988_374" x1="2" y1="22.25" x2="30.0009" y2="22.1324" gradientUnits="userSpaceOnUse"><stop stop-color="%23E7BF88"/><stop offset="0.2" stop-color="%23FFDD9D"/><stop offset="0.5" stop-color="%23FFF2CD"/><stop offset="0.795" stop-color="%23FFDD9D"/><stop offset="1" stop-color="%23E7BF88"/></linearGradient><linearGradient id="paint1_linear_1988_374" x1="2" y1="22.25" x2="30.0009" y2="22.1324" gradientUnits="userSpaceOnUse"><stop stop-color="%23E7BF88"/><stop offset="0.2" stop-color="%23FFDD9D"/><stop offset="0.5" stop-color="%23FFF2CD"/><stop offset="0.795" stop-color="%23FFDD9D"/><stop offset="1" stop-color="%23E7BF88"/></linearGradient></defs></svg>')
    no-repeat center center;
  background-size: contain;
  width: 35px;
  height: 35px;
  transform: translateX(2px);
}
.video-wrapper.instagram-wrapper {
  height: 460px !important;
}
.instagram-media {
  height: calc(100% + 460px);
  top: -54px;
  position: absolute;
  width: calc(100% + 140px);
  margin-left: -70px !important;
}
/* Reply Cards Styles - End */

/* Quiz Page Styles Start */
.quiz-container {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 630px;
  width: 100%;
  height: 100%;
  z-index: 202;
  background: #fffdf8;
  display: none;
  flex-direction: column;
}
.quiz-container .questions-wrapper {
  flex: 1;
  display: flex;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
  pointer-events: none;
  -webkit-overflow-scrolling: touch;
}
.quiz-container .question-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 0 0 auto;
  scroll-snap-align: start;
  height: 100%;
}
.question-page .top-section {
  padding: 2.688rem 2.5rem 1.103rem 1.103rem;
  display: flex;
  flex-direction: column;
}
.question-page .top-section.single-image {
  padding: 2.688rem 2.5rem 1.103rem 1.103rem;
  background-size: cover !important;
  background-position: top !important;
  justify-content: flex-end;
  height: 15.625rem;
}
.quiz-container .close-button {
  cursor: pointer;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}
.question-page .top-section .question {
  font-weight: 400;
  font-size: var(--common-font-sz-sub-head);
  margin-bottom: 0.75rem;
}
.question-page .top-section.single-image .question {
  font-weight: 600;
  color: #fff;
  margin-bottom: 0;
}
.question-page .top-section .subhead {
  font-weight: 500;
  font-size: var(--common-font-sz-sub-title);
  color: #afafaf;
}

.quiz-container .pagination {
  display: flex;
  flex-direction: column;
}
.quiz-container .pagination .previous-button {
  width: 2.5rem;
  height: 2.5rem;
}
.quiz-container .pagination .previous-button,
.quiz-container .pagination .next-button {
  padding: 0.75rem;
  border: 1px solid #000;
  border-radius: 0.375rem;
  display: grid;
  place-items: center;
}
.quiz-container .pagination .next-button {
  background: #000;
}
.quiz-container .pagination .next-button:disabled,
.quiz-container .pagination .previous-button:disabled {
  opacity: 0.5;
}
.quiz-container .pagination .next-button.hidden {
  pointer-events: none;
  visibility: hidden;
}
.quiz-container .pagination .next-button span {
  text-transform: uppercase;
  font-size: var(--common-font-sz-small);
  font-weight: 600;
  background: linear-gradient(
    89.69deg,
    #e7bf88 0.24%,
    #ffdd9d 20.13%,
    #fff2cd 49.97%,
    #ffdd9d 79.31%,
    #e7bf88 99.7%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.quiz-container .progress-bar {
  position: relative;
  width: 100%;
  height: 4px;
  background-color: #fff2cd;
}
.quiz-container .inner-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #7e5b33;
}
.quiz-container .pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.103rem;
}
.quiz-container .pagination-wrapper .pages {
  font-size: var(--common-font-sz-1);
  color: #afafaf;
}
.quiz-container .pagination-wrapper .pages span {
  color: #000;
  font-weight: 500;
}
.quiz-container .options-section {
  padding: 0 1.103rem;
  margin-top: 0.75rem;
  overflow-y: auto;
  pointer-events: auto;
  padding-bottom: 40px;
}
.quiz-container .options-header {
  margin-top: 0;
  margin-bottom: 0.688rem;
  font-size: var(--common-font-sz-small);
  color: #afafaf;
}
.quiz-container .single-option {
  display: flex;
  align-items: center;
  padding: 1.5rem 1.103rem;
  border: 3px solid #f5f5f5;
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
  background: transparent;
  font-size: var(--common-font-sz-small);
}
.quiz-container .single-option .option-selector,
.quiz-container .single-image-option .option-selector {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid #000;
  margin-right: 0.75rem;
}
.quiz-container .single-option .option-selector img,
.quiz-container .single-image-option .option-selector img {
  opacity: 0;
  filter: brightness(0);
}
.quiz-container .single-option.active,
.quiz-container .single-image-option.active {
  background: #000;
  color: #fff;
  font-weight: 500;
  border-color: #d7be97;
}
.quiz-container .single-option.active .option-selector,
.quiz-container .single-image-option.active .option-selector {
  background: var(--gold-gradient);
  border: none;
  display: grid;
  place-items: center;
}
.quiz-container .single-option.active .option-selector img,
.quiz-container .single-image-option.active .option-selector img {
  opacity: 1;
}
.quiz-container .options-section.images-options .options-wrapper,
.quiz-container .options-section.only-image-options .options-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
}
@media only screen and (max-width: 400px) {
  .quiz-container .options-section.images-options .options-wrapper,
  .quiz-container .options-section.only-image-options .options-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }
}
.quiz-container .single-image-option {
  position: relative;
  border: 3px solid #f5f5f5;
  border-radius: 1rem;
  overflow: hidden;
}
.quiz-container .single-image-option .option-image-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
}
.quiz-container .single-image-option .option-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.quiz-container .single-image-option .answer {
  padding: 0.75rem 1.103rem;
  font-size: var(--common-font-sz-small);
}
.quiz-container .single-image-option .option-selector {
  position: absolute;
  top: 0.688rem;
  left: 0.688rem;
  border-color: #fff;
}
/* Quiz Page Styles End */

/* Description Buttons Styles Start */
.card-container.object {
  max-width: unset;
  background-color: transparent;
  padding: 0;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.card-container.object.disabled {
  pointer-events: none;
}
.single-desc-button {
  cursor: pointer;
  position: relative;
  background-color: #fff;
  border: 3px solid #f5f5f5;
  border-radius: 1rem;
  padding: 1.125rem;
  overflow: hidden;
  transition: 0.3s ease background, color, border-color;
}
.single-desc-button .top-part {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.single-desc-button .title {
  font-size: var(--common-font-sz-small);
  font-weight: 600;
}
.single-desc-button .description {
  font-size: var(--common-font-sz-small);
  font-weight: 400;
  color: #666;
  padding-right: 1.5rem;
}
.card-container.object .single-desc-button .description {
  padding-right: 0;
}
.single-desc-button .check-circle {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid #000;
}
.card-container.object .single-desc-button .check-circle {
  display: none;
}
.single-desc-button .check-circle img {
  opacity: 0;
  transform: translateY(1px);
  width: 82% !important;
  height: auto !important;
  object-fit: unset !important;
  object-position: unset !important;
}
.single-desc-button.active {
  background-color: #000;
  border: 3px solid #d7be97;
  color: #fff;
}
.single-desc-button.active .description {
  color: #b0b0b0;
}
.single-desc-button.active .check-circle {
  background-color: #000;
}
.single-desc-button.active .check-circle img {
  opacity: 1;
}
/* Description Buttons Styles End */
/* Description With Image Styles Start */
.card-container.objectWithImage {
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  background: transparent;
  margin-top: 0.5rem;
  max-width: unset;
}
.card-container.objectWithImage.disabled {
  pointer-events: none;
}
.or-text {
  color: #333;
  margin: var(--card-margin-1);
}
.card-container.objectWithImage .desc-image-wrapper {
  position: relative;
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 0.75rem;
  background-color: #bba998;
  aspect-ratio: 1 / 1;
}
.card-container.objectWithImage.row-3,
.card-container.objectWithImage.row-4,
.card-container.objectWithImage.row-5 {
  padding: 0 !important;
  background: transparent !important;
}
.card-container.objectWithImage .description {
  padding: 0;
}
.card-container.objectWithImage .single-desc-button {
  padding: 0;
  padding-bottom: 0.8rem;
  cursor: pointer;
}
.card-container.objectWithImage .title,
.card-container.objectWithImage .description {
  padding: 0 0.8rem;
}

.card-container.objectWithImage.row-5 {
  gap: 1px;
  grid-template-columns: repeat(5, 1fr);
}
.card-container.objectWithImage.row-4 {
  gap: 1px;
  grid-template-columns: repeat(4, 1fr);
}
.card-container.objectWithImage.row-3 {
  gap: 0.4rem;
  grid-template-columns: repeat(3, 1fr);
}
.card-container.objectWithImage.row-4 .single-desc-button,
.card-container.objectWithImage.row-5 .single-desc-button,
.card-container.objectWithImage.row-3 .single-desc-button {
  padding: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  width: 100%;
}
.card-container.objectWithImage.row-5 .desc-image-wrapper,
.card-container.objectWithImage.row-4 .desc-image-wrapper,
.card-container.objectWithImage.row-3 .desc-image-wrapper {
  margin: 0;
  height: 100%;
}
.card-container.objectWithImage.row-5 .title,
.card-container.objectWithImage.row-4 .title,
.card-container.objectWithImage.row-3 .title {
  text-align: center;
  width: 100%;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
}
.card-container.objectWithImage .desc-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.card-container.objectWithImage.row-5 .desc-image-wrapper .desc-image,
.card-container.objectWithImage.row-4 .desc-image-wrapper .desc-image,
.card-container.objectWithImage.row-3 .desc-image-wrapper .desc-image {
  scale: 1.4;
}
.card-container.objectWithImage .single-desc-button .check-circle {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border: 1px solid #fff;
}
.card-container.objectWithImage .single-desc-button.active .check-circle {
  background: var(--gold-gradient);
  border: none;
}
.card-container.objectWithImage .single-desc-button.active .check-circle img {
  filter: brightness(0);
}
/* Description With Image Styles End */
/* Skin Analysis Data View Styles Start */
.card-container.analysis-data {
  flex-direction: column;
  background-color: transparent;
  margin-top: var(--card-margin-1);
}
.card-container.analysis-data .alt-message {
  padding: 2px 5px;
  font-size: var(--common-font-sz-1);
}
.skin-data-box {
  display: flex;
  flex-direction: column;
  padding: 0.875rem 1.125rem;
  margin-top: 0.5rem;
  border-radius: 1rem;
  border: 2px solid #e7bf88;
  font-size: var(--common-font-sz-small);
}
.skin-data-box .skin-score {
  font-size: var(--common-font-sz-1);
  font-weight: 600;
}
.skin-data-box .skin-score.with-age {
  font-weight: 400;
}
.skin-data-box .skin-score span {
  color: #7e5b32;
  font-weight: 600;
}
.skin-data-box .challeneges-heading {
  margin-bottom: 1.5rem;
  color: #666;
}
.skin-data-box .single-challenge {
  display: flex;
  margin-bottom: 1.2rem;
}
.skin-data-box .single-challenge:last-child {
  margin-bottom: 0;
}
.skin-data-box .single-challenge .single-skin-img-wapper {
  flex-shrink: 0;
  width: 4.625rem;
  border-radius: 0.4rem;
  overflow: hidden;
}
.skin-data-box .single-challenge .single-skin-img-wapper img {
  width: 100%;
  object-fit: cover;
}
.skin-data-box .single-challenge .right-section {
  flex: 1;
  padding: 0.25rem 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: unset;
  margin-left: 0.75rem;
}
.skin-data-box .single-challenge .right-section .title {
  font-size: var(--common-font-sz-sub-title);
  font-weight: 600;
  display: flex;
  align-items: center;
}
.skin-data-box .single-challenge .right-section .title span {
  color: #7e5b32;
  font-size: var(--common-font-sz-1);
  margin-left: 0.5rem;
}
.skin-data-box .single-challenge .right-section .description {
  color: #666;
}
.skin-data-box .single-challenge .progress-bar-outer {
  position: relative;
  background-color: #d3d3d3;
  height: 6px;
  margin-top: 0.5rem;
  width: 100%;
}
.skin-data-box .single-challenge .progress-bar-inner {
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, #e7bf88 0%, #a17e56 100%);
  height: 100%;
}
.progress-contain {
  display: flex;
  align-items: center;
  width: 100%;
}
.progress-contain .progress-bar-outer {
  margin-top: 0 !important;
  flex: 1 !important;
  width: auto !important;
}
.progress-contain .progress-value {
  margin-left: 0.5rem;
  color: #7e5b32;
  font-weight: 600;
}
/* Skin Analysis Data View Styles End */
/* Chat Bubbles Area Styles */
.pWarp {
  padding-top: 0.6rem;
}
.pWarp.botText {
  padding-top: 0rem;
}
.user-text p img {
  border-radius: 0.882rem;
  object-position: top;
}
.text-box-wrap {
  padding: 0rem 1rem;
  min-height: 115px;
  background: transparent !important;
}
.home-text-wrap {
  min-height: unset;
  align-items: flex-end;
  margin-bottom: 0.5rem;
}
.no-show-val {
  display: none;
}
.cardContainer.aspiration,
.text-box.bot-text,
p.conversation,
p.text-box.user-text {
  border: none !important;
  box-shadow: none !important;
}
.text-box {
  padding: 0.875rem 1.125rem 1rem 1.125rem !important;
  border-radius: 1rem !important;
  font-size: var(--common-font-sz-1);
  font-weight: 400;
  background: #f4f5f7 !important;
}
.text-box.bot-text.first-text {
  border-radius: 0 1rem 1rem 1rem !important;
}
.text-box.user-text {
  border-radius: 1rem 0 1rem 1rem !important;
  font-weight: 500;
  background: var(--gold-gradient) !important;
}
.text-box ul {
  padding: 0;
  padding-left: 2rem !important;
}

.text-box.bot-text > * {
  padding: 2px 5px;
  border: none;
  z-index: 1;
  background: #fff;
  width: 100%;
  max-width: calc(100% - 8px);
  box-sizing: border-box;
  box-shadow: none;
  margin: 0.6rem 0;
}

.pWarp .text-box.bot-text.first-text {
  overflow: visible;
  max-width: calc(100% - 32px);
  padding: 0 !important;
}

.text-box.bot-text {
  margin: 0;
  margin-top: 0.6rem;
  max-width: 25rem;
  box-shadow: none;
  border: none;
  padding: 0;
  z-index: 1;
  background: transparent !important;
  width: 100%;
}

.user-text.only-image {
  border-radius: 1.176rem !important;
  padding: 2px !important;
  max-width: 210px !important;
  aspect-ratio: 1 / 1;
}
.pWarp.persona-image-wrap {
  display: none !important;
}
.user-text.image-upload {
  border-radius: 1.176rem !important;
  padding: 0.22rem !important;
}
.user-text.image-upload img {
  max-height: 260px;
}
.user-text.audio-play {
  min-width: 100px;
  padding: 0.5rem 1rem !important;
}
.user-text.audio-play .audio-play-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  flex-grow: 1;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #fff;
}
.user-text.audio-play .audio-play-icon svg {
  width: 80%;
}

#user_skinToneSelection,
#user_skinConcernSelection {
  min-width: 18.75rem;
  position: relative;
  font-weight: 400 !important;
  padding-right: 4.375rem !important;
}
#user_skinToneSelection::after,
#user_skinConcernSelection::after {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  content: url(./icons/CTA.svg);
}
#user_skinToneSelection .select-value,
#user_skinConcernSelection .select-value {
  text-decoration: underline;
  font-weight: 600;
}
#user_skinToneSelection .select-value:empty,
#user_skinConcernSelection .select-value:empty {
  display: inline-block;
  width: 40px;
  border-bottom: 1px solid #000;
}
/* Chat Bubbles Area Styles */
.pill-container {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 0;
  scrollbar-width: thin;
  scrollbar-color: #444 #1a1a1a;
}
.pill-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: max-content;
  min-width: 100%;
  padding: var(--card-margin-1);
  overflow-x: auto;
}

.pill-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.pill {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 25px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  width: max-content;
  min-height: 50px;
  box-sizing: border-box;
}
.suggestions-box {
  padding: 0;
}
.suggestions-box .chip {
  flex-shrink: 0;
}
.menuOptions .labelContent,
.suggestions-box .chip {
  font-size: var(--common-font-sz-small);
  font-weight: 600;
  border-radius: 0.375rem;
  color: #333;
  background: transparent;
  padding: 0.75rem;
  border: 1px solid #bbb;
  margin: 0;
}
.menuOptions .labelContent:hover,
.suggestions-box .chip:hover {
  background: #f4f5f7;
}

/* Styles for link changes  */
.myntra-link::before,
.nykaa-link::before,
.amazon-link::before {
  content: " ";
  display: inline-block;
  width: 100px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  color: transparent;
  position: absolute;
  top: 0;
  left: 8px;
}

.nykaa-link::before {
  background-image: url("./nykaa-logo.png");
}

.amazon-link::before {
  background-image: url("./amazon-logo.png");
}

.myntra-link::before {
  background-image: url("./myntra-logo.png");
}

.myntra-link,
.nykaa-link,
.amazon-link {
  color: rgba(0, 0, 0, 0);
  display: inline;
  position: relative;
}

.myntra-link:hover,
.nykaa-link:hover,
.amazon-link:hover {
  opacity: 0.8;
  color: rgba(0, 0, 0, 0);
}

/* OLD STYLES STARTS HERE */
.bottomContainer.inputContainer {
  position: fixed;
  width: 100%;
  max-width: 630px;
  left: 50%;
  transform: translateX(-50%);
  backdrop-filter: unset;
  padding: 0.75rem 1.103rem 1.103rem !important;
  box-shadow: 0px -1px 12px 0px #0000000f;
}
.tray-conatiner {
  display: none;
  flex-direction: column;
  margin-top: 0.5rem;
  opacity: 0;
}
.reload-button {
  position: absolute;
  width: 2.9rem;
  height: 2.9rem;
  top: 1.4rem;
  left: 1rem;
  background-color: transparent;
}
.tray-conatiner .items {
  background-color: #f2f2f2;
  padding: 1rem 1.4rem;
  border-radius: 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
@media only screen and (max-width: 270px) {
  .tray-conatiner {
    grid-template-columns: repeat(2, 1fr);
  }
}
.tray-conatiner.open {
  display: flex;
  animation: fadeIn 0.8s forwards;
}
.tray-conatiner .tray-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tray-conatiner .tray-item .tray-image-wrapper {
  border-radius: 5.5px;
  overflow: hidden;
}
.tray-conatiner .tray-item .tray-image-wrapper img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}
.tray-conatiner .tray-item p {
  text-align: center;
  margin: 0.294rem;
  font-size: clamp(10px, 100vw * (12 / 390), 14px);
  color: #666;
}

.bot-text div {
  display: block;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
}

.text-box p {
  margin: 0;
  min-width: 100px;
}
.text-box p + p {
  padding-top: 1rem;
}
.disclaimer {
  color: #000;
  font-size: 9px;
}

.time-stamp {
  font-size: var(--common-font-sz-small);
  font-weight: 400;
  color: #d0d2d3;
  margin: 0 0.5rem;
}

.eyeBrowForlistOfItems {
  color: #fafafa;
  padding: 0;
  font-weight: 600;
  font-size: var(--common-font-sz-small);
}
.listOfItems {
  width: 100%;
  background: transparent;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.906rem;
  padding: 0;
  margin-top: 12px;
}
.listOfItems .itemContent:hover {
  opacity: 0.9;
}
.listOfItems .itemContent {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  box-shadow: none !important;
  flex-wrap: nowrap !important;
  background: #e7c984;
  color: #000;
  min-height: 6.688rem;
  padding: 1.375rem 0 0.875rem 0;
  max-height: 6.688rem !important;
}
.listOfItems .itemContent .iconContainer {
  flex-grow: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem !important;
  height: 1.5rem !important;
  margin-bottom: 8px;
}
.listOfItems .itemContent .iconContainer img {
  width: 100%;
  height: 100%;
}
.listOfItems .itemContent .iconContainer i {
  font-size: 16px !important;
}
.listOfItems .itemContent .iconText {
  font-size: var(--common-font-sz-small);
}

.choice-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #00000042;
  position: absolute;
  min-height: 92px;
  bottom: 0;
  width: 100%;
  z-index: 12;
  backdrop-filter: blur(20px);
}
.choice-modal div {
  padding: 0 1rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.choice-modal p {
  text-align: center;
  color: #fff;
  margin-top: 0.9rem;
  margin-bottom: 1rem;
  font-size: 12px;
}
.choice-btn {
  cursor: pointer;
  flex: 1;
  font-size: var(--common-font-sz-1);
  border: none;
  outline: none;
  padding: 8px 12px;
  min-height: 40px;
  border-radius: 16px;
  text-align: center;
  background: #9413f1;
  color: #fff;
  box-shadow: 0px 4px 4px 0px #f6f2f940 inset;
  -webkit-box-shadow: 0px 4px 4px 0px #f6f2f940 inset;
  max-width: 125px;
}
.choice-btn:hover {
  opacity: 0.9;
}
.choice-btn.no {
  background-color: #fff;
  color: #000;
}

.live-agent {
  background-color: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.live-agent iframe {
  background-color: #000;
  flex: 1;
  z-index: 200;
  width: 100%;
}
.live-agent button {
  outline: none;
  border: none;
  justify-self: flex-start;
  flex-shrink: 1;
  padding: 0 1rem;
}
.live-agent button img {
  height: 35px;
}

@media screen and (max-width: 340px) {
  html {
    font-size: 80%;
  }
}

#sl-overlay {
  align-items: center !important;
}
#sl-lightbox {
  width: 85% !important;
  max-height: 550px !important;
}

table {
  max-width: unset !important;
  padding: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.5rem;
  border-radius: 10px;
  overflow: hidden;
  width: calc(100% + 32px) !important;
}
thead tr {
  background: var(--gold-gradient);
}
tbody tr:nth-child(odd) td {
  background-color: #f3f0ee;
}
th:first-child,
tbody tr td:first-child {
  padding: 0.6rem 0.6rem 0.6rem 1rem;
}
th:last-child,
tbody tr td:last-child {
  padding: 0.6rem 1rem 0.6rem 0.6rem;
}
th {
  border: 0;
  background: transparent;
}
td {
  background: #f7f7f7;
  border: 0;
  padding: 0.6rem;
}

.terms-consent.view {
  display: flex;
}
.terms-consent p.has-medium-font-size,
.terms-consent h3,
.terms-consent h4 {
  font-size: var(--common-font-sz-sub-large);
  line-height: 1;
  margin-bottom: 0;
  font-weight: bold;
}
.terms-consent h1 {
  font-size: 2rem;
  margin-bottom: 0;
}
.terms-consent h3 {
  font-size: 1.3rem;
}
.terms-consent p {
  margin-bottom: 0;
}
.terms-consent .secondary-head {
  color: #606060;
}
.terms-consent .sources {
  font-weight: 400 !important;
  margin-top: -20px !important;
  color: #565656 !important;
}
.terms-consent a {
  color: #06c;
  display: inline;
  text-decoration: none;
}
.terms-consent .with-checkbox-wrapper {
  margin-top: 2rem;
}
.terms-consent .with-checkbox-wrapper p {
  font-size: 12px;
  margin: 0;
}
.terms-consent .with-checkbox-item {
  display: flex;
  align-items: flex-start;
  margin: 1rem 0;
}
.terms-consent .with-checkbox-item.error {
  color: #b61b28;
}
.terms-consent .with-checkbox-item h3 {
  margin: 0;
  margin-left: 1rem;
}
.terms-consent .with-checkbox-item input {
  outline: none;
  border: none;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
}
.terms-consent .with-checkbox-item.error input {
  border-color: #b61b28;
}
.terms-consent .button-container {
  display: none !important;
  width: 100%;
  padding: 1rem 0;
  margin-top: auto;
}
.terms-consent button {
  width: 100%;
  background-color: #000;
  color: #fff;
  height: 48px;
  text-align: center;
  font-weight: 500;
  border-radius: 4px;
}
.terms-consent .close-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 3rem;
  height: 3rem;
  background-color: transparent;
}
.analyse-error {
  margin-top: 0 !important;
}
.analyse-error p {
  margin-top: 0 !important;
}

.version-pre,
.version-pre code {
  white-space: pre-wrap;
  word-break: break-all;
}
.fancybox__toolbar {
  top: 2.5rem !important;
}
.fancybox__toolbar__column {
  align-content: center !important;
}
