.tg-ladder {
  --tg-pink: #ff69b4;
  --tg-pink-light: #ffb6d9;
  --tg-deep: #be185d;
  --tg-gold: #f59e0b;
  --tg-gold-light: #fcd34d;
  --tg-green: #16a34a;
  --tg-ink: #1f2937;
  --tg-muted: #9aa4b2;
  --tg-line: #ecd7e3;
  position: relative;
  
  border: 1.5px solid var(--tg-line);
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, #fff7fb 0%, #fdf2f8 45%, #fff 100%);
  box-shadow: 0 4px 16px rgba(190, 24, 93, .08);
  padding: 14px 14px 16px;
  margin: 14px 16px;          
}

.checkout-overlay .tg-ladder { margin-left: 0; margin-right: 0; }
.tg-ladder__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.tg-ladder__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--tg-deep);
  border: none;
  border-radius: 999px;
  padding: 4px 11px;
  box-shadow: 0 2px 6px rgba(190, 24, 93, .3);
  white-space: nowrap;
}
.tg-ladder__name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tg-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 42%;
}
.tg-ladder__next {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tg-deep);
  background: #fff0f6;
  border: 1.5px dashed var(--tg-pink);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.tg-ladder__done {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--tg-green);
  white-space: nowrap;
}




.tg-ladder { --node: 66px; }           
.tg-flow {
  position: relative;                  
  display: flex;
  align-items: flex-start;
}

.tg-step__boom {
  position: absolute;
  left: 50%;
  top: calc(var(--node) / 2);          
  width: 0; height: 0;
  pointer-events: none;
  z-index: 3;
}
.tg-step__boom i {
  position: absolute;
  left: 0; top: 0;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 2px;
  opacity: 0;
  animation: tg-boom 2.2s ease-out infinite;
}
@keyframes tg-boom {
  0%   { opacity: 0; transform: translate(0, 0) scale(.3) rotate(0); }
  10%  { opacity: 1; }
  55%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(1) rotate(var(--br)); }
}

.tg-step__boom i:nth-child(1)  { --bx: -44px; --by:  -8px; --br:  180deg; background: var(--tg-gold);       animation-delay: 0s; }
.tg-step__boom i:nth-child(2)  { --bx:  44px; --by:  -8px; --br: -180deg; background: var(--tg-pink);       animation-delay: .5s; }
.tg-step__boom i:nth-child(3)  { --bx: -32px; --by: -30px; --br:  130deg; background: var(--tg-green);      animation-delay: 1s; }
.tg-step__boom i:nth-child(4)  { --bx:  32px; --by: -30px; --br: -130deg; background: var(--tg-gold-light); animation-delay: .3s; }
.tg-step__boom i:nth-child(5)  { --bx:  -8px; --by: -42px; --br:   70deg; background: var(--tg-pink);       animation-delay: .8s; }
.tg-step__boom i:nth-child(6)  { --bx:  10px; --by: -42px; --br:  -70deg; background: var(--tg-gold);       animation-delay: 1.3s; }
.tg-step__boom i:nth-child(7)  { --bx: -40px; --by:  22px; --br:  200deg; background: var(--tg-gold-light); animation-delay: .2s; }
.tg-step__boom i:nth-child(8)  { --bx:  40px; --by:  22px; --br: -200deg; background: var(--tg-deep);       animation-delay: .95s; }
.tg-step__boom i:nth-child(9)  { --bx: -20px; --by:  38px; --br:  110deg; background: var(--tg-gold);       animation-delay: .6s; }
.tg-step__boom i:nth-child(10) { --bx:  22px; --by:  38px; --br: -110deg; background: var(--tg-pink);       animation-delay: 1.5s; }
@media (max-width: 430px) { .tg-ladder { --node: 52px; } }

.tg-step {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 2px;
}

.tg-step::before,
.tg-step::after {
  content: "";
  position: absolute;
  top: calc(var(--node) / 2);
  left: -50%;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 999px;
  z-index: 0;
}
.tg-step::before { width: 100%; background: var(--tg-line); }        
.tg-step::after  { width: var(--seg, 0%); background: var(--tg-pink); }  
.tg-step.is-first::before,
.tg-step.is-first::after { display: none; }                         


.tg-step__node {
  position: relative;
  z-index: 1;
  width: var(--node);
  height: var(--node);
  border-radius: 22%;
  overflow: hidden;
  background: #fff;
  border: 3px solid var(--tg-line);
  box-shadow: 0 3px 8px rgba(190, 24, 93, .12);
  transition: transform .18s, box-shadow .25s, border-color .25s, filter .25s;
}
.tg-step__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tg-step__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.tg-step__badge--done { background: var(--tg-gold); }
.tg-step__badge--pick { background: var(--tg-deep); }
.tg-step__soldout {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 41, 59, .55);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}



.tg-mrow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 1.5px solid var(--tg-line);
  border-radius: 14px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.tg-mrow.is-on { border-color: var(--tg-gold); box-shadow: 0 2px 10px rgba(245, 158, 11, .16); }
