/* General Body and Container */
:root {
  /* Define your color palette using CSS variables */
  --color-primary-bg-light: #FEFFFE; /* Main light backgrounds (almost white) */
  --color-secondary-bg-light: #F8F8F8; /* Secondary light backgrounds, subtle emphasis (slightly darker light) */
  --color-accent-light: #EFAA37; /* Light accent, borders, top bar background (Light Orange/Yellow) */
  --color-accent-medium: #A54F25; /* Medium accent, primary buttons, prices, main links (Dark Orange/Brown) */
  --color-accent-dark: #8C401B; /* Darker accent, button hovers, some text (Darker Orange/Brown) */
  --color-text-dark: #2E3031; /* Primary dark text, headings, footer (Dark Grey) */
  --color-text-soft: #555555; /* Softer text (Medium Grey) */
  --color-white: #FFFFFF; /* Pure white for specific elements */
}

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--color-primary-bg-light);
  color: var(--color-text-dark);
  line-height: 1.6;
  overflow-x: hidden; /* Added: Prevents horizontal scrolling, improving overall layout stability */
}

.container {
  width: 85%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0;
}

/* Top Bar */
.top-bar {
  background-color: var(--color-accent-light);
  color: var(--color-white);
  padding: 10px 20px; /* Adjusted: Adds horizontal padding to prevent content from touching screen edges */
  display: flex;
  justify-content: space-between; /* Original: Separates content to left and right */
  align-items: center;
  flex-wrap: wrap; /* Allows items to wrap on smaller screens */
  font-size: 0.9em;
  text-align: center; /* Original: Kept as per your file, though often redundant with flexbox */
}

.top-bar > * {
  padding: 5px 15px; /* Original: Padding for individual top bar items */
}

.top-bar a {
  color: var(--color-white);
  text-decoration: none;
  font-weight: bold;
}

.top-bar a:hover {
  text-decoration: underline;
}

.top-bar-logo {
  height: 40px; /* Adjust size as needed */
  vertical-align: middle;
}

.logo-container {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Changed from center to flex-start */
  flex-grow: 1;
  padding-left: 15px; /* Add some padding to the left */
}

/* Cart Icon in Top Bar - FIXED POSITIONING */
.cart-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 60px; /* Ensure space for icon and count */
  /* No changes here for desktop positioning, relies on .top-bar justify-content: space-between */
}

.cart-icon {
  width: 25px;
  height: auto;
  vertical-align: middle;
}

.cart-link {
  display: flex;
  align-items: center;
  color: var(--color-white);
  text-decoration: none;
}

.cart-item-count {
  background-color: var(--color-accent-dark);
  color: var(--color-white);
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 0.75em;
  font-weight: bold;
  position: absolute;
  top: -5px;
  right: -5px;
  transform: none; /* REMOVED the problematic transform */
  display: none; /* Hidden by default, shown by JS */
  min-width: 16px;
  text-align: center;
  line-height: 1.2;
  z-index: 10; /* Added: Ensures visibility on top of other elements */
}

/* Header Navigation */
/* The original header nav styles are mostly overridden/reorganized here for mobile navigation */
header {
  background-color: var(--color-white);
  padding: 15px 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

header nav { /* This targets the old nav, for index.html now use .main-nav */
  display: flex;
  justify-content: center;
  gap: 30px;
}

header nav a { /* This targets the old nav, for index.html now use .main-nav .nav-links li a */
  color: var(--color-text-dark);
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  padding: 5px 10px;
  transition: color 0.3s ease;
}

header nav a:hover { /* This targets the old nav, for index.html now use .main-nav .nav-links li a:hover */
  color: var(--color-accent-medium);
}


/* Banner Carousel (Homepage Only) */
.banner-carousel {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 20px auto 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  height: 450px;
}
  
  .banner-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  
  .banner-slide.active {
  opacity: 1;
  }
  
  .banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  }
  
  /* Hero Section (Homepage Specific) */
  .hero-section {
  text-align: center;
  padding: 80px 20px;
  background: linear-gradient(to bottom, var(--color-primary-bg-light), var(--color-secondary-bg-light)); /* Changed */
  margin-top: -40px;
  border-bottom: 1px solid var(--color-accent-medium); /* Changed */
  }
  
  .hero-content h1 {
  font-size: 3.5em;
  color: var(--color-text-dark); /* Changed */
  margin-bottom: 20px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
  }
  
  .hero-content p {
  font-size: 1.3em;
  color: var(--color-text-soft); /* Changed */
  margin-bottom: 30px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  }

