.collection-modal {
    width: min(960px, calc(100vw - 2rem));
    height: min(620px, calc(100dvh - 5rem));
    max-width: none;
    max-height: none;
    margin: auto;
    padding: 0;
    border: 1px solid var(--luxury-border-light);
    border-radius: 0;
    background: var(--luxury-bg-primary);
    color: var(--luxury-text-primary);
    box-shadow: 0 30px 100px rgb(0 0 0 / .25);
    overflow: hidden;
    overscroll-behavior: contain;
}
.collection-modal::backdrop {
    background: rgb(15 18 20 / .38);
    backdrop-filter: blur(5px);
    animation: collectionModalBackdrop .56s both;
}
.collection-modal.is-closing::backdrop { animation: collectionModalBackdropOut .38s both; }
.collection-modal__surface { position: relative; height: 100%; }
.collection-modal__list {
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-x: none;
    overscroll-behavior-y: contain;
    touch-action: pan-y pinch-zoom;
}
.collection-modal__close {
    position: absolute;
    top: .5rem;
    z-index: 2;
    right: .5rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--luxury-text-secondary);
    font-size: .8rem;
}
.collection-modal__top-row {
    min-height: 3rem;
    padding: .5rem 3.25rem .5rem 1rem;
}
.collection-modal__categories {
    min-width: 0;
    overflow-x: auto;
    padding: 2px;
    scrollbar-width: thin;
}
.collection-modal__categories .btn {
    transform: none !important;
    box-shadow: none !important;
    transition: color .15s, background-color .15s, border-color .15s;
}
.collection-modal :is(.btn-primary, .btn-outline-primary) {
    --bs-btn-hover-bg: var(--luxury-accent);
    --bs-btn-hover-border-color: var(--luxury-accent);
    --bs-btn-hover-color: var(--luxury-on-accent);
    --bs-btn-active-bg: var(--luxury-accent);
    --bs-btn-active-border-color: var(--luxury-accent);
    --bs-btn-active-color: var(--luxury-on-accent);
}
.collection-modal :is(.btn-primary, .btn-outline-primary):focus-visible {
    background-color: var(--luxury-accent) !important;
    border-color: var(--luxury-accent) !important;
    color: var(--luxury-on-accent) !important;
}
.collection-modal .btn,
.collection-modal-launcher {
    --bs-btn-focus-box-shadow: none;
}
.collection-modal :is(.btn, .form-control, .form-select):focus,
.collection-modal-launcher.btn:focus {
    box-shadow: none !important;
}
.collection-modal :is(button, a.btn, select):focus-visible,
.collection-modal-launcher.btn:focus-visible {
    outline: 1px solid var(--luxury-accent);
    outline-offset: -3px;
}
.collection-modal .floating-input:focus {
    outline: none;
}
.collection-modal-icon { display: block; width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.collection-modal.is-preparing { visibility: hidden; }
.collection-modal-launcher.is-morph-origin { visibility: hidden; }
.collection-modal.is-morphing {
    position: fixed;
    margin: 0;
    right: auto;
    bottom: auto;
    max-height: none;
    overflow: hidden;
    pointer-events: none;
}
.collection-modal__decorations { position: fixed; inset: 0; pointer-events: none; }
@keyframes collectionModalBackdropOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes collectionModalBackdrop { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 575.98px) {
    .collection-modal { width: calc(100vw - 1.25rem); height: calc(100dvh - 1.25rem); }
}
@media (prefers-reduced-motion: reduce) {
    .collection-modal::backdrop, .collection-modal.is-closing::backdrop { animation: none; }
}

.collection-modal__cards { padding: .75rem; }
.collection-modal__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .6rem;
    padding: 0;
}
.collection-modal-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--luxury-border-light);
    background: var(--luxury-bg-primary);
    color: var(--luxury-text-primary);
    text-decoration: none;
    transition: border-color .15s;
}
.collection-modal-card:hover { border-color: var(--luxury-accent); color: var(--luxury-text-primary); }
.collection-modal-card:focus-visible { outline: 2px solid var(--luxury-accent); outline-offset: -2px; }
.collection-modal-card__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--luxury-gray-50);
}
.collection-modal-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
}
.collection-modal-card__placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--luxury-text-muted); font-size: 2rem; opacity: .45; }
.collection-modal-card__favorite { position: absolute; top: .4rem; right: .4rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; background: var(--luxury-bg-primary); color: var(--luxury-accent); font-size: .7rem; }
.collection-modal-card__copy { display: flex; flex: 1; flex-direction: column; gap: .25rem; padding: .5rem; }
.collection-modal-card__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: .78rem; font-weight: 500; line-height: 1.4; }
.collection-modal-card__reference { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .65rem; color: var(--luxury-text-secondary); }
.collection-modal-card__time { margin-top: auto; padding-top: .15rem; color: var(--luxury-text-muted); font-size: .65rem; }
@media (max-width: 575.98px) {
    .collection-modal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
}