/* Import a calligraphy-style font (you can change to your favorite later) */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Poppins:wght@300;400;600&display=swap');

/* --- COLOR PALETTE & MODERN STYLES --- */
/* PRIMARY ACCENT: Deep Green (#095d40) - Prominent */
/* SECONDARY ACCENT: Gold/Mustard (#c9a227) - Highlight */
/* BACKGROUND: Pure White (#ffffff) */

body {
  font-family: "Poppins", sans-serif;
  background: #ffffff; /* PURE WHITE background */
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* CRITICAL FIX FOR MOBILE: Helps fixed positioning behave correctly on some devices */
    height: 100%;
    overflow-x: hidden; /* Prevents horizontal scroll */
  color: #095d40; /* PRIMARY ACCENT: Deep Green text */
  padding-top: 80px;
}

/* Header */
header {
  background: #095d40; /* Solid Deep Green header (no gradient) */
  color: white;
  padding: 1rem 1.5rem; /* Increased padding for space */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Lighter shadow */
  
  position: fixed; /* Fixes the element relative to the viewport */
  top: 0;          /* Positions it at the very top */
  left: 0;         /* Positions it at the very left */
  width: 97%;     /* Ensures it spans the full width of the screen */
  z-index: 1000;   /* Ensures the header stays above all other content */
  
  /* CRITICAL FIX: Force GPU Acceleration */
  transform: translateZ(0); /* Or translate3d(0, 0, 0) */
  backface-visibility: hidden; /* Recommended alongside translateZ */
}

/* Main title */
header h1 {
  margin: 0;
  font-family: "Poppins", sans-serif
  font-size: 2.7rem;
  line-height: 1.2;
}

/* 'by Vanie' - MODERN CHANGE: Aligned with main title, lighter font */
header h1 .by-vanie {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 400; /* Lighter weight */
  color: #f5f5f5;
  padding-left: 150px; /* REMOVED: No more right shift */
  margin-top: -5px; 
}

.header-content {
  display: flex;
  justify-content: space-between; 
  align-items: center;
}

.header-title {
  /* CRITICAL: Use Flexbox to align the logo and title horizontally */
  display: flex;
  align-items: center; /* Vertically centers the logo with the h1 text */
  gap: 10px; /* Adds space between the logo and the text */
  
  text-align: left; /* Ensures the text is left-aligned within the title area */
  flex: 1; 
  cursor: pointer;
  
}

/* New CSS to style the Logo Image */
.header-logo {
  /* Adjust these values to control the size of your logo */
  width: 45px; 
  height: 45px; 
  object-fit: contain; /* Ensures the image scales without cropping */
  border-radius: 50%; /* Optional: Makes the logo round */
  flex-shrink: 0; /* Prevents the image from shrinking on smaller screens */
}

#locale-select {
  background-color: white;
  color: #095d40;
}

.locale-switcher {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.locale-switcher select {
  padding: 0.3rem 0.6rem; /* Slightly larger padding */
  border-radius: 8px; 
  border: 1px solid #f5f5f5; /* Light border on select */
  font-weight: 500;
  cursor: pointer;
}

#store-label {
  font-size: 0.8rem; /* Consistent modern small size */
  color: #f5f5f5; /* Contrast on green header */
  margin-bottom: 4px;
  vertical-align: bottom;
}

/* Add to your styles.css */
.search-container {
    /* REMOVE the left margin (10px) that was pushing it inside the grid */
    margin: 10px 10px 20px 0; /* Adjust: top right bottom left */
    max-width: none; /* Let it take the full width of the wrapper */
}

#productSearchInput {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s;
}

#productSearchInput:focus {
    border-color: #095d40;
    outline: none;
}

