@media only screen and (max-width: 1000px) {
    .page_body.with_cols {
        display: block;
    }

}

@media only screen and (max-width: 800px) {

    :root {
        --standard-padding: 3vw;
        --standard-padding-small: 1vw;
        --standard-padding-half: 1.5vw;
    }

    body {
        font-size: 0.9em;
    }
    .main_back {
        background-position: center top;
    }
    .grid_body>header {
        background-position: center top;
    }
    .page_header {
        padding: 1vw;
        grid-template-areas:
            'logo logo cart menubtn'
            'tel tel  cart menubtn'
            'menu menu menu menu';
    }

    .page_header  .menu_bar_button{
        display: block;
        grid-area: menubtn;

        width: 60px;
        height: 60px;
        border-radius: 6px;
        box-shadow: var(--standard-shadow);
        background-color: #FFF;
        background-image: url(/assets/images/background.webp);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 400%;
        overflow: hidden;
        margin-left: 10px;
    }

    .menu_bar_button .fil0 {
        transition: all 0.5s;
        transform-origin: center center;
    }
    
    .menu_bar_button.opened #line_1 {
        transform: rotate(45deg) translate(0, 10px) ;
        
    }
    .menu_bar_button.opened #line_2 {
        transform: scaleX(0);
    }
    .menu_bar_button.opened #line_3 {
        transform: rotate(-45deg) translate(0, -10px) ;
    
    }
    
    .menu_bar_button svg {
        fill: var(--main-colour-3);
    }

    .page_header  .menu_bar_button svg {
        background-color: RGBA(255,255,255,0.8);
        padding: 0;
    }
    .page_header h1, .page_header.fixed h1 {
        font-size: 24px;
        text-align: left;
    }
    .page_header h1 a {
        height: 100%;
        display: flex;
        align-items: center;

    }
    .page_header .tagline {
        text-align: left;
        display: none;
    }
    .page_header .tel {
        padding: 0;
    }
    .page_header .tel>div {
        display: flex;

    }
    .page_header .tel label, .page_header.fixed .tel label {
        display: none;
    }
    .page_header .tel span.icon {
        display: none;
    }
    .page_header .tel output {
        font-size: 14px;
    }
    .page_header .menu {
        display: none;
    }
    .page_header.fixed .tel label {
        max-height: unset;
    }

    
    .grid_body {
        /* display: flex;
        flex-direction: column; */
        grid-template-columns: 1fr;

        grid-template-areas:
            'header'
            'main'
            'right'
            'left' 
            'footer';


    }
    .grid_body>.left_bar {
        max-width: 100%;
        padding: var(--standard-padding);
    }
    .grid_body>.left_bar .side_menu{
        display: none;
    }
   
    .page_header .cart {
        padding: 0;
        width: 60px;
        height: 60px;
        margin-left: 5px;
    }
    .page_header .cart a, .page_header .cart .left_icon {
        width: 60px;
        height: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-content: center;
    }
    .page_header .cart .left_icon .icon {
        display: block;
    }
    .page_header .cart .body h2 {
        display: none;
    }
    .page_header .cart .body .info {
        display: block;
    }
    .page_header .cart .body .info>div:first-child {
        display: none;
    }
    .page_header .cart .body .info>div label {
        display: none;
    }
    .page_header .cart .body .info>div {
        display: block;
        padding: 0;
    }

    .page_header .cart .left_icon .icon {
        text-align: center;
    }
    .page_header .cart .left_icon .icon .material-icons{
        font-size: 34px;
        color: var(--main-colour-3);
    }

    .page_header.fixed .cart {
        padding: 0;
       
    }
    .page_header.fixed .cart a {
        box-shadow: var(--standard-shadow);
        border-radius: 6px;
    }
    .page_header.fixed .cart .left_icon {
        padding: 0;
    }

    

    .body>.content h1 {
        font-size: 20px;
        text-align: center;
    }
    .category_grid_item {
        margin: 1vw;
    }
    .category_grid_item a {
        width: 100px;
        height: 100px;
    }

    .category_grid_item a h2 {
        font-size: 14px;
        height: 3em;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
    }
    .grid_body>footer .menu {
        padding: 0;
    }

    #footer_menu {
        position: fixed;
        top: 70px;
        bottom: 0;
        right: 0;
        background-color: RGBA(0,0,0,0.7);
        overflow: hidden;
        overflow-y: auto;
        transition: var(--standard-transition);
        max-width: 0;
        min-width: 0;
        width: 0;
        
        display: grid;
        grid-template-areas:
            'shop'
            'main';
    }

    #footer_menu .main_menu {
        grid-area: main;
    }
    #footer_menu .shop_menu {
        grid-area: shop;
    }
    #footer_menu.opened {
       
        width: 600px;
        max-width: 100vw;
        
    }
    #footer_menu.closed {
        max-width: 0;
        min-width: 0;
        width: 0;
        
    }
    #footer_menu ul,   #footer_menu menu {
        width: 600px;
        padding: 5px;
        max-width: 100vw;

    }
    #footer_menu ul.main_menu,  #footer_menu menu.main_menu {
        display: block;
       
    }
    #footer_menu ul.main_menu  li a, #footer_menu menu.main_menu  li a{
        color: #000;
        
    }
    .grid_body>footer .menu ul.shop_menu.with_image, .grid_body>footer .menu menu.shop_menu.with_image {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;


    }
    .grid_body>footer .menu ul.shop_menu.with_image li, .grid_body>footer .menu menu.shop_menu.with_image li {
        background-color: #FFF;
        text-align: center;
        margin: 0;
        box-shadow: var(--standard-shadow);
        padding: var(--standard-padding-small);
        background-color: #FFF;
        width: 100%;
        border-radius: 4px;
        padding: 0;
    }
    .grid_body>footer .menu ul.shop_menu.with_image li a,   .grid_body>footer .menu menu.shop_menu.with_image li a {
        display: flex;
        white-space: unset;
        overflow: hidden;
        background-image: unset!important;
        flex-direction: row;
        align-items: center;
        align-content: center;
        padding: 02px;
    }
    ul.shop_menu.with_image li a span, menu.shop_menu.with_image li a span  {
        display: block;
        color: #000;
    }
    ul.shop_menu.with_image li a span.icon, menu.shop_menu.with_image li a span.icon {
        display: block;
        width: 30px;
        height: 30px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 4px;
        overflow: hidden;
    }
    ul.shop_menu.with_image li a span.icon img, menu.shop_menu.with_image li a span.icon img {
        width: 30px;
        height: 30px;
        visibility: hidden;
        border-radius: 4px;
    }

    ul.shop_menu.with_image li a span.text, menu.shop_menu.with_image li a span.text {
        display: block;
        white-space: unset;
        padding:  0 .5vw;
        text-align: left;
  
    }

    #footer_menu ul.main_menu, #footer_menu menu.main_menu {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    ul.main_menu li, menu.main_menu li{ 
        background-color: #FFF;
        text-align: center;
        margin: 0;
        box-shadow: var(--standard-shadow);
        padding: var(--standard-padding-small);
        background-color: #FFF;
        width: 100%;
        border-radius: 4px;
        padding: 0;
        max-width: 150px;
        margin: 5px;
    }
    ul.main_menu li a, menu.main_menu li a{ 
        background-color: #FFF;
        padding: 2px;
        line-height: 30px;
    }

    

    .products_item .contents .description  {
        padding: 0 2vw;
    }

    .products_details {
        grid-template-areas:
            'images desc'
            'actions actions '
            'extras extras';
        grid-template-columns: 1fr;
    }

    .image_grid {
        margin: 0 auto;
        margin-bottom: 3vw;
        gap: 10px;
    }
    .products_details .image_grid .primary {
        width: 300px;
    }
   

    .testimonials {
        flex-direction: column;
    }

    .testimonials_item {
        min-width: 0;
        max-width: 100%;
    }
    .testimonials_item .quote {
        align-items: flex-start
    }

    .main_messages .message {
        background-color: rgba(var(--main-colour-1-rgb),0.95);
    }
    .notification_area {
        right: 0;
    }
    .notification_area .main_messages {
        min-width: 300px;
        max-width: 95vw;
        
    }
    .main_messages .message .close_btn {
        background-color: RGBA(255,255,255,0.95);
    }
    .basket_table_item .contents .image img {
        max-width: 100px;
    }
    .basket .btn.small, .basket .btn {
        padding: 0 10px;
    }
    .page_body_col.right {
        margin-left: 0;
    }
    .page_body_col.right section.checkout_control {
        display: none;
    }

    .page_body section.control {
        margin: 30px 0;
        padding: 20px;
    }

    .basket_summery {
        width: 100%;
        max-width: 100vw;
    }
    form.standard fieldset {
        margin-bottom: 10px;
    }
    .app_modal_contents {
        min-width: 0;
        max-width: 95vw;
    }
    .right .max {
        margin: 0 auto;
    }

    section.standard {
        max-width: 350px;
        margin: 5px auto;
    }
}
@media only screen and (max-width: 600px) {
    .products_item .contents {
        grid-template-areas:
            'header'
            'image'
            'desc '
            'footer';
        
        grid-template-columns: 1fr;
        padding: 3vw;
    }
    .products_item .contents .header {
        margin-bottom: 3vw;
    }



    .products_item .contents .image img {
        width: 400px;
        max-width: 100%;
        
    }

    .grid_body>footer .menu ul.shop_menu.with_image, .grid_body>footer .menu menu.shop_menu.with_image {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;


    }

    ul.main_menu, menu.main_menu {
        display: flex;
        
    }

    .products_details {
        grid-template-areas:
            'images'
            'actions '
            'desc'
            'extras';
        grid-template-columns: 1fr;
    }
    .basketform  {
        min-width: unset;
    }

    .basketform .body .item.custom .group .option, .basketform .body .item.custom .group .units {
        min-width: 200px;
    }

    .checkout form.standard {
        display: flex;
        flex-direction: column;
    }
    form.standard .row.multi {
        display: block;
    }
    
}