/* General Buttons */
.btn {
  display: inline-block;
  background-color: var(--color-accent-medium);
  color: var(--color-white);
  padding: 12px 25px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
  border: none;
  cursor: pointer;
  font-size: 1em;
  text-align: center;
}

.btn:hover {
  background-color: var(--color-accent-dark);
  transform: translateY(-2px);
}

/* Sections */
section {
  padding: 60px 0;
  text-align: center;
}

section h2 {
  font-size: 2.5em;
  color: var(--color-accent-medium);
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px; /* Space between text and bee icons */
  text-align: center;
}

.bee-icon {
  width: 40px;
  height: auto;
  vertical-align: middle;
}

/* Product Display */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  padding: 20px 0;
}

.product-card {
  background-color: var(--color-secondary-bg-light);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 20px; /* Space for buttons at bottom */
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-card img {
  width: 100%;
  height: 250px;
  object-fit: contain; /* ← HIER: cover zu contain ändern */
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-accent-light);
  padding: 10px;
  box-sizing: border-box;
}

.product-card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1; /* Allows content to push buttons to bottom */
  justify-content: space-between; /* Distributes space */
}

.product-card h3 {
  font-size: 1.6em;
  color: var(--color-accent-medium);
  margin-bottom: 10px;
}

.product-card p {
  font-size: 0.95em;
  color: var(--color-text-soft);
  margin-bottom: 15px;
}

.product-id {
  font-size: 0.85em; /* Smaller font size for the ID */
  color: var(--color-text-soft); /* Softer color */
  margin-top: -10px; /* Adjust spacing */
  margin-bottom: 15px; /* Added margin-bottom to create space below the ID */
  font-style: bold;
}

.product-card .price {
  font-size: 1.2em;
  font-weight: bold;
  color: var(--color-accent-dark);
  margin-bottom: 20px;
}

.product-card .btn {
  width: 80%; /* Make buttons wider within the card */
  margin: 5px auto; /* Center buttons and add vertical spacing */
}

.amazon-link-btn {
  background-color: #FF9900; /* Amazon's orange */
  color: #131A22; /* Amazon's dark text */
  text-shadow: none;
}

.amazon-link-btn:hover {
  background-color: #CC7A00;
}


/* About Us Section (Short) */
#about-us-short {
  background-color: var(--color-secondary-bg-light);
}

#about-us-short p {
  max-width: 900px;
  margin: 25px auto;
  font-size: 1.15em;
  line-height: 1.8;
  text-align: center;
}

/* Footer */
footer {
  background-color: var(--color-text-dark);
  color: var(--color-white);
  text-align: center;
  padding: 20px 0;
  font-size: 0.9em;
}

/* Cart Page Specific Styles */
.cart-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 30px;
  background-color: var(--color-white);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden; /* Ensures rounded corners apply to content */
}

.cart-table th, .cart-table td {
  padding: 10px; /* Adjusted padding */
  border-bottom: 1px solid var(--color-secondary-bg-light);
  text-align: left;
  word-wrap: break-word; /* Added */
  white-space: normal; /* Added */
}

.cart-table th {
  background-color: var(--color-accent-light);
  color: var(--color-white);
  font-weight: bold;
}

.cart-table tbody tr:last-child td {
  border-bottom: none;
}

.cart-table .cart-item-info {
  display: flex;
  align-items: center;
}

/* Removed image from cart item info as per user's previous request
.cart-table .cart-item-info img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-right: 15px;
  border-radius: 5px;
}
*/

.cart-quantity-input {
  width: 60px;
  padding: 8px;
  border: 1px solid var(--color-accent-light);
  border-radius: 5px;
  text-align: center;
  -moz-appearance: textfield; /* Firefox */
}

.cart-quantity-input::-webkit-outer-spin-button,
.cart-quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


.remove-item-btn {
  background-color: #dc3545; /* Red for remove */
  color: var(--color-white);
  border: none;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 0.9em;
}

.remove-item-btn:hover {
  background-color: #c82333;
}

