/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!../web/app/themes/101munten/components/wishlist/account/progress-bar/wishlist_progress-bar.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************/
/*---
title:   Brand Colors
section: Visual
---
Brand colors used in project.

```example:color
@color: #4285F4 @name: $primary-color
@color: #FF0A53 @name: $secondary-color

```
*/
/*---
title:   General Colors
section: Visual
---
General colors used in project.

```example:color
@color: #ffffff @name: $white
@color: #000000 @name: $black
@color: #D8D8D8 @name: $gray-lighter
@color: #9A9A9A @name: $gray-light
@color: #3A3734 @name: $gray
@color: #33302D @name: $gray-dark
@color: #2A2724 @name: $gray-darker

```
*/
/* stylelint-enable */
.wishlist-progress-bar {
  --progress-bar-height: 1rem;
  --progress-bar-fill-color: var(--grey-320);
  position: relative;
  width: 100%;
  height: var(--progress-bar-height);
  border-radius: 5rem;
  background-color: var(--progress-bar-fill-color);
  margin-block: 1.5em;
}
.wishlist-progress-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 1rem;
  background-color: var(--progress-bar-fill-color);
  width: var(--progress-bar-width);
  border-radius: 5rem 0 0 5rem;
}
.wishlist-progress-bar-fill.is-owned {
  --progress-bar-fill-color: var(--green-500);
}
.wishlist-progress-bar-fill.is-owned .status::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='13' fill='none' viewBox='0 0 12 13'%3E%3Cg clip-path='url(%23a)'%3E%3Cmask id='b' width='12' height='12' x='0' y='0' maskUnits='userSpaceOnUse' style='mask-type:luminance'%3E%3Cpath fill='%23fff' d='M6 11.05a4.99 4.99 0 0 0 3.536-1.465A4.98 4.98 0 0 0 11 6.05a4.98 4.98 0 0 0-1.464-3.536A4.99 4.99 0 0 0 6 1.05a4.99 4.99 0 0 0-3.535 1.464A4.99 4.99 0 0 0 1 6.05a4.99 4.99 0 0 0 1.465 3.535A4.98 4.98 0 0 0 6 11.05'/%3E%3Cpath fill='%23fff' d='M6 .55a5.49 5.49 0 0 1 3.889 1.61l.187.196A5.49 5.49 0 0 1 11.5 6.05l-.006.27a5.5 5.5 0 0 1-1.605 3.618A5.49 5.49 0 0 1 6 11.55 5.49 5.49 0 0 1 2.11 9.939 5.49 5.49 0 0 1 .5 6.048 5.49 5.49 0 0 1 2.111 2.16 5.49 5.49 0 0 1 6 .55m0 1a4.49 4.49 0 0 0-3.182 1.317v.001A4.49 4.49 0 0 0 1.5 6.05a4.49 4.49 0 0 0 1.165 3.021l.152.16.001.002A4.49 4.49 0 0 0 6 10.55a4.49 4.49 0 0 0 3.182-1.317v-.001A4.49 4.49 0 0 0 10.5 6.05a4.49 4.49 0 0 0-1.317-3.182h-.001A4.49 4.49 0 0 0 6 1.55'/%3E%3Cpath fill='%23000' d='M8.146 4.197a.5.5 0 1 1 .707.707l-3 3a.5.5 0 0 1-.707 0l-1.5-1.5a.5.5 0 1 1 .707-.707L5.5 6.843z'/%3E%3C/mask%3E%3Cg mask='url(%23b)'%3E%3Cpath fill='%234ba800' d='M0 .05h12v12H0z'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .05h12v12H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.wishlist-progress-bar-fill.wished {
  --icon-offset: 3em;
  --progress-bar-fill-color: var(--yellow-500);
}
.wishlist-progress-bar-fill.wished .status::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' fill='none' viewBox='0 0 16 14'%3E%3Cpath d='M10.554.473a3.8 3.8 0 0 1 2.659.148c1.552.687 2.56 2.351 2.587 4.041v.01c0 2.45-1.534 4.603-3.13 6.1a13.6 13.6 0 0 1-2.41 1.806 8 8 0 0 1-1.044.513c-.3.116-.624.21-.916.21s-.616-.094-.916-.21a8 8 0 0 1-1.045-.513 13.6 13.6 0 0 1-2.41-1.806C2.333 9.275.8 7.122.8 4.673v-.01C.827 2.973 1.835 1.308 3.388.621A3.8 3.8 0 0 1 6.046.473c.763.229 1.523.691 2.254 1.404C9.03 1.164 9.79.702 10.554.473'/%3E%3C/svg%3E");
}
.wishlist-progress-bar .status {
  position: absolute;
  bottom: -0.5em;
  left: var(--icon-offset, 0);
  translate: 0 100%;
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-width: -moz-max-content;
  min-width: max-content;
  font-size: 1.4rem;
}
.wishlist-progress-bar .status::before {
  content: "";
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  translate: 0 1px;
}
.wishlist-progress-bar::after {
  content: attr(data-wishlist-progress-text);
  position: absolute;
  bottom: -0.5em;
  right: 0;
  translate: 0 100%;
  color: var(--black);
  font-size: 1.3rem;
  min-width: -moz-max-content;
  min-width: max-content;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!../web/app/themes/101munten/components/wishlist/notice/wishlist_notice.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************/
/*---
title:   Brand Colors
section: Visual
---
Brand colors used in project.

```example:color
@color: #4285F4 @name: $primary-color
@color: #FF0A53 @name: $secondary-color

```
*/
/*---
title:   General Colors
section: Visual
---
General colors used in project.

```example:color
@color: #ffffff @name: $white
@color: #000000 @name: $black
@color: #D8D8D8 @name: $gray-lighter
@color: #9A9A9A @name: $gray-light
@color: #3A3734 @name: $gray
@color: #33302D @name: $gray-dark
@color: #2A2724 @name: $gray-darker

```
*/
/* stylelint-enable */
:root {
  --wishlist-notice-duration: 6s;
  --wishlist-notice-delay: .4s;
  --notice-progress-color: var(--yellow-500);
  --notice-starting-transform: translateX(40%);
}

.wishlist-notices-container {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: min(90%, 25em);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
dialog .wishlist-notices-container {
  --notice-starting-transform: translateY(-40%);
  --wishlist-notice-delay: 0s;
  position: absolute;
  bottom: auto;
  top: 1rem;
  width: auto;
  right: 3rem;
  left: 3rem;
}

.wishlist-notice {
  --notice-color: var(--black);
  --notice-bg: var(--yellow-200);
  background-color: var(--notice-bg);
  color: var(--notice-color);
  border-radius: 8px;
  padding: 1.5rem 1.5rem 1.7rem 1.5rem;
  animation: showNotification var(--wishlist-notice-duration) ease var(--wishlist-notice-delay);
  animation-fill-mode: both;
  transition: transform 0.3s ease-out;
  transform-origin: bottom right;
}
.wishlist-notice:after {
  content: "";
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  width: 0%;
  animation: wishlist-notice-progress calc(var(--wishlist-notice-duration) + var(--wishlist-notice-delay) * 0.5) linear forwards;
  height: 4px;
  border-radius: 5px;
  background-color: var(--notice-progress-color);
  z-index: 5;
}
@keyframes wishlist-notice-progress {
  from {
    width: calc(100% - 1rem);
  }
  to {
    width: 0%;
  }
}
@starting-style {
  .wishlist-notice:after {
    width: 100%;
  }
}
.wishlist-notice p:before {
  content: "";
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' fill='%23e7bb1c' viewBox='0 0 16 14'%3E%3Cpath d='M10.554.473a3.8 3.8 0 0 1 2.659.148c1.552.687 2.56 2.351 2.587 4.041v.01c0 2.45-1.534 4.603-3.13 6.1a13.6 13.6 0 0 1-2.41 1.806 8 8 0 0 1-1.044.513c-.3.116-.624.21-.916.21s-.616-.094-.916-.21a8 8 0 0 1-1.045-.513 13.6 13.6 0 0 1-2.41-1.806C2.333 9.275.8 7.122.8 4.673v-.01C.827 2.973 1.835 1.308 3.388.621A3.8 3.8 0 0 1 6.046.473c.763.229 1.523.691 2.254 1.404C9.03 1.164 9.79.702 10.554.473'/%3E%3C/svg%3E");
  background-size: 1em;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
}
.wishlist-notice.wishlist-notice--error {
  --notice-progress-color: var(--red-500);
  --notice-bg: var(--red-200);
}
.wishlist-notice a {
  text-decoration: underline;
}
@keyframes showNotification {
  0% {
    transform: var(--notice-starting-transform);
    opacity: 0;
  }
  5% {
    transform: none;
    opacity: 1;
  }
  95% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: var(--notice-ending-transform);
    opacity: 0;
    z-index: -1;
  }
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!../web/app/themes/101munten/components/wishlist/wishlist_custom.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
/*---
title:   Brand Colors
section: Visual
---
Brand colors used in project.

```example:color
@color: #4285F4 @name: $primary-color
@color: #FF0A53 @name: $secondary-color

```
*/
/*---
title:   General Colors
section: Visual
---
General colors used in project.

```example:color
@color: #ffffff @name: $white
@color: #000000 @name: $black
@color: #D8D8D8 @name: $gray-lighter
@color: #9A9A9A @name: $gray-light
@color: #3A3734 @name: $gray
@color: #33302D @name: $gray-dark
@color: #2A2724 @name: $gray-darker

```
*/
/* stylelint-enable */
.twz-card .wishlist-add {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  z-index: 10;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!../web/app/themes/101munten/components/wishlist/wishlist_init.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
/*---
title:   Brand Colors
section: Visual
---
Brand colors used in project.

```example:color
@color: #4285F4 @name: $primary-color
@color: #FF0A53 @name: $secondary-color

```
*/
/*---
title:   General Colors
section: Visual
---
General colors used in project.

```example:color
@color: #ffffff @name: $white
@color: #000000 @name: $black
@color: #D8D8D8 @name: $gray-lighter
@color: #9A9A9A @name: $gray-light
@color: #3A3734 @name: $gray
@color: #33302D @name: $gray-dark
@color: #2A2724 @name: $gray-darker

```
*/
/* stylelint-enable */
.wishlist-add {
  --link-color: var(--yellow-500);
  --toggler-size: 4rem;
  --transition-speed: .3s;
  --toggler-bg-active: var(--yellow-200);
  --toggler-bg: var(--white);
  --toggler-bordercolor: var(--grey-420);
  --toggler-bordercolor-hover: var(--yellow-500);
  --heart-fill: transparent;
  --heart-fill-active: var(--yellow-550);
  --heart-stroke: var(--black);
  --heart-stroke-active: var(--yellow-550);
  position: relative;
  flex: 0 0 var(--toggler-size);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--toggler-bg);
  border: none;
  outline: none;
  padding: 0;
  transition: 0.3s ease;
  cursor: pointer;
  min-width: 0;
  box-sizing: border-box;
}
@keyframes pulse {
  0%, 20% {
    scale: 1;
  }
  30% {
    scale: 1.2;
  }
  50% {
    scale: 1;
  }
  60% {
    scale: 1.1;
  }
  70%, 100% {
    scale: 1;
  }
}
.wishlist-add--has-icon {
  width: var(--toggler-size);
  height: var(--toggler-size);
  flex: 0 0 var(--toggler-size);
  border-radius: 50%;
  border: 1px solid var(--toggler-bordercolor);
}
@media (max-width: 1024px) {
  .wishlist-add--has-icon:hover {
    border-color: var(--toggler-bordercolor-hover);
  }
}
.wishlist-add > svg {
  display: inline-block;
  height: 45%;
  width: 45%;
  overflow: visible;
  translate: 0 1px;
}
.wishlist-add > svg path {
  transition: all 0.3s ease;
  fill: var(--heart-fill);
  stroke: var(--heart-stroke);
}
.wishlist-add__hearts {
  display: none;
}
.wishlist-add__hearts svg {
  position: absolute;
  top: 30%;
  left: 30%;
}
.wishlist-add[data-check-state] {
  opacity: 0.5;
  cursor: not-allowed;
}
.wishlist-add[data-in-wishlist=true] {
  border-color: var(--toggler-bg-active);
  background-color: var(--toggler-bg-active);
}
.wishlist-add[data-in-wishlist=true] svg path {
  fill: var(--heart-fill-active);
  stroke: var(--heart-stroke-active);
}
.wishlist-add[data-in-wishlist=true].is-adding .wishlist-add__hearts {
  display: block;
}
.wishlist-add[data-in-wishlist=true].is-adding .wishlist-add__hearts svg {
  animation-name: goFlying1;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  opacity: 0;
}
.wishlist-add[data-in-wishlist=true].is-adding .wishlist-add__hearts svg:nth-child(2) {
  animation-name: goFlying2;
  animation-delay: 0.25s;
}
.wishlist-add[data-in-wishlist=true].is-adding .wishlist-add__hearts svg path {
  fill: var(--heart-fill-active);
  stroke: var(--heart-stroke-active);
}
@keyframes goFlying1 {
  0% {
    transform: translate(0, 0) scale(0.75);
    opacity: 1;
  }
  15% {
    transform: translate(20px, -15px) scale(0.75);
    opacity: 0.9;
  }
  40% {
    transform: translate(-10px, -30px) scale(0.85);
    opacity: 0.7;
  }
  70% {
    transform: translate(35px, -55px) scale(1);
    opacity: 0.5;
  }
  100% {
    transform: translate(-5px, -70px) scale(1);
    opacity: 0;
  }
}
@keyframes goFlying2 {
  0% {
    transform: translate(0, 0) scale(0.75);
    opacity: 1;
  }
  25% {
    transform: translate(-20px, -20px) scale(0.75);
    opacity: 0.9;
  }
  55% {
    transform: translate(5px, -42px) scale(0.85);
    opacity: 0.7;
  }
  80% {
    transform: translate(-35px, -69px) scale(1);
    opacity: 0.5;
  }
  100% {
    transform: translate(5px, -81px) scale(1);
    opacity: 0;
  }
}
@media (min-width: 1025px) {
  .wishlist-add:hover:not([data-in-wishlist=true], [data-check-state]) svg {
    animation: pulse infinite 1s;
  }
  .wishlist-add:hover:not([data-in-wishlist=true], [data-check-state]) svg path {
    fill: var(--heart-fill-active);
    stroke: var(--heart-stroke-active);
  }
}
.wishlist-add--has-text {
  --toggler-size: 1.8rem;
  border-radius: 50rem;
  padding: var(--button-pd, 0.75em 2em);
  gap: 0.75em;
}
.wishlist-add--has-text > svg {
  height: 1em;
  width: 1em;
}
.wishlist-remove {
  --bin-fill: var(--grey-420);
  --toggler-bg: var(--yellow-200);
  position: absolute;
  z-index: 9;
  right: 0;
  height: 4.5rem;
  width: 4.5rem;
  top: 0;
  border-radius: 0 0 0 6px;
  transition: 0.3s ease;
  padding: 1rem 1.5rem;
}
.wishlist-remove:hover {
  background-color: var(--toggler-bg);
}
.wishlist-remove:hover svg path {
  transition: all 0.3s ease;
  fill: var(--bin-fill);
}
.wishlist-popup {
  --transition-speed: .3s;
  border-radius: var(--wishlist-popup-radius, 10px);
  border: none;
  transition: display var(--transition-speed) allow-discrete, overlay var(--transition-speed) allow-discrete, opacity var(--transition-speed);
  opacity: 0;
  text-align: center;
  padding: 4rem;
  outline: none;
}
@starting-style {
  .wishlist-popup {
    opacity: 0;
  }
}
.wishlist-popup[open] {
  opacity: 1;
}
.wishlist-popup[open]::backdrop {
  background: rgba(0, 0, 0, 0.35);
}
@starting-style {
  .wishlist-popup[open]::backdrop {
    background-color: rgba(0, 0, 0, 0);
  }
}
.wishlist-popup--edit-collection {
  width: min(90%, 80rem);
  text-align: left;
}
.wishlist-popup-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.wishlist-popup-content * {
  margin: 0;
}
.wishlist-popup-content .description {
  width: 85%;
  max-width: 70ch;
}
.wishlist-popup-content .description button {
  all: unset;
  color: var(--link-color);
  text-decoration: underline;
  cursor: pointer;
}
.wishlist-popup__footer {
  margin-top: 2rem;
  text-align: center;
}
.wishlist-popup__footer > .btn:only-child {
  margin-inline: auto;
  width: min(90%, 80rem);
}
.wishlist-popup__footer .btn--save {
  border: none;
  margin-top: 1rem;
  transition: color 0.1s ease;
  overflow: clip;
}
.wishlist-popup__footer .btn--save::before {
  content: "";
  position: absolute;
  inset: 0;
  translate: 0 -100%;
  background-color: var(--yellow-500);
  transition: translate 0.15s cubic-bezier(0.18, 0.52, 0.24, 0.99);
}
.wishlist-popup__footer .btn--save::after {
  content: "Details opgeslagen!";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% 0%;
  opacity: 0;
  transition: 0.2s cubic-bezier(0.18, 0.52, 0.24, 0.99) 0.2s;
}
.wishlist-popup__footer .btn--save.is-completed::before {
  translate: 0 0;
}
.wishlist-popup__footer .btn--save.is-completed::after {
  opacity: 1;
  translate: -50% -50%;
}
.wishlist-popup-close {
  cursor: pointer;
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  font-size: 0;
  background: transparent;
}
.wishlist-popup-close svg {
  height: 1.5rem;
  width: 1.5rem;
}
.wishlist-popup .title {
  margin-bottom: 1em;
}
.wishlist-popup .btn--add {
  margin-top: 1rem;
  display: inline-flex;
  gap: 0.75em;
  align-items: center;
}
.wishlist-popup .btn--add::before {
  content: "";
  display: inline-block;
  height: 0.8em;
  aspect-ratio: 1;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%2306202d' viewBox='0 0 14 14'%3E%3Cpath d='M14 8H8v6H6V8H0V6h6V0h2v6h6Z' data-name='Path 44'/%3E%3C/svg%3E");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.wishlist-popup .btn--remove {
  height: 2rem;
  width: 2rem;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='18' fill='%23a5a5a5' viewBox='0 0 14 18'%3E%3Cpath d='M11 6v10H3V6zM9.5 0h-5l-1 1H0v2h14V1h-3.5ZM13 4H1v12a2.006 2.006 0 0 0 2 2h8a2.006 2.006 0 0 0 2-2Z' data-name='Path 46'/%3E%3C/svg%3E");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 0;
  margin-left: 1rem;
}
.wishlist-popup ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.wishlist-popup input {
  height: auto;
  border-radius: 1rem;
  padding: 1.5rem 1.6rem;
  color: var(--black);
  font-weight: 500;
}
.wishlist-popup form {
  display: grid;
  gap: 1.5rem;
  width: 90%;
  max-width: 35rem;
  margin-inline: auto;
}
.wishlist-popup form .form-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.wishlist-popup form .form-row p {
  margin: 0;
  text-align: start;
}
.wishlist-popup form label {
  text-align: left;
  font-weight: bold;
}
.wishlist-popup form input {
  border-radius: var(--form-input-radius, 4px);
  font-weight: 400;
  outline: none;
  padding-block: var(--form-input-pad-y, 0.75em);
  padding-inline: var(--form-input-pad-y, 0.75em);
  border: 1px solid var(--form-input-bordercolor, #cfcfcf);
}
.wishlist-popup form button {
  margin-top: 1.5rem;
}
.wishlist-popup form button + button {
  margin-top: 0;
  background-color: transparent;
  border-color: var(--black);
  color: var(--black);
}
.wishlist-popup form button + button:hover {
  color: var(--white);
  border-color: var(--black);
  background-color: var(--black);
}
.wishlist-popup form .wishlist-notice {
  margin: -1rem 0 0;
  text-align: start;
}
.wishlist-popup form .wishlist-notice--error, .wishlist-popup form .wishlist-notice--alert {
  color: var(--input-error-color, #ff4848);
}
.wishlist-popup form .wishlist-notice--success {
  color: var(--input-success-color, inherit);
}
.wishlist-popup form .wishlist-notice a {
  color: inherit;
}
.wishlist-popup__product-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}
.wishlist-popup__product-list .wishlist-popup__input-group {
  position: relative;
}
.wishlist-popup__product-list .wishlist-popup__input-group label {
  position: absolute;
  left: 1em;
  top: calc(50% - 0.75em);
  pointer-events: none;
  transition: 0.3s ease;
  transform-origin: left top;
  color: var(--grey-500);
}
.wishlist-popup__product-list .wishlist-popup__input-group input[type=text] {
  padding: 2.25rem 1.6rem 1rem;
}
.wishlist-popup__product-list .wishlist-popup__input-group input[type=text]::-moz-placeholder {
  display: none;
}
.wishlist-popup__product-list .wishlist-popup__input-group input[type=text]::placeholder {
  display: none;
}
.wishlist-popup__product-list .wishlist-popup__input-group:where(.has-value, :has(input:focus)) label {
  top: 0.25em;
  scale: 0.7;
}
.wishlist-popup__product-list [data-remove-line=true] {
  position: relative;
  margin-bottom: 3rem;
}
.wishlist-popup__product-list [data-remove-line=true] *:not(.btn, button, .wishlist-remove-notice) {
  opacity: 0.75;
  filter: blur(1px);
  pointer-events: none;
}
.wishlist-popup__product-list .wishlist-remove-notice {
  font-size: 1.4rem;
  position: absolute;
  bottom: -0.5em;
  left: 0;
  width: 100%;
  translate: 0 100%;
  color: var(--grey-600);
  margin: 0;
}
.wishlist-popup__product-list .wishlist-remove-notice button {
  border: none;
  background: transparent;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.wishlist-popup__product-list .wishlist-remove-notice button:hover {
  color: var(--black);
}
.wishlist-popup__product-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.wishlist-popup .register-btn {
  margin-top: 1.5rem;
  background: transparent;
  color: black;
  text-decoration: underline;
  font-weight: 400;
  border: none;
  padding: 0;
}
.wishlist-popup .register-btn:not(.active) {
  display: none;
}
.wishlist-popup .wishlist-form-part.wishlist-user-forgotpassword:not(.active) button.backtologin {
  display: none;
}
.wishlist-popup .wishlist-form-part:not(.active) {
  display: none;
}
.wishlist-productowned-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border-radius: 6px;
  border: 1px solid var(--grey-420);
  padding: 0.25em 0.5em;
  margin-block: 0.5em;
  position: relative;
  font-size: 1.4rem;
}
.wishlist-productowned-checkbox input[type=checkbox] {
  display: none;
}
.wishlist-productowned-checkbox::before, .wishlist-productowned-checkbox::after {
  content: "";
  aspect-ratio: 1;
}
.wishlist-productowned-checkbox::before {
  display: inline-block;
  width: 1.15em;
  border-radius: 3px;
  border: 2px solid var(--grey-420);
}
.wishlist-productowned-checkbox::after {
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  width: 0.6325em;
  position: absolute;
  left: 1rem;
  rotate: 8deg;
}
.wishlist-productowned-checkbox:has(:checked)::before {
  border-color: var(--black);
  background-color: var(--black);
}
.wishlist-productowned-checkbox:has(:checked)::after {
  background-color: var(--white);
}
.wishlist-add.is-loading, .wishlist-share.is-loading, .wishlist-remove.is-loading {
  border-color: var(--toggler-bg-active);
  background-color: var(--toggler-bg-active);
}
.wishlist-add.is-loading:not(:has(span)), .wishlist-share.is-loading:not(:has(span)), .wishlist-remove.is-loading:not(:has(span)) {
  padding: 0;
}
@keyframes spinner {
  to {
    rotate: 360deg;
  }
}
.wishlist-add.is-loading svg, .wishlist-share.is-loading svg, .wishlist-remove.is-loading svg {
  display: none;
}
.wishlist-add.is-loading:before, .wishlist-share.is-loading:before, .wishlist-remove.is-loading:before {
  content: "";
  display: inline-block;
  width: var(--btn-icon-size, 3rem);
  height: var(--btn-icon-size, 3rem);
  border-radius: 50%;
  border-top: 2px solid var(--heart-fill-active);
  border-right: 2px solid transparent;
  animation: spinner 0.8s linear infinite;
  background-image: none;
  background-color: transparent;
}
.wishlist-add.is-loading:before:has(span), .wishlist-share.is-loading:before:has(span), .wishlist-remove.is-loading:before:has(span) {
  height: 1em;
  width: 1em;
}

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