@import url("https://fonts.googleapis.com/css2?family=Assistant:wght@100;300;400;500;600;700&family=Fira+Sans:wght@100;300;400;500;600;700&family=Josefin+Sans:wght@100;300;400;500;600;700&family=Lato:wght@100;300;400;700&family=Montserrat:wght@100;300;400;500;600;700&family=Mulish:wght@300;400;500;600;700&family=Nunito+Sans:wght@300;400;600;700&family=Open+Sans:wght@300;400;500;600;700&family=Oswald:wght@300;400;500;600;700&family=Poppins:wght@100;300;400;500;600;700&family=PT+Sans:wght@400;700&family=Questrial&family=Raleway:wght@100;300;400;500;600;700&family=Roboto:wght@100;300;400;500;700&family=Source+Sans+3:wght@300;400;500;600;700&family=Titillium+Web:wght@300;400;600;700&family=Work+Sans:wght@100;300;400;500;600;700&family=Cormorant:wght@300;400;500;600;700&family=Crimson+Text:wght@400;600;700&family=IBM+Plex+Serif:wght@100;300;400;500;600;700&family=Libre+Baskerville:wght@400;700&family=Lora:wght@400;500;600;700&family=Merriweather:wght@300;400;700&family=Playfair+Display:wght@400;500;600;700&family=PT+Serif:wght@400;700&family=Slabo+27px&family=Source+Serif+4:wght@300;400;500;600;700&display=swap");

.neli-badge-wrapper {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  display: flex;
  transition: opacity 0.2s ease;
  background: transparent !important;
  background-color: transparent !important;
  overflow: visible !important;
  /* Let height adjust to badge's natural aspect ratio */
}

/* Ensure parent containers don't clip animations */
.neli-badge-wrapper > div {
  overflow: visible !important;
}

/* Fix for Horizon and other themes that add backgrounds to images */
.neli-badge-wrapper *,
.neli-badge-wrapper div {
  background: transparent !important;
  background-color: transparent !important;
}

.neli-size-small {
  width: 35%;
  min-width: 50px;
  max-width: 120px;
}

.neli-size-medium {
  width: 50%;
  min-width: 70px;
  max-width: 180px;
}

.neli-size-large {
  width: 65%;
  min-width: 90px;
  max-width: 240px;
}

.neli-badge-wrapper img,
.neli-badge-wrapper svg {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  display: block !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.neli-badge-text {
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  padding: 5px 12px;
  border-radius: 4px;
  background: #4caf50;
  color: #ffffff;
  width: fit-content;
  height: fit-content;
}

/* Position classes - Corner positions align to corners */
.neli-position-top-left {
  top: 10px;
  left: 10px;
  align-items: flex-start;
  justify-content: flex-start;
}

.neli-position-top-right {
  top: 10px;
  right: 10px;
  align-items: flex-start;
  justify-content: flex-end;
}

.neli-position-bottom-left {
  bottom: 10px;
  left: 10px;
  align-items: flex-end;
  justify-content: flex-start;
}

.neli-position-bottom-right {
  bottom: 10px;
  right: 10px;
  align-items: flex-end;
  justify-content: flex-end;
}

/* Center positions - Use centering */
.neli-position-top-center {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  align-items: flex-start;
  justify-content: center;
}

.neli-position-bottom-center {
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  align-items: flex-end;
  justify-content: center;
}

.neli-position-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  align-items: center;
  justify-content: center;
}

.neli-position-middle-left {
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  align-items: center;
  justify-content: flex-start;
}

.neli-position-middle-right {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  align-items: center;
  justify-content: flex-end;
}

/* Label Animations */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.85;
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes appearAbove {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes appearBelow {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animationSpin {
  animation: spin 2s linear infinite;
  overflow: visible !important;
}

.animationPulse {
  animation: pulse 2s ease-in-out infinite;
  overflow: visible !important;
}

.animationBounce {
  animation: bounce 1s ease-in-out infinite;
  overflow: visible !important;
}

.animationFadeIn {
  animation: fadeIn 1s ease-in-out;
}

.animationAppearAbove {
  animation: appearAbove 0.5s ease-out;
}

.animationAppearBelow {
  animation: appearBelow 0.5s ease-out;
}

/* Override theme's overflow:hidden on containers that have badges */
.media:has(.neli-badge-wrapper),
.product__media:has(.neli-badge-wrapper),
.card__media:has(.neli-badge-wrapper),
[class*="product"]:has(.neli-badge-wrapper) > .media {
  overflow: visible !important;
}

.product-recommendations [data-badge-id="preview"] {
  display: none !important;
}

/* Only show preview badge on first media item in gallery */
.media-gallery__grid li:not(:first-child) [data-badge-id="preview"] {
  display: none !important;
}