/* ================= TF TOP BAR ================= */
/* .Lmenu-bars {
    width: 50px;
    height: 50px;
    position: fixed;
    top: 40px;
    left: 40px;
    overflow: hidden;
    z-index: 9999; /* Keep it above everything else */
/*     cursor: pointer;
} */

/* =========================================================
   TF TOP BAR — FINAL ALIGNMENT FIX
   Works with existing Lmenu-bars (fixed → header-aligned)
   ========================================================= */

/* ---------- TOP BAR CONTAINER ---------- */
.tf-topbar {
  position: relative;                 /* anchor for hamburger */
  display: flex;
  align-items: center;                /* vertical alignment */
  justify-content: space-between;
  height: 70px;                       /* consistent header height */
  padding: 0 20px;
  background: #ffffff;
  z-index: 900;
	
    /* top: 20px; */
    width: 100%; max-width: 1240px; margin: 0 auto; box-sizing: border-box; /* same width as the page content, so the cart no longer drifts to the far right */ /* Adjust the width as needed */
    padding-bottom: 10px; /* Adds space below the menu items */
    border-bottom: 0; /* #333 Creates a line under the menu */	
	
}

/* Full-width grey line under the logo bar (desktop only) - the bar itself is now limited to the content width */
@media (min-width: 768px) {
  .top-heading_1 { border-bottom: 1px solid #cccccc; padding-bottom: 12px; } /* space between the logo bar and the line */
}

/* ---------- LEFT (hamburger anchor) ---------- */
.tf-topbar-left {
  position: relative;
  flex: 0 0 50px;                     /* reserve space */
  height: 100%;
}

/* OVERRIDE your existing .Lmenu-bars (IMPORTANT) */
.tf-topbar .Lmenu-bars {
position: absolute;                 /* NOT fixed */
  /* position: relative;                 /* NOT fixed */
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 36px;
  height: 26px;
  z-index: 9999;
}

/* Hamburger bars size tweak */
.tf-topbar .Lmenu-bars span {
  width: 30px;
  height: 3px;
}

/* ---------- CENTER (logo) ---------- */
.tf-topbar-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tf-topbar-center img {
  max-height: 46px;                   /* balanced size */
  width: auto;
  display: block;
}

/* ---------- RIGHT (cart + modal triggers) ---------- */
.tf-topbar-right {
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Cart wrapper */
.tf-cart {
  display: flex;
  align-items: center;
}

/* ---------- CART BUTTON ---------- */
#shopping-cart-container {
  position: relative;
  display: flex;
  align-items: center;
}

#shopping-cart-icon {
  width: 22px;
  height: auto;
  display: block;
}

/* Cart badge */
#cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  color: #fff;
  background: #e74c3c;
  border-radius: 50%;
  font-weight: bold;
}

 .menu-separator {
     width: 100%; /* Adjust the width as needed */
     margin: 0 auto; /* Centers the <hr> horizontally */
 	margin-top: 10px;
     border: none; /* Remove default border */
     height: 1px; /* Set the thickness of the line */
     border-top: 1px solid #cccccc; /* #333 Adjust thickness and color */
     background-color: #cccccc; /* #cccccc Choose a color */
 } 

/* ---------- MOBILE REFINEMENT ---------- */
@media (max-width: 767px) {
  /* .tf-topbar {
    height: 64px;
    padding: 0 12px;
  }

  .tf-topbar-center img {
    max-height: 40px;
  }

  .tf-topbar-left,
  .tf-topbar-right {
    flex: 0 0 44px;
  } */
/* } */

.tf-topbar {
  display: flex;
  align-items: center;        /* true vertical centering */
  justify-content: space-between;
	
  /* height: 70px; */
  height: 64px; /* real box that carries the line under the header */	
  padding: 0 12px;
  background: #fff;
  /* position: relative; */
	position: fixed;
	top: 20px; /* box 20-70px: the logo stays where it was (centre at 45px) */
	
    width: 100%; box-sizing: border-box; /* Adjust the width as needed */
    padding-bottom: 14px; /* space between the logo and the line */
    border-bottom: 1px solid #cccccc; box-shadow: 0 -20px 0 0 #fff; /* white strip above, so page content never shows over the header */ /* #333 Creates a line under the menu */	
	
}

/* LEFT */
.tf-topbar-left {
  flex: 0 0 44px;
  height: 100%;
  display: flex;
  align-items: center;
}

/* CENTER */
.tf-topbar-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tf-topbar-center img {
  max-height: 40px;
  display: block;
}

/* RIGHT */
.tf-topbar-right {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* CART */
.tf-cart {
  display: flex;
  align-items: center;
}

#shopping-cart-container {
  position: relative;
  display: flex;
  align-items: center;
}

#shopping-cart-icon {
  width: 22px;
  height: auto;
}

/* CART BADGE */
#cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 10px;
  background: #e74c3c;
  color: #fff;
  text-align: center;
  border-radius: 50%;
  font-weight: bold;
}
	
}

/* ===== PHONE: header (logo bar + hamburger) scrolls away with the page ===== */
/* @media (max-width: 767px) {
/*   .tf-topbar {
/*     position: relative !important;   /* was fixed */
/*     top: auto !important;
/*     width: 100% !important;
/*     height: 84px !important;         /* 20px top space + 50px logo row + 14px space above the line */
/*     margin: 0 !important;
/*     padding: 20px 12px 14px !important;
/*     box-sizing: border-box !important;
/*     box-shadow: none !important;
/*     border-bottom: 1px solid #cccccc !important;
/*   }
/*   .top-heading_1 { margin-bottom: 0 !important; }
/*   .wrapper { margin-top: 0 !important; }
/*   /* hamburger: same spot as before, but it moves up with the page */
/*   .Lmenu-bars { position: absolute !important; top: 30px; left: 40px; }
/*   /* while the slide-out menu is open the hamburger/X stays on screen so it can be closed */
/*   .Lmenu-bars:has(.first-bar) { position: fixed !important; }
/* }  */

/* ===== PHONE: header (logo bar + hamburger) hides when scrolling down, returns when scrolling up =====
   (replaces the earlier "phone-header-scrolls" block - delete that one). Needs the updated top-1.js. */
@media (max-width: 767px) {
  /* keeps the page content below the header while the header itself is fixed */
  .top-heading_1 { display: block !important; height: 84px !important; margin-bottom: 0 !important; }
  .tf-topbar {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 84px !important;         /* 20px top space + 50px logo row + 14px space above the line */
    margin: 0 !important;
    padding: 20px 12px 14px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    box-shadow: none !important;
    border-bottom: 1px solid #cccccc !important;
    z-index: 900;
    transition: transform .25s ease;
  }
  .Lmenu-bars { position: fixed !important; top: 30px; left: 40px; transition: transform .25s ease; }
  .tf-hide-hdr .tf-topbar,
  .tf-hide-hdr .Lmenu-bars { transform: translateY(-120%); }
  /* never hide the hamburger/X while the slide-out menu is open */
  .tf-hide-hdr .Lmenu-bars:has(.first-bar) { transform: none; }
  .wrapper { margin-top: 0 !important; }
}