/* Olivia Mini Massager - Common Styles */
.d-flex {
  display: flex !important;
}

.flex-column {
  flex-direction: column !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.bg-massager-hand {
  background: url(mini-massager-billboard-bg-white.jpg) no-repeat center center;
  background-size: cover;
  min-width: 20vw;
  width: max(41.66666667%, 100%);
  min-height: 50vh;
}

.h1--bs5 {
  font-size: calc(1.375rem + 1.5vw) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.h2--bs5 {
  font-size: calc(1.325rem + .9vw) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.p-3 {
  padding: 16px !important;
}

.p-5 {
  padding: 48px !important;
}

.pt-3 {
  padding-top: 16px !important;
}

.pt-3h {
  padding-top: 24px !important;
}

.pt-5 {
  padding-top: 48px !important;
}

.massager__hero {
  background: url(mini-massager-hero-bg.jpg) no-repeat center center;
  background-size: cover;
}

.massager__hero .well {
  background-color: rgba(188, 44, 60, 0.6);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  color: white;
  border-color: transparent;
}

.massager__howto {
  background-color: #f0f1f2;
  padding-top: 16px;
  padding-bottom: 16px;
}

.text-danger {
  --bs-danger-rgb: 144, 44, 60;
  --bs-text-opacity: 1;
  color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
}

.text-warning {
  --bs-warning-rgb: 247, 230, 2;
  --bs-text-opacity: 1;
  color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important;
}

.text-secondary {
  --bs-secondary-rgb: 82, 82, 82;
  --bs-text-opacity: 1;
  color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
}

.text-white {
  --bs-text-opacity: 1;
  --bs-white-rgb: 255, 255, 255;
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}

.fs-4 {
  font-size: 24px !important;
}

.fs-5h {
  font-size: 22px !important;
}

.fs-5 {
  font-size: 20px !important;
}

.fs-6 {
  font-size: 16px !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-3 {
  margin-bottom: 16px !important;
}

.mt-3 {
  margin-top: 16px !important;
}

.mb-5 {
  margin-bottom: 48px !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.container_px {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.text-opacity-75 {
  --bs-text-opacity: 0.75;
}

.well--massager__spec {
  --bs-card-bg-rgb: 188, 44, 60;
  --bs-card-bg-opacity: .1;
  --bs-box-shadow: 0 .25rem 2rem 0 rgba(0, 0, 0, .1);
  background-color: rgba(var(--bs-card-bg-rgb), var(--bs-card-bg-opacity));
  background-image: linear-gradient(to bottom, #fff, rgba(var(--bs-card-bg-rgb), var(--bs-card-bg-opacity)));
  border-radius: 20px;
  border-color: transparent;
  box-shadow: var(--bs-box-shadow) !important;
}

.spec-box {
  aspect-ratio: 1/1;
  width: min(200px, 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  border-radius: 10px;
  background-color: #9b8c8e;
  color: white;
  margin: 16px auto;
  gap: 8px;
}

.spec-box__header {
  font-size: calc(1.375rem + 1.5vw);
  font-weight: 700;
}

.ul-olivia {
  --bullet-size: 1.25em;
  --bullet-indent: .75em;
  list-style-position: inside;
  line-height: var(--bs-body-line-height) !important;
}

.ul-olivia li {
  list-style: none;
  position: relative;
  padding-left: calc(var(--bullet-size) + var(--bullet-indent));
  font-weight: 700 !important;
}

.ul-olivia li::before {
  position: absolute;
  top: 2px;
  left: 0;
  content: '';
  display: inline-block;
  height: var(--bullet-size);
  width: var(--bullet-size);
  background-image: url(/shop/sh88/info/pdp_olivia/mini_massager/mini-olivia-icon.png);
  background-size: cover;
  vertical-align: bottom;
}

.well--howto {
  --bs-card-spacer-y: 16px;
  --bs-card-spacer-x: 16px;
  --bs-card-border-radius: 20px;
  --bs-card-bg-rgb: 188, 44, 60;
  --bs-card-bg-opacity: .1;
  background-color: rgba(var(--bs-card-bg-rgb), var(--bs-card-bg-opacity));
  background-image: linear-gradient(to bottom, #fff, rgba(var(--bs-card-bg-rgb), var(--bs-card-bg-opacity)));
  border-radius: var(--bs-card-border-radius);
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
}

.well--howto img {
  margin-bottom: var(--bs-card-spacer-y);
}

.shake {
  animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
}

.shake-rotate {
  animation: shake-rotate 0.82s cubic-bezier(.36, .07, .19, .97) both;
}

.swiper--howto {
  --swiper-theme-color: #ba353e;
  --swiper-pagination-bullet-inactive-color: #a9a9a9;
}

.swiper-eq-slider-height .swiper-slide {
  display: flex;
  align-items: stretch;
  height: auto !important;
}

/* Bootstrap v5 Card Component (not available in v3) */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: 4px;
}

.card-body {
  flex: 1 1 auto;
  padding: 16px;
}

.card-title {
  margin-bottom: 12px;
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-img-top {
  width: 100%;
  border-top-left-radius: calc(.25rem - 1px);
  border-top-right-radius: calc(.25rem - 1px);
}

.card-subtitle {
  margin-top: -.375rem;
  margin-bottom: 0;
}

/* Features icons styling */
.feature-icon {
  width: min(150px, 100%);
  margin: 0 auto 1rem auto;
}

.feature-text {
  text-align: center;
}

#massager__body {
  --bs-body-line-height: 1.5;
  color: #525252;
  font-size: 20px;
  font-weight: 400;
  line-height: var(--bs-body-line-height);
}

#massager__h1 {
  font-weight: 600 !important;
  color: white;
}

#massager__h1,
.h2--responsive {
  font-weight: 600 !important;
  font-size: calc(21.2px + 0.9vw) !important;
  line-height: 1.2 !important;
}

.h3--responsive {
  font-weight: 600 !important;
  font-size: calc(20.8px + .6vw) !important;
  line-height: 1.2 !important;
}

.h4--responsive {
  font-size: calc(20.4px + 0.3vw) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

#massager__hero_h2 {
  color: white;
  font-size: clamp(44px, 44px + 12 * (100vw - 640px) / 560, 56px) !important;
  font-weight: 700 !important;
  margin-top: 0;
}

#massager__intro_h3 {
  font-size: calc(22px + 1.5vw) !important;
  font-weight: 700 !important;
  margin-top: 0;
}

@supports (background-image: url(/shop/sh88/info/pdp_olivia/mini_massager/mini-massager-hero-bg.webp)) {
  .bg-massager-hand {
    background-image: url(/shop/sh88/info/pdp_olivia/mini_massager/mini-massager-billboard-bg-white.webp)
  }

  .massager__hero {
    background-image: url(/shop/sh88/info/pdp_olivia/mini_massager/mini-massager-hero-bg.webp)
  }

  .ul-olivia li::before {
    background-image: url(/shop/sh88/info/pdp_olivia/mini_massager/mini-olivia-icon.webp);
  }
}

@media screen and (min-width: 992px) {
  .container_px {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }

  .flex-lg-row {
    flex-direction: row !important;
  }

  .p-lg-5 {
    padding: 48px !important;
  }

  .pt-lg-5 {
    padding-top: 48px !important;
  }

  .massager__hero>*>.row {
    display: flex;
    /* align-items:end; */
  }

  .massager__hero>*>.row .col-xs-12 {
    flex-basis: 50%;
    align-self: center;
  }

  .massager__hero>*>.row .box--blue-gal-hug-cat .img-responsive {
    height: 100%;
  }

  .massager__hero>*>.row .col-md-pull-4 {
    right: unset;
  }

  .massager__hero>*>.row .col-md-push-8 {
    left: unset;
  }

  .massager__hero .box--blue-gal-hug-cat {
    position: absolute;
    aspect-ratio: 310/457;
    height: 100%;
    left: max(-5vw, -64px);
  }

  .massager__hero .box--blue-gal-hug-cat .img-responsive {
    /* width:659px; */
    aspect-ratio: 310/457;
  }

  .massager__hero .box--left {
    flex: 60%;
    order: 0;
  }

  .massager__hero .box--left .well {
    padding-right: min(5vw, 64px);
  }

  .massager__hero .box--mid {
    flex-basis: 15%;
    z-index: 100;
    order: 1;
  }

  .massager__hero .box--right {
    flex: 20%;
    order: 2;
  }

  .massager__hero .spotlight-wrapper {
    transform: scale(70%);
  }

  .massager__hero .spotlight-wrapper::before {
    content: '';
    height: 120%;
    aspect-ratio: 1/1;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, .7);
  }

  .massager__hero .spotlight-wrapper .img-responsive {
    position: relative;
  }

  .massager__howto {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

@media (min-width: 1200px) {
  .h1--bs5 {
    font-size: 40px !important;
  }

  .h2--bs5 {
    font-size: 36px !important;
  }

  .h2--responsive {
    font-size: 36px !important;
  }

  .h3--responsive {
    font-size: 28px !important;
  }

  .h4--responsive {
    font-size: 24px !important;
  }

  .well--howto {
    --bs-card-spacer-x: 40px;
    --bs-card-spacer-y: 50px;
  }
}