.cart-summary {
  display: flex; /* Changed from none to flex for visibility */
  flex-direction: column; /* Added to stack elements vertically */
  align-items: center; /* Center items horizontally */
  margin-top: 30px; /* Adjusted margin */
  padding: 20px;
  border-top: 2px solid var(--color-accent-light); /* Changed */
  background-color: var(--color-primary-bg-light); /* Changed */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  width: 100%; /* Ensure it takes full width */
  box-sizing: border-box; /* Include padding in width */
}

.cart-summary p {
  font-size: 1.1em;
  margin-bottom: 10px;
  color: var(--color-text-dark); /* Changed */
  width: 100%; /* Ensure paragraphs take full width */
  text-align: center; /* Center text */
}

.cart-total {
  font-weight: bold;
  font-size: 1.4em;
  color: var(--color-accent-dark);
}

.checkout-btn {
  width: 100%; /* Make the button take full width */
  max-width: 300px; /* Limit max-width for aesthetic */
  padding: 15px 20px;
  font-size: 1.1em;
  margin-top: 20px; /* Adjusted margin */
  margin-bottom: 10px; /* Added for spacing below button */
}

.checkout-btn:hover {
  background-color: var(--color-accent-dark);
  transform: translateY(-2px);
}

.checkout-note {
  font-size: 0.85em;
  color: var(--color-text-soft);
  margin-top: 10px;
  text-align: center;
}

.cart-empty-message {
  text-align: center;
  padding: 50px 20px;
  background-color: var(--color-secondary-bg-light);
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  margin-top: 30px;
  font-size: 1.1em;
}

.cart-empty-message a {
  color: var(--color-accent-medium);
  text-decoration: none;
  font-weight: bold;
}

.cart-empty-message a:hover {
  text-decoration: underline;
}

/* About Page Specifics */
.about-content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px;
  text-align: left;
  margin-top: 40px;
}

.about-text, .about-values {
  flex: 1;
  min-width: 300px;
  padding: 20px;
  background-color: var(--color-secondary-bg-light);
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.about-text h3, .about-values h3 {
  color: var(--color-accent-medium);
  font-size: 1.8em;
  margin-bottom: 20px;
  text-align: center;
}

.about-text p, .about-values ul {
  font-size: 1.1em;
  line-height: 1.8;
  color: var(--color-text-soft);
}

.about-values ul {
  list-style-type: none; /* Remove default bullet points */
  padding: 0;
}

.about-values ul li {
  margin-bottom: 10px;
  padding-left: 30px;
  position: relative;
}

.about-values ul li::before {
  content: '🐝'; /* Bee emoji as custom bullet */
  position: absolute;
  left: 0;
  color: var(--color-accent-medium);
  font-size: 1.2em;
}

.reviews-section {
    background-color: var(--color-primary-bg-light);
    padding: 60px 0;
    text-align: center;
}

.reviews-section p {
    max-width: 800px;
    margin: 0 auto 40px auto;
    font-size: 1.1em;
    color: var(--color-text-soft);
}

.review-item {
    background-color: var(--color-secondary-bg-light);
    border-radius: 8px;
    padding: 25px;
    margin: 20px auto;
    max-width: 700px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    text-align: center;
}

.review-item p {
    font-style: italic;
    font-size: 1.1em;
    margin-bottom: 15px;
    color: var(--color-text-dark);
}

.reviewer-name {
    font-weight: bold;
    color: var(--color-accent-medium);
    font-size: 0.95em;
}


/* Contact Page Specifics */
.contact-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
}

.contact-form, .contact-details {
  flex: 1;
  min-width: 300px;
  padding: 30px;
  background-color: var(--color-secondary-bg-light);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  text-align: left;
}

.contact-form h3, .contact-details h3 {
  color: var(--color-accent-medium);
  font-size: 1.8em;
  margin-bottom: 25px;
  text-align: center;
}

.contact-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: var(--color-text-dark);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: calc(100% - 20px); /* Account for padding */
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid var(--color-accent-light);
  border-radius: 5px;
  font-size: 1em;
}

.contact-form textarea {
  resize: vertical; /* Allow vertical resizing */
}

.contact-form .btn {
  width: 100%;
  padding: 15px;
  font-size: 1.1em;
}

