* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  color: yellow;
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  /* Start with black, transition to #F67420 */
  background: linear-gradient(to bottom,  #0c0600, #5f2600);
  min-height: 100vh; /* Ensures the background stretches to the bottom */
}



.logo {
  position: relative; /* Ensure the button aligns relative to the logo bar */
}

.view-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #F67420;
  color: black !important;
  padding: 10px 12px;
  height: 30px !important;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9rem;
  border-radius: 4px;
  white-space: nowrap;
}

.view-cart:hover {
  background-color: #ff8c00; /* A slightly different orange for hover */
}

h1{
  padding-top: 10px;
  color: #F67420;
  text-align: center;
}

.logo {
  background-color: black;
  height: 10dvw;
  min-height: 45px;
  max-height: 70px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo a {
  display: flex;
  height: 100%;
  align-items: center;
}

.logo img {
  max-height: 90%;
  width: auto;
  display: block;
}

nav {
/*  background-color: #F67420;*/
  background-image : url('images/Menu2_bg.jpg');
  /*padding: 3px 10px;*/
  height: 32px;
  display: flex;
  align-items: flex-start;
  /*justify-content: center;*/
}

.menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* This centers items vertically */
  /*justify-content: center; /* Optional: adds horizontal centering */
  height: 100%;
}

.menu > li.dropdown {
  position: relative;
}

.menu li {
  display: flex;
  align-items: center; /* This ensures all <li> content is centered vertically */
}

.menu li li {
  position: relative;
}

.menu a {
  display: block;
  padding: 1px 15px;
  color: black;
  font-size: 1.2rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s, color 0.3s;
}

.menu li:hover > a {
  background-color: #F67420;;
  color:black;
}

.menu > li.dropdown {
  position: relative;
}

.submenu a:hover,
.submenu-right a:hover {
  background-color: black !important;
  color: #F67420 !important;
  width: 100%;
  text-align: center;
}

.submenu a, 
.submenu-right a {
  background-color: #F67420 !important;
  color: black;
  padding: 12px 20px !important; /* Increased vertical spacing */
  display: block;
  width: 100%;       /* Ensure it fills the li */
  text-align: center; /* Center the text */
  box-sizing: border-box; 
}

.submenu {
  top: 100%;
  left: 0;
}

.submenu li, .submenu-right li{
  display: block;
  width: 100%;
}

.submenu,
.submenu-right {
  width: 100%;
  display: none;
  position: absolute;
  background: #000000;
  color: #F67420;
  min-width: 160px;
  list-style: none;
  z-index: 100;
}

.menu li:hover > .submenu,
.submenu li:hover > .submenu-right {
  display: block;
}

#menu-toggle, .hamburger {
  display: none;
}

.submenu-right {
    position: absolute;
    left: 100%;
    top: 0;
}

.contents{
  background-color: maroon;
}

.contentHeader{
  background-color: aqua;
}

#products {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers cards in the row */
    gap: 20px;               /* Adds space between cards */
    padding: 20px;
}

.Thumbs {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 280px;
    height: auto !important; /* Overrides fixed height from General.css */
    background: #F67420;      /* Dark card background */
    border-radius: 8px;
    color: black;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: transform 0.2s;
    float: none !important;   /* Disables legacy float */
    margin: 0 !important;     /* Gap is now handled by the parent flexbox */
}

.Thumbs:hover {
    /*transform: translateY(-5px); /* Lift effect on hover */
    background-color: #8b3902;
    color: white;
}

.ThumbsImg {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 15px;
}

.ThumbsDesc {
    color: black;
    font-size: 1rem;
    margin-bottom: 10px;
    font-weight: bold;
    flex-grow: 1; /* Pushes price/button to the bottom of cards with short names */
}

/* Ensure all description and price labels are centered */
.ThumbsDesc, #ThumbsDesc, #ThumbsImgLbl, .ThumbsPrice, #ThumbsPrice {
    text-align: center !important;
    width: 100%;
    display: block;
}

