/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (max-width: 1600px){

    .png-main{

        padding:26px 32px 32px;

    }

}

/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1400px){

    .png-sidebar{

        width:240px;

    }

    .png-main{

        margin-left:240px;

        padding:26px 28px 28px;

    }

}

/* ==========================================================
   TABLET LANDSCAPE
========================================================== */

@media (max-width: 1200px){

    .png-grid{

        grid-template-columns:
            repeat(2,minmax(220px,1fr));

    }

    .png-main{

        padding:26px 24px 24px;

    }

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 992px){

    .png-layout{

        flex-direction:column;

    }

    .png-sidebar{

        position:static;

        height:auto;

        overflow-y:visible;

        width:100%;

        border-right:none;

        border-bottom:1px solid #E5E7EB;

    }

    .png-main{

        margin-left:0;

    }

    .png-sidebar nav{

        flex-direction:row;

        flex-wrap:wrap;

    }

    .png-sidebar nav .menu-link{

        flex:1 1 100%;

    }

    .sidebar-account{

        margin-left:0;

        margin-right:0;

    }

    .logo{

        margin-bottom:20px;

    }

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    .account-delete-link{

        display:none;

    }

    .png-generate-section{

        position:static;

        margin:24px 0 0;

        padding:0;

        background:none;

        backdrop-filter:none;

        -webkit-backdrop-filter:none;

        border-top:none;

        box-shadow:none;

        border-radius:0;

    }

    .png-main{

        padding:18px;

        gap:24px;

    }

    .png-product-row{

        flex-direction:column;

        gap:22px;

    }

    .png-image-empty-state{

        flex-direction:column;

        text-align:center;

        padding:22px 16px;

        gap:6px;

    }

    .png-image-upload-icon{

        font-size:24px;

    }

    .png-card{

        padding:22px;

    }

    .png-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .png-actions{

        flex-direction:column;

    }

    .png-button{

        width:100%;

    }

    .result-header{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

    .history-top{

        flex-direction:column;

        align-items:stretch;

        gap:10px;

    }

    .history-title{

        font-size:15px;

        white-space:normal;

        overflow:visible;

        text-overflow:clip;

    }

    .history-title-row{

        align-items:flex-start;

    }

    .history-item-select{

        padding-top:3px;

    }

    .history-actions{

        justify-content:flex-start;

    }

    .copy-button{

        width:100%;

        justify-content:center;

    }

    .billing-box{

        padding:18px;

        box-sizing:border-box;

    }

    .billing-stepper{

        gap:8px;

    }

    .billing-step-btn{

        width:38px;

        height:38px;

        flex-shrink:0;

    }

    #billing-credits{

        font-size:16px;

    }

    .billing-presets{

        gap:6px;

    }

    .billing-preset{

        min-width:0;

        padding:8px 4px;

        font-size:12.5px;

    }

    .history-item{

        padding:18px;

    }

    .history-badge{

        padding:6px 12px;

        font-size:12px;

    }

}

@media (max-width:480px){

    .png-main{

        padding:14px;

    }

    .png-card{

        padding:18px;

    }

    .logo{

        gap:10px;

        margin-bottom:24px;

    }

    .logo-icon{

        width:38px;

        height:38px;

        border-radius:11px;

    }

    .logo-icon svg{

        width:18px;

        height:18px;

    }

    .logo-text h2{

        font-size:16px;

    }

    .logo-text span{

        font-size:11.5px;

        margin-top:1px;

    }

    .account-info{

        flex-direction:column;

        text-align:center;

        gap:6px;

    }

    .account-details{

        align-items:center;

    }

    .png-chip-group{

        gap:8px;

    }

    .png-chip span{

        width:100%;

    }

}