@media (max-width: 768px) {
    body {
        margin: 0;
    }
    #header {
        max-width: none;
        padding: 12px 16px;
        gap: 12px;
        flex-wrap: wrap;
    }
    #nav {
        order: 1;
        gap: 20px;
        font-size: 16px;
    }
    #logo {
        order: 2;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    #logo-img {
        width: 110px;
        height: 110px;
        padding-left: 0;
    }
    #search {
        order: 3;
        width: 100%;
        justify-content: center;
    }
    #search-input {
        visibility: visible;
        width: min(240px, 70vw);
        height: 38px;
    }
    #sheet-listings {
        grid-template-columns: 1fr;
        justify-content: center;
        justify-items: center;
        row-gap: 28px;
        padding: 32px 16px 0 16px;
        max-width: none;
    }
    .sheet {
        width: min(250px, 100%);
    }
    .sheet-image {
        width: 100%;
    }
    #sheet-popup {
        width: 92vw;
        height: auto;
        max-height: 90vh;
        overflow-y: auto;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        padding: 24px 18px;
    }
    #popup-logo {
        position: static;
        width: 72px;
        height: 72px;
        margin-top: 8px;
    }
    #popup-image {
        width: min(260px, 100%);
        height: auto;
        max-height: none;
    }
    #popup-details {
        max-width: none;
        width: 100%;
        text-align: center;
        align-items: center;
    }
    #popup-title {
        font-size: 24px;
        line-height: 1.3;
    }
    #popup-description {
        font-size: 15px;
    }
    #popup-price {
        font-size: 22px;
    }
    #popup-buy {
        width: 100%;
        max-width: 260px;
    }
    #popup-video {
        width: 100%;
    }
    #popup-video iframe {
        width: 100%;
        height: min(52vw, 220px);
        margin-right: 0;
    }
    #info-popup {
        width: 92vw;
        height: auto;
        max-height: 90vh;
        padding: 24px 20px;
    }
    #info-logo {
        width: 72px;
        height: 72px;
    }
    #info-title {
        font-size: 28px;
        margin-bottom: 22px;
    }
    .info-section {
        margin-bottom: 22px;
    }
    .info-heading {
        font-size: 20px;
    }
    .info-text {
        font-size: 15px;
        line-height: 1.6;
    }
    #footer {
        max-width: none;
        margin: 48px 16px 0 16px;
        padding: 24px 0;
        gap: 28px;
    }
}