.search-icon {
    position: absolute;
    right: 15px;
    color: #888;
}
/* Product grid layout */
.product-grid {
    /* Use flex: 3 to ensure the product area takes up 3/4 of the main-container */
    flex: 3;
    display: grid;
    /* CHANGE: Use auto-fill and a fixed min-width slightly larger than the product width */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Use 200px (180px + padding) */
    gap: 1.5rem; /* Increased gap */
    padding: 1.5rem; /* Increased padding */
    
    /* CRITICAL ADDITIONS: Prevents single tile from expanding horizontally and vertically */
    justify-content: start; 
    align-content: start;
    
    /* CRITICAL FIX: Force GPU Acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;
}
/* --- FIX: Force single tile width stabilization --- */

.product-grid .product:only-child,
.product-grid .product:last-child {
    /* Set the width to respect the column size assigned by the grid. */
    /* This prevents the single item from taking the full grid width (100% of the row). */
    max-width: 100%; 
    
    /* IMPORTANT: Force the item to maintain the size of a single column, */
    /* preventing it from growing to 100% of the entire grid container. */
    width: auto; 
    
    /* Ensure the item stays in one grid column, not spanning multiple */
    grid-column: span 1;
}

/* Product cards */
.product {
    background: #ffffff; /* PURE WHITE background */
    border: none;
    border-radius: 12px;
    padding: 1rem;    
    text-align: center;
    box-shadow: 0 8px 16px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-size: 1rem;    

    /* CRITICAL FIX: FORCE FIXED PIXEL SIZE */
    /* This overrides the stretching behavior definitively */
    width: 200px; /* Fixed width to match visual size (approx) */
    height: 320px; /* Fixed height to accommodate image + text area */
    
    flex-shrink: 0; /* Ensures it never shrinks */
	position: relative;
}

.seasonal-banner {
    /* Position the banner in the top right corner */
    position: absolute;
    top: 10px;        /* Distance from the top edge */
    right: 10px;      /* Distance from the right edge */
    
    /* Styling for the tag */
    background-color: #f7a435; /* Warm color for seasonal items */
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 5px; /* Soft rounded corners */
    z-index: 10;        /* Ensure it sits above the image/content */
    
    /* Subtle visual effect to help it stand out */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.product:hover {
    transform: translateY(-5px); 
    box-shadow: 0 12px 24px rgba(9, 93, 64, 0.2);
}

/* --- FIX: Standardize Product Card Text Height and Wrapping --- */

/* Wrapper for text content to ensure fixed vertical space */
.product-info {
    /* Set a fixed height for the area containing h3, p, and status */
    height: 100%; /* INCREASE HEIGHT from 90px to 110px (or similar) to ensure status visibility */
    
    /* Ensures content that exceeds the height is hidden */
    overflow: hidden; 
    text-align: center;
    padding-top: 5px; 
}

/* Ensure long product names wrap, but only up to 2 lines */
.product-info h3 {
    /* Allow text to wrap normally */
    white-space: normal; 
    
    /* Ensure any container width constraints are respected */
    word-wrap: break-word; 
    
    /* Reset the box model properties that were forcing the ellipsis */
    display: block; 
    overflow: visible; 
    
    /* Keep existing styling for spacing */
    margin: 0;    
    line-height: 1.2;
}

/* Control spacing for price and status */
.product-info p,
.product-info .status {
    margin: 2px 0; 
}

.product img {
  /* Set fixed width and height for image to fit 180px card, minus padding */
  width: 160px; /* 180px card width - 1rem (10px) padding on each side = 160px */
  height: 160px;
  
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  border: none;
  margin-bottom: 0.8rem;
}

/* Main layout: products + cart */
.main-container {
  display: flex;
  gap: 1.5rem; /* Increased gap */
  padding: 1.5rem;
}

#products-wrapper {
    /* This makes the wrapper take up 3 parts of space (next to the cart's 1 part) */
    flex: 3; 
    /* This ensures the search bar sits above the product-list */
    display: flex;
    flex-direction: column; 
	padding-right: 1.5rem;
}

/* Cart on the right side */
.cart {
  flex: 1;
  background: #ffffff; /* PURE WHITE background */
  /* MODERN CHANGE: Subtler border/shadow */
  border: 1px solid #e0e0e0; 
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  max-height: 80vh; 
  padding: 1.5rem; /* Increased padding */
  box-shadow: 0 8px 16px rgba(0,0,0,0.08); 
  overflow: hidden;

  /* FUNCTIONAL CHANGE: Sticky positioning */
  position: sticky;
  top: 100px; 
  right: 0;
  width: 300px;
  overflow-y: auto;
  z-index: 998;
  border-left: 1px solid #e0e0e0;
  box-shadow: -4px 0 8px rgba(0,0,0,0.05);
  padding: 1.5rem;
  
  /* CRITICAL FIX: Force GPU Acceleration */
  transform: translateZ(0); /* Or translate3d(0, 0, 0) */
  backface-visibility: hidden; /* Recommended alongside translateZ */
}

#cart-items {
  height: 200%;  
  max-height: none;  
  overflow-y: auto;  
  padding: 0.5rem 0; /* Cleaned up padding */
}

.cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0; /* Increased padding */
  font-weight: bold;
  margin-top: auto; 
  background: #ffffff; 
  position: relative;
  /* MODERN CHANGE: Clean border-top separator (Gold) */
  border-top: 1px solid #c9a227; 
}

/* MODERN CHANGE: Removed old ::before separator */
.cart-footer::before {
  content: none;
}

.cart button {
  padding: 0.4rem 0.8rem; /* Slightly larger buttons */
  margin: 0 2px;
  border-radius: 8px; /* More rounded buttons */
  border: none;
  cursor: pointer;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 10px;
  word-break: break-word; 
}

.cart-item img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
}

.cart-item-details {
  flex: 1; 
}

.cart-item .stock-status {
  transition: color 0.3s ease;
}

#clear-cart-btn {
  background: none;
  border: none;
  color: rgba(255, 0, 0, 1); /* Kept red for 'clear' action */
  font-weight: bold;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
}

#clear-cart-btn:hover {
  background: rgba(255, 0, 0, 0.1);;
}

#clear-cart-btn:disabled {
  color: rgba(255, 0, 0, 0.4);
  cursor: default;
  background: none;
}

#checkout-btn {
  background: #095d40; /* Deep Green button */
  border: none;
  color: white;
  padding: 0.7rem 1.2rem; /* Larger, more prominent checkout button */
  border-radius: 10px; 
  cursor: pointer;
}

#checkout-btn:hover {
  background: #074a34; /* Darker green on hover */
}

#checkout-btn:disabled {
  background: #a9c5b8; 
  color: #f5f5f5;
  cursor: default;
  transform: none;
  opacity: 0.6;
}

#clear-cart-btn:disabled,
#checkout-btn:disabled {
  cursor: default;  
  opacity: 0.5;
  pointer-events: none; 
}

