@media only screen and (max-width: 1600px) {
    
    #header .wrapper {
    max-width: 92%;
    display: flex;
    justify-content: space-between;
}
    
    #footer .wrapper > span { display: grid ; grid-template-columns: 30% 15% 15% 30%; gap: 2%; }
    
    #foot_4 span {
    font-size: 14px;
    line-height: 25px;
}
}

@media only screen and (max-width: 1500px) {
    
    .delivery-day-wrapper {

    width: 400px;
}
    
    #new_single .wrapper > span{
        
         display: grid;
    grid-template-columns: 40% 55%; /* Adjust these values as needed */
    gap: 5%; /* Optional: Adjust the gap between columns if needed */
    }
    
.wrapper {
    max-width: 90%;
    display: block;
    margin: 0 auto;
}
    h1 {
    font-size: 40px;
    line-height: 1.2;
    margin-bottom: 24px;
}
    

}

@media only screen and (max-width: 1400px) {
    
    .explore_link {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 9;
    background: #e0ebfd;
    padding: 8px 20px;
    border-radius: 10px 0;
    font-size: 15px;
    color: #333;
}
    
    
    h2 {
    font-size: 30px;
    line-height: 1.3;
    margin-bottom: 20px;
}
    h3 {
    font-size: 25px;
    line-height: 1.4;
    margin-bottom: 18px;
}
    #footer .wrapper > span { display: grid ; grid-template-columns: 27% 13% 20% 30%; gap: 2%; }
    
        h1 {
        font-size: 33px;
        line-height: 1.2;
        margin-bottom: 24px;
    }
    
    p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 16px;
}
    
}


@media only screen and (max-width: 820px) {
    
    
   .mobile_a {
    font-size: 20px;
    color: #fff;
    margin-bottom: 15px;
    display: block;
}
    
   #plain,  #text_image {
    padding: 40px 0;
    display: block;
}
    
    #text_image .wrapper > div {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
}
  
    
    #text_image .wrapper > div .image{height:300px;}
    
    .b_milk strong {
    text-decoration: underline;
    font-size: 21px;
    display: block;
    line-height: 30px;
    margin-top: 5px;
}
    
    #cart_page{padding:40px 0;}
    
        .delivery-day-wrapper {
        width: 100%;
    }
    
    #mobile_menu > img {
        width: 100px;
        position: absolute;
        top: 10px;
    }
    
      .mobile-category-menu h3 {
        color: #fff;
        margin-bottom: 0;
    }
    
    .mobile-category-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-category-menu .menu-item {

}

    .mobile-category-menu .menu-toggle {
        width: 100%;
        padding: 15px 0;
        background-color: transparent;
        border: none;
        text-align: left;
        font-weight: bold;
        color: #fff;
        cursor: pointer;
        border-bottom: 1px solid #fff;
        background-image: url(https://dairyexpress.co.uk/wp-content/uploads/2025/06/arrow-down-3101-1.png);
        background-size: 25px;
        background-repeat: no-repeat;
        background-position: 100% 50%;
    }

     .mobile-category-menu .submenu {
        display: none;
        background: #fff;
        padding: 5px 0px;
    }

.mobile-category-menu .submenu li {
   
}

.mobile-category-menu .submenu li a {
    display: block;
    padding: 0.75rem 1rem;
    text-decoration: none;
   color:#333;
}

    
    
    
      #mobile_menu {
          overflow:scroll;
        width: 100%;
        position: fixed;
        height: 100%;
        top: 0;
        left: 0;
        background: #2b4b6b;
        z-index: 99;
        padding: 130px 20px 20px 20px;
    }
    
    #shop_filter .wrapper > span > div > form > ul {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
}#internal_banner .wrapper h1 {
    color: #fff;
    font-size: 30px;
}
    h1.product_title.entry-title {
    font-size: 30px;
}
    span#mobile_open {
    display: block !important;
    position: absolute;
    width: 55px;
    height: 55px;
    top: 20px;
    right: 20px;
    background-size: contain !important;
}
    
    
        span#mobile_close {
    display: block !important;
    position: absolute;
    width: 55px;
    height: 55px;
    top: 20px;
    right: 20px;
    background-size: contain !important;
}
    
/*    #banner_tiles{display:none!important;}*/
    
    #banner_tiles > div p:last-child{display:none;}
    #logo img {
    max-width: 100px;
}
    
    .list_product_image {
    display: block;
    width: 100%;
    height: 160px;
    position: relative;
}
    
    .list_product h3 {
        font-size: 14px;
        padding: 10px 20px;
        margin-bottom: 0;
        font-weight: 400;
        margin: 10px 0 20px 0;
    }
    
    #banner_tiles > div{padding:10px 10px 0 10px;}
    
    #shop_filter{display:none;}
    .list_product > p {
    padding: 10px 20px;
    font-size: 14px;
    margin-top: -20px;
    display: none;
}
    h1{font-size:38px;}
    .delivery-info .wrapper > span {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
}
    p{font-size:15px;}
    
    .delivery-info .wrapper {
    max-width: 100%;
    min-width: 100%;
}
    #header .wrapper {
    max-width: 90%;
    display: flex;
    justify-content: space-between;
}
    #home_banner .strapline p {
    font-size: 18px;
    max-width: 1000px;
    margin: 0 auto;
}
    h2 {
    font-size: 30px;
    }
    #categories {
    display: block;
    padding: 50px 0;
}
    
    #footer {
    display: block;
    width: 100%;
    height: auto;
    background: #2b4b6b;
    padding: 40px 0;
}
    
    #header #menu{display:none;}
    
    .wrapper{max-width:90%!important;}
    
    .mason_1 a, .mason_2 a{max-height:200px;}
    
    div#town_selection {
    display: block;
    padding: 20px 0 30px 0;

    }
    
    #copyright a {
    color: #000;
    font-weight: 600;
    display: block;
    margin: 10px 0 0 0;
}
    #reviews h3 {
    text-align: center;
    color: #324a68;
    font-size: 22px;
}
    
    #explore_more a {
    background: #549F93;
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    margin-top: 0px;
    display: inline-block;
    font-size: 18px;
}
    
    #home_banner{height:auto;padding:50px 0;}
    #banner_tiles {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    margin: 50px 0 0 0;
}
    
    div#new_single {
    padding: 20px 0 50px 0;
}
    
    #town_selection form {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    max-width: 600px;
    margin: 0 auto;
}
    
    
    
    #cat_mason > span {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}
    
    #footer .wrapper > span {
    display: grid;
    grid-template-columns: 100%;
    gap: 30px;
}

    
    #shop_archive .wrapper > span {
    display: grid;
    grid-template-columns: 100%;
    gap: 30px;
}
    
    #shop_right .products.columns-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
    
    
    #new_single .wrapper > span {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
}
    
}