@charset "utf-8";
/* CSS Document */

/*-------------------------
   Banner
-------------------------*/
.banner {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}
.banner img {
    width:100%;	
}

/*-------------------------
   Container
-------------------------*/
.container {
    margin: 10px 80px 10px 80px;
}

/*-------------------------
   Main Column
-------------------------*/
.maincol {
    width: 98%;
    float: left;
    margin:0 0 15px 0px;
    border:1px solid #E0E0E0; /* soft grey border */
    background-color:#F4F4F4; /* soft grey background */
    padding:5px 5px 5px 7px;
    color: #333333; /* default body text */
}

.maincol h1 {
    font-size: 130%;
    font-family:"Arial Black", Gadget, sans-serif;
    color: #E65100; /* orange headings */
    padding:0 0 0 8px;
}

.maincol .introduction {
    width:99%;
    padding:5px 0 2px 0;
    margin-bottom:10px;
    font-size:90%;
    color: #333333; /* body text */
}

.maincol p {
    font-size: 100%;
    padding:0 10px;
    font-family:Arial, Helvetica, sans-serif;
    color: #333333; /* body text */
}

.maincol .quote {
    font-style:italic;
    color: #333333; /* body text */
}

.maincol a {
    font-weight: normal;
    color: #E65100; /* orange links */
    text-decoration: none;
}
.maincol a:hover {
    color: #F57C00; /* brighter orange on hover */
}

.maincol h3 {
    font-size: 100%;
    font-family:Arial, Helvetica, sans-serif;
    text-decoration: underline;
    color: #E65100; /* headings color */
}

/*-------------------------
   Shop Section
-------------------------*/
.shop {
    width:100%;
    padding:5px 0px 5px 13px;	
}

/* Modern single-image shop */

Here’s the updated CSS for left alignment:

.shop-menu {
    width: 100%;           /* full container width */
    text-align: left;       /* align content to left */
    margin: 20px 0;         /* spacing around the section */
}

.shop-menu img {
    width: 50%;            /* make image half the container width, adjust as needed */
    max-width: 600px;      /* optional max width */
    height: auto;
    float: left;           /* float image to the left */
    margin-right: 20px;    /* spacing between image and caption or text */
    border: 2px solid #E0E0E0; 
    border-radius: 8px;     
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

.shop-menu .caption {
    font-size: 1rem;
    font-family: Arial, Helvetica, sans-serif;
    color: #333333;
    overflow: hidden; /* ensures container wraps around floated image */
}

/*-------------------------
   Tablet Styles
-------------------------*/
@media screen and (min-width: 760px) and (max-width: 1200px) {
    .container {
        margin: 5px 10px 5px 10px;
    }
    .maincol {
        width:95%;
    }
    .shop-menu img {
        width: 90%;
        max-width: 500px;
    }
}

/*-------------------------
   Mobile Styles
-------------------------*/
@media screen and (min-width: 310px) and (max-width: 759px) {
    .container {
        margin: 5px 3px 5px 3px;
    }
    .maincol {
        width: 94%;
        padding: 0;
    }
    .maincol h1 {
        font-size:115%;
    }
    .shop-menu img {
        width: 100%;
        max-width: none;
    }
}