/* Product popup v2. Geometry is intentionally isolated from legacy popup rules. */
#productPopup.product-popup-v2 {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

#productPopup.product-popup-v2 > .product-popup-v2__dialog {
  position: relative !important;
  inset: auto !important;
  width: min(1080px, 100%) !important;
  max-width: 1080px !important;
  height: min(760px, 100%) !important;
  max-height: 760px !important;
  margin: 0 !important;
  padding: 24px !important;
  transform: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
}

#productPopup .product-popup-v2__content {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#productPopup .product-popup-v2__close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  z-index: 20 !important;
  margin: 0 !important;
  transform: none !important;
}

#productPopup .productPopup_container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 32px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#productPopup .productPopup_container__images,
#productPopup .productPopup_container__info {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

#productPopup .productPopup_container__images__swiperWrapper {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
}

#productPopup .productPopup_container__images__swiper {
  width: 100% !important;
  height: min(42vh, 420px) !important;
  min-height: 280px !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

#productPopup #productPopup_container__images__swiper_wrapper,
#productPopup #productPopup_container__images__swiper_wrapper .swiper-slide {
  height: 100% !important;
}

#productPopup .productPopup_container__image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 16px !important;
}

#productPopup .productPopup--cart_button__mobile {
  display: none !important;
}

@media (max-width: 900px) {
  #productPopup.product-popup-v2 {
    padding-top: max(16px, env(safe-area-inset-top)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
  }

  #productPopup.product-popup-v2 > .product-popup-v2__dialog {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    border-radius: 20px !important;
  }

  #productPopup .product-popup-v2__content {
    margin: 0 !important;
    padding: 14px 12px 84px !important;
  }

  #productPopup .productPopup_container {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    min-height: 0 !important;
  }

  #productPopup .productPopup_container__images {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #productPopup .productPopup_container__images__swiper {
    height: clamp(220px, 42vh, 360px) !important;
    min-height: 0 !important;
  }

  #productPopup .productPopup_container__image {
    object-fit: contain !important;
    background: #fff !important;
  }

  #productPopup .productPopup_container__info {
    padding: 0 !important;
  }

  #productPopup .product-popup-v2__close {
    position: fixed !important;
    top: max(24px, calc(env(safe-area-inset-top) + 8px)) !important;
    right: max(18px, calc(env(safe-area-inset-right) + 8px)) !important;
    left: auto !important;
    margin: 0 !important;
  }

  #productPopup .productPopup--cart_button__desktop {
    display: none !important;
  }

  #productPopup .productPopup--cart_button__mobile {
    display: block !important;
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 10px !important;
    top: auto !important;
    width: auto !important;
    z-index: 15 !important;
    margin: 0 !important;
    transform: none !important;
  }

  #productPopup .productPopup__onBreakfast {
    margin-top: 12px !important;
  }
}


/* Product popup refinements: rounded media and reliable recommendation badges. */
#productPopup .productPopup_container__images__swiper,
#productPopup #productPopup_container__images__swiper_wrapper,
#productPopup #productPopup_container__images__swiper_wrapper .swiper-slide {
  border-radius: 20px !important;
  overflow: hidden !important;
}

#productPopup .productPopup_container__image {
  border-radius: 20px !important;
}

#productPopup .productPopup__onBreakfast__item__sale--in-cart {
  white-space: nowrap;
}


/* Final media clipping: Swiper uses transforms, so clip the visible slide and
   image explicitly instead of relying on border-radius propagation. */
#productPopup .productPopup_container__images__swiper,
#productPopup #productPopup_container__images__swiper_wrapper .swiper-slide,
#productPopup .productPopup_container__image {
  border-radius: 22px !important;
  -webkit-clip-path: inset(0 round 22px) !important;
  clip-path: inset(0 round 22px) !important;
}

#productPopup #productPopup_container__images__swiper_wrapper .swiper-slide {
  overflow: hidden !important;
  isolation: isolate !important;
  transform: translateZ(0);
}