.contact-details p {
  margin-bottom: 15px;
  font-size: 1.1em;
  color: var(--color-text-soft);
}

.contact-details a {
  color: var(--color-accent-medium);
  text-decoration: none;
  font-weight: bold;
}

.contact-details a:hover {
  text-decoration: underline;
}

.google-form-embed {
    padding: 60px 0;
    text-align: center;
}

.google-form-embed p {
    margin-bottom: 30px;
    font-size: 1.1em;
    color: var(--color-text-soft);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.google-form-embed iframe {
    width: 100%;
    height: 1000px; /* Adjust height as needed */
    border: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    max-width: 800px; /* Constrain width for better display */
    display: block;
    margin: 0 auto;
}


/* Banner Carousel (index.html) */
.banner-carousel {
  width: 100%;
  height: 300px; /* Further reduced height for larger screens */
  overflow: hidden;
  position: relative;
  background-color: var(--color-secondary-bg-light); /* Fallback background */
}

.banner-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.banner-slide.active {
  opacity: 1;
}

.banner-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay for text */
  padding: 30px;
  border-radius: 10px;
}

.banner-slide h2 {
  font-size: 3em;
  margin-bottom: 15px;
  color: var(--color-white); /* Override section h2 color */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

.banner-slide p {
  font-size: 1.3em;
  line-height: 1.6;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  margin-bottom: 25px;
}


/* Custom Alert Box */
.custom-alert-box {
  background-color: var(--color-primary-bg-light);
  border: 1px solid var(--color-accent-medium);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  text-align: center;
  max-width: 350px;
  width: 90%; /* Responsive width */
}

.custom-alert-box p {
  margin-bottom: 15px;
  font-size: 1.1em;
  color: var(--color-text-dark);
}

.custom-alert-close-btn {
  background-color: var(--color-accent-medium);
  color: var(--color-white);
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 1em;
}

.custom-alert-close-btn:hover {
  background-color: var(--color-accent-dark);
}


/* Media Queries for Responsiveness */

/* Tablet & Smaller Screens */
@media (max-width: 992px) {
  .container {
    width: 90%;
    padding: 30px 0;
  }

  .hero-content h1 {
    font-size: 3em;
  }

  .hero-content p {
    font-size: 1.1em;
  }

  section h2 {
    font-size: 2.2em;
    gap: 10px;
  }

  .bee-icon {
    width: 35px;
  }

  .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .product-card img {
    height: 250px; /* Slightly smaller images on tablet */
  }

  .banner-carousel {
    height: 250px; /* Further reduced height for tablet */
  }

  .banner-slide h2 {
    font-size: 2.5em;
  }

  .banner-slide p {
    font-size: 1.1em;
  }

  .hero-section {
    padding: 10px 15px; /* Further adjusted padding */
    min-height: 60px; /* Further adjusted min-height */
  }
}

/* Mobile Devices */
@media (max-width: 768px) {
  .top-bar {
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    gap: 5px; /* Reduce gap */
  }

  .top-bar p {
    margin: 3px 0; /* Reduce margin on paragraphs */
    font-size: 0.85em;
  }

  .top-bar .logo-container {
    margin-bottom: 5px;
  }

  /* Corrected Mobile specific adjustments for cart-icon-container */
  .cart-icon-container {
    position: relative; /* Ensure relative positioning for absolute child */
    transform: none;
    margin-top: 5px;
    order: unset; /* Ensure no specific order */
    /* Add padding to ensure it's not at the very edge on mobile if needed */
    padding-right: 15px; /* Example: Add some padding from the right edge on mobile */
  }

  .cart-item-count {
    position: absolute; /* Keep absolute positioning relative to cart-icon-container */
    top: -8px; /* Slightly adjusted for mobile */
    right: -8px; /* Slightly adjusted for mobile */
    transform: none;
    font-size: 0.7em;
    padding: 2px 5px;
  }

  /* Show the hamburger menu button */
  .menu-toggle {
    display: block;
    position: absolute; /* Position relative to the header */
    right: 20px; /* Adjust as needed */
    top: 50%;
    transform: translateY(-50%);
  }

  /* Style for the navigation links on mobile */
  .main-nav .nav-links {
    flex-direction: column; /* Stack links vertically */
    position: absolute;
    top: 100%; /* Position below the header */
    left: 0;
    width: 100%;
    background-color: var(--color-secondary-bg-light); /* Background for mobile menu */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Hide overflow when closed */
    transition: max-height 0.4s ease-out, padding 0.4s ease-out; /* Smooth transition */
    max-height: 0; /* Start hidden */
    padding: 0 20px; /* No vertical padding when closed */
    z-index: 1000; /* Ensure it's above other content but below toggle */
  }

  .main-nav .nav-links.open {
    max-height: 300px; /* Adjust based on actual content height */
    padding: 20px 20px; /* Show vertical padding when open */
  }

  .main-nav .nav-links li {
    width: 100%;
    text-align: center;
    margin: 10px 0; /* Space between stacked links */
  }

  /* Adjust alignment of header on mobile */
  .main-header {
      justify-content: flex-start; /* Align logo/title to start */
      padding-right: 60px; /* Make space for the hamburger */
  }

  /* Hamburger animation for opening/closing */
  .menu-toggle.open .hamburger:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .menu-toggle.open .hamburger:nth-child(2) {
    opacity: 0; /* Hide middle line */
  }

  .menu-toggle.open .hamburger:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Combined from previous `header nav` and `header nav a` */
  header nav { /* This now primarily targets .main-nav */
    flex-direction: row; /* Default for desktop, but overridden by .main-nav .nav-links */
    gap: 0;
  }

  header nav a {
    padding: 10px 0;
    width: 100%;
    text-align: center;
    border-bottom: none; /* No border for mobile nav links here, handled by .nav-links li */
  }


  .hero-section {
    padding: 8px 10px; /* Further adjusted padding */
    min-height: 40px; /* Further adjusted min-height */
  }

  .hero-content h1 {
    font-size: 2em; /* Slightly smaller on mobile */
  }

  .hero-content p {
    font-size: 0.8em; /* Slightly smaller on mobile */
  }

  section {
    padding: 40px 0;
  }

  section h2 {
    font-size: 1.8em;
    flex-direction: column; /* Stack bee icons and text */
    gap: 5px;
  }

  .bee-icon {
    width: 30px;
  }

  .product-grid {
    grid-template-columns: 1fr; /* Single column on mobile */
  }

  .product-card {
    margin-bottom: 20px; /* Space between stacked cards */
  }

  .product-card .btn {
      width: 90%; /* Make buttons fill more width */
  }

  .about-content, .contact-section {
    flex-direction: column;
  }

  .about-text, .about-values, .contact-form, .contact-details {
    width: 100%;
    min-width: unset;
    padding: 20px;
    margin-bottom: 20px;
  }

  /* Cart Table Mobile Responsive */
  .cart-table {
    box-shadow: none; /* Remove shadow to make individual rows stand out more */
    border-radius: 0;
  }

  .cart-table thead {
    display: none; /* Hide header on mobile */
  }

  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td {
    display: block;
    width: 100%;
  }

  .cart-table tr {
    margin-bottom: 20px;
    border: 1px solid var(--color-accent-light);
    border-radius: 8px;
    padding: 15px;
    background-color: var(--color-secondary-bg-light);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  }

  .cart-table td {
    text-align: right; /* Align value to the right */
    padding-left: 50%; /* Make space for the data-label */
    position: relative;
    font-size: 0.95em;
    height: auto; /* Allow content to expand */
    min-height: 25px; /* Minimum height for cells */
    display: flex; /* For better alignment of pseudo-elements */
    align-items: center; /* For vertical alignment */
    justify-content: flex-end; /* For horizontal alignment */
  }

  .cart-table td::before {
    content: attr(data-label); /* Use data-label for pseudo-element */
    position: absolute;
    left: 15px;
    width: calc(50% - 25px); /* Adjusted width for label */
    text-align: left;
    font-weight: bold;
    color: var(--color-text-dark);
    /* ORIGINAL PROBLEM: position: static; display: block; margin-bottom: 5px; */
    /* These properties need to be INSIDE the @media (max-width: 480px) for the *actual fix* */
  }

  .cart-item-info span { /* Only the span, as img is removed */
    display: block;
    text-align: right;
  }

  .cart-quantity-input {
    width: 80px; /* Wider input for easier tapping */
    text-align: center;
  }

  .cart-summary {
    padding: 20px;
  }

  .checkout-btn {
    width: 100%; /* Full width button */
    padding: 12px 20px;
  }

  .checkout-note {
    text-align: center; /* Center notes on mobile */
  }

  .banner-carousel {
    height: 200px; /* Further reduced height for mobile */
  }

  .banner-slide h2 {
    font-size: 1.6em; /* Slightly smaller on mobile */
  }

  .banner-slide p {
    font-size: 0.8em; /* Slightly smaller on mobile */
  }

  .banner-content {
      padding: 15px; /* Smaller padding */
  }

  .google-form-embed iframe {
    height: 800px; /* Adjust iframe height for smaller screens */
  }

  .reviews-section p {
    padding: 0 15px; /* Add padding to general review text */
  }

  /* Specific styling for the header on 'cancel' and 'success' pages */
  /* These pages currently have <header><nav> without .main-header or .main-nav classes
    Need to apply the same structure from index.html to these pages' headers for
    consistent styling or add specific overrides if they remain simple.
    For now, assuming you'll update their HTML similar to index.html.
  */
  header {
      background-color: var(--color-primary-bg-light); /* Ensure background is set */
      padding: 15px 20px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      display: flex;
      justify-content: center; /* Center on larger screens */
      align-items: center;
      position: relative;
  }

  header nav a {
      text-decoration: none;
      color: var(--color-text-dark);
      font-weight: bold;
      font-size: 1.1em;
      padding: 5px 15px;
      transition: color 0.3s ease;
  }

  header nav a:hover,
  header nav a.active {
      color: var(--color-accent-medium);
  }

  /* Hamburger menu icon (visible only on mobile) */
  .menu-toggle {
    display: none; /* Hidden by default on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001; /* Ensure it's above other content */
  }

  .hamburger {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-accent-medium); /* Use your brand color */
    margin: 5px 0;
    transition: all 0.3s ease;
  }
}