.ThumbsPrice {
    display: block;
    margin-top: 5px;
    text-align: center;
    color: black;
}

/* Space around the Add to Cart button */
.Thumbs form {
    margin: 5px 0 !important; /* Adds 15px top/bottom space */
    height: auto !important;   /* Let the button determine the height */
    display: flex;
    justify-content: center;   /* Center the button horizontally */
}

.Thumbs form input[type="image"] {
    display: block;
    cursor: pointer;
    margin: 5px 0 !important;
}

/*****************************************************************************************************/
/*****************************************************************************************************/

@media (max-width: 768px) {

  /* Set the logo bar as the anchor for the absolute hamburger */
  .logo {
    position: relative; /* REQUIRED */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Hide the Nav bar by default on mobile */
  nav {
    display: none;
    height: auto;
    background-image: none;
  }

  /* Style the hamburger */
  .hamburger {
    display: block !important; /* Force visibility */
    font-size: 28px;
    color: #F67420;
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    left: 15px; /* Give it a little more room from edge */
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999; /* Ensure it's on the very top */
  }

  /* 3. MUTUAL EXCLUSION LOGIC */
  
  /* Show Nav when checked */
  #menu-toggle:checked ~ nav {
    display: block;
  }

  #menu-toggle:checked + .hamburger {
    color: white; /* Optional: change color to show it's "active" */
  }

  /* When checkbox is checked: HIDE the hamburger */
  .logo:has(#menu-toggle:checked) .hamburger {
    display: none;
  }

  /* When checkbox is checked: SHOW the nav bar */
  .logo:has(#menu-toggle:checked) + nav {
    display: block;
  }

  /* 4. Menu appearance when shown */
  .menu {
    display: flex;
    flex-direction: column;
    width: max-content;
    background: #F67420;
  }

  .menu a {
    width: 100%;               /* Ensure the link takes up the full width */
    color: black;
    padding: 10px 15px;
  }

  .menu li {
    position: relative; /* REQUIRED for absolute positioning */
    width: 100%;
    background: #F67420;
  }

  .menu li > a {
    flex-shrink: 0;           /* Prevents "Services" from being squished */
    padding: 10px 15px;
  }

  .menu li:hover > a,
  .submenu a:hover {
    background-color: black !important;
    color: #F67420 !important;
}

  /* Show the submenu on hover/click */
  .menu li:hover > .submenu {
    display: block;            /* Use flex to respect the column direction */
  }

  /* Ensure sub-items take up their own line */
  .submenu li {
    width: 100%;
    position: relative;
  }

  .submenu a {
    background-color: #F67420 !important;
    color: black !important;
    padding: 10px 15px;
    display: block;
    white-space: nowrap; /* Prevents text wrapping */
    border-bottom: 1px solid #222;
  }

  .submenu {
    display: none;      /* Hidden by default */
    position: absolute; /* FLOATS: Does not push 'Contact' down */
    top: 0;             /* Aligns top of 'Web Design' with top of 'Services' */
    left: 100%;         /* Positions it exactly to the right of 'Services' */
    background: #111;   /* Slightly different black to distinguish it */
    min-width: 160px;   /* Give it some width */
    z-index: 2000;      /* Ensure it sits on top of everything */
    list-style: none;
  }

  .menu li:hover > .submenu {
    display: block;     /* Use block to stack Web Design, Marketing, etc. */
  }

  .submenu li {
    width: 100%;
    position: relative; /* Anchor for the next level (Marketing) if needed */
  }

  .submenu a {
    color: black !important;
    padding: 10px 15px;
    display: block;
    white-space: nowrap; /* Prevents text wrapping */
    border-bottom: 1px solid #222;
  }

  .submenu a:hover {
    background-color: black !important;
    color: #F67420 !important; /* Text turns orange on hover */
  }

  .submenu-right {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;         /* Fly out even further right */
    background: #222;
    min-width: 160px;
    z-index: 2001;
  }

  .submenu li:hover > .submenu-right {
    display: block;
  }
}