/** Shopify CDN: Minification failed

Line 126:7 Cannot use type selector "--delay-1" directly after nesting selector "&"
Line 129:7 Cannot use type selector "--delay-2" directly after nesting selector "&"
Line 139:5 Cannot use type selector "--survey" directly after nesting selector "&"

**/
/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
@layer properties;
@layer base {
  input,
  textarea,
  select {
    --tw-outline-style: none;
    outline-style: none;
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
}
@layer components {
  .disabled-box {
    opacity: 0.5;
  }
  .border-light {
    border-color: var(--color-placeholder, #cecece);
  }
  h1 {
    font-size: 2em;
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
  }
  .survey--image {
    position: relative;
    background-image: url("/cdn/shop/files/LP_Quiz_Cover_Mobile_v3.jpg?v=1686732305");
    @media (width >= 992px) {
      background-image: url("/cdn/shop/files/Quiz_LP_DT.jpg?v=1686559948");
    }
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    &.survey--image--spf {
      background-image: url("/cdn/shop/files/SPF_Banner_1_MB_750x.jpg?v=1774411319");
      @media (width >= 992px) {
        background-image: url("/cdn/shop/files/SPF_Banner_1_DT_1920x.jpg?v=1774411319");
      }
      background-size: cover;
      background-position: center;
      .decoration--top-left {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-35deg);
        will-change: transform, opacity;
        transition: opacity 0.35s ease-out, transform 0.35s ease-out;
        &.animate-in {
          opacity: 1;
          transform: translate(0, 0) rotate(0deg);
        }
      }
      .decoration--bottom-right {
        position: absolute;
        bottom: 0;
        right: 0;
        opacity: 0;
        transform: translateY(80%);
        will-change: transform, opacity;
        transition: opacity 0.35s ease-out 0.08s, transform 0.35s ease-out 0.08s;
        &.animate-in {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }
    .container--survey--spf.cover {
      height: auto;
      min-height: 419px;
      @media (width >= 992px) {
        min-height: 550px;
      }
      img:not(.decoration--top-left--img):not(.decoration--bottom-right--img) {
        display: none;
        @media (width >= 992px) {
          display: inline;
        }
      }
    }
  }
  .survey--variant {
    figcaption {
      flex: 0 0 auto;
      @media (width >= 992px) {
        position: absolute;
      }
      @media (width >= 992px) {
        top: 50%;
      }
      @media (width >= 992px) {
        width: 38.5%;
      }
      @media (width >= 992px) {
        --tw-translate-y: -50%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
    picture {
      padding-top: 30%;
      @media (width >= 768px) {
        padding-top: var(--spacing-0, 0);
      }
    }
    .survey-content-reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.3s ease-out 0.4s, transform 0.3s ease-out 0.4s;
      &.animate-in {
        opacity: 1;
        transform: translateY(0);
      }
      &--delay-1 {
        transition-delay: 0.55s;
      }
      &--delay-2 {
        transition-delay: 0.7s;
      }
    }
  }
  .container {
    padding-inline: var(--spacing-0, 0);
    @media (width >= 992px) {
      padding-inline: var(--spacing-g, 15px);
    }
    &--survey {
      height: 100vh;
      &.cover {
        height: 100vh;
      }
      .question-box__title {
        font-size: 1.5em;
        line-height: 1.25;
        --tw-font-weight: var(--font-weight-bold, 700);
        font-weight: var(--font-weight-bold, 700);
        @media (width >= 992px) {
          font-size: 2em;
        }
      }
    }
    .custom-check__answer {
      flex-basis: 77.5%;
    }
    .px-sm-1 {
      padding-inline: .625rem;
    }
    .checkbox-number {
      max-height: 3.75em;
    }
    .custom-check {
      &.border-0 {
        border: 0px;
      }
      .svg {
        width: 70%;
        fill: white;
      }
    }
    .multiple-choice-counter {
      height: 1.25em;
      min-width: 1.25em;
      transition-delay: 1s;
      transition: width 2s;
      transition-timing-function: ease-in;
    }
    .form-control {
      -webkit-appearance: none;
      appearance: none;
      background-clip: padding-box;
      color: #000;
      display: block;
      font-size: 1em;
      font-weight: 400;
      line-height: 1.25;
      transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
      width: 100%;
      &::placeholder {
        color: #A3A3A3;
        opacity: 1;
      }
      &::-ms-input-placeholder {
        color: #A3A3A3;
      }
    }
    .form-check-input {
      --bs-form-check-bg: var(--bs-body-bg);
      -webkit-appearance: none;
      appearance: none;
      background-position: 50%;
      background-repeat: no-repeat;
      background-size: contain;
      border: 1px solid #d0d0d0;
      height: 1em;
      margin-top: 0;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
      vertical-align: top;
      width: 1em;
    }
    .single-choice__slide {
      top: 10em;
    }
    .form-range {
      -webkit-appearance: none;
      appearance: none;
      height: 1.5rem;
      width: 100%;
      background-color: transparent;
      padding: var(--spacing-0, 0);
    }
    .single-choice__image {
      min-height: 7.5em;
      width: 7.5em;
      @media (width >= 992px) {
        min-height: 9.375em;
      }
      @media (width >= 992px) {
        width: 9.375em;
      }
    }
    .form-range:focus {
      outline: 0;
    }
    .form-range:focus::-webkit-slider-thumb {
      box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(214, 46, 85, .25);
    }
    .form-range:focus::-moz-range-thumb {
      box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(214, 46, 85, .25);
    }
    .form-range::-moz-focus-outer {
      border: 0;
    }
    .form-range::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      background-color: #d62e55;
      border: 0;
      border-radius: 1rem;
      height: 1rem;
      margin-top: -.21875rem;
      -webkit-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
      transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
      width: 1rem;
    }
    @media (prefers-reduced-motion:reduce) {
      .form-range::-webkit-slider-thumb {
        -webkit-transition: none;
        transition: none;
      }
    }
    .form-range::-webkit-slider-thumb:active {
      background-color: #f3c0cc;
    }
    .form-range::-webkit-slider-runnable-track {
      background-color: #fff2f4;
      border-color: transparent;
      border-radius: 1rem;
      color: transparent;
      cursor: pointer;
      height: .5625rem;
      width: 100%;
    }
    .form-range::-moz-range-thumb {
      appearance: none;
      background-color: #d62e55;
      border: 0;
      border-radius: 1rem;
      height: 1rem;
      -moz-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
      transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
      width: 1rem;
    }
    @media (prefers-reduced-motion:reduce) {
      .form-range::-moz-range-thumb {
        -moz-transition: none;
        transition: none;
      }
    }
    .form-range::-moz-range-thumb:active {
      background-color: #f3c0cc;
    }
    .form-range::-moz-range-track {
      background-color: #fff2f4;
      border-color: transparent;
      border-radius: 1rem;
      color: transparent;
      cursor: pointer;
      height: .5625rem;
      width: 100%;
    }
    .form-range:disabled {
      pointer-events: none;
    }
    .form-range:disabled::-webkit-slider-thumb {
      background-color: hsla(0, 0%, 8%, .75);
      background-color: var(--bs-secondary-color);
    }
    .form-range:disabled::-moz-range-thumb {
      background-color: hsla(0, 0%, 8%, .75);
      background-color: var(--bs-secondary-color);
    }
    .question-box .footer-action .btn-next {
      width: 100%;
      @media (width >= 992px) {
        width: 100%;
      }
    }
    .input-group {
      align-items: stretch;
      display: flex;
      flex-wrap: wrap;
      position: relative;
      width: 100%;
    }
    input-group>.form-control,
        .input-group>.form-floating,
        .input-group>.form-select {
      flex: 1 1 auto;
      min-width: 0;
      position: relative;
      width: 1%;
    }
  }
  .search-panel .search--popular {
    padding-inline: var(--spacing-g, 15px);
  }
  .announcement-bar .container {
    padding-inline: var(--spacing-hg, 7.5px);
    @media (width >= 992px) {
      padding-inline: var(--spacing-g, 15px);
    }
  }
  .search-panel .search--result-title {
    padding-inline: var(--spacing-hg, 7.5px);
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
  }
  .search-panel .search--result-box {
    padding-inline: var(--spacing-hg, 7.5px);
  }
  .search-panel .search--not-found {
    padding-inline: var(--spacing-hg, 7.5px);
    a {
      color: var(--color-primary, #D62E55);
    }
  }
  .search-panel .search--notes a {
    color: var(--color-primary, #D62E55);
  }
  .container--survey .question-box__title {
    font-size: 1.5em;
    line-height: 1.25;
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
    @media (width >= 992px) {
      font-size: 2em;
    }
  }
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-font-weight: initial;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
    }
  }
}