/* Heart tiers: a deliberate progression from Classic to Premium. */
.lw-heart-experience {
  --lw-ink: #271719;
  --lw-wine: #4b252b;
  --lw-wine-soft: #6c3740;
  --lw-gold: #e2be78;
  --lw-gold-soft: rgba(226, 190, 120, .28);
}

.lw-heart-selection {
  display: grid;
  width: min(1120px, 100%);
  margin: 0 auto 24px;
  padding: 18px 22px;
  grid-template-columns: auto minmax(170px, .7fr) minmax(260px, 1.7fr) auto;
  align-items: center;
  gap: 10px 22px;
  border: 1px solid rgba(226, 190, 120, .55);
  background:
    radial-gradient(circle at 90% 0%, rgba(226, 190, 120, .18), transparent 34%),
    linear-gradient(130deg, rgba(39, 23, 25, .98), rgba(75, 37, 43, .94));
  box-shadow: 0 20px 48px rgba(49, 25, 28, .18);
  color: #fff9ee;
}

.lw-heart-selection > span {
  color: var(--lw-gold);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.lw-heart-selection > strong {
  font-family: "FuturaStdBook", sans-serif;
  font-size: 22px;
  font-weight: 400;
}

.lw-heart-selection > em {
  color: rgba(255, 249, 238, .72);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.lw-heart-selection > b {
  color: var(--lw-gold);
  font-family: "FuturaStdBook", sans-serif;
  font-size: 25px;
  font-weight: 400;
}

.lw-heart-progress span {
  position: relative;
  color: #9a8179 !important;
  transition: color .25s ease;
}

.lw-heart-progress span::before {
  display: inline-grid;
  width: 18px;
  height: 18px;
  margin-right: 7px;
  place-items: center;
  border: 1px solid rgba(115, 73, 63, .24);
  border-radius: 50%;
  content: "◇";
  font-size: 8px;
}

.lw-heart-progress span.is-reached,
.lw-heart-progress span.is-current {
  color: #6a3540 !important;
}

.lw-heart-progress span.is-current::before {
  border-color: var(--lw-gold);
  background: var(--lw-wine);
  color: var(--lw-gold);
  content: "◆";
  box-shadow: 0 0 0 4px var(--lw-gold-soft);
}

.lw-heart-progress i {
  background: rgba(116, 77, 66, .17) !important;
}

.lw-heart-progress i.is-reached {
  background: linear-gradient(90deg, #9c5b62, var(--lw-gold)) !important;
}

html body .lw-heart-compare {
  gap: 16px !important;
}

html body .lw-heart-option {
  overflow: hidden !important;
  border: 1px solid rgba(226, 190, 120, .28) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(226, 190, 120, .15), transparent 28%),
    linear-gradient(150deg, rgba(39, 23, 25, .98), rgba(75, 37, 43, .95)) !important;
  box-shadow: 0 14px 34px rgba(47, 25, 28, .14) !important;
  color: #fff8ee !important;
  transform: none !important;
}

html body .lw-heart-option:hover,
html body .lw-heart-option:focus-visible {
  border-color: rgba(226, 190, 120, .72) !important;
  box-shadow: 0 20px 44px rgba(47, 25, 28, .22) !important;
  transform: translateY(-4px) !important;
}

html body .lw-heart-option.is-selected {
  z-index: 2;
  border-color: var(--lw-gold) !important;
  background:
    radial-gradient(circle at 85% 2%, rgba(246, 216, 155, .25), transparent 34%),
    linear-gradient(145deg, #241416, #65313a) !important;
  box-shadow:
    0 0 0 3px rgba(226, 190, 120, .18),
    0 25px 58px rgba(47, 25, 28, .30) !important;
  transform: translateY(-7px) !important;
}

html body .lw-heart-option.is-selected::after {
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  width: auto !important;
  height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(255, 249, 238, .36) !important;
  border-radius: 999px !important;
  background: rgba(39, 23, 25, .78) !important;
  color: var(--lw-gold) !important;
  content: "SELECTED" !important;
  font-size: 8px !important;
  letter-spacing: .13em !important;
}

html body .lw-heart-option__level {
  border: 1px solid rgba(226, 190, 120, .42) !important;
  background: rgba(39, 23, 25, .82) !important;
  color: #f3d89e !important;
  backdrop-filter: blur(8px);
}

html body .lw-heart-option > img {
  background: #2b1b1d !important;
  object-fit: cover !important;
}

html body .lw-heart-option > .lw-heart-option__copy {
  min-height: 252px !important;
  padding: 20px !important;
}

html body .lw-heart-option small {
  color: rgba(243, 216, 158, .8) !important;
}

html body .lw-heart-option strong {
  color: #fff9ef !important;
}

html body .lw-heart-option b {
  color: var(--lw-gold) !important;
}

html body .lw-heart-option > .lw-heart-photo-trigger {
  display: inline-flex !important;
  width: auto !important;
  min-height: 0 !important;
  height: 38px !important;
  padding: 7px 11px !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  gap: 7px !important;
  white-space: nowrap !important;
}

html body .lw-heart-option > .lw-heart-photo-trigger i {
  font-style: normal !important;
}

html body .lw-heart-option .lw-heart-photo-trigger b {
  width: 23px !important;
  height: 23px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #f5d58f !important;
  font-size: 11px !important;
  line-height: 23px !important;
}

@media (min-width: 641px) {
  html body .lw-letter-upgrades__grid .lw-heart-option > .lw-heart-photo-trigger {
    top: 78% !important;
    left: 22.5% !important;
  }
}

html body .lw-heart-option em {
  border-top-color: rgba(226, 190, 120, .18) !important;
  color: rgba(255, 249, 238, .72) !important;
}

.lw-heart-option__action {
  display: flex !important;
  margin-top: 16px;
  padding-top: 12px;
  align-items: center;
  gap: 9px;
  border-top: 1px solid rgba(226, 190, 120, .18);
  color: rgba(255, 249, 238, .72);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lw-heart-option__action i {
  width: 7px;
  height: 7px;
  border: 1px solid var(--lw-gold);
  border-radius: 50%;
}

.lw-heart-option.is-selected .lw-heart-option__action {
  color: var(--lw-gold);
}

.lw-heart-option.is-selected .lw-heart-option__action i {
  background: var(--lw-gold);
  box-shadow: 0 0 0 4px rgba(226, 190, 120, .15);
}

.lw-heart-detail {
  border: 1px solid rgba(226, 190, 120, .35) !important;
}

.lw-heart-detail__upgrade {
  border-left-color: var(--lw-gold) !important;
  background: linear-gradient(130deg, #2d1a1d, #542b31) !important;
}

.lw-heart-detail__upgrade strong {
  color: var(--lw-gold) !important;
}

.lw-heart-detail__upgrade span {
  color: rgba(255, 249, 238, .78) !important;
}

.lw-heart-option:focus-visible {
  outline: 3px solid rgba(226, 190, 120, .48);
  outline-offset: 3px;
}

@media (max-width: 991px) {
  .lw-heart-selection {
    grid-template-columns: auto 1fr auto;
  }

  .lw-heart-selection > em {
    grid-column: 1 / -1;
  }

  .hero-secret .div-block-119[data-lw-catalog-dock="true"] .lw-dock-name {
    font-size: 9px !important;
    letter-spacing: 0 !important;
  }

  .hero-secret .div-block-119[data-lw-catalog-dock="true"] .lw-dock-price {
    font-size: 8px !important;
  }
}

@media (max-width: 640px) {
  .lw-heart-selection {
    padding: 17px;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
  }

  .lw-heart-selection > span,
  .lw-heart-selection > em {
    grid-column: 1 / -1;
  }

  .lw-heart-selection > strong {
    font-size: 19px;
  }

  html body .lw-heart-option {
    display: grid !important;
    grid-template-columns: 118px minmax(0, 1fr) !important;
  }

  html body .lw-heart-option > img {
    width: 118px !important;
    height: 100% !important;
    min-height: 190px !important;
    aspect-ratio: auto !important;
  }

  html body .lw-heart-option > .lw-heart-option__copy {
    min-height: 190px !important;
    padding: 15px !important;
  }

  html body .lw-heart-option > .lw-heart-photo-trigger {
    top: 73% !important;
    left: 59px !important;
    height: 32px !important;
    padding: 5px 8px !important;
    font-size: 8px !important;
    transform: translate(-50%, -50%) !important;
  }

  html body .lw-heart-option > .lw-heart-photo-trigger i {
    display: none !important;
  }

  html body .lw-heart-option .lw-heart-photo-trigger b {
    width: 19px !important;
    height: 19px !important;
    font-size: 9px !important;
    line-height: 19px !important;
  }

  html body .lw-heart-option__level {
    max-width: 94px;
    padding: 6px 8px !important;
    border-radius: 12px;
    font-size: 8px;
    line-height: 1.25;
    text-align: left;
    white-space: normal;
  }

  html body .lw-heart-option em {
    display: block !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
  }

  html body .lw-heart-option.is-selected {
    transform: none !important;
  }
}