/*!
 * Steel Tongue Drum | Size selector (bundle tracker) styles
 * Store: US   Product: STD
 * Source: Kiddospace-CDN / Stores/US/Product-STD/css/steeldrum-bundle-tracker.css
 * Maintained by Tulon S. Avi. Make changes in the repo, not in the theme.
 */

.drum-bundle {
  margin: 24px 0;
  font-family: 'Nunito', sans-serif;
}

.drum-bundle__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.drum-bundle__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 2px solid #d8e6ef;
  border-radius: 10px;
  padding: 18px 8px 14px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
}

.drum-bundle__card:hover {
  opacity: 1;
  border-color: #38b6ff;
  background: #f5fbff;
  transform: translateY(-2px);
}

.drum-bundle__card--selected {
  border-color: #38b6ff;
  background: #E6F6FF;
}

.drum-bundle__card--selected:hover {
  background: #E6F6FF;
  transform: none;
}

.drum-bundle__radio {
  display: none;
}

.drum-bundle__badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #38b6ff;
  border-radius: 11px;
  padding: 4px 10px;
  white-space: nowrap;
  letter-spacing: .02em;
}

.drum-bundle__badge--blue   { background: #38b6ff; }
.drum-bundle__badge--orange { background: #F58720; }
.drum-bundle__badge--red    { background: #D6371F; }
.drum-bundle__badge--green  { background: #22c55e; }

/* .drum-bundle__size {
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-size: 25px;
  font-weight: 600;
  color: #1c2b36;
  line-height: 1.1;
}

.drum-bundle__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #7c8b99;
} */

  .drum-bundle__headline {
    font-family: 'Fredoka', 'Nunito', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #1c2b36;
    line-height: 1.1;
  }

  .drum-bundle__size {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1c2b36;
    margin-top: 2px;
  }

  .drum-bundle__descriptor {
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    color: #7c8b99;
    margin-top: 4px;
  }

.drum-bundle__price {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.drum-bundle__now {
  font-size: 17px;
  font-weight: 600;
  color: #1c2b36;
  font-family: 'Fredoka', 'Nunito', sans-serif;
}

.drum-bundle__card--selected .drum-bundle__now {
  color: ##20323C;
}

.drum-bundle__was {
  font-size: 12px;
  color: #9aa7b2;
}

.drum-bundle__warning {
  margin: 10px 0 0;
  font-size: 13px;
  color: #e8342b;
  font-weight: 600;
}

@media (max-width: 600px) {
  .drum-bundle__grid { gap: 6px; }
  .drum-bundle__card { padding: 16px 4px 12px; }
      .drum-bundle__headline { font-size: 19px; }
    .drum-bundle__size { font-size: 12px; }
    .drum-bundle__descriptor { font-size: 11px; }
  .drum-bundle__badge { font-size: 10px; padding: 3px 7px; }
  .drum-bundle__now { font-size: 15px; }
}

.drum-bundle__grid {
  align-items: stretch;
}

.drum-bundle__card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.drum-bundle__headline,
.drum-bundle__size {
  flex: 0 0 auto;
}

.drum-bundle__descriptor {
  flex: 0 0 auto;
  min-height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.drum-bundle__price {
  margin-top: auto;
}

.drum-bundle__save {
  flex: 0 0 auto;
  align-self: center;
}