/* =========================================================
   PEPPYS PROMO — cart badge + fly-to-cart
   Tokens redeclared locally, same as promo.css: the brand variables live in
   Divi's Custom CSS and depending on that loading first has broken styling
   on this site before.
   ========================================================= */

.pep-cart-anchor {
  position: relative !important; /* Divi leaves .et-cart-info static */
  overflow: visible !important;
}

/* The badge is a <span> inside Divi's .et-cart-info, which means it inherits
   two things it must not:

   1. Divi draws the cart glyph with `.et-cart-info span:before { content }`.
      Our badge is also a span in there, so it was rendering the shopping-cart
      icon INSIDE the badge — measured 47px wide, covering 43% of the icon.
   2. Divi's rules are ID-scoped (#et-top-navigation ...), so a bare
      .pep-cart-badge loses on specificity: the text came out Divi's grey at
      16px instead of dark on gold at 12px.

   Hence the ID-matched selector and the !important on anything Divi also sets. */
.pep-cart-badge::before,
.pep-cart-badge::after,
#et-top-navigation .et-cart-info .pep-cart-badge::before,
#et-top-navigation .et-cart-info .pep-cart-badge::after {
  content: none !important;
  display: none !important;
}

.pep-cart-anchor .pep-cart-badge,
#et-top-navigation .et-cart-info .pep-cart-badge {
  --pc-gold: #FFC21E;
  --pc-ink: #050912;
  position: absolute !important;
  top: -7px !important;
  right: -11px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 5;
  display: block !important;
  box-sizing: border-box !important;
  min-width: 18px !important;
  width: auto !important;
  height: 18px !important;
  padding: 0 5px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--pc-gold) !important;
  color: var(--pc-ink) !important;
  font-family: "Barlow Condensed", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  font-style: normal !important;
  line-height: 18px !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  text-indent: 0 !important;
  text-transform: none !important;
  pointer-events: none;
  box-shadow: 0 2px 10px -2px rgba(255, 194, 30, .9);
}

.pep-cart-anchor .pep-cart-badge[hidden],
#et-top-navigation .et-cart-info .pep-cart-badge[hidden] { display: none !important; }

/* Pop when the number changes, so a second add of the same item still
   registers visually even though nothing else on screen moves. */
.pep-cart-badge.is-pop { animation: pep-badge-pop .55s cubic-bezier(.16, 1, .3, 1); }

@keyframes pep-badge-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.55); }
  60%  { transform: scale(.92); }
  100% { transform: scale(1); }
}

/* The cart icon itself reacts on impact. */
.pep-cart-anchor.is-hit { animation: pep-cart-hit .55s cubic-bezier(.16, 1, .3, 1); }

@keyframes pep-cart-hit {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(3px) scale(.9); }
  60%  { transform: translateY(-2px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}

/* The flying vial. position:fixed so page scroll cannot drag it off course
   mid-flight, and pointer-events:none so it never eats a click. */
.pep-fly {
  position: fixed;
  z-index: 99998;
  margin: 0;
  padding: 0;
  border-radius: 10px;
  object-fit: cover;
  pointer-events: none;
  will-change: transform, opacity;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .75);
}

@media (prefers-reduced-motion: reduce) {
  .pep-cart-badge.is-pop,
  .pep-cart-anchor.is-hit { animation: none; }
  .pep-fly { display: none; }
}