/* Styles for the main header */
:root { --sticky-h: 75px; --campaign-banner-h: 0px; }

/* Enhanced Campaign Header Banner */
.header-campaign-banner {
  position: sticky;
  top: 0;
  z-index: 1060;
  background: linear-gradient(90deg, #e63946 0%, #ff4747 30%, #ff6b6b 50%, #ff4747 70%, #e63946 100%);
  background-size: 200% 100%;
  animation: campaignShimmer 12s ease-in-out infinite, campaignShadowPulse 5s infinite ease-in-out;
  color: #ffffff;
  text-align: center;
  padding: 11px 16px;
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 14px rgba(255, 71, 71, 0.4);
}

.header-campaign-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.campaign-banner-text {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.campaign-star-icon {
  color: #ffe600;
  font-size: 20px;
  display: inline-block;
  animation: starSparkle 4s ease-in-out infinite;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

@keyframes campaignShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes campaignShadowPulse {
  0%, 100% { box-shadow: 0 3px 10px rgba(255, 71, 71, 0.35); }
  50% { box-shadow: 0 6px 20px rgba(255, 71, 71, 0.65); }
}

@keyframes starSparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.95; }
  50% { transform: scale(1.25) rotate(15deg); opacity: 1; }
}
.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:clamp(12px, 1.6vw, 18px); line-height:1.3; font-weight:700; font-family:'Nunito', sans-serif; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:8px; }
.top-info-bar .container-fluid { padding-top:8.5px; padding-bottom:8.5px; }
.top-info-bar .top-info-inner { display:flex; align-items:center; justify-content:center; position:relative; flex-wrap:wrap; row-gap:6px; column-gap:16px; }
.top-info-bar .top-info-inner .top-info-text { flex:1 1 auto; order:2; min-width:0; }
.top-info-payment-icon { width:18px; height:18px; stroke:#fff; flex:none; }

/* Small delivery/location badges on either side of the main top-bar text — same font size as the main text */
.top-info-badge { display:flex; align-items:center; justify-content:center; gap:6px; font-size:clamp(12px, 1.6vw, 18px); font-weight:700; font-family:'Nunito', sans-serif; white-space:nowrap; flex:0 1 auto; min-width:0; text-transform:uppercase; text-align:center; }
.top-info-badge:first-of-type { order:1; }
.top-info-badge:last-of-type { order:3; }
.top-info-badge svg { width:18px; height:18px; stroke:#fff; flex:none; }

/* Tablet: allow badges to shrink/wrap gracefully, keep single row if possible */
@media screen and (max-width: 992px) {
  .top-info-bar .top-info-inner { justify-content:center; }
}

/* Mobile: stack main text on top, badges below in a centered row */
@media screen and (max-width: 768px) {
  .top-info-bar .container-fluid { padding-top:10px; padding-bottom:10px; }
  .top-info-bar .top-info-inner { row-gap:6px; column-gap:10px; justify-content:center; }
  .top-info-bar .top-info-inner .top-info-text { order:1; flex:1 1 100%; font-size:clamp(11px, 3.2vw, 15px); }
  .top-info-badge { order:2; white-space:normal; text-align:center; justify-content:center; font-size:clamp(11px, 3.2vw, 15px); flex:1 1 auto; }
  .top-info-badge:first-of-type { order:2; }
  .top-info-badge:last-of-type { order:3; }
}

/* Very small screens: badges wrap to their own full-width lines to avoid crowding */
@media screen and (max-width: 420px) {
  .top-info-bar .top-info-inner { row-gap:5px; justify-content:center; }
  .top-info-badge { flex:1 1 100%; text-align:center; justify-content:center; }
  .top-info-badge svg { width:15px; height:15px; }
  .top-info-payment-icon { width:15px; height:15px; }
}

/* Four quick-access icons, stacked vertically, fixed to the right edge (sticky while scrolling) */
.top-icons-fixed {
  position: fixed;
  top: 140px;
  right: 10px;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.top-icons-fixed.is-visible {
  opacity: 1;
  pointer-events: auto;
}
/* Large screens: always show the icons, regardless of scroll position */
@media screen and (min-width: 993px) {
  .top-icons-fixed {
    opacity: 1;
    pointer-events: auto;
  }
}
.top-icons { display:flex; flex-direction:column; align-items:center; gap:10px; }
.top-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 12px;
    background: #d8c39c;
    color: #fff;
    font-size: 31px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.top-icon-btn:hover { background: var(--btn-bg-beige-hover, #c9ae82); color:#fff; }
.top-icon-btn-green { background: var(--brand-primary, #1f6b6e); }
.top-icon-btn-green:hover { background: var(--brand-primary-600, #144a4c); }
.top-icon-btn-facebook { background:#1877F2; color:#fff; }
.top-icon-btn-facebook:hover { background:#0f5fc9; color:#fff; }
.top-icon-btn-phone { background:#30c53c; color:#fff; }
.top-icon-btn-phone:hover { background:#27ab32; color:#fff; }

@media screen and (max-width: 768px) {
  .top-icon-btn { width:38px; height:38px; font-size:19px; border-radius:9px; }
  .top-icons { gap:8px; }
}

/* 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) {
  /* Campaign banner half size on small screens */
  .header-campaign-banner {
    padding: 5px 8px;
    font-size: 11px;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 8px rgba(255, 71, 71, 0.35);
  }
  .header-campaign-inner {
    padding: 0 10px;
    gap: 6px;
  }
  .campaign-star-icon {
    font-size: 12px;
  }

  /* 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: var(--campaign-banner-h, 0px);
    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: linear-gradient(180deg, #fff7f2 0%, #fdf0e8 100%);
  border-bottom: 1px solid rgba(var(--brand-primary-rgb), 0.18);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}
.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:var(--brand-primary-600) !important;
  font-weight:700;
  font-size:14px;
  padding:14px 18px;
  text-transform:uppercase;
  border-radius: 10px;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.desktop-category-bar .nav-link:hover,
.desktop-category-bar .nav-link:focus,
.desktop-category-bar .nav-item.show > .nav-link {
  background: rgba(var(--brand-primary-rgb), 0.09);
  color: var(--brand-accent-600) !important;
  transform: translateY(-1px);
}
.desktop-category-bar .dropdown-menu { background: #f5faf9; border:none; box-shadow:0 10px 24px rgba(15, 23, 42, 0.08); margin-top:0; border-radius: 0px 0px 12px 12px; border:1px solid rgba(var(--brand-primary-rgb), 0.12); }
.desktop-category-bar .dropdown-item { color:var(--brand-primary-600); padding:10px 14px; border-radius: 8px; margin: 4px 6px; transition: background-color 0.2s ease, color 0.2s ease; }
.desktop-category-bar .dropdown-item:hover,
.desktop-category-bar .dropdown-item:focus {
  background: rgba(var(--brand-primary-rgb), 0.08);
  color: var(--brand-accent-600);
}
/* Make cart icon dark in the softer desktop bar */
.desktop-category-bar .header-cart .fa-shopping-cart { color:var(--brand-primary-600); }
@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 green category bar sticky on desktop */
  .desktop-category-bar.is-sticky {
    position: fixed !important;
    top: var(--campaign-banner-h, 0px) !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: linear-gradient(180deg, #fff7f2 0%, #fdf0e8 100%) !important; /* ensure soft warm background persists */
  }

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

/* Keep white sticky header on mobile, hide green 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 green 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 green 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; }
}