@media (min-width: 900px) and (max-height: 775px) {
    #body{
        gap:15px;
    }
    #mainWrapper{
        gap:12px;
        padding: 0 15px;
        margin-bottom: 15px;
    }
    #top-blocks, #bot-blocks{
        gap:12px;
    }

    .configurator-header-content {
        max-height: 48px;
    }
    .configurator-header-logo{
        height: 72px;
    }
    .header-title {
        font-size: 1.2rem;
    }
    .program-wrappers{
        padding: 10px;
        gap:10px;
    }
    .program-title{
        font-size: 18px;
    }
    .optionBtn{
        font-size: 12px;
    }
    .main-wrapper-top{
        min-height: 300px;
        max-height: 300px;
    }
    .skuBoxWrapper{
        padding: 10px;
    }
    .skuBox{
        font-size: 16px;
    }
    .selectionRow {
        padding: 6px;
        font-size: 12px;
    }
    .selectionRow.headers {
        font-size: 12px;
    }
    .order-form-finished-lock-sku{
        font-size: 12px;
    }
    .skuBox-buttons-wrapper{
        margin: 6px;
    }
    .quantity{
        height: 24px;
    }
    .quantity-up-btn, .quantity-down-btn{
        width: 12px;
        height: 10px;
    }
    .config-button{
        height: 26px;
    }
    .reselectBtnImg{
        width: 12px;
        height: 12px;
    }

}


@media screen and (max-width: 1000px) {
    #body{
        gap:8px;
    }
    #mainWrapper{
        padding: 0 12px;
        margin-bottom: 0px;
    }
    .review-overview{
        min-height: 0 !important;
        height: 0 !important;
        overflow: hidden;
        max-height: 0 !important;
        border: none;
        padding: 0 !important;
        margin: 0;

    }
    #main{
        min-height: 40%;
    }
    
    
    #overview{
        /*don't want this to scroll*/
        margin-bottom: 65px;
    }


    .primary-button{
        width: 100%;
        margin:0;
        display: flex;
        box-sizing: border-box;
        justify-content: center;
    }


    .optionBtn-outter-wrapper{
        width: 100%;
    }
    .configuration-outter-wrapper{
        /*don't want this to scroll*/
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0;
        overflow: hidden;
    }
    .selectionsBox{
        /*this should scroll*/
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        max-height: 100%;
        overflow-y: auto;
    }



    .notice-box{
        gap:8px;
        padding: 15px;
    }

    .main-wrapper-top, .main-wrapper-bot{
        display: none;
    }



    .configurator-header-content {
        max-height: 40px;
    }
    .configurator-header-logo {
        height: 40px;
    }
    .header-title {
        font-size: 1rem;
    }
    
    
    .optionBtn {
        width: 100%;
        font-size: 10px;
    }

    #form{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;

        border-radius: 0;
        width: 100%;
        box-sizing: border-box;

        height: auto;
        max-height: 70px;      /* collapsed: just tall enough for header area */
        overflow: hidden;
        padding: 10px;
        margin: 0;
        z-index: 10;

        display: flex;
        flex-direction: column;

        border-left:none;
        border-right:none;
        border-bottom:none;
    }
    #form-options-wrapper{
        display: flex;
        height: 20px;
        flex: 0 0 auto;
    }
    #form-expander{ /*button that's clicked */
        width:20px;
    }

    
    #form.expanded{
        /*When user clicks button to expand this, we need it to grow from the bottom, up to whatever their content's height is.*/
        max-height: 80dvh;
        overflow: hidden;
    }

    #form.expanded #orderFormWrapper {
        height: auto;              /* override height: 0 */
        max-height: calc(80dvh - 40px); /* adjust for header + padding if needed */
        overflow: auto;
        padding: 10px;             /* or whatever your normal padding is */
        border: 1px solid #ddd;    /* if you want a border when open */
    }
    #form.expanded > .no-locks{
        border:1px dashed lightgray !important;
    }

    #orderFormWrapper {
        max-height: 0;
        height: 0;
        overflow: hidden;
        padding: 0;
        border: none;
        flex: 1 1 auto;
        transition: max-height 0.3s ease, padding 0.3s ease;
    }



    .program-wrappers{
        padding: 12px;
        gap: 12px;
    }


    .program-title {
        font-size: 12px !important;
    }
    .skuBoxWrapper{
        padding: 10px;
    }
    .skuBox{
        font-size: 10px;
    }






    .skuBox-lock-button-wrapper{
        display: flex;
        flex-direction: row;
        align-self: end;
        justify-self: end;
    }
    .skuBox-buttons-wrapper{
        gap: 10px;
        height: auto;
        align-self: end;
    }
    .skuBox-quantity-wrapper{
        display: flex;

    }







    .quantity{
        width: 50px;
        height: 30px;
        font-size: 0.8rem;
    }

    
    .quantity-updown-wrapper{
        display: flex;
        flex-direction: column;
        gap: 3px;
        height: 100%;
    }
    .quantity-up-btn, .quantity-down-btn{

    }




    .trashBtn{
        width:25px;
        height: 25px;
    }
    .downloadBtn{
        width:25px;
        height:25px;
    }
    .copySkuBtn{
        width:25px;
        height:25px;
    }








    .selectionRow{
        font-size: 10px;
        grid-template-columns: 80px 50px auto 10px;
        padding: 5px 2px;
    }
    .selectionRow.headers{
        font-size: 10px;
    }


    .skuBoxWrapper.finished > *{
        font-size: 10px;
    }
    .orderform-wrapper{
        padding: 8px;
    }
    .pdfButtonFooter{
        font-size: 0.8rem;
        min-width: 90px;
    }
    .completed-lock-sku{
        font-size: 14px;
    }
    .completed-lock-details-row{
        font-size: 10px;
        grid-template-columns: 4fr 3fr 12fr;
    }

    .confirm-title{
        font-size: 16px;
    }

    .completed-lock-overview{
        min-width: 80dvw;
        max-width: 80dvw;
    }




    .finalizeLockButton{
        display: block;
        width: 100%;
        margin: 0 10px;
        font-size: 0.8rem;
    }



    .extras-wrapper{
        margin:10px;
    }
    .extra-details-outter-wrapper{
        display: flex;
        flex-direction: column;
    }
    .extra-details-quantity-wrapper{
        width: 100%;
        box-sizing: border-box;
    }
    .extra-details-quantity-buttons-wrapper{
        display: flex;
        margin-left: auto;
        gap:5px;
        justify-content: center;
        align-items: center;
    }
    .form-overlay{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: 00000000;
        opacity: 0.25;
        z-index: 5;
    }


    
    .order-form-finished-lock-wrapper{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 10px;
        min-width: 0;
    }
    .order-form-finished-lock-wrapper > :first-child{
        border-bottom: 1px solid lightgray;
        padding-bottom: 5px;
        width: 100%;
        box-sizing: border-box;
        padding:0px 0px 10px 0px;
    }
    .order-form-finished-lock-multisku-wrapper{
        gap: 5px;
    }
    .sub-sku-wrapper{
        font-size: 12px;
        padding: 0;
    }
}