:root {
	--display-font-family: Lalezar;
	--body-font-family: Roboto;

	--font-size: 16px

	--logo-padding: 8px;
	--logo-height: 164px;

	--header-width: 100%;
	--header-border-position: bottom;
	--header-border-size: 0;
	--header-bg-color: 0 0 0;
	--header-border-color: 0 128 0;

	--brand-color: 5 168 69;
	--brand-color-inverted: 255 255 255;

	--background-color: 255 15 ;
	--text-color: 61 61 61;
	--link-color: 27 67 50;

	--action-color: 242 140 40;
	--action-color-inverted: 255 255 255;

	--announcement-bar-bg-color: 255 255 255;
	--announcement-bar-text-color: 201 0 0;
	--announcement-bar-link-color: 61 61 61;

	--main-navigation-bg-color: 5 168 69;
	--main-navigation-link-color: 255 255 255;
	--main-navigation-link-color-hover: 255 255 255;
	--main-navigation-link-bg-color: 44 81 112;
	--main-navigation-link-font-size: 16px;
	--main-navigation-link-alignment: left;

	--auxiliary-bg-color: transparent;
	--auxiliary-border-color: transparent;
	--auxiliary-link-color: 0 0 0;

	--order-status-bg-color: 245 245 245;
	--order-status-color: 162 162 162;

	--store-menu-bg_color: 5 168 69;
	--store-menu-color: 85 85 85;

	--footer-bg-color: 5 168 69;
	--footer-color: 255 255 255;
	--footer-link-color: 255 255 255;
}

/*Custom Styles*/
/* ================= HEADER FIX ================= */

.siteHeader__container {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  min-height: 110px;
}

/* LOGO */
.logo__container {
  display: flex !important;
  justify-content: flex-start !important;
  width: 100%;
  padding-left: 20px;
}

/* NAV */
.mainNavigation {
  width: 100%;
  background: #05a845;
}

.mainNavigation__list {
  display: flex;
  justify-content: flex-start;
  gap: 30px;
  padding: 10px 20px;
  padding-right: 300px; /* space for search */
}

/* ================= STICKY HEADER ================= */

.siteHeader {
  position: sticky !important;
  top: 0;
  z-index: 9999;
  background: #ffffff;
  position: relative;
}

/* ================= SEARCH BAR ================= */

/* default (inside header visually) */
.custom-search-section {
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 10000;

  display: flex;
  justify-content: center;
  pointer-events: none;
  transition: all 0.2s ease;
}

/* active sticky */
.custom-search-section.sticky-search {
  position: fixed;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
}

/* search box */
.custom-search {
  display: flex;
  width: 100%;
  max-width: 520px;
  pointer-events: auto;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.custom-search input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-right: none;
  border-radius: 10px 0 0 10px;
  outline: none;
}

.custom-search button {
  background: #05a845;
  color: white;
  border: none;
  padding: 0 18px;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
}

/* ================= SHOP BANNERS FIX ================= */

.banner {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
}

/* overlay */
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.65),
    rgba(0,0,0,0.2),
    transparent
  );
  z-index: 1;
}

/* banner text */
.banner h3 {
  position: absolute;
  bottom: 20px;
  left: 20px;

  color: #ffffff;
  font-size: 24px;
  font-weight: 600;

  text-shadow: 0 4px 12px rgba(0,0,0,0.6);
  z-index: 2;
}

/* ================= GLOBAL CLEANUP ================= */

/* prevent overflow issues */
body {
  overflow-x: hidden;
}

/* consistent container */
.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}