.trash-btn img {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.trash-btn {
  background: none;  
  border: none;  
  cursor: pointer;  
  font-size: 1.2rem;  
  color: #b71c1c; 
  padding: 0;  
  line-height: 1;  
}
.trash-btn:hover {
  transform: scale(1.2); 
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.total {
  text-align: right;
  font-weight: 600; 
  font-size: 1.5rem; 
  color: #c9a227; /* Gold for the total price */
}

/* Stock status text colors */
.status {
  margin-top: 5px;
  font-weight: 500;
}

.text-red { color: #b71c1c; }
.text-orange { color: #ff9800; }
.text-green { color: #2e7d32; }

/* Buttons (General) */
button {
  background: #095d40; /* Deep Green button */
  color: white;
  border: none;
  border-radius: 8px; 
  padding: 0.5rem 1rem; 
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s, transform 0.2s;
}

button:hover {
  background: #074a34; 
  transform: scale(1.02); 
}

/* Greyed out / disabled product */
.product.out-of-stock {
  opacity: 0.5;  
  cursor: not-allowed;  
  pointer-events: none;  
  filter: grayscale(50%); 
}

/* Checkout Container (Used for both checkout and success pages) */
.checkout-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: white; 
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.order-summary {
  margin-bottom: 2rem;
}

.order-item {
  display: flex;
  align-items: center;
  /* makes qty stick to right */
  justify-content: space-between; 
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fafafa;
}

.checkout-page {
  background: #ffffff; /* PURE WHITE background for checkout page */
}

.checkout-page header {
  background: #095d40; /* Deep Green header */
  padding: 1rem;
  text-align: center;
  color: white;
}

.promo-applied {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #c9a227; /* Gold for promo text */
  white-space: pre; 
}

.delivery-fee {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #555;
}

.total-container {
  display: flex;
  justify-content: space-between;
  font-size: 1.4rem;
  font-weight: bold;
  margin-top: 1rem;
}

.order-item img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-right: 1rem;
}

.order-item-info {
  flex-grow: 1; 
}

.unit-price {
  font-size: 0.9rem;
  color: #555;
}

.item-qty {
  font-weight: bold;
  margin-left: 1rem;
}

.required {
  color: #b71c1c !important; /* Kept red for error/required notice */
  font-weight: bold;
  margin-left: 0.12rem; 
}

.form-group {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
}

.checkout-form label {
  font-weight: bold;
  margin-bottom: 0.3rem;
}

input,
select,
textarea {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.submit-btn {
  background: #095d40; /* Deep Green submit button */
  color: white;
  padding: 0.8rem 1.8rem; /* Larger submit button */
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.1rem;
}

.submit-btn:hover {
  background: #074a34;
}

.hidden {
  display: none;
}

/* order-success.html */
.success-container {
  background: white;
  padding: 2.5rem; 
  border-radius: 10px;
  box-shadow: 0 5px 14px rgba(0,0,0,0.15);
  max-width: 550px;
  margin: 3rem auto;
  text-align: center;
  font-size: 1.1rem; 
}

.success-container h1 {
  color: #095d40;
  margin-bottom: 1.2rem;
  font-size: 2.5rem; 
}

.success-container p {
  color: #555;
  margin-bottom: 2.5rem;
  font-size: 1.15rem; 
  line-height: 1.7;
}

.success-container button {
  background: #095d40; /* Deep Green button */
  color: white;
  padding: 1rem 2rem; 
  font-size: 1.1rem; 
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s;
}

.success-container button:hover {
  background: #074a34;
}

.success-wrapper {
  display: flex;
  justify-content: center; 
  align-items: center; 
  min-height: calc(100vh - 80px); 
  width: 100%;
}

/* --- CONFIRMATION MODAL SPECIFIC STYLES --- */
/* Modal Overlay */
.modal {
  display: none; 
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.45); 
  justify-content: center;
  align-items: center;
}

/* Makes the confirmation box smaller than the main add/edit modals */
.modal-content {
  background: #ffffff; /* PURE WHITE background */
  border: 1px solid #e0e0e0; /* Light border */
  border-radius: 12px;
  width: 380px; /* Slightly wider modal */
  max-width: 90%;
  margin: auto;
  padding: 1.5rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  word-wrap: break-word; 
  max-height: 90vh; 
  overflow-y: auto; 
}

/* Style for the confirmation message text */
.confirmation-message-text {
  margin: 1.5rem 0 1.5rem 0; /* Add top/bottom spacing */
  font-size: 1.05rem;
  font-weight: 500;
  color: #333;
  white-space: pre-wrap;
}

/* Container for the Yes/No buttons */
.confirmation-buttons {
  display: flex;
  gap: 15px; /* Space between Yes and No buttons */
  width: 100%; /* Ensure buttons span the width of the modal content */
  justify-content: center; /* Center the button group */
}

/* Base style for Yes/No buttons */
.modal-btn {
  padding: 0.7rem 1.5rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.2s ease, transform 0.1s;
  flex-grow: 1; /* Makes the buttons equally wide */
}

/* YES Button (Primary Action - Deep Green) */
.confirm-yes-btn {
  background: #095d40;
  color: white;
}

.confirm-yes-btn:hover {
  background: #0b7550;
  transform: scale(1.02);
}

/* NO Button (Secondary Action - Light Gray) */
.confirm-no-btn {
  background: #f0f0f0;
  color: #333;
}

.confirm-no-btn:hover {
  background: #e0e0e0;
  transform: scale(1.02);
}

/* Ensure the close button is visible and styled like the others */
.confirmation-close {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #888;
    cursor: pointer;
    transition: color 0.2s;
}

.confirmation-close:hover {
    color: #e74c3c; /* Red close button on hover */
}

/* --- MOBILE STYLES (Retaining your structure, applying color/padding updates) --- */
@media (max-width: 1280px) and (orientation: portrait) {
  header {
    position: fixed;   /* needed for absolute positioning of store-label */
    padding: 0.6rem 1rem; /* slightly smaller padding for mobile */
  }
  
  /* New CSS to style the Logo Image */
  .header-logo {
    /* Adjust these values to control the size of your logo */
    /*display: none;*/
	width: 30px;
	height: 30px;
  }
  
  .header-title {
	gap: 1px;
    text-align: left;     /* keep title on the left */
    flex: 1;              /* take available space */
  }

  header h1 {
    font-size: 1.8rem;    /* scale down for mobile */
    line-height: 1.1;
  }

  header h1 .by-vanie {
    font-size: 0.8rem;
    padding-left: 7rem;      /* remove right offset */
	
  }

  .header-content {
    justify-content: flex-start; /* title stays left */
    align-items: center;
  }

  #locale-select {
    display: none;
  }

  /* Move store-label to top-right */
  #store-label {
	padding-top: 2rem;
    position: absolute;
    top: 8px;       /* adjust spacing from top */
    right: 15px;    /* adjust spacing from right */
    font-size: 8px;  /* slightly smaller on mobile */
    color: white;      /* optional: contrast on header */
  }
  
  .seasonal-banner {
      /* Position the banner in the top right corner */
      top: 5px;        /* Distance from the top edge */
      right: 5px;      /* Distance from the right edge */
      font-size: 0.7rem;
      padding: 1px 4px;
      border-radius: 3px; /* Soft rounded corners */
      z-index: 5;        /* Ensure it sits above the image/content */
  }
  
  #product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    /* ENSURE left justification is strongly applied */
    justify-content: flex-start !important; 
  }
  
  .product-grid {
	  gap: 0.5rem;
	  padding: 0.5rem;
  }

  .product {
    justify-content: center;
    
    /* KEEP the desired width */
    width: 29%; 
    
    /* CRITICAL ADDITION: Stops ANY tile from stretching when space is available */
    /* It is stronger than flex-grow: 0 and should solve the slight stretching */
    max-width: 29% !important; 

    /* KEEP the height and other styles */
    height: 220px;
    padding: 4px;
    font-size: 12px;
  }

  .product h3 {
    font-size: 0.8rem;  /* scale down product name */
    margin-bottom: 0.3rem;
    line-height: 1.1;
  }

  .product img {
    width: 90px; /* 180px card width - 1rem (10px) padding on each side = 160px */
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
  }
  
  .product-grid > .product:only-child,
  #product-list > .product:only-child {
    /* CRITICAL: Force the item to respect its initial width, 
       preventing the flex container from making it grow 'a bit'. */
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
   
    /* OPTIONAL: If it still stretches, lock the max width to the desired percentage. */
    /* Use the largest percentage from your mobile views (e.g., 28%). */
    max-width: 29% !important; 
   }
  
/* Floating cart at bottom */
    #cart {
        position: fixed !important; /* Force fixed positioning */
        bottom: 0 !important;       /* Pin to the absolute bottom */
        top: auto !important;       /* Kill the desktop 'top: 100px' style */
        
        left: 0;         /* Edge-to-edge width */
        right: 0;        /* Edge-to-edge width */
        
        width: 89%;     /* Ensure it spans the full width edge-to-edge */
        max-width: none; /* Remove max-width constraint */
        
        /* Ensure z-index is high */
        z-index: 999;
        
        /* Add margin to bottom of main content to prevent product items from being hidden */
        /* This requires adding padding to the main content's parent, which is .main-container */
    }

    /* CRITICAL ADDITION: Create space at the bottom of the main scrolling area */
    .main-container {
        /* Add padding at the bottom equal to the height of the fixed cart */
        /* Assuming the cart height is roughly 250px (based on your max-height: 40vh) */
        padding-bottom: 250px !important; 
    }
  
  /* Cart items scrollable if needed */
  #cart-items {
    max-height: 150px; /* Reduced max height for the scrollable area */
    overflow-y: auto;
    padding: 0.5rem 0;
  }
  
  /* Footer stays visible */
  .cart-footer {
    position: relative; 
    border-top: 1px solid #c9a227;
    background: #ffffff;
    padding: 0.8rem 0; /* Adjusted padding */
  }

  /* Cart item adjustments */
  .cart-item {
    gap: 4px;               /* reduce space between elements */
    margin-bottom: 6px;     /* smaller spacing between items */
    padding: 4px;            /* smaller padding */
  }

  .cart-item img {
    width: 35px;             /* smaller image */
    height: 35px;
  }

  .cart-item-details {
    font-size: 0.75rem;      /* smaller text */
  }

  .quantity-controls {
    gap: 2px;
  }

  .trash-btn img {
    width: 16px;             /* smaller trash icon */
    height: 16px;
  }

  .cart-footer {
    font-size: 0.85rem;      /* smaller footer text */
    padding: 0.3rem 0.6rem;
  }
  
  #checkout-btn {
    padding: 0.6rem 1.2rem;   /* taller & wider */
    font-size: 1rem;          /* larger text */
  }

  #clear-cart-btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
  .modal-content {
    /* Set a smaller width for mobile to make it feel less imposing */
    width: 290px; 
  }
}