#productPopup .productPopup_container__image {
  overflow: hidden !important;
  transform: translateZ(0);
}

/* Recommendation badges: compact, contained and never wider than the image. */
#productPopup .productPopup__onBreakfast__item__sale {
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 16px) !important;
  height: auto !important;
  min-height: 28px !important;
  padding: 4px 8px !important;
  left: 8px !important;
  right: auto !important;
  top: 8px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

/* Definitive visible rounding for the main product photo.
   The photo often has a white background, so a separate framed layer is used
   to make the rounded contour visible instead of relying on the image itself. */
#productPopup .product-popup-v2__media-slide {
  padding: 1px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border-radius: 24px !important;
  overflow: visible !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
}

#productPopup .product-popup-v2__media-frame {
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 1px solid rgba(11, 11, 17, 0.10) !important;
  border-radius: 24px !important;
  background: #f4f4f4 !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
  transform: translateZ(0) !important;
}

#productPopup .product-popup-v2__media-frame > .productPopup_container__image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 23px !important;
  object-fit: contain !important;
  background: #f4f4f4 !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
}


/* 100 g product feedback inside the product popup.
   Mirrors the interaction feedback used on product cards on the home page. */
#productPopup .productPopup--cart_button .productPopup--button.productPopup_container__button {
  position: relative !important;
  overflow: hidden !important;
  transform: translateZ(0);
}

#productPopup .productPopup--cart_button .productPopup--button.np-popup-100g-press {
  animation: npPopup100gPress 180ms ease-out;
}

#productPopup .productPopup--cart_button .productPopup--button.np-popup-100g-ripple::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: var(--np-popup-ripple-x, 50%);
  top: var(--np-popup-ripple-y, 50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: npPopup100gRipple 420ms ease-out forwards;
}

#productPopup .productPopup--cart_button .product--cartButton_inCart > .l-m.np-popup-100g-count-pop,
#productPopup .productPopup--cart_button .productPopup_container__button__price.np-popup-100g-count-pop {
  display: inline-block;
  animation: npPopup100gCountPop 260ms cubic-bezier(.2,.8,.3,1.25);
  transform-origin: center;
}

#productPopup .np-popup-100g-added-check {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2e9f57;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  animation: npPopup100gCheck 560ms ease-out forwards;
}

html[dir="rtl"] #productPopup .np-popup-100g-added-check,
body.rtl #productPopup .np-popup-100g-added-check {
  right: auto;
  left: 12px;
}

@keyframes npPopup100gPress {
  0% { transform: scale(1); }
  45% { transform: scale(.94); }
  100% { transform: scale(1); }
}

@keyframes npPopup100gRipple {
  0% { opacity: .75; transform: translate(-50%, -50%) scale(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(16); }
}

@keyframes npPopup100gCountPop {
  0% { opacity: .55; transform: scale(.72); }
  70% { opacity: 1; transform: scale(1.16); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes npPopup100gCheck {
  0% { opacity: 0; transform: scale(.4) rotate(-18deg); }
  28% { opacity: 1; transform: scale(1.12) rotate(0); }
  72% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.82); }
}

@media (prefers-reduced-motion: reduce) {
  #productPopup .np-popup-100g-press,
  #productPopup .np-popup-100g-ripple::after,
  #productPopup .np-popup-100g-count-pop,
  #productPopup .np-popup-100g-added-check {
    animation: none !important;
  }
}


/* Current weight badge for products sold in 100 g increments. */
#productPopup .product-popup-v2__media-frame {
  position: relative !important;
}

#productPopup .np-popup-100g-weight {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 18;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(11, 11, 17, .78);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

html[dir="rtl"] #productPopup .np-popup-100g-weight,
body.rtl #productPopup .np-popup-100g-weight {
  left: auto;
  right: 12px;
}

/* 100 g overlay isolation: these elements are deliberately outside every
   Swiper slide so quantity updates can never modify or invalidate the image. */
#productPopup .productPopup_container__images__swiperWrapper {
  position: relative !important;
}

