/* ==========================================================================
   Greentix header — deep-forest wellness theme
   ========================================================================== */

:root {
	--gx-green-dark:  #12291c;
	--gx-green:       #1d4a30;
	--gx-green-mid:   #2c6b45;
	--gx-green-light: #eef4ec;
	--gx-cream:       #faf7ee;
	--gx-gold:        #c9973f;
	--gx-gold-light:  #e4c07a;
	--gx-text:        #2a3a2f;
}

body {
	font-family: 'Open Sans', sans-serif;
}

/* ---------- Full-width header/menu bars ---------- */
/* The colored bars already span the browser edge to edge; this makes their
   CONTENT do the same instead of stopping at Bootstrap's ~1170px container,
   without touching .container anywhere else on the site. */
#topbar > .container,
#site-header > .container,
.menu-bar-container {
	width: 100%;
	max-width: 100%;
	padding-left: 40px;
	padding-right: 40px;
}
@media (max-width: 767px) {
	#topbar > .container,
	#site-header > .container,
	.menu-bar-container {
		padding-left: 15px;
		padding-right: 15px;
	}
}

/* ---------- Top utility bar ---------- */
#topbar {
	background: var(--gx-green-dark);
	color: #cfe0d3;
	font-size: 12px;
	letter-spacing: .02em;
}
#topbar .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 7px;
	padding-bottom: 7px;
}
#topbar a {
	color: #cfe0d3;
	text-decoration: none;
	transition: color .15s ease;
}
#topbar a:hover {
	color: var(--gx-gold-light);
}
.topbar-left i {
	color: var(--gx-gold);
	margin-right: 5px;
}
.topbar-right {
	display: flex;
	align-items: center;
}
.topbar-right .btn-link {
	color: #cfe0d3;
	text-shadow: none;
	padding: 0 8px;
}
.topbar-right .btn-link:hover {
	color: var(--gx-gold-light);
}
.topbar-right .dropdown-menu {
	font-size: 13px;
	color: #333;
}
.topbar-links {
	margin: 0 0 0 14px;
	white-space: nowrap;
}
.topbar-links > li {
	padding-left: 16px;
}
.topbar-links > li > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.topbar-links .caret {
	border-top-color: #cfe0d3;
}

/* ---------- Main header ---------- */
#site-header {
	background: var(--gx-cream);
	padding: 18px 0;
	position: sticky;
	top: 0;
	z-index: 999;
	box-shadow: 0 1px 0 rgba(18, 41, 28, 0.08);
}
.header-row {
	display: flex;
	align-items: center;
	gap: 28px;
}

/* logo */
#logo {
	margin: 0;
	flex: 0 0 auto;
}
#logo img {
	max-height: 56px;
}
.logo-wordmark {
	font-family: 'Fraunces', serif;
	font-weight: 700;
	font-size: 30px;
	letter-spacing: .01em;
	color: var(--gx-green-dark);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.logo-wordmark:hover, .logo-wordmark:focus {
	color: var(--gx-green);
	text-decoration: none;
}
.logo-wordmark .fa-leaf {
	color: var(--gx-gold);
	font-size: 22px;
	transform: rotate(-10deg);
}

/* search */
.header-search {
	flex: 1 1 auto;
	max-width: 640px;
	margin: 0 auto;
}
.header-search #search {
	margin-bottom: 0;
}
.header-search #search .input-lg {
	height: 46px;
	border: 2px solid var(--gx-green);
	border-right: none;
	border-radius: 24px 0 0 24px;
	padding: 0 20px;
	box-shadow: none;
	background: #fff;
}
.header-search #search .input-lg:focus {
	border-color: var(--gx-green-mid);
	box-shadow: none;
}
.header-search #search .btn-lg {
	height: 46px;
	border-radius: 0 24px 24px 0;
	background: var(--gx-green);
	border: 2px solid var(--gx-green);
	color: #fff;
	padding: 0 24px;
	text-shadow: none;
	transition: background .15s ease;
}
.header-search #search .btn-lg:hover {
	background: var(--gx-green-mid);
	border-color: var(--gx-green-mid);
}

/* actions (cart) */
.header-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}
.header-actions #cart {
	margin-bottom: 0;
}
.header-actions #cart > .btn {
	background: var(--gx-green-dark);
	background-image: none;
	border: none;
	border-radius: 24px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 12px 22px;
	box-shadow: none;
	transition: background .15s ease;
}
.header-actions #cart > .btn:hover,
.header-actions #cart > .btn:focus {
	background: var(--gx-green-mid);
	color: #fff;
}
.header-actions #cart .fa-shopping-cart {
	color: var(--gx-gold-light);
	margin-right: 6px;
}
.header-actions #cart.open > .btn {
	background: #fff;
	color: var(--gx-green-dark);
	border: 2px solid var(--gx-green);
}
.header-actions #cart.open > .btn .fa-shopping-cart {
	color: var(--gx-green);
}

/* ---------- Category menu bar ---------- */
#menu {
	background: var(--gx-green);
	background-image: none;
	border: none;
	min-height: 46px;
}
#menu .nav > li > a {
	color: #fff;
	text-shadow: none;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 13px 20px;
	position: relative;
}
#menu .nav > li > a::after {
	content: '';
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 8px;
	height: 2px;
	background: var(--gx-gold);
	transform: scaleX(0);
	transition: transform .2s ease;
}
#menu .nav > li > a:hover,
#menu .nav > li.open > a {
	background: rgba(0, 0, 0, 0.12);
}
#menu .nav > li > a:hover::after,
#menu .nav > li.open > a::after {
	transform: scaleX(1);
}
#menu .dropdown-menu {
	border: none;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 10px 24px rgba(18, 41, 28, 0.18);
}
#menu .dropdown-inner a {
	color: var(--gx-text);
	font-size: 13px;
}
#menu .dropdown-inner li a:hover {
	color: #fff;
	background: var(--gx-green-mid);
}
#menu .see-all {
	color: var(--gx-green);
	font-weight: 600;
}
#menu .see-all:hover, #menu .see-all:focus {
	background: var(--gx-green);
	background-image: none;
	color: #fff;
}
#menu #category {
	color: #fff;
}
#menu .btn-navbar {
	background: var(--gx-green);
	background-image: none;
	border-color: var(--gx-green-mid);
}
#menu .btn-navbar:hover, #menu .btn-navbar:focus, #menu .btn-navbar:active {
	background: var(--gx-green-mid);
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.header-row {
		flex-wrap: wrap;
	}
	.header-search {
		order: 3;
		flex: 1 1 100%;
		max-width: none;
		margin-top: 12px;
	}
	.header-actions {
		margin-left: auto;
	}
}
@media (max-width: 767px) {
	#topbar .container {
		flex-wrap: wrap;
		row-gap: 6px;
	}
	.topbar-links > li:first-child {
		padding-left: 0;
	}
	.topbar-links span {
		display: none;
	}
	#site-header {
		padding: 14px 0;
	}
	.logo-wordmark {
		font-size: 24px;
	}
	.header-actions #cart > .btn span {
		display: none;
	}
}
@media (max-width: 480px) {
	.topbar-left {
		font-size: 11px;
	}
}