/* =========================================
   Streamcorner Coffee Shop Styles
   ========================================= */

/* =========================================
   Global Styles & Resets
   ========================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; scroll-behavior: smooth; }
body {
  font-family: system-ui, -apple-system, BlinkMacMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  line-height: 1.6;
  color: #333333;
  background-color: #ffffff;
}

/* =========================================
   Layout & Container
   ========================================= */
main {}
footer { padding: 30px 15px; background-color: #222222; color: #cccccc; text-align: center; font-size: 0.9em; margin-top: 40px; border-top: 3px solid #555555; }
footer > * { max-width: 960px; margin-left: auto; margin-right: auto; }
footer p { margin-bottom: 0.5em; }

.container { width: 100%; max-width: 960px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; }

main > .container { margin-top: 40px; margin-bottom: 40px; }


/* =========================================
   Header Styles
   ========================================= */
header { background-color: #222222; color: #ffffff; border-bottom: 1px solid #444444; padding: 0 15px; }
.header-container { display: flex; justify-content: space-between; align-items: center; max-width: 1280px; margin-left: auto; margin-right: auto; min-height: 100px; }
.header-left { display: flex; align-items: center; gap: 30px; }
.header-right { display: flex; align-items: center; }
.site-branding { margin-bottom: 0; line-height: 0; }
.site-logo { display: block; height: 80px; width: auto; margin: 0; }
header nav ul { list-style: none; padding: 0; margin: 0; }
header nav li { display: inline-block; margin: 0; }
header nav a { display: block; color: #ffffff; text-decoration: none; padding: 10px 0; font-weight: 600; font-size: 0.9em; letter-spacing: 0.5px; text-transform: uppercase; transition: color 0.2s ease-in-out; }
header nav a:hover, header nav a:focus { color: #bbbbbb; text-decoration: none; }
.primary-nav li + li { margin-left: 25px; }
.secondary-nav li { margin-left: 15px; }
.location-link { padding-left: 24px; position: relative; text-transform: none; font-size: 0.85em; font-weight: 600; }
.location-link::before { content: ""; display: inline-block; width: 16px; height: 16px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>'); background-repeat: no-repeat; background-size: contain; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }

/* =========================================
   Typography
   ========================================= */
h1, h2, h3 { line-height: 1.3; margin-bottom: 1em; color: #222222; font-weight: bold; }
h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.15em; font-weight: bold; margin-bottom: 0.5em; color: #333; }
p { margin-bottom: 1.2em; }
main a { color: #016241; text-decoration: underline; font-weight: 600; }
main a:hover, main a:focus { text-decoration: none; color: #003c26; }
strong, b { font-weight: bold; color: #000000; }
em, i { font-style: italic; }

/* =========================================
   Hero Section Styles
   ========================================= */
.hero-section { background-color: #444; background-size: cover; background-position: center center; min-height: 65vh; padding: 60px 15px; display: flex; align-items: center; justify-content: flex-start; position: relative; color: #ffffff; width: 100%; }
.hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 1; }
.hero-content { width: 100%; max-width: 960px; margin-left: auto; margin-right: auto; text-align: left; position: relative; z-index: 2; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); }
.hero-pre-headline { font-size: 0.9em; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 0.5em; color: rgba(255, 255, 255, 0.9); }
.hero-headline { font-size: 3em; font-weight: bold; line-height: 1.1; margin-bottom: 0.4em; color: #ffffff; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); }
.hero-subtext { font-size: 1.1em; margin-bottom: 1.5em; line-height: 1.6; max-width: 550px; }
.hero-button { display: inline-block; background-color: #333; color: #fff; padding: 12px 25px; border-radius: 4px; text-decoration: none; font-weight: bold; font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.5px; transition: background-color 0.2s ease, transform 0.1s ease; text-shadow: none; border: 1px solid #555; position: relative; padding-right: 40px; }
.hero-button:hover, .hero-button:focus { background-color: #555; color: #ffffff; outline: none; }
.hero-button:active { transform: scale(0.98); }
.hero-button .external-link-icon { display: inline-block; width: 14px; height: 14px; background-color: currentColor; mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>'); mask-repeat: no-repeat; mask-size: contain; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); }

/* =========================================
   Other Info Section Styles
   ========================================= */
.info-section { padding: 50px 0; background-color: #f8f9fa; width: 100%; }
.centered-text { text-align: center; }
.info-section .container.centered-text h2 { margin-bottom: 0.5em; }
.info-section .container.centered-text p { max-width: 650px; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; color: #555; }

/* General Button Style */
.button { display: inline-block; background-color: #333333; color: #ffffff; padding: 12px 25px; border: none; border-radius: 4px; font-size: 1em; font-weight: bold; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease-in-out, transform 0.1s ease; }
.button:hover, .button:focus { background-color: #555555; color: #ffffff; outline: none; text-decoration: none; }
.button:active { transform: scale(0.98); }

/* =========================================
   Menu Page Styles (2-Column Mobile Grid)
   ========================================= */

.menu-main-category:first-of-type { margin-top: 30px; }
.menu-main-category { margin-bottom: 3em; }
.menu-main-category h2 { border-bottom: 3px solid #ddd; padding-bottom: 0.5em; margin-bottom: 1.5em; color: #111; }
.menu-subcategory-heading { font-size: 1.3em; color: #444; margin-bottom: 1.5em; margin-top: 1em; border-bottom: 1px dashed #ccc; padding-bottom: 0.4em; text-align: left; }

/* --- The Grid Container (UPDATED for 2 columns by default) --- */
.menu-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  /* Default to 2 columns on small screens */
  grid-template-columns: repeat(2, 1fr); /* <<< Changed default to 2 columns >>> */
  gap: 20px; /* Space between grid items */
}

/* --- Grid Columns for Medium Screens (Keep 2 columns) --- */
@media (min-width: 576px) {
  .menu-grid {
    /* This rule already creates 2 columns between 576px and 991px */
    /* It resolves to 2 columns because container width/2 is > minmax(250px) */
    /* No explicit change needed here, but keep the rule */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

/* --- Grid Columns for Large Screens (3 columns) --- */
@media (min-width: 992px) {
  .menu-grid {
    grid-template-columns: repeat(3, 1fr); /* Forces 3 columns */
  }
}
/* ------------------------------------ */


/* Individual Menu Item Card */
.menu-item-card {
  background-color: #f8f9fa;
  border: 1px solid #eeeeee;
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column; /* Stack image and text vertically */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease-in-out;
  /* Cards will stretch vertically to match tallest in row by default */
}
.menu-item-card:hover { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); }


/* --- Image Container (Top Part - FIXED HEIGHT) --- */
.menu-item-image-container {
  width: 100%; /* Take full width of the card */
  height: 300px; /* <<< SET FIXED HEIGHT HERE (Adjust value as needed) >>> */
  line-height: 0; /* Prevents extra space below image */
  position: relative;
  background-color: #eee; /* Placeholder color */
  overflow: hidden; /* Hide parts of image that overflow */
}

.menu-item-no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 0.8em;
}
.menu-item-no-image span { line-height: 1.4; }


.menu-item-image { /* Image itself */
  display: block;
  width: 100%;
  height: 100%; /* Make image fill container */
  object-fit: cover; /* Crop image to fit fixed container */
}
/* ------------------------------------------- */


/* --- Text Container (Bottom Part - Black BG) --- */
.menu-item-text-container {
  background-color: #222222; /* Black background */
  color: #ffffff; /* White text */
  padding: 12px 15px; /* Padding around text */
  flex-grow: 1; /* Allow text area to grow vertically */
  display: flex;
  flex-direction: column; /* Stack text inside vertically */
}

.menu-item-name { /* Item Name (h4) */
  font-size: 1.1em;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 0.4em;
  line-height: 1.3;
}

.menu-item-price { /* Item Price */
  font-weight: 600;
  color: #eeeeee;
  font-size: 1em;
  margin-bottom: 0.8em;
  padding-top: 5px;
}

.menu-item-description { /* Item Description */
  color: #cccccc;
  font-size: 0.9em;
  line-height: 1.5;
  flex-grow: 1; /* Takes up space, pushing price if needed */
  margin-bottom: 0;
}
.menu-item-description p { margin-bottom: 0.5em; }
.menu-item-description p:last-child { margin-bottom: 0; }
.menu-item-description strong { color: #ffffff; }
.menu-item-description em { font-style: italic; }
/* --------------------------------------------- */


/* =========================================
   Shop Page Styles
   ========================================= */

.shop-main-category:first-of-type { margin-top: 30px; }
.shop-main-category { margin-bottom: 3em; }

/* Main category heading */
.shop-main-category h2 {
    text-align: center;
    font-size: 2.5em;
    color: #222222; /* Consistent with other h2 */
    margin-bottom: 1em;
    border-bottom: 3px solid #ddd; /* Consistent with menu category h2 */
    padding-bottom: 0.5em;
    display: inline-block; /* To make border-bottom only as wide as text */
    margin-left: auto;
    margin-right: auto;
}

/* Subcategory heading */
.shop-subcategory-heading {
    font-size: 1.3em; /* Consistent with menu subcategory */
    color: #444; /* Consistent with menu subcategory */
    margin-top: 2em;
    margin-bottom: 1.5em; /* Consistent with menu subcategory */
    border-bottom: 1px dashed #ccc; /* Consistent with menu subcategory */
    padding-bottom: 0.4em; /* Consistent with menu subcategory */
    text-align: left;
}

/* Shop Grid Container */
.shop-grid {
    display: grid;
    /* Default to 2 columns on small screens, adjust for mobile responsiveness */
    grid-template-columns: repeat(2, 1fr);
    gap: 20px; /* Space between cards, consistent with menu */
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0;
}

/* Responsive Grid Adjustments */
@media (min-width: 576px) {
  .shop-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Auto-fit columns for wider screens */
  }
}

@media (min-width: 992px) {
  .shop-grid {
    grid-template-columns: repeat(3, 1fr); /* Force 3 columns on large screens */
    gap: 30px; /* Larger gap for desktop, consistent with menu */
  }
}


/* Individual Shop Item Card */
.shop-item-card {
    background-color: #f8f9fa; /* Consistent with menu card */
    border: 1px solid #eeeeee; /* Consistent with menu card */
    border-radius: 6px; /* Consistent with menu card */
    overflow: hidden; /* Ensures image and text don't spill */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Consistent with menu card */
    display: flex;
    flex-direction: column; /* Stack image on top of text */
    transition: box-shadow 0.2s ease-in-out; /* Consistent with menu card */
}

.shop-item-card:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); /* Consistent with menu card hover */
}

/* Image Container (Top) */
.shop-item-image-container {
    width: 100%;
    height: 300px; /* Fixed height for images, consistent with menu */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eee; /* Placeholder background, consistent with menu */
}

.shop-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container without distorting aspect ratio */
    display: block;
}

.shop-item-no-image {
    color: #aaa; /* Consistent with menu no-image */
    font-size: 0.8em; /* Consistent with menu no-image */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Text Container (Bottom - Dark Background) */
.shop-item-text-container {
    padding: 12px 15px; /* Consistent with menu text container */
    background-color: #222222; /* Dark background, consistent with menu */
    color: #ffffff; /* Light text, consistent with menu */
    flex-grow: 1; /* Allows this section to grow and fill space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes button to bottom if content is short */
}

.shop-item-name {
    font-size: 1.1em; /* Consistent with menu item name */
    margin-top: 0;
    margin-bottom: 0.4em; /* Consistent with menu item name */
    color: #ffffff; /* Consistent with menu item name */
}

.shop-item-price {
    font-size: 1em; /* Consistent with menu item price */
    font-weight: 600; /* Consistent with menu item price */
    color: #eeeeee; /* Consistent with menu item price */
    margin-bottom: 0.8em; /* Consistent with menu item price */
    padding-top: 5px; /* Consistent with menu item price */
}

.shop-item-description {
    font-size: 0.9em; /* Consistent with menu item description */
    line-height: 1.5; /* Consistent with menu item description */
    color: #cccccc; /* Consistent with menu item description */
    flex-grow: 1; /* Allows it to grow and push button down */
    margin-bottom: 15px; /* Add some space before the button */
}
.shop-item-description p { margin-bottom: 0.5em; }
.shop-item-description p:last-child { margin-bottom: 0; }
.shop-item-description strong { color: #ffffff; }
.shop-item-description em { font-style: italic; }


/* Buy Button */
.shop-item-buy-button {
    display: block; /* Make it a block-level button */
    width: 100%;
    padding: 10px 15px;
    background-color: #016241; /* Your primary accent color */
    color: #ffffff; /* White text for the button */
    text-align: center;
    text-decoration: none;
    border-radius: 4px; /* Consistent with other buttons */
    margin-top: auto; /* Pushes button to the bottom */
    transition: background-color 0.2s ease;
    font-weight: bold;
    font-size: 0.9em;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.shop-item-buy-button:hover, .shop-item-buy-button:focus {
    background-color: #003c26; /* Darker shade of your accent color on hover */
    color: #ffffff;
    outline: none;
    text-decoration: none;
}
.shop-item-buy-button:active { transform: scale(0.98); }


/* =========================================
   Contact Form Styles (If used on Location page)
   ========================================= */
.container form label { display: block; margin-bottom: 5px; font-weight: bold; color: #333333; }
.container form input[type="text"], .container form input[type="email"], .container form textarea { display: block; width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #cccccc; border-radius: 4px; font-family: inherit; font-size: 1em; background-color: #fff; color: #333; }
.container form input[type="text"]:focus, .container form input[type="email"]:focus, .container form textarea:focus { border-color: #555; outline: none; box-shadow: 0 0 5px rgba(85, 85, 85, 0.2); }
.container form textarea { min-height: 150px; resize: vertical; }
.container form button { background-color: #333333; color: #ffffff; padding: 12px 25px; border: none; border-radius: 4px; font-size: 1em; font-weight: bold; cursor: pointer; transition: background-color 0.2s ease-in-out, transform 0.1s ease; }
.container form button:hover, .container form button:focus { background-color: #555555; outline: none; }
.container form button:active { transform: scale(0.98); }


/* =========================================
   About Page Specific Styles
   ========================================= */

/* Utility Padding */
.section-padding {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Shared alternate headline style (Black Color) */
.section-headline-alt {
    color: #222222;
    font-size: 1.8em;
    margin-bottom: 0.8em;
    position: relative;
    padding-bottom: 0.5em;
    display: inline-block;
}
.section-headline-alt::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: #222222;
}

/* Prose styling for markdown content */
.prose {
    color: #555;
    line-height: 1.7;
}
.prose h3 { font-size: 1.2em; margin-top: 1.5em; margin-bottom: 0.5em; color: #333; border-bottom: none; padding-bottom: 0;}
.prose ul { list-style: disc; padding-left: 25px; margin-bottom: 1em; }
.prose li { margin-bottom: 0.5em; }
.prose p { margin-bottom: 1em; }
.prose p:last-child { margin-bottom: 0; }


/* --- Intro Section --- */
.about-intro { background-color: #fdfdfd; }
.about-intro-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.about-intro-image img { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
@media (min-width: 768px) { .about-intro-grid { grid-template-columns: 1.2fr 1fr; } }

/* --- Full Width Banner --- */
.full-width-banner {
  background-size: cover;
  background-position: center center;
  padding: 80px 15px;
  position: relative;
  color: #ffffff;
  text-align: center;
  width: 100%;
}
.full-width-banner::before { /* Overlay */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.4); /* Darker overlay */
    z-index: 1;
}
.banner-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
}
.banner-preheadline {
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 0.3em;
    color: rgba(255, 255, 255, 0.8);
}
.banner-headline {
    font-size: 2.5em;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 0;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* --- Approach Section --- */
.about-approach { background-color: #fff; }
.about-approach-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: flex-start; }
.about-approach-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; }
.about-approach-images img { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 3px 10px rgba(0,0,0,0.08); }
@media (min-width: 768px) { .about-approach-grid { grid-template-columns: 1.2fr 1fr; } }

/* --- Milestones Section --- */
.milestones-section { background-color: #f1f1f1; }
.milestones-header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #ccc; margin-bottom: 40px; padding-bottom: 10px; }
.milestones-header h3 { font-size: 1.6em; margin-bottom: 0; color: #333; border-bottom: none; }
.milestones-year { font-size: 1.8em; font-weight: bold; color: #aaa; }
.milestones-list { /* No specific styles needed */ }
.milestone-item { display: grid; grid-template-columns: 1fr; gap: 30px; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #ddd; align-items: center; }
.milestone-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.milestone-image img { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.milestone-content h4 { font-size: 1.3em; color: #a0522d; margin-bottom: 0.2em; }
.milestone-date { font-size: 0.85em; color: #777; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.8em; font-weight: 600; }
.milestone-content p { color: #555; font-size: 0.95em; margin-bottom: 0; }
@media (min-width: 768px) {
    .milestone-item { grid-template-columns: 1fr 1.5fr; }
    .milestone-item:nth-child(odd) { grid-template-columns: 1.5fr 1fr; }
     .milestone-item:nth-child(odd) .milestone-image { grid-column: 2 / 3; grid-row: 1 / 2; }
    .milestone-item:nth-child(odd) .milestone-content { grid-column: 1 / 2; grid-row: 1 / 2; }
}

/* =========================================
   Responsive Considerations
   ========================================= */

@media (max-width: 991px) { /* Covers tablets */ }

@media (max-width: 767px) { /* Mobile adjustments */
    /* Header */
    .header-container { min-height: 80px; padding: 5px 0; }
    .site-logo { height: 60px; }
    .header-left { gap: 15px; flex-grow: 1; }
    header nav a { font-size: 0.8em; }
    .primary-nav li + li { margin-left: 15px; }
    .location-link { font-size: 0.8em; padding-left: 20px; }
    .location-link::before { width: 14px; height: 14px; }
    /* Hero */
    .hero-section { min-height: 50vh; padding: 40px 15px; justify-content: center; text-align: center; }
    .hero-content {}
    .hero-headline { font-size: 2.2em; }
    .hero-subtext { font-size: 1em; max-width: 90%; margin-left: auto; margin-right: auto; }
    .hero-button { font-size: 0.85em; padding: 10px 20px; padding-right: 35px; }
    .hero-button .external-link-icon { width: 12px; height: 12px; right: 12px; }
    /* Typography */
     h1 { font-size: 2em; }
     h2 { font-size: 1.7em; }
     h3 { font-size: 1.3em; }
     .section-headline-alt { font-size: 1.5em; }
    /* Menu & Shop Grid Mobile */
    .menu-item-image-container, .shop-item-image-container { height: 180px; }
    .menu-item-text-container, .shop-item-text-container { padding: 10px 12px; }
    .menu-item-name, .shop-item-name { font-size: 0.95em; }
    .menu-item-price, .shop-item-price { font-size: 0.9em; }
    .menu-item-description, .shop-item-description { font-size: 0.8em; }
    .shop-item-buy-button { font-size: 0.85em; padding: 8px 12px; } /* Slightly smaller button for small mobiles */
    /* About Page Mobile */
    .section-padding { padding-top: 40px; padding-bottom: 40px;}
    .banner-headline { font-size: 2em;}
    .milestone-item, .milestone-item:nth-child(odd) { grid-template-columns: 1fr; }
     .milestone-item:nth-child(odd) .milestone-image { grid-column: auto; grid-row: auto; }
     .milestone-item:nth-child(odd) .milestone-content { grid-column: auto; grid-row: auto;}
     .milestones-header { flex-direction: column; align-items: flex-start; }
     .milestones-year { margin-top: 5px; font-size: 1.5em; }
}

/* Small mobile breakpoint */
@media (max-width: 575px) {
   /* Keep 2 columns, inherited from default */
   /* .menu-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; } */ /* Optional: reduce gap */
   /* Optional: Adjust image height for very small screens */
   /* .menu-item-image-container { height: 120px; } */
   /* Optional: Adjust font sizes further */
}

/* Medium screens breakpoint */
@media (min-width: 576px) and (max-width: 991px) {
   /* Keep 2 columns */
}


/* Large screens breakpoint */
@media (min-width: 992px) {
    .container { max-width: 960px; } /* Reset container max-width if changed elsewhere */
    .header-container { max-width: 1280px; } /* Reset header max-width if changed elsewhere */
    /* Keep 3 columns */
    .menu-grid, .shop-grid { gap: 30px; }
    /* Optional: Adjust desktop image height */
    /* .menu-item-image-container { height: 320px; } */
}

/* Optional: Extra Large screens */
@media (min-width: 1200px) {
     .container { max-width: 1140px; } /* Wider container */
     .header-container { max-width: 1400px; } /* Wider header */
     /* Keep 3 columns */
}