#productPopup .productPopup_container__images__swiperWrapper > .np-popup-100g-weight {
  left: 12px !important;
  bottom: 12px !important;
}

#productPopup .productPopup_container__images__swiperWrapper > .np-popup-100g-added-check {
  right: 12px !important;
  bottom: 12px !important;
}

html[dir="rtl"] #productPopup .productPopup_container__images__swiperWrapper > .np-popup-100g-weight,
body.rtl #productPopup .productPopup_container__images__swiperWrapper > .np-popup-100g-weight {
  left: auto !important;
  right: 12px !important;
}

html[dir="rtl"] #productPopup .productPopup_container__images__swiperWrapper > .np-popup-100g-added-check,
body.rtl #productPopup .productPopup_container__images__swiperWrapper > .np-popup-100g-added-check {
  right: auto !important;
  left: 12px !important;
}

/* Stable 100 g feedback: pseudo-elements only; never mutate Swiper slides. */
#productPopup .productPopup_container__images__swiperWrapper {
  position: relative !important;
}

#productPopup .productPopup_container__images__swiperWrapper.np-popup-100g-has-weight::after {
  content: attr(data-np-100g-weight) !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  bottom: auto !important;
  z-index: 32 !important;
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-family: Inter, sans-serif !important;
  font-size: clamp(42px, 13vw, 68px) !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  text-align: center !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.28) !important;
  box-shadow: none !important;
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1 !important;
  pointer-events: none !important;
  will-change: transform, opacity !important;
}

#productPopup .productPopup_container__images__swiperWrapper.np-popup-100g-show-check::before {
  content: "✓" !important;
  position: absolute !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 31 !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: #27ae60 !important;
  color: #fff !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  pointer-events: none !important;
  animation: npPopup100gCheck 560ms ease-out forwards !important;
}

#productPopup .productPopup_container__images__swiperWrapper.np-popup-100g-count-pop::after {
  animation: npPopupUnitCountPop 500ms cubic-bezier(.2,.82,.28,1.24) both !important;
}

#productPopup .productPopup_container__images__swiperWrapper .swiper-wrapper,
#productPopup .productPopup_container__images__swiperWrapper .swiper-slide,
#productPopup .productPopup_container__images__swiperWrapper .product-popup-v2__media-frame,
#productPopup .productPopup_container__images__swiperWrapper .productPopup_container__image {
  visibility: visible !important;
  opacity: 1 !important;
}

#productPopup .productPopup_container__images__swiperWrapper .productPopup_container__image {
  display: block !important;
}

html[dir="rtl"] #productPopup .productPopup_container__images__swiperWrapper.np-popup-100g-has-weight::after,
body.rtl #productPopup .productPopup_container__images__swiperWrapper.np-popup-100g-has-weight::after {
  left: 50% !important;
  right: auto !important;
}

html[dir="rtl"] #productPopup .productPopup_container__images__swiperWrapper.np-popup-100g-show-check::before,
body.rtl #productPopup .productPopup_container__images__swiperWrapper.np-popup-100g-show-check::before {
  right: auto !important;
  left: 18px !important;
}

/* Unified, non-destructive popup feedback for all products. */
#productPopup .productPopup--cart_button .productPopup--button.np-popup-feedback-press {
  animation: npPopupFeedbackPress 240ms cubic-bezier(.22,.75,.28,1) both !important;
}

#productPopup .productPopup--cart_button .productPopup--button.np-popup-feedback-ripple::after {
  content: "" !important;
  position: absolute !important;
  left: var(--np-popup-ripple-x, 50%) !important;
  top: var(--np-popup-ripple-y, 50%) !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.48) !important;
  transform: translate(-50%, -50%) scale(0) !important;
  animation: npPopupFeedbackRipple 500ms ease-out both !important;
  pointer-events: none !important;
}

#productPopup .productPopup_container__images {
  position: relative !important;
}

#productPopup .productPopup_container__images.np-popup-photo-soft-pulse {
  animation: npPopupPhotoSoftPulse 520ms cubic-bezier(.22,.75,.28,1) both !important;
}