/* Mobile landscape: width < 1024px AND landscape */
@media (max-width: 1280px) and (orientation: landscape) {

  /* Hide locale dropdown */
  #locale-select {
    display: none;
  }

  /* Header adjustments */
  header {
    position: fixed;
    padding: 0.6rem 1rem;
  }

  .header-title {
    text-align: left;
    flex: 1;
  }

  header h1 {
    font-size: 2rem; /* slightly bigger than portrait but smaller than desktop */
    line-height: 1.1;
  }

  header h1 .by-vanie {
    font-size: 0.85rem;
    padding-left: 7rem;      /* remove right offset */
  }

  #store-label {
	padding-top: 2rem;
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 8px;
    color: white;
  }

  .header-content {
    justify-content: flex-start;
    align-items: center;
  }

  #product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;           /* you already did this */
    justify-content: left;
  }

  .product {
    justify-content: center;      /* centers image and text horizontally */
    width: 22%;         /* 3 cards per row */
    padding: 4px;       /* smaller padding */
    font-size: 12px;    /* smaller text */
    height: 220px; /* Fixed height to accommodate image + text area */
  }

  .product h3 {
    font-size: 0.8rem;  /* scale down product name */
    margin-bottom: 0.3rem;
    line-height: 1.1;
  }

  .product img {
    width: 130px; /* 180px card width - 1rem (10px) padding on each side = 160px */
    height: 130px;
    object-fit: cover;
    border-radius: 6px;
  }
  
  /* Cart floating at right of screen */
  #cart {
    flex: 1;               /* narrower than products but wider than portrait */
    max-width: 320px;      /* wider than portrait */
    min-width: 280px;
    height: auto;
    max-height: 80vh;      /* allow scroll if items exceed */
    overflow-y: auto;
  }

  /* Cart item adjustments */
  .cart-item {
    gap: 4px;               /* reduce space between elements */
    margin-bottom: 6px;     /* smaller spacing between items */
    padding: 4px;            /* smaller padding */
  }

  .cart-item img {
    width: 35px;             /* smaller image */
    height: 35px;
  }
  
  .product-img {
	/*width: 20px !important;*/             /* smaller image */
    /*height: 20px !important;*/
  }

  .cart-item-details {
    font-size: 0.75rem;      /* smaller text */
  }

  .quantity-controls {
    gap: 2px;
  }

  .trash-btn img {
    width: 16px;             /* smaller trash icon */
    height: 16px;
  }

  .cart-footer {
    font-size: 0.85rem;      /* smaller footer text */
    padding: 0.3rem 0.6rem;
  }
  
  #checkout-btn {
    padding: 0.6rem 1.2rem;   /* taller & wider */
    font-size: 1rem;          /* larger text */
  }

  #clear-cart-btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
  
  .modal-content {
    /* Set a smaller width for mobile to make it feel less imposing */
    width: 290px; 
  }
}

