/** Shopify CDN: Minification failed

Line 1006:0 Unexpected "}"

**/
/* =============================================
   CART PROGRESS BAR: PREMIUM v4.0
   Designed for conversion. Clean, modern, alive.
   ============================================= */

/* ===== RESET & OVERFLOW ===== */
#CartDrawer,
#CartDrawer .drawer__inner,
#CartDrawer .drawer__contents,
#CartDrawer form {
  overflow-x: hidden !important;
}

/* =============================================
   MAIN CONTAINER
   ============================================= */
.cpb {
  position: relative !important;
  padding: 16px 18px 14px !important;
  margin: 0 0 14px 0 !important;
  background: linear-gradient(135deg, var(--cpb-bg, #f0fdf4) 0%, var(--cpb-bg-end, #dcfce7) 100%) !important;
  border: 1px solid var(--cpb-border, #bbf7d0) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(34, 197, 94, 0.06) !important;
  box-sizing: border-box !important;
  display: block !important;
  transition: box-shadow 0.4s ease, border-color 0.4s ease !important;
}

/* Estado completo: glow sutil */
.cpb.cpb--complete {
  border-color: var(--cpb-color, #22c55e) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(34, 197, 94, 0.12) !important;
}

/* =============================================
   HEADER  (titulo + counter)
   ============================================= */
.cpb__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 0 12px 0 !important;
}

.cpb__title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--cpb-color-dark, #166534) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  flex: 1 !important;
  text-align: var(--cpb-title-align, left) !important;
}

/* Pill counter: "1/2" */
.cpb__counter {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 22px !important;
  padding: 0 8px !important;
  border-radius: 20px !important;
  background: var(--cpb-color, #22c55e) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 4px rgba(34, 197, 94, 0.25) !important;
}

/* =============================================
   PROGRESS BAR  (nodes + track inline)
   ============================================= */
.cpb__bar {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== TRACK (trilha) ===== */
.cpb__track {
  flex: 1 !important;
  height: var(--cpb-bar-h, 8px) !important;
  background: var(--cpb-track, #e5e7eb) !important;
  border-radius: 100px !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 -3px !important;
  z-index: 1 !important;
}

/* ===== FILL (preenchimento) ===== */
.cpb__fill {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  min-width: 0 !important;
  border-radius: 100px !important;
  background: linear-gradient(90deg, var(--cpb-color, #22c55e), var(--cpb-color-dark, #16a34a)) !important;
  box-shadow: var(--cpb-glow, none) !important;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ===== SHIMMER (brilho animado correndo na barra) ===== */
.cpb__shimmer {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 40%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.35) 60%,
    transparent 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: cpb-shimmer 2.2s ease-in-out infinite !important;
  border-radius: 100px !important;
}

@keyframes cpb-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =============================================
   NODES (nos circulares)
   ============================================= */
.cpb__node {
  position: relative !important;
  width: var(--cpb-node, 28px) !important;
  height: var(--cpb-node, 28px) !important;
  min-width: var(--cpb-node, 28px) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  z-index: 3 !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease !important;
}

.cpb__node svg {
  width: var(--cpb-svg, 14px) !important;
  height: var(--cpb-svg, 14px) !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.cpb__emoji {
  font-size: calc(var(--cpb-node, 28px) * 0.48) !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Imagem customizada dentro do nó */
.cpb__icon-img {
  width: calc(var(--cpb-node, 28px) * 0.60) !important;
  height: calc(var(--cpb-node, 28px) * 0.60) !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1)) !important;
}

/* Presente das faixas por conquistar: emoji colorido no lugar do desenho em
   SVG cinzento. O tamanho e o pulso ficam mais abaixo, no bloco dos presentes,
   porque ha regras posteriores a disputar o mesmo tamanho de letra. */

/* --- Estado: Completo --- */
.cpb__node--done {
  background: linear-gradient(135deg, var(--cpb-color, #22c55e), var(--cpb-color-dark, #16a34a)) !important;
  border: 2.5px solid var(--cpb-color, #22c55e) !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3) !important;
  transform: scale(1) !important;
}
.cpb__node--done svg {
  color: #fff !important;
}
.cpb__node--done .cpb__emoji {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1)) !important;
}

/* --- Estado: Proximo --- */
.cpb__node--next {
  background: #fff !important;
  border: 2.5px solid var(--cpb-color, #22c55e) !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1) !important;
}

/* --- Estado: Pendente --- */
.cpb__node--pending {
  background: #fff !important;
  border: 2.5px solid var(--cpb-track, #d1d5db) !important;
  box-shadow: none !important;
}

/* --- Pulse --- */
.cpb__node--pulse {
  animation: cpb-pulse 2s ease-in-out infinite !important;
}

@keyframes cpb-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }
}

/* =============================================
   LABELS (abaixo da barra)
   ============================================= */
.cpb__labels {
  display: flex !important;
  justify-content: space-between !important;
  margin: 6px 0 0 0 !important;
  padding: 0 2px !important;
}

.cpb__label {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--cpb-color-dark, #166534) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  opacity: 0.7 !important;
}

/* =============================================
   MESSAGE (texto de chamada)
   ============================================= */
.cpb__msg {
  text-align: center !important;
  font-size: 12px !important;
  color: #374151 !important;
  margin: 10px 0 0 0 !important;
  padding: 8px 12px !important;
  line-height: 1.45 !important;
  background: rgba(255, 255, 255, 0.55) !important;
  border-radius: 8px !important;
  border: none !important;
}

.cpb__msg strong {
  color: var(--cpb-color-dark, #166534) !important;
  font-weight: 700 !important;
}

/* Mensagem de sucesso */
.cpb--complete .cpb__msg {
  background: rgba(34, 197, 94, 0.08) !important;
  color: var(--cpb-color-dark, #166534) !important;
  font-weight: 600 !important;
}

/* =============================================
   COMPLETE STATE: celebracao sutil
   ============================================= */

/* Nos completados fazem um bounce sutil */
.cpb--complete .cpb__node--done {
  animation: cpb-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

@keyframes cpb-pop {
  0%   { transform: scale(0.8); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Barra cheia tem um brilho estatico sutil */
.cpb--complete .cpb__fill {
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.3) !important;
}

/* Track fica verde quando completo */
.cpb--complete .cpb__track {
  background: linear-gradient(90deg, var(--cpb-color, #22c55e), var(--cpb-color-dark, #16a34a)) !important;
}

/* =============================================
   RESPONSIVO
   ============================================= */
@media screen and (max-width: 480px) {
  .cpb {
    padding: 14px 14px 12px !important;
    border-radius: 10px !important;
  }

  .cpb__title {
    font-size: 12px !important;
  }

  .cpb__counter {
    height: 20px !important;
    min-width: 32px !important;
    font-size: 10px !important;
    padding: 0 6px !important;
  }

  .cpb__msg {
    font-size: 11px !important;
    padding: 6px 10px !important;
    margin-top: 8px !important;
  }

  .cpb__label {
    font-size: 9px !important;
  }
}

/* =============================================
   ECONOMIA / DESCONTO  (reusavel)
   ============================================= */
.cart-drawer__economy {
  border-left: 4px solid var(--cpb-color, #22c55e);
  background-color: var(--cpb-bg, #f0fdf4);
  padding: 10px 14px;
  margin: 14px 0;
  border-radius: 0 8px 8px 0;
}

.cart-drawer__economy-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.cart-drawer__economy-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-drawer__economy-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-color: var(--cpb-color, #22c55e);
  border-radius: 50%;
  flex-shrink: 0;
}

.cart-drawer__economy-icon svg {
  color: #ffffff;
}

.cart-drawer__economy-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--cpb-color-dark, #166534);
  white-space: nowrap;
  text-transform: none;
}

.cart-drawer__economy-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--cpb-color, #16a34a);
  white-space: nowrap;
  margin-left: auto;
  text-align: right;
}

/* PASSO 4: COLAR NO FINAL DO assets/component-progress-bar.css
   ============================================================
   Cola tudo abaixo depois do último } do arquivo
   ============================================================ */

/* =============================================
   MILESTONE MARKER (inside track)
   For dual-promo unified bar
   ============================================= */
.cpb__milestone {
  position: absolute !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 5 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.cpb__milestone-node {
  width: var(--cpb-node, 28px) !important;
  height: var(--cpb-node, 28px) !important;
  min-width: var(--cpb-node, 28px) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease !important;
}

.cpb__milestone-node svg {
  width: var(--cpb-svg, 14px) !important;
  height: var(--cpb-svg, 14px) !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.cpb__milestone-node .cpb__emoji {
  font-size: calc(var(--cpb-node, 28px) * 0.48) !important;
}

.cpb__milestone-node .cpb__icon-img {
  width: calc(var(--cpb-node, 28px) * 0.60) !important;
  height: calc(var(--cpb-node, 28px) * 0.60) !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1)) !important;
}

.cpb__milestone-node--done {
  background: linear-gradient(135deg, var(--cpb-color, #22c55e), var(--cpb-color-dark, #16a34a)) !important;
  border: 2.5px solid var(--cpb-color, #22c55e) !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3) !important;
}

.cpb__milestone-node--done svg {
  color: #fff !important;
}

.cpb__milestone-node--next {
  background: #fff !important;
  border: 2.5px solid var(--cpb-color, #22c55e) !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1) !important;
}

.cpb__milestone-node--pending {
  background: #fff !important;
  border: 2.5px solid var(--cpb-track, #d1d5db) !important;
  box-shadow: none !important;
}

.cpb__milestone-label {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--cpb-color-dark, #166534) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  opacity: 0.8 !important;
}

/* Track needs extra padding when milestones exist */
.cpb__bar--milestones .cpb__track {
  overflow: visible !important;
  margin: 0 -3px !important;
}

/* Fill stays clipped */
.cpb__bar--milestones .cpb__fill {
  border-radius: 100px !important;
  overflow: hidden !important;
}

/* Adjust labels spacing for milestone label room */
.cpb__labels--dual {
  margin-top: 10px !important;
}

/* =============================================
   PROMO TAGS (pill indicators below bar)
   ============================================= */
.cpb__tags {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 12px 0 0 0 !important;
}

.cpb__tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border: 1.5px solid var(--cpb-color, #22c55e) !important;
  color: var(--cpb-color-dark, #166534) !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
  text-transform: uppercase !important;
}

.cpb__tag svg {
  flex-shrink: 0 !important;
}

.cpb__tag--done {
  background: var(--cpb-color, #22c55e) !important;
  color: #fff !important;
  border-color: var(--cpb-color, #22c55e) !important;
}

.cpb__tag--done svg {
  color: #fff !important;
}

.cpb__tag--accent {
  border-color: var(--cpb-color2, #8b5cf6) !important;
  color: var(--cpb-color2-dark, #5b21b6) !important;
}

.cpb__tag--accent-done {
  background: var(--cpb-color2, #8b5cf6) !important;
  color: #fff !important;
  border-color: var(--cpb-color2, #8b5cf6) !important;
}

/* Message styling for milestone achieved state */
.cpb__msg--milestone {
  background: rgba(34, 197, 94, 0.08) !important;
  border-left: 3px solid var(--cpb-color, #22c55e) !important;
  border-radius: 0 8px 8px 0 !important;
}

/* =============================================
   NO FINAL: usa a cor de destaque da maior faixa
   (com uma faixa so, --cpb-color2 e igual a --cpb-color)
   ============================================= */
.cpb__node--end.cpb__node--done {
  background: linear-gradient(135deg, var(--cpb-color2, #22c55e), var(--cpb-color2-dark, #16a34a)) !important;
  border-color: var(--cpb-color2, #22c55e) !important;
}

.cpb__node--end.cpb__node--next {
  border-color: var(--cpb-color2, #22c55e) !important;
}

/* =============================================
   COMPLETE STATE: preenchimento em degrade
   ============================================= */
.cpb--complete .cpb__fill {
  background: linear-gradient(90deg, var(--cpb-color, #22c55e), var(--cpb-color2, #8b5cf6)) !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.3) !important;
}

.cpb--complete .cpb__track {
  background: linear-gradient(90deg, var(--cpb-color, #22c55e), var(--cpb-color2, #8b5cf6)) !important;
}

@media screen and (max-width: 480px) {
  .cpb__milestone-label {
    font-size: 8px !important;
  }
  
  .cpb__tags {
    gap: 4px !important;
  }
  
  .cpb__tag {
    font-size: 9px !important;
    padding: 2px 8px !important;
  }
}

/* =============================================
   SKIN "QUEIMA DE ESTOQUE" (fogo)
   Ativado pelo setting cart_progress_skin = 'queima'.
   As cores (fundo/trilha/fill/nós) já vêm de fogo via variáveis inline;
   aqui ficam a fita de isolamento, os textos claros e o glow.
   ============================================= */
.cpb--queima {
  overflow: hidden !important;
  padding: 18px 18px 16px !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.5), 0 0 20px -6px rgba(255, 90, 20, 0.3) !important;
}

/* Fita de isolamento amarela/preta no topo e na base */
.cpb--queima::before,
.cpb--queima::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 6px !important;
  z-index: 3 !important;
  pointer-events: none !important;
  background: repeating-linear-gradient(-45deg, #ffcb05 0, #ffcb05 10px, #171717 10px, #171717 20px) !important;
}
.cpb--queima::before {
  top: 0 !important;
  animation: cpb-tape-a 1.5s linear infinite !important;
}
.cpb--queima::after {
  bottom: 0 !important;
  animation: cpb-tape-b 1.5s linear infinite !important;
}
@keyframes cpb-tape-a {
  from { background-position: 0 0; }
  to   { background-position: 28px 0; }
}
@keyframes cpb-tape-b {
  from { background-position: 0 0; }
  to   { background-position: -28px 0; }
}

/* Textos claros sobre o fundo escuro */
.cpb--queima .cpb__title {
  color: #ffe4cf !important;
}
.cpb--queima .cpb__label {
  color: #ffcfa8 !important;
  opacity: 0.85 !important;
}
.cpb--queima .cpb__msg {
  background: rgba(255, 120, 30, 0.10) !important;
  color: #f2d9c8 !important;
}
.cpb--queima .cpb__msg strong {
  color: #ffb27a !important;
}
.cpb--queima.cpb--complete .cpb__msg {
  background: rgba(255, 120, 30, 0.16) !important;
  color: #ffcaa0 !important;
}

/* Nós ainda não alcançados: interior escuro (em vez de branco) */
.cpb--queima .cpb__node--next,
.cpb--queima .cpb__node--pending,
.cpb--queima .cpb__milestone-node--next,
.cpb--queima .cpb__milestone-node--pending {
  background: #1a1310 !important;
}

/* Pill counter com sombra de fogo */
.cpb--queima .cpb__counter {
  box-shadow: 0 1px 4px rgba(255, 90, 20, 0.4) !important;
}

@media (prefers-reduced-motion: reduce) {
  .cpb--queima::before,
  .cpb--queima::after {
    animation: none !important;
  }
}

/* =============================================
   SKIN "NEON ROSA" (DUPI Store)
   Ativado pelo setting cart_progress_skin = 'neon'.
   As cores continuam a vir dos settings (--cpb-color, --cpb-color-dark,
   --cpb-track, --cpb-bg, --cpb-title-color); aqui entram so o brilho,
   a varredura, o halo dos nos e a pulsacao dos presentes.
   Paleta de referencia: rosa #FF66C4, rosa escuro #E6399F, azul #1800AD.
   ============================================= */
.cpb--neon {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 102, 196, 0.45) !important;
  background:
    radial-gradient(circle at 50% -30%, rgba(255, 102, 196, 0.2), transparent 58%),
    linear-gradient(145deg, var(--cpb-bg, #fffafd) 0%, var(--cpb-bg-end, #ffeef8) 100%) !important;
  box-shadow:
    0 8px 24px rgba(230, 57, 159, 0.12),
    0 0 18px rgba(255, 102, 196, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* Varredura lenta atravessando a caixa */
.cpb--neon::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  top: -60% !important;
  left: -45% !important;
  width: 34% !important;
  height: 220% !important;
  pointer-events: none !important;
  opacity: 0.55 !important;
  transform: rotate(18deg) !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent) !important;
  animation: cpb-neon-shine 7s ease-in-out infinite !important;
}

@keyframes cpb-neon-shine {
  0%, 55%   { left: -45%; opacity: 0; }
  65%       { opacity: 0.6; }
  82%, 100% { left: 125%; opacity: 0; }
}

/* ===== TITULO E ETIQUETAS (azul da marca sobre fundo claro) ===== */
.cpb--neon .cpb__title {
  color: var(--cpb-title-color, var(--cpb-color-dark, #1800AD)) !important;
  text-shadow: 0 0 10px rgba(255, 102, 196, 0.22) !important;
}

.cpb--neon .cpb__label,
.cpb--neon .cpb__milestone-label {
  color: var(--cpb-title-color, var(--cpb-color-dark, #1800AD)) !important;
  font-weight: 700 !important;
  opacity: 0.92 !important;
  text-shadow: 0 0 7px rgba(255, 102, 196, 0.18) !important;
}

/* Com 3 ou 4 faixas as etiquetas dos marcos alinham com as das pontas */
.cpb--neon .cpb__milestone-label {
  top: calc(100% + 10px) !important;
}

/* ===== CONTADOR ===== */
.cpb--neon .cpb__counter {
  background: linear-gradient(135deg, var(--cpb-color-dark, #E6399F), var(--cpb-color, #FF66C4)) !important;
  box-shadow: 0 1px 6px rgba(230, 57, 159, 0.4), 0 0 10px rgba(255, 102, 196, 0.35) !important;
}

/* ===== TRILHA E PREENCHIMENTO ===== */
.cpb--neon .cpb__track {
  background: var(--cpb-track, #ffe1f2) !important;
  box-shadow: inset 0 1px 3px rgba(230, 57, 159, 0.16), 0 0 7px rgba(255, 102, 196, 0.15) !important;
}

.cpb--neon .cpb__fill {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(90deg, var(--cpb-color-dark, #E6399F) 0%, var(--cpb-color, #FF66C4) 55%, #ff8fd4 100%) !important;
  box-shadow:
    0 0 8px rgba(255, 102, 196, 0.72),
    0 0 16px rgba(230, 57, 159, 0.42),
    0 0 24px rgba(255, 102, 196, 0.2) !important;
}

/* Varredura correndo dentro da barra */
.cpb--neon .cpb__fill::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  pointer-events: none !important;
  transform: translateX(-120%) !important;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.65) 50%, transparent 80%) !important;
  animation: cpb-neon-bar 3.8s ease-in-out infinite !important;
}

@keyframes cpb-neon-bar {
  0%, 35%   { transform: translateX(-120%); }
  70%, 100% { transform: translateX(120%); }
}

/* ===== NOS COM HALO ===== */
.cpb--neon .cpb__node--start,
.cpb--neon .cpb__milestone-node,
.cpb--neon .cpb__node--end {
  border-color: var(--cpb-color, #FF66C4) !important;
  box-shadow: 0 0 0 3px rgba(255, 102, 196, 0.14), 0 0 12px rgba(255, 102, 196, 0.32) !important;
}

.cpb--neon .cpb__node--pending,
.cpb--neon .cpb__milestone-node--pending {
  border-color: rgba(255, 102, 196, 0.38) !important;
  box-shadow: 0 0 0 3px rgba(255, 102, 196, 0.07) !important;
}

.cpb--neon .cpb__node--next,
.cpb--neon .cpb__milestone-node--next {
  border-color: var(--cpb-color, #FF66C4) !important;
  box-shadow: 0 0 0 4px rgba(255, 102, 196, 0.18), 0 0 17px rgba(255, 102, 196, 0.55) !important;
}

.cpb--neon .cpb__node--done,
.cpb--neon .cpb__milestone-node--done {
  box-shadow: 0 2px 8px rgba(230, 57, 159, 0.42), 0 0 14px rgba(255, 102, 196, 0.45) !important;
  animation: cpb-neon-reached 1.8s ease-in-out !important;
}

@keyframes cpb-neon-reached {
  0%   { transform: scale(0.88); box-shadow: 0 0 0 0 rgba(255, 102, 196, 0); }
  45%  { transform: scale(1.12); box-shadow: 0 0 0 7px rgba(255, 102, 196, 0.14), 0 0 20px rgba(255, 102, 196, 0.45); }
  100% { transform: scale(1); }
}

/* Pulso do proximo no, em rosa */
.cpb--neon .cpb__node--pulse {
  animation: cpb-neon-pulse 2s ease-in-out infinite !important;
}

@keyframes cpb-neon-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 102, 196, 0.55), 0 0 12px rgba(255, 102, 196, 0.35);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(255, 102, 196, 0), 0 0 18px rgba(255, 102, 196, 0.12);
  }
}

/* ===== PRESENTES A PULSAR NOS MARCOS =====
   Mesmo pulso constante e sincronizado da WM Store (la chama-se
   wmGiftSynchronizedPulse): rapido, com um salto de escala que da para ver de
   longe, e todos os presentes a bater ao mesmo tempo (atraso zero em todos).
   O brilho e o rosa da DUPI, nao o roxo da WM. */
.cpb__emoji--gift,
.cpb--neon .cpb__milestone-node .cpb__emoji,
.cpb--neon .cpb__milestone-node .cpb__icon-img,
.cpb--neon .cpb__node--end .cpb__emoji,
.cpb--neon .cpb__node--end .cpb__icon-img {
  display: inline-block !important;
  line-height: 1 !important;
  transform-origin: 50% 55% !important;
  will-change: transform, filter !important;
  animation: cpb-neon-gift 0.65s ease-in-out infinite !important;
  animation-delay: 0s !important;
}

@keyframes cpb-neon-gift {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 1px 2px rgba(230, 57, 159, 0.25)) brightness(1);
  }
  50% {
    transform: translateY(-1px) scale(1.16);
    filter: drop-shadow(0 3px 7px rgba(255, 102, 196, 0.6)) brightness(1.12);
  }
}

/* O presente e um pouco maior que os outros emojis para ler bem dentro do
   circulo. Precisa de dois niveis de seletor para ganhar a
   ".cpb__milestone-node .cpb__emoji", que vem antes com o tamanho normal. */
.cpb__milestone-node .cpb__emoji--gift,
.cpb__node .cpb__emoji--gift {
  font-size: calc(var(--cpb-node, 28px) * 0.56) !important;
}

/* ===== SELOS DAS PROMOCOES ===== */
/* Apertados o suficiente para as 4 faixas caberem numa linha so na gaveta */
.cpb--neon .cpb__tags {
  gap: 5px !important;
}

.cpb--neon .cpb__tag,
.cpb--neon .cpb__tag--accent {
  padding: 3px 8px !important;
  gap: 3px !important;
  color: var(--cpb-title-color, #1800AD) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1.5px solid var(--cpb-color, #FF66C4) !important;
  box-shadow: 0 2px 7px rgba(230, 57, 159, 0.13), 0 0 9px rgba(255, 102, 196, 0.12) !important;
}

.cpb--neon .cpb__tag--done,
.cpb--neon .cpb__tag--accent-done {
  color: #fff !important;
  background: linear-gradient(135deg, var(--cpb-color-dark, #E6399F), var(--cpb-color, #FF66C4)) !important;
  border-color: var(--cpb-color, #FF66C4) !important;
  box-shadow: 0 3px 9px rgba(230, 57, 159, 0.26), 0 0 13px rgba(255, 102, 196, 0.28) !important;
}

.cpb--neon .cpb__tag--done svg,
.cpb--neon .cpb__tag--accent-done svg {
  color: #fff !important;
}

/* ===== MENSAGEM ===== */
.cpb--neon .cpb__msg {
  background: rgba(255, 255, 255, 0.72) !important;
  color: #3d2b36 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 102, 196, 0.18) !important;
}

.cpb--neon .cpb__msg strong {
  color: var(--cpb-title-color, #1800AD) !important;
}

.cpb--neon .cpb__msg--milestone {
  background: rgba(255, 102, 196, 0.1) !important;
  border-left: 3px solid var(--cpb-color, #FF66C4) !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: none !important;
}

/* ===== ESTADO COMPLETO ===== */
.cpb--neon.cpb--complete {
  border-color: var(--cpb-color, #FF66C4) !important;
  box-shadow:
    0 10px 26px rgba(230, 57, 159, 0.18),
    0 0 26px rgba(255, 102, 196, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.cpb--neon.cpb--complete .cpb__fill,
.cpb--neon.cpb--complete .cpb__track {
  background: linear-gradient(90deg, var(--cpb-color-dark, #E6399F), var(--cpb-color, #FF66C4)) !important;
}

.cpb--neon.cpb--complete .cpb__fill {
  box-shadow: 0 0 14px rgba(255, 102, 196, 0.55), 0 0 26px rgba(230, 57, 159, 0.3) !important;
}

.cpb--neon.cpb--complete .cpb__msg {
  background: rgba(255, 102, 196, 0.14) !important;
  color: var(--cpb-title-color, #1800AD) !important;
  font-weight: 600 !important;
}

/* ===== RESPONSIVO ===== */
@media screen and (max-width: 480px) {
  .cpb--neon .cpb__milestone-label {
    font-size: 8px !important;
    letter-spacing: 0.02em !important;
  }

  .cpb--neon .cpb__tag {
    font-size: 9px !important;
    padding: 2px 7px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cpb--neon::before,
  .cpb--neon .cpb__fill::after,
  .cpb--neon .cpb__node--pulse,
  .cpb--neon .cpb__node--done,
  .cpb--neon .cpb__milestone-node--done,
  .cpb__emoji--gift,
  .cpb--neon .cpb__milestone-node .cpb__emoji,
  .cpb--neon .cpb__milestone-node .cpb__icon-img,
  .cpb--neon .cpb__node--end .cpb__emoji,
  .cpb--neon .cpb__node--end .cpb__icon-img {
    animation: none !important;
  }
}

/* =============================================
   CONFETES AO SUBIR DE FAIXA
   O palco e as pecas sao criados pelo JavaScript da barra
   (snippets/progress-bar-unified.liquid) e apagados no fim da animacao.
   Nomes iguais aos da WM Store: .cpb-confetti e .cpb-confetti__piece.
   Cores da DUPI: rosa, rosa escuro, azul e branco.
   ============================================= */
.cpb-confetti {
  position: fixed;
  overflow: hidden;
  pointer-events: none;
  z-index: 2147483000;
}

.cpb-confetti__piece {
  position: absolute;
  top: 0;
  border-radius: 2px;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .cpb-confetti {
    display: none !important;
  }
}

/* Neon uniforme ao redor de toda a caixa */
.cpb--neon,
.cpb--neon.cpb--complete {
  margin: 12px 10px 22px !important;
  border: 2px solid #FF66C4 !important;
  border-radius: 14px !important;
  box-shadow:
    0 0 7px rgba(255, 102, 196, 0.55),
    0 0 14px rgba(255, 102, 196, 0.22),
    inset 0 0 14px rgba(255, 102, 196, 0.08) !important;
}
}