/* Styles for the main header */
:root { --sticky-h: 75px; }
.main-header {
  /* Your existing header styles */
}

/* Top info bar (shown on all screens, Hobbex-like) */
.top-info-bar { display:block; background:#000; color:#fff; }
.top-info-bar .top-info-text { text-align:center; font-size:12px; line-height:2; font-weight:900; }
.top-info-bar .container-fluid { padding-top:8.5px; padding-bottom:8.5px; }

/* Styles for the sticky header */
.sticky-header {
  display: none; /* Initially hide the sticky header */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff; /* Change as needed */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add shadow */
  z-index: 1000; /* Ensure the sticky header appears above other content */
}
/* Reserve space globally whenever sticky header is active (desktop/tablet when scrolled) */
body.sticky-on { padding-top: var(--sticky-h, 75px); }
.sticky_header_add {
	background-color: #fff;
	padding: 0px 0;
}
.sticky_header_add2 {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Mobile search bar (hidden by default) */
.mobile-search-bar { display:none; background:#fff; border-bottom:1px solid #eee; }
.mobile-search-bar .search-input-wrap { position:relative; }
.mobile-search-bar .form-control { padding-right:44px; border:1px solid #d1d5db; border-radius:8px; height:42px; font-size:14px; }
.mobile-search-bar .search-btn { position:absolute; right:8px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:#6b7280; width:28px; height:28px; border-radius:6px; }
.mobile-search-bar .search-btn:hover { color:#111827; }

/* Media query for small screens */
@media screen and (max-width: 768px) {
  /* Show top info bar */
  .top-info-bar { display:block; background:#000; color:#fff; font-size:12px; line-height:1; }
  .top-info-bar .container-fluid { padding-top:8.5px; padding-bottom:8.5px; }

  /* Use position: sticky so the header reserves space and never overlaps content */
  .sticky-header {
    display: block; /* Show sticky header on small screens */
    position: sticky;
    top: 0;
    z-index: 1000;
    background:#fff;
  }
  .main-header { display: none; /* Hide the main header on small screens */ }
  /* No body padding needed when header is in the normal flow */
  body { padding-top: 0 !important; }

  /* Hamburger style */
  .navbar-toggler { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:6px 10px; box-shadow:0 1px 2px rgba(0,0,0,.05); }
  .mobile-centered-logo img { display:block; }
  .mobile-cart-wrapper { display:flex; align-items:center; }

  /* Dropdown panel style */
  .sticky-header-dropdown-bg { background:#fff; padding:12px; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.1); margin-top:8px; }
  /* Increase specificity so mobile menu links are dark on white background */
  .sticky-header .navbar .nav-link,
  .sticky-header .navbar-collapse .nav-link,
  .sticky-header .navbar .dropdown-menu .dropdown-item {
    color:#111827 !important; font-size:18px; padding:12px 14px; border-bottom:1px solid #f3f4f6;
  }
  .sticky-header .navbar .nav-link:last-child,
  .sticky-header .navbar .dropdown-menu .dropdown-item:last-child { border-bottom:none; }
  .sticky-header .navbar .dropdown-menu { background:#fff; border: none; box-shadow:0 6px 16px rgba(0,0,0,.1); z-index:1100; }

  /* Show search bar below header on mobile */
  .mobile-search-bar { display:block; }
}

/* Additional styling for the hamburger menu */
.menu-toggle { display: none; }

/* Your additional styles for logo, navigation, and other elements */



/* Sleek custom hamburger button and icon */
.navbar-toggler.sleek-toggle {
  background: transparent;
  border: none;
  border-radius: 10px;
  padding:8px 10px; /* comfortable hit area */
  line-height:1;
  box-shadow: none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.navbar-toggler.sleek-toggle:focus { outline:none; box-shadow:0 0 0 3px rgba(59,130,246,.25); }

/* The three bars */
.navbar-toggler.sleek-toggle .hamburger {
  position:relative;
  width:24px; height:16px;
  display:inline-block;
}
.navbar-toggler.sleek-toggle .hamburger .bar {
  position:absolute; left:0; right:0;
  height:2px; background:#111827; border-radius:2px;
  transition: transform .25s ease, opacity .2s ease, top .25s ease, background-color .2s ease;
}
.navbar-toggler.sleek-toggle .hamburger .bar:nth-child(1){ top:0; }
.navbar-toggler.sleek-toggle .hamburger .bar:nth-child(2){ top:7px; }
.navbar-toggler.sleek-toggle .hamburger .bar:nth-child(3){ top:14px; }

/* When menu is open (Bootstrap removes .collapsed) create an "X" */
.navbar-toggler.sleek-toggle:not(.collapsed) .hamburger .bar:nth-child(1){ top:7px; transform:rotate(45deg); }
.navbar-toggler.sleek-toggle:not(.collapsed) .hamburger .bar:nth-child(2){ opacity:0; transform:scaleX(.3); }
.navbar-toggler.sleek-toggle:not(.collapsed) .hamburger .bar:nth-child(3){ top:7px; transform:rotate(-45deg); }

/* Make sure on small screens our sleek style wins over older rules */
@media screen and (max-width: 768px){
  .sticky-header .navbar-toggler.sleek-toggle { border-radius:12px; padding:10px 12px; }
  .sticky-header .navbar-toggler.sleek-toggle .hamburger .bar { background:#111827; }
}

/* Desktop category bar styles (Hobbex-like) */
.desktop-category-bar { background:#f9632e; /* orange */ }
.desktop-category-bar .container-fluid { max-width:1400px; margin:0 auto; padding:0 !important; }
.desktop-category-bar .navbar-nav { display:flex; gap:0; }
.desktop-category-bar .nav-item { list-style:none; }
.desktop-category-bar .nav-link { color:#fff !important; font-weight:700; font-size:14px; padding:14px 18px; text-transform:none; }
.desktop-category-bar .dropdown-menu { background:#f9632e; /* light orange */ border:none; box-shadow:0 6px 16px rgba(0,0,0,.1); margin-top:0;border-radius: 0px 0px 10px 10px }
.desktop-category-bar .dropdown-item { color:#fff; padding:10px 14px; }
.desktop-category-bar .dropdown-item:hover { background:#fb4f12; }
/* Make cart icon white in the orange desktop bar */
.desktop-category-bar .header-cart .fa-shopping-cart { color:#fff; }
@media screen and (max-width: 768px){
  .desktop-category-bar{ display:none; }
}


/* Hide the white sticky header on desktop (keep it on mobile) */
@media (min-width: 768px) {
  header.sticky-header.sticky_header_add {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Make orange category bar sticky on desktop */
  .desktop-category-bar.is-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    z-index: 1050 !important; /* above most things */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    animation: slideDown 0.25s ease-out;
    background: #f9632e !important; /* ensure orange persists */
  }

  @keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}

/* Keep white sticky header on mobile, hide orange bar placeholder */
@media (max-width: 767px) {
  header.sticky-header.sticky_header_add {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .desktop-category-bar-placeholder { display: none !important; }

  .desktop-category-bar.is-sticky { position: static !important; }
}

/* Desktop logo section height: ensure ~15px top/bottom margins and enough height for centered logo */
@media screen and (min-width: 769px) {
  /* Add vertical padding to the navbar area */
  .main-header .navbar {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  /* Ensure the inner container has enough height to contain the logo + margins */
  .main-header .navbar .container-fluid {
    min-height: 90px; /* adjust if your logo is taller; provides room for ~15px margins */
  }
}

/* --- Overrides: make orange banner flush and control VAT toggle spacing --- */
/* Ensure banner spans the full viewport width with no left/right margins */
.desktop-category-bar, .desktop-category-bar.is-sticky{
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Placeholder: hidden by default, only shown when bar becomes sticky */
.desktop-category-bar-placeholder {
  display: none !important;
  margin:0 !important;
  padding:0 !important;
}

/* Ensure hero sits directly under the banner with no gap and no side margins */
#home-hero{ margin:0 !important; padding:0 !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; }
#home-hero img{ margin:0 !important; padding:0 !important; display:block !important; }

/* Remove the legacy 1400px upper-limit behavior for hero */
@media (min-width: 751px) and (max-width: 1399px){
  #home-hero{ height:100vh !important; overflow:hidden !important; }
  #home-hero img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center !important; }
}
@media (min-width: 1400px){
  #home-hero{ height:100vh !important; overflow:hidden !important; }
  #home-hero img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center !important; }
}

/* VAT toggle (moms) spacing: 10px gap from surrounding elements */
.vat_box { margin-top: 10px !important; }
#vat_red { margin-left: 10px !important; }

/* If VAT toggle is placed inside header area, ensure it has breathing room from the right */
.desktop-category-bar .vat_box, .desktop-category-bar #vat_red { margin-left: 10px !important; margin-top: 0 !important; }

/* Ensure desktop dropdowns overlay and do not expand the orange bar */
@media (min-width: 992px){
  .desktop-category-bar,
  .desktop-category-bar .container-fluid,
  .desktop-category-bar .navbar-nav{
    overflow: visible !important; /* allow menus to render outside bar */
  }
  .desktop-category-bar{ position: relative; z-index: 1200; }
  .desktop-category-bar .dropdown{ position: relative; }
  .desktop-category-bar .dropdown .dropdown-menu{
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    display: none; /* shown on hover via CSS/JS */
    will-change: transform, opacity;
  }
  /* show on hover/focus (reinforce behavior) */
  .desktop-category-bar .dropdown:hover > .dropdown-menu,
  .desktop-category-bar .dropdown:focus-within > .dropdown-menu{
    display: block;
  }
  /* Keep elevated above page content */
  .desktop-category-bar .dropdown .dropdown-menu{ z-index: 1300; }
  /* When sticky, keep even higher */
  .desktop-category-bar.is-sticky{ z-index: 1400 !important; }
}