/* Derlenmiş app.css'te olmayan frontend yardımcı stilleri */

.products-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .products-grid {
        gap: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .products-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.modal-backdrop-blur {
    background-color: rgb(15 23 42 / 0.45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.lightbox-overlay {
    background-color: rgb(0 0 0 / 0.92);
}

.lightbox-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    padding: 4rem 1rem 1.5rem;
    pointer-events: none;
}

.lightbox-frame img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, calc(100vw - 2rem));
    max-height: min(90vh, calc(100dvh - 6rem));
    object-fit: contain;
    pointer-events: auto;
}

.purchase-modal-shell {
    box-sizing: border-box;
    width: calc(100% - 2rem);
    max-width: 32rem;
    max-height: min(90vh, calc(100dvh - 2rem));
    margin-left: 1rem;
    margin-right: 1rem;
    overflow-y: auto;
}