/* Small Mobile Devices (e.g., iPhone SE) */
@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 1.6em; /* Further reduced */
  }

  .hero-content p {
    font-size: 0.7em; /* Further reduced */
  }

  section h2 {
    font-size: 1.4em;
  }

  .product-card h3 {
    font-size: 1.2em;
  }

  .product-card .price {
    font-size: 1em;
  }

  .product-card .btn {
    padding: 8px 12px;
    font-size: 0.8em;
  }

  .cart-table td {
    padding-left: 15px; /* Keep this padding for overall cell padding */
    font-size: 0.85em;
    text-align: left; /* Change this to left-align the actual cell content */
    justify-content: flex-start; /* Align content to the start (left) */
    flex-direction: column; /* Stack the label and content vertically */
    align-items: flex-start; /* Align stacked items to the left */
  }

  .cart-table td::before {
    position: static; /* Make pseudo-element static */
    display: block; /* Make it a block element */
    width: 100%; /* Take full width */
    margin-bottom: 5px; /* Add some space below the label */
    text-align: left; /* Ensure the label itself is left-aligned */
  }

  .cart-item-info span { /* Only the span, as img is removed */
    display: block;
    text-align: left; /* Ensure the item name is left-aligned */
    width: 100%; /* Allow it to take full width */
  }

  .cart-quantity-input {
    width: calc(100% - 30px); /* Adjust width to fit within padding */
    box-sizing: border-box; /* Include padding/border in width */
    margin-top: 5px; /* Add a little space from the label */
  }

  .cart-summary p {
    font-size: 0.9em;
  }

  .cart-total {
    font-size: 1.1em;
  }

  .custom-alert-box p {
    font-size: 0.9em;
  }
  .custom-alert-close-btn {
    padding: 7px 12px;
    font-size: 0.8em;
  }

  .banner-carousel {
    height: 180px; /* Further reduced for very small screens */
  }

  .banner-slide h2 {
    font-size: 1.4em; /* Further reduced */
  }

  .banner-slide p {
    font-size: 0.7em; /* Further reduced */
  }

  .google-form-embed iframe {
    height: 500px; /* Further adjust iframe height */
  }

  .hero-section {
    padding: 8px 10px; /* Further adjusted padding */
    min-height: 40px; /* Further adjusted min-height */
  }
}