/* Collection folders and independently selectable outfit/background pairs. */
#avatar-collections-carousel button.collection-icon-container {
    border: 1px solid transparent; background: transparent; border-radius: 16px;
    flex-direction: column; aspect-ratio: auto; gap: 10px; padding: 12px;
    color: inherit; font-weight: 600;
}
#avatar-collections-carousel button.collection-icon-container img {
    width: 100%; height: auto; max-height: 300px; object-fit: contain;
}
#avatar-collections-carousel button.collection-icon-container:hover,
#avatar-collections-carousel button.collection-icon-container:focus-visible {
    border-color: #2479e9; background: #f3f8ff;
}
#avatar-collections-carousel button.collection-icon-container:disabled {
    opacity: .6; cursor: default;
}
#avatar-collections-carousel.avatar-collections-grid > .btn { grid-column: 1 / -1; justify-self: start; }
.avatar-collection-detail { width: 100%; text-align: center; }
.avatar-collection-detail > .btn:first-child { display: block; margin-bottom: 16px; }
.avatar-collection-detail .collection-icon-container img { height: 300px !important; }
#avatar-collections-carousel.avatar-collections-grid { display: grid; overflow-x: visible; }
#avatar-collections-carousel.avatar-collection-detail { display: block; overflow-x: visible; }
#avatar-collections-carousel button.collection-icon-container::after { display: none; }

#avatar-collections-carousel.collection-folders {
    grid-template-columns: repeat(2, minmax(0, 300px));
    justify-content: center;
}
.collection-badge-wrapper { min-width: 0; }
.collection-key-price { display: flex; align-items: center; justify-content: center; gap: 6px; }
#avatar-collections-carousel .collection-key-price img { width: 32px; height: 32px; object-fit: contain; }
/* The white card itself owns scrolling; a 100% height card inside a
   scrolling column lets its content paint beyond the card background. */
#tab-avatar .avatar-controls-panel > .avatar-builder-container {
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    display: flow-root;
}
#tab-avatar .avatar-controls-panel #avatar-options-grid {
    max-height: none;
    overflow: visible;
}
@media (min-width: 768px) {
    #tab-avatar .avatar-controls-panel > .avatar-builder-container {
        max-height: calc(100dvh - 160px);
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scrollbar-gutter: stable;
    }
}

.collection-pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin: 20px 0; }
.collection-pair { min-width: 0; padding: 16px 10px; border: 1px solid #e2e6ed; border-radius: 16px; background: #f8fafc; }
.collection-pair-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.collection-pair-choice { min-width: 0; }
#avatar-collections-carousel .collection-pair img { height: 210px !important; width: 100%; object-fit: contain; }
#avatar-collections-carousel .collection-pair button { height: 100%; padding: 8px; font-size: .9rem; }
#avatar-collections-carousel .collection-pair button[aria-pressed="true"] { border-color: #2479e9; background: #eaf3ff; }