.block-product-card__quick-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  cursor: pointer;
  color: rgb(var(--color-button-text));
  background-color: rgb(var(--color-button-background));
  border: 1px solid #5b5e5b;
  border-block-end: 4px solid #ed2533;
  border-radius: 0;
  box-shadow: 3px 3px 0 rgba(var(--color-text), 0.12);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease-out;
}

.block-product-card__quick-add:hover,
.block-product-card__quick-add:focus-visible {
  color: #fff;
  background: #e0202e;
  border-color: #ed2533;
  box-shadow: 3px 3px 0 #111312;
}

.block-product-card__quick-add svg {
  width: 22px;
  height: 22px;
  color: currentcolor;
}
.block-product-card__quick-view-error {
  margin-block: 8px 0;
  color: rgb(var(--color-error-message));
  font-size: max(14px, 0.875rem);
  line-height: 1.4;
}

.block-product-card__layer .block-product-card__quick-view {
  transform: translate(20px, -15px);
}

.block-product-card__quick-view-fallback {
  position: absolute;
  inset-block-start: -10px;
  inset-inline-end: -10px;
  z-index: 4;
}

@media (min-width: 750px) {
  .block-product-card__quick-view {
    opacity: 0;
  }

  .block-product-card__quick-view-fallback {
    transform: translateY(5px);
  }

  .block-product-card:hover .block-product-card__quick-view,
  .block-product-card:focus-within .block-product-card__quick-view {
    opacity: 1;
  }

  .block-product-card:hover .block-product-card__quick-view-fallback,
  .block-product-card:focus-within .block-product-card__quick-view-fallback {
    transform: translateY(0);
  }

  .block-product-card:hover
    .block-product-card__layer
    .block-product-card__quick-view,
  .block-product-card:focus-within
    .block-product-card__layer
    .block-product-card__quick-view {
    transform: translate(20px, -20px);
  }

  .block-product-card:hover .block-product-card__quick-view-fallback:hover,
  .block-product-card:focus-within
    .block-product-card__quick-view-fallback:hover {
    transform: scale(1.15);
  }

  .block-product-card:hover
    .block-product-card__layer
    .block-product-card__quick-view:hover,
  .block-product-card:focus-within
    .block-product-card__layer
    .block-product-card__quick-view:hover {
    transform: translate(20px, -20px) scale(1.15);
  }
}

@media (max-width: 749.98px) {
  .block-product-card__quick-view {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .block-product-card__quick-add {
    transition: none;
  }
}