#productPopup .productPopup_container__images.np-popup-photo-confirm::after {
  content: "✓" !important;
  position: absolute !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 40 !important;
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: #27ae60 !important;
  color: #fff !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 22px rgba(39,174,96,.28) !important;
  pointer-events: none !important;
  animation: npPopupConfirmSoft 660ms cubic-bezier(.2,.8,.3,1) both !important;
}

@keyframes npPopupFeedbackPress {
  0%,100% { transform: scale(1); }
  45% { transform: scale(.975); }
}

@keyframes npPopupFeedbackRipple {
  0% { opacity: .55; transform: translate(-50%,-50%) scale(0); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(24); }
}

@keyframes npPopupPhotoSoftPulse {
  0%,100% { filter: brightness(1); }
  42% { filter: brightness(1.035); }
}

@keyframes npPopupConfirmSoft {
  0% { opacity: 0; transform: translateY(8px) scale(.72); }
  45% { opacity: 1; transform: translateY(0) scale(1.05); }
  100% { opacity: 0; transform: translateY(-2px) scale(.96); }
}

html[dir="rtl"] #productPopup .productPopup_container__images.np-popup-photo-confirm::after,
body.rtl #productPopup .productPopup_container__images.np-popup-photo-confirm::after {
  right: auto !important;
  left: 18px !important;
}

@media (prefers-reduced-motion: reduce) {
  #productPopup .np-popup-feedback-press,
  #productPopup .np-popup-feedback-ripple::after,
  #productPopup .np-popup-photo-soft-pulse,
  #productPopup .np-popup-photo-confirm::after {
    animation: none !important;
  }
}

/* Product description is independent from cart quantity/AJAX updates. */
#productPopup #productPopup_container__desc {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}


/* Maximum-stock overlay inside the product popup. The label is supplied by
   WordPress/Loco through args.i18n.no_more_stock. */
#productPopup .productPopup_container__images.np-popup-stock-limit::before {
  content: attr(data-np-stock-limit-label) !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 35 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  border-radius: 24px !important;
  background: rgba(11, 11, 17, .28) !important;
  color: #fff !important;
  font-family: Inter, sans-serif !important;
  font-size: clamp(22px, 6vw, 32px) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  text-align: center !important;
  pointer-events: none !important;
  opacity: 1 !important;
  animation: npPopupStockLimitIn 220ms ease-out both !important;
}

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

@media (prefers-reduced-motion: reduce) {
  #productPopup .productPopup_container__images.np-popup-stock-limit::before {
    animation: none !important;
  }
}


/* Large animated cart quantity for ordinary products in the product popup.
   100 g products continue using the existing grams overlay. */
#productPopup .productPopup_container__images__swiperWrapper.np-popup-unit-has-count::after {
  content: attr(data-np-unit-count) !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 32 !important;
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-family: Inter, sans-serif !important;
  font-size: clamp(48px, 15vw, 76px) !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  text-align: center !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.28) !important;
  box-shadow: none !important;
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1 !important;
  pointer-events: none !important;
  will-change: transform, opacity !important;
}

#productPopup .productPopup_container__images__swiperWrapper.np-popup-unit-count-pop::after {
  animation: npPopupUnitCountPop 500ms cubic-bezier(.2,.82,.28,1.24) both !important;
}

@keyframes npPopupUnitCountPop {
  0%   { opacity: .18; transform: translate(-50%, -50%) scale(.62); }
  42%  { opacity: 1;   transform: translate(-50%, -50%) scale(1.18); }
  72%  { opacity: 1;   transform: translate(-50%, -50%) scale(.96); }
  100% { opacity: 1;   transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 650px) {
  #productPopup .productPopup_container__images__swiperWrapper.np-popup-unit-has-count::after {
    min-width: 0 !important;
    height: auto !important;
    font-size: clamp(44px, 16vw, 66px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #productPopup .productPopup_container__images__swiperWrapper.np-popup-unit-count-pop::after {
    animation: none !important;
  }
}