.close-menu-button{
    display: none;
}

/* Mobile-specific CSS */
@media (max-width: 768px) {
    .layout {
        grid-template-areas:
            'header'
            'main';
        grid-template-columns: 100%;
        grid-template-rows: auto 1fr;
    }

    aside#menu {
        position: fixed;
        top: 0;
        left: -230px; /* Initially hide the menu */
        bottom: 0;
        width: 230px;
        z-index: 1001; /* Higher than main content */
        transform: translateX(0); /* Override fixed left position */
        transition: transform 0.3s ease-in-out;
        overflow-y: auto;
    }

    aside#menu.open {
        transform: translateX(230px); /* Slide in the menu */
    }

    aside#menu .close-menu-button {
        background: none;
        color: white;
        border: none;
        cursor: pointer;
        padding: 5px;
        display:block;
        position: absolute;
        left: 0;
    }

    aside#menu .close-menu-button svg {
        fill: white;
        width: 40px;
        height: 40px;
    }

    #main {
        padding: 70px 0 0 0;
        transition: margin-left 0.3s ease-in-out;
        max-width: 100vw;
    }

    .top-menu {
        background-color: #222933;
        color: white;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000; /* Below the off-canvas menu */
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
    }

    .top-menu .logo {
        height: 30px; /* Adjust mobile logo size */
        width: auto;
        background-position: left center;
        background-size: contain;
        margin: 0; /* Reset default margin */
    }

    .hamburger-menu {
        display: block;
        cursor: pointer;
        padding: 10px;
    }

    .bar {
        width: 25px;
        height: 3px;
        background-color: white;
        margin: 5px 0;
        transition: 0.4s;
    }

    .hamburger-menu.open .bar:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .hamburger-menu.open .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger-menu.open .bar:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }
}

/* Hide the desktop logo on mobile */
@media (max-width: 768px) {
    .hideOnMobile{
        display: none !important;
    }
    .layout > aside > .logo {
        display: none;
    }

    .mass-update-form{
        display: none;
    }
    .header_items_grid h4{
        display: none;
    }
    .productsIndex .header_items_grid{
        grid-template-columns: 1fr;
    }
    .productsIndex .filterGrid {
        display: grid;
        grid-template-columns: repeat(2, auto);
        gap: 10px;
    }
    .listingTitleAndButtons > *{
        gap: 10px;
    }
    .listingTitleAndButtons .downloadCSVfile{
        display: none;
    }
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }
    
    .table-responsive table {
        min-width: 100%;
    }
    table td, table th{
        padding: 10px 5px;
    }
    .sticky-col {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 1;
        background-color: inherit;
    }
    .first-sticky {
        left: 0;
    }
    .second-sticky {
        left: 50px;
    }
    .minwidth550 {
        min-width: 300px;
    }
    .productBackgroundImages{
        grid-template-columns: 1fr;
    }
    .productUpdatePartsGallery{
        grid-template-columns: repeat(auto-fit, 98px);
        grid-template-rows: repeat(auto-fit, 98px);
    }
    .image_box{
        width: 98px;
        height: 98px;
    }
    .productUpdateGrid {
        display: grid;
        gap: 10px;
        grid-template-areas:
            'productBackgroundImages'
            'productSettings'
            'productVendorData'
            'productImprintCharges'
            'productWarningsAndErrors';
        grid-template-columns: 1fr;
    }
    .merchant_productUpdateGrid{
        display: grid;
        gap: 10px;
        grid-template-areas:
            'productSettings'
            'productVendorData'
            'productBackgroundImages';
        grid-template-columns: 1fr;
    }
    .merchant_productUpdateGrid .merchant_productBackgroundImages{
        grid-template-columns: repeat(3, 1fr);
    }
    .productBackgroundImages.merchant_productBackgroundImages .image_box {
        width: 100%;
    }
    .card{
        max-width: calc(100vw - 20px);
    }
    .productSettingGroups > div{
        grid-template-columns: 1fr 1fr;
    }
    .cardArtworkUploader form > div{
        grid-template-columns: 1fr 1fr;
    }
    .modal{
        position: fixed;
        left: 0;
        right: 0;
        width: 100vw;
        margin-left: 0;
    }
    .pricingDataGrid{
        grid-template-columns: 1fr;
    }

    .assignProducts .listingTitleAndButtons{
        display: grid;
        gap: 10px;
    }
    .assignProducts .listingTitleAndButtons .filterGrid{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .products_assignment_list{
        grid-template-columns: 1fr;
    }

    .importShow .listingTitleAndButtons {
        display: grid;
        gap: 10px;
    }
    .importShow .listingTitleAndButtons > div {
        display: grid        ;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        width: calc(100vw - 20px);
    }
    
    .importShow .listingTitleAndButtons a.looseButton {
        grid-row: 4;
        grid-column: 1 / -1;
        justify-self: start;
        width: calc(100% - 30px);
    }
    .importTask a.button{
        text-align: center;
    }
    .ordersIndex .header_items_grid .filterGrid {
        grid-template-columns: 1fr 1fr;
    }
    .ordersIndex .header_items_grid .filterGrid a.looseButton{
        grid-row: 2;
        grid-column: 1 / -1;
        justify-self: start;
        width: calc(100% - 30px);
    }
    .email_template_grid{
        grid-template-columns: 1fr;   
    }
    .email_template_grid .formLabelAndInput:nth-child(4){
        grid-template-columns: 1fr;   
    }
    .loginScreen .top-menu{
        display:none;
    }
}