/* Mobile landscape: width < 1024px AND landscape */
@media (max-width: 1080px) and (orientation: landscape) {

  /* Hide locale dropdown */
  #locale-select {
    display: none;
  }

  /* Header adjustments */
  header {
    position: fixed;
    padding: 0.6rem 1rem;
  }

  .header-title {
    text-align: left;
    flex: 1;
  }

  header h1 {
    font-size: 2rem; /* slightly bigger than portrait but smaller than desktop */
    line-height: 1.1;
  }

  header h1 .by-vanie {
    font-size: 0.85rem;
    padding-left: 7rem;      /* remove right offset */
  }

  #store-label {
	padding-top: 2rem;
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 8px;
    color: white;
  }

  .header-content {
    justify-content: flex-start;
    align-items: center;
  }

  #product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    /* ENSURE left justification is strongly applied */
    justify-content: flex-start !important; 
  }

  .product {
    justify-content: center;
    
    /* KEEP the desired width */
    width: 28%; 
    
    /* CRITICAL ADDITION: Stops ANY tile from stretching when space is available */
    /* It is stronger than flex-grow: 0 and should solve the slight stretching */
    max-width: 28% !important; 

    /* KEEP the height and other styles */
    height: 220px;
    padding: 4px;
    font-size: 12px;
  }
  
  .seasonal-banner {
      /* Position the banner in the top right corner */
      top: 5px;        /* Distance from the top edge */
      right: 5px;      /* Distance from the right edge */
      font-size: 0.7rem;
      padding: 1px 4px;
      border-radius: 3px; /* Soft rounded corners */
      z-index: 5;        /* Ensure it sits above the image/content */
  }

  .product h3 {
    font-size: 0.8rem;  /* scale down product name */
    margin-bottom: 0.3rem;
    line-height: 1.1;
  }

  .product img {
    width: 95px; /* 180px card width - 1rem (10px) padding on each side = 160px */
    height: 95px;
    object-fit: cover;
    border-radius: 6px;
  }
  
  /* Cart floating at right of screen */
  #cart {
    flex: 1;               /* narrower than products but wider than portrait */
    max-width: 320px;      /* wider than portrait */
    min-width: 280px;
    height: auto;
    max-height: 80vh;      /* allow scroll if items exceed */
    overflow-y: auto;
  }

  /* Cart item adjustments */
  .cart-item {
    gap: 4px;               /* reduce space between elements */
    margin-bottom: 6px;     /* smaller spacing between items */
    padding: 4px;            /* smaller padding */
  }

  .cart-item img {
    width: 35px;             /* smaller image */
    height: 35px;
  }
  
  .product-img {
	/*width: 20px !important;*/             /* smaller image */
    /*height: 20px !important;*/
  }

  .cart-item-details {
    font-size: 0.75rem;      /* smaller text */
  }

  .quantity-controls {
    gap: 2px;
  }

  .trash-btn img {
    width: 16px;             /* smaller trash icon */
    height: 16px;
  }

  .cart-footer {
    font-size: 0.85rem;      /* smaller footer text */
    padding: 0.3rem 0.6rem;
  }
  
  #checkout-btn {
    padding: 0.6rem 1.2rem;   /* taller & wider */
    font-size: 1rem;          /* larger text */
  }

  #clear-cart-btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
  
  .modal-content {
    /* Set a smaller width for mobile to make it feel less imposing */
    width: 290px; 
  }
}