.tg-mrow.is-paid.is-on { cursor: pointer; }   
.tg-mrow.is-picked { border-color: var(--tg-deep); box-shadow: 0 2px 12px rgba(190, 24, 93, .18); }
.tg-mgift {
  position: relative;
  flex-shrink: 0;
  width: var(--node);
  height: var(--node);
  cursor: zoom-in;                              
}
.tg-mgift__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 18%;
  border: 1.5px solid var(--tg-line);
  box-shadow: 0 2px 8px rgba(190, 24, 93, .12);
}
.tg-mrow.is-picked .tg-mgift__img { border-color: var(--tg-deep); }
.tg-mmain { flex: 1; min-width: 0; }
.tg-mtop {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.tg-mnumwrap { position: relative; display: inline-block; line-height: 1; }
.tg-mnumwrap .tg-step__boom { top: 50%; }

.tg-mnum {
  display: inline-block;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--tg-deep);
  animation: tg-numpop .5s cubic-bezier(.2, 1.9, .4, 1);
}
.tg-mrow:not(.is-on) .tg-mnum { color: var(--tg-muted); }



.tg-mnum--off {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--tg-muted);
  animation: none;
}
@keyframes tg-numpop {
  0%   { transform: scale(.55); }
  60%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}
.tg-mstate { font-size: 12px; font-weight: 700; color: var(--tg-ink); }
.tg-mstate .tg-free { color: var(--tg-green); }
.tg-mstate .tg-addon { color: var(--tg-deep); }
.tg-mdead { color: #94a3b8; }

.tg-mpick {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tg-deep);
  background: #fff;
  border: 1.5px solid var(--tg-pink);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.tg-mpick.on { color: #fff; background: var(--tg-deep); border-color: var(--tg-deep); }

.tg-mzoom {
  position: fixed;
  inset: 0;
  z-index: 60000;
  background: rgba(15, 23, 42, .82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.tg-mzoom img {
  max-width: 92vw;
  max-height: 86vh;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}

.tg-mbar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--tg-line);
}
.tg-mbar__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  max-width: 100%;
  border-radius: 999px;
  background: var(--tg-pink);
  transition: width .45s ease;
}
.tg-mbar__tick {
  position: absolute;
  top: 50%;
  width: 8px; height: 8px;
  margin-left: -4px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fff;
  border: 2px solid #e4cddc;
  box-sizing: border-box;
}
.tg-mbar__tick.on  { border-color: var(--tg-gold); background: var(--tg-gold-light); }
.tg-mbar__tick.cur { border-color: var(--tg-deep); background: var(--tg-pink); transform: translateY(-50%) scale(1.3); }
.tg-mbar__tick.dead { background: #e2e8f0; border-color: #cbd5e1; }
@media (prefers-reduced-motion: reduce) {
  .tg-mnum { animation: none; }
  .tg-mbar__fill { transition: none; }
}



.tg-ladder__scope {
  margin-top: 9px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tg-muted);
  text-align: left;
}
.tg-ladder__gift {
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tg-deep);
  background: #fff0f6;
  border: 1.5px dashed var(--tg-pink-light);
  border-radius: 10px;
  padding: 4px 10px;
  text-align: center;
}


.tg-step.is-reached .tg-step__node {
  border-color: var(--tg-gold);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .18), 0 3px 10px rgba(245, 158, 11, .3);
  cursor: pointer;
}

.tg-step.is-next .tg-step__node {
  border-color: var(--tg-pink);
  box-shadow: 0 0 0 3px rgba(255, 105, 180, .16), 0 3px 10px rgba(255, 105, 180, .32);
  animation: tg-glow 1.6s ease-in-out infinite;
}

.tg-step.is-locked .tg-step__node {
  filter: grayscale(.7);
  opacity: .82;
}
.tg-step.is-soldout .tg-step__node { filter: grayscale(1); opacity: .6; }

.tg-step.is-picked .tg-step__node {
  border-color: var(--tg-deep);
  box-shadow: 0 0 0 3px rgba(190, 24, 93, .2), 0 3px 12px rgba(190, 24, 93, .4);
  cursor: pointer;
}
.tg-step.is-reached:hover .tg-step__node,
.tg-step.is-picked:hover .tg-step__node { transform: translateY(-2px); }


.tg-step__label {
  margin-top: 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tg-muted);
  line-height: 1.2;
}
.tg-step.is-reached .tg-step__label,
.tg-step.is-picked .tg-step__label { color: var(--tg-deep); }
.tg-step.is-next .tg-step__label { color: var(--tg-pink); }
.tg-step__sub {
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--tg-muted);
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tg-step__sub .tg-free { color: var(--tg-green); font-weight: 700; }
.tg-step__sub .tg-addon { color: var(--tg-deep); font-weight: 700; }

@keyframes tg-glow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 105, 180, .16), 0 3px 10px rgba(255, 105, 180, .32); }
  50%      { box-shadow: 0 0 0 5px rgba(255, 105, 180, .26), 0 3px 14px rgba(255, 105, 180, .5); }
}
@media (prefers-reduced-motion: reduce) {
  .tg-step.is-next .tg-step__node { animation: none; }
  .tg-step__node, .tg-step::after { transition: none; }
  .tg-step__boom i { display: none; }
}