.tbb{display:grid;gap:1rem;margin-block:.25rem 1rem}.tbb__intro{display:grid;gap:.25rem;border:2px solid var(--color-chocolate);border-radius:var(--radius);padding:1rem;background:#fffaf0}.tbb__intro h2,.tbb__dialog h2{margin:0;font-size:clamp(1.55rem,3vw,2.2rem)}.tbb__intro p{margin:0}.tbb__eyebrow{color:var(--color-red);font-size:.7rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.tbb__progress{display:grid;gap:.55rem;border:1px solid rgb(24 22 20 / 18%);border-radius:var(--radius);padding:.8rem 1rem;background:#eeede9}.tbb__progress-copy{display:flex;justify-content:space-between;gap:1rem;font-size:.78rem}.tbb__progress-copy span{color:var(--color-muted)}.tbb__progress-track{overflow:hidden;height:.5rem;border-radius:999px;background:#d8d4ca}.tbb__progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:var(--color-red);transition:width .2s}.tbb.is-complete .tbb__progress{border-color:var(--color-red);background:#fff4f5}
.tbb__slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.tbb__slot{display:grid;grid-template-columns:3.25rem 1fr;align-items:center;gap:.65rem;width:100%;border:1px solid rgb(24 22 20 / 18%);border-radius:.7rem;padding:.45rem;background:white;text-align:left;cursor:pointer}.tbb__slot:hover,.tbb__slot:focus-visible,.tbb__slot.is-complete{border-color:var(--color-red)}.tbb__slot.is-complete{box-shadow:inset 0 0 0 1px var(--color-red)}.tbb__slot-image{display:grid;overflow:hidden;place-items:center;width:3.25rem;aspect-ratio:1;border-radius:.5rem;background:#f1ede5;font-weight:900}.tbb__slot-image img{width:100%;height:100%;object-fit:contain}.tbb__slot-copy{display:grid;min-width:0}.tbb__slot small{font-size:.62rem;text-transform:uppercase}.tbb__slot strong{overflow:hidden;font-size:.75rem;text-overflow:ellipsis}
.tbb__dialog{width:min(62rem,calc(100% - 2rem));max-height:min(48rem,calc(100% - 2rem));border:0;border-radius:1rem;padding:1rem;background:#fffaf0;box-shadow:0 1rem 4rem rgb(0 0 0 / 28%)}.tbb__dialog::backdrop{background:rgb(0 0 0 / 60%)}.tbb__dialog-header{display:flex;align-items:start;justify-content:space-between;gap:1rem;margin-bottom:1rem}.tbb__close{border:0;background:transparent;font-size:2rem;line-height:1;cursor:pointer}.tbb__flavors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.tbb__flavor{display:grid;grid-template-rows:auto 1fr;gap:.5rem;border:1px solid rgb(24 22 20 / 20%);border-radius:.75rem;padding:.6rem;background:white;text-align:left;cursor:pointer}.tbb__flavor:hover,.tbb__flavor:focus-visible{border-color:var(--color-red);box-shadow:inset 0 0 0 1px var(--color-red)}.tbb__flavor-image{display:block;overflow:hidden;width:100%;aspect-ratio:1;border-radius:.5rem;background:#f1ede5}.tbb__flavor-image img{width:100%;height:100%;object-fit:contain}.tbb__flavor-copy{display:grid;align-content:start;gap:.2rem}.tbb__flavor strong{font-size:.82rem}.tbb__flavor small{color:var(--color-muted);font-size:.68rem;line-height:1.35}.tbb__empty{padding:2rem;text-align:center}
@media(max-width:560px){.tbb__slots{grid-template-columns:1fr}.tbb__flavors{grid-template-columns:repeat(2,minmax(0,1fr))}.tbb__progress-copy{display:grid;gap:.1rem}}