#header {
	font-family: var(--main-font);
	font-weight: 400;
	position: relative;
	z-index: 1000;
}

/* LINE 1 */
#header .h_line_1 {
	background: var(--main-color);
}

#header .h_line_1,
#header .h_line_1 a {
	color: #fff;
	text-shadow: -1px -1px 1px #1a1a1a, 1px -1px 1px #1a1a1a, -1px 1px 1px #1a1a1a, 1px 1px 1px #1a1a1a;
}

/* LINE 2 */
#header .h_line_2 {
	background-color: var(--tri-color);
}

#header .h_line_2 .container .row-cst {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 6px 0;
}

#header .h_line_2 .col-aa a {
	max-width: 95px;
}

#header .h_line_2 .col-aa {
	flex: 0 0 105px;
	padding-right: 10px;
}

#header .h_line_2 .col-bb {
	flex: 1 1 auto;
}

#header .h_line_2 .col-bb h1 { 
	margin: 0;
	color: var(--main-color);
}

#header .h_line_2 .col-cc {
	flex: 0 0 390px;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	/* gap: 6px;*/
	max-width: 390px;
}

/* ================= SEARCH FORM ====================== */

.col-cc>form.search-form {
	flex: 1 1 calc(100% - 56px);
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	border: var(--global-border-width) solid black;
	border-radius: 12px;
	padding: 4px 8px;
	position: relative;
	background: #FFF;
}

.search-field {
	flex: 1;
	border: none;
	outline: none;
	font-size: 16px;
	padding: 1px 8px;
	border-radius: 12px;
	min-width: 0;
}

@media (min-width: 992px) {
	.search-field:focus {
		background: #FFF;
		position: absolute;
		right: 50px;
		width: 390px;
		height: 50px;
		border: solid var(--global-border-width) var(--border-color);
		box-shadow: 0 0 1rem rgba(0, 0, 0, .25)
	}
}

.search-submit {
	background: none;
	border: none;
	padding: 0 6px;
	cursor: pointer;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.search-submit img {
	width: 31px;
	height: 31px;
}

/* ============================== FAVORITE BTN ======================================= */

#compare-header-btn i.bi.bi-arrow-down-up {
	transform: rotate(90deg);
}

/* Контейнер за иконките */
#header-icons {
	font-size: 32px;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0 20px;
	padding: 0 0 0 1rem;
}

/* Общ стил за всяка иконка */
#header-icons .headet-ico {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* Унифициран бадж за всички */
#header-icons .headet-ico .count {
	background: var(--red-color);
	color: #fff;

	font-variant-numeric: tabular-nums;
	position: absolute;
	top: -6px;
	right: -6px;

	min-height: 22px;
	min-width: 22px;

	display: flex;
	justify-content: center;
	align-items: center;

	font-size: 12px;
	border-radius: 50%;
	line-height: 1;
	text-align: center;
	padding: 0;
}

#header-icons .favorites-link .count {
	background: var(--bs-danger);
}

#header-icons .cart-link .count {
	background: var(--red-color);
}

/* -------- FAVORITE TOGGLE BTN -------- */
.btn.btn-outline.favorite-toggle {
	background: none;
	color: var(--text-color);
	transition: color 0.2s ease;
}

@keyframes pulse-scale {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(0.5);
	}

	100% {
		transform: scale(1);
	}
}

.favorite-toggle:not(.active):hover i {
	display: inline-block;
	animation: pulse-scale 0.4s ease 0s 2;
}

.btn.btn-outline.favorite-toggle.active,
.btn.btn-outline.favorite-toggle.active:hover {
	background: none;
	border-color: var(--border-color);
	color: var(--bs-danger);
}

.btn.btn-outline.favorite-toggle.active>.bi.bi-heart-fill,
.btn.btn-outline.favorite-toggle>.bi.bi-heart {
	display: block;
}

.btn.btn-outline.favorite-toggle>.bi.bi-heart-fill,
.btn.btn-outline.favorite-toggle.active>.bi.bi-heart {
	display: none;
}

/* ============================================================================================================= */

/* LINE 3 MENU */
#h_line_3 {
	width: 100%;
	position: relative;
	left: 0;
	right: 0;
	z-index: 1;
}

body.is-sticky #h_line_3 {
	background:#fff;
	position: fixed;
	top: 0;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.27);
}

#header{
	font-size: 1.2rem 
}

#header #header-line-1 span.font{
	font-family:var( --sec-font );
	font-size: 1rem;
	letter-spacing:1px;
	font-weight:600
}

#header .h_line_3 { 
	padding: 0.5rem 0;
}

#header .h_line_3 nav {
	width: 100%;
	display: flex;
}

#header .h_line_3 nav ul,
#header .h_line_3 nav ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}

#header .h_line_3 nav ul {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

#header .h_line_3 nav ul li {
	text-align: center;
	flex: 1 1 auto;
	position: relative;
}

#header .h_line_3 nav ul li a {
	color: var(--main-color);
	text-decoration: none;
	display: block;
}

#header .h_line_2 .col-bb h1,
#header .h_line_3 nav ul li a {
	font-size: 1.2rem 
}

#header .h_line_3 nav ul li.current_page_item a,
#header .h_line_3 nav ul li a:hover {
	color: #000;
}

#header .h_line_3 nav ul li:after {
	content: '';
	display: block;
	width: 8px;
	height: 23px;
	background: #c8c9ea;
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translate(-50%, -50%);
	border-radius: 3px;
}

#header .h_line_3 nav ul li:last-child:after {
	display: none;
}

/* Хамбургер бутон */
.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 34px;
	background: none;
	border: none;
	cursor: pointer;
}

.menu-toggle span {
	display: block;
	height: 3px;
	width: 100%;
	background: var(--main-color);
	border-radius: 2px;
	transition: 0.3s;
}

/* Анимация при open */
.menu-toggle.open span:nth-child(1) {
	transform: rotate(45deg) translate(6px, 6px);
}

.menu-toggle.open span:nth-child(2) {
	opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
	transform: rotate(-45deg) translate(6px, -6px);
}

/* ===================================================================2========================================================================= */

/* ===================== HEADER ==================== */

#header .h_line_1 .container span.h-tel span b {
	font-style: normal;
	font-weight: 400;
}

@media (min-width: 991px) {
	/*
	#header-line-1 .h_line_1 .container.text-end span.font.h-tel span {
		font-size: 1.2rem;
	}
	*/
}

/* RESPONSIVE */
@media (max-width: 991px) {
	#header .h_line_1 .container {
		text-align: center;
		font-size: 14px;
	}

	#header .h_line_2 .row-cst {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	#header .h_line_2 .col-aa {
		flex: 0 0 auto;
		padding-right: 0;
		max-width: 120px;
	}

	#header .h_line_2 .col-bb h1 {
		font-size: 18px;
		line-height: 1.3;
		text-align: left;
	}

	#header .h_line_2 .col-cc {
		flex: 1 1 100%;
		width: 100%;
	}

	.col-cc>form.search-form {
		flex: 1 1 100%;
	}

	/* Меню мобилно */
	.menu-toggle {
		display: flex;
		margin-left: auto;
	}

	/* Хамбургер бутонът (h_line_3) да се показва НАД логото (h_line_2),
	   но под лентата с телефона (h_line_1). #header-line-1 е само структурна
	   обвивка без собствен стил, затова я "разопаковаме" за подредбата. */
	#header {
		display: flex;
		flex-direction: column;
	}

	#header-line-1 {
		display: contents;
	}

	#header .h_line_1 { order: 1; }
	#header .h_line_3 { order: 2; }
	#header .h_line_2 { order: 3; }

	/* Промо текст между телефона и логото (до хамбургер бутона) */
	#header .h_line_3 .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: .75rem;
	}

	#header .h_line_3 .h3-tagline {
		font-size: .75rem;
		line-height: 1.3;
		color: var(--main-color);
		margin: 0;
		flex: 1 1 auto;
		min-width: 0;
	}

	#header .h_line_3 nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--temp-color);
		display: none;
		flex-direction: column;
		align-items: stretch;
		padding: 1rem 1rem 2rem;
	}

	#header .h_line_3 nav ul {
		flex-direction: column;
		gap: 10px;
	}

	#header .h_line_3 nav ul li {
		flex: none;
	}

	#header .h_line_3 nav ul li:after {
		display: none;
	}

	#header .h_line_3 nav.active {
		display: flex;
	}

	#header .h_line_3 nav ul li a {
		font-size: 20px;
	}
}

@media (max-width: 767px) {

	#header .h_line_1 .container,
	#header.clearfix #header-line-1 .h_line_1 .container span.font.h-tel {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center
	}
	
	#header.clearfix #header-line-1 .h_line_1 .container span.font.h-tel {
		padding: 1rem 0
	}

	#header.clearfix #header-line-1 .h_line_1 .container span.font.h-tel strong {
		font-size: 2rem;
		margin-left: 6px;
	}

	.h-tel span:first-child {
		font-size: 0;
		position: relative;
		display: inline-block;
	}

	.h-tel span:first-child::before {
		content: '';
		display: inline-block;
		width: 40px;
		height: 40px;
		background: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M19.373 11.831c-0.138-0.154-0.337-0.25-0.559-0.25-0.414 0-0.75 0.336-0.75 0.75 0 0.195 0.074 0.373 0.197 0.506l-0-0.001c0.819 0.92 1.32 2.139 1.32 3.476 0 1.602-0.719 3.035-1.852 3.996l-0.008 0.006c-0.136 0.136-0.22 0.324-0.22 0.531 0 0.415 0.336 0.751 0.751 0.751 0.207 0 0.395-0.084 0.531-0.22v0c1.396-1.251 2.27-3.060 2.27-5.072 0-1.717-0.636-3.285-1.685-4.481l0.007 0.008zM22.428 8.776c-0.138-0.152-0.336-0.247-0.557-0.247-0.414 0-0.75 0.336-0.75 0.75 0 0.194 0.073 0.37 0.194 0.503l-0.001-0.001c1.445 1.629 2.328 3.786 2.328 6.149 0 2.819-1.256 5.345-3.24 7.047l-0.012 0.010c-0.136 0.136-0.22 0.324-0.22 0.531 0 0.415 0.336 0.751 0.751 0.751 0.207 0 0.395-0.084 0.531-0.22v0c2.244-2.002 3.65-4.901 3.65-8.129 0-2.741-1.014-5.245-2.686-7.158l0.011 0.013zM25.273 5.524c-0.137-0.146-0.331-0.236-0.546-0.236-0.414 0-0.75 0.336-0.75 0.75 0 0.198 0.077 0.378 0.202 0.512l-0-0c2.215 2.36 3.575 5.544 3.575 9.046 0 3.986-1.763 7.561-4.551 9.986l-0.016 0.014c-0.136 0.136-0.22 0.324-0.22 0.531 0 0.415 0.336 0.751 0.751 0.751 0.207 0 0.395-0.084 0.531-0.22v0c10.635-10.637 1.121-21.030 1.023-21.134zM12.378 11.725c0 0 0 0 0 0 0.248 0 0.469-0.121 0.605-0.307l0.001-0.002 4.282-5.897c0.090-0.122 0.143-0.275 0.143-0.44 0-0.064-0.008-0.127-0.023-0.187l0.001 0.005c-0.141-0.532-0.367-0.997-0.664-1.407l0.008 0.012c-0.178-0.272-0.374-0.509-0.593-0.723l-0.001-0.001-0.004-0.004c-0.952-0.94-2.261-1.52-3.706-1.52-1.446 0-2.757 0.582-3.71 1.524l0-0c-3.379 3.386-5.468 8.060-5.468 13.222s2.089 9.836 5.469 13.222l-0-0c0.943 0.942 2.245 1.525 3.683 1.525 0.006 0 0.012 0 0.018-0h-0.001c0.003 0 0.007 0 0.010 0 1.445 0 2.754-0.581 3.706-1.522l-0.001 0c0.211-0.203 0.399-0.427 0.56-0.671l0.009-0.015c0.301-0.408 0.536-0.886 0.676-1.404l0.007-0.030c0.014-0.055 0.022-0.117 0.022-0.182 0-0.166-0.054-0.319-0.145-0.443l0.001 0.002-4.282-5.899c-0.138-0.188-0.358-0.309-0.606-0.309v0c-0.798 0.001-1.553 0.187-2.224 0.517l0.030-0.013c-0.599-1.412-0.948-3.055-0.948-4.779s0.348-3.367 0.979-4.862l-0.031 0.082c0.641 0.317 1.396 0.502 2.194 0.504h0.001zM9.652 9.428c-0.216 0.057-0.39 0.202-0.485 0.393l-0.002 0.004c-0.902 1.802-1.43 3.927-1.43 6.174s0.528 4.372 1.467 6.256l-0.037-0.081c0.097 0.195 0.271 0.34 0.481 0.397l0.005 0.001c0.055 0.014 0.118 0.022 0.183 0.022 0.162 0 0.313-0.050 0.438-0.135l-0.003 0.002c0.489-0.351 1.081-0.589 1.723-0.664l0.017-0.002 3.818 5.26c-0.108 0.249-0.232 0.464-0.377 0.662l0.007-0.009c-0.113 0.17-0.237 0.317-0.375 0.45l-0.001 0.001c-0.681 0.674-1.618 1.091-2.652 1.091s-1.969-0.416-2.65-1.089l0 0c-3.108-3.114-5.030-7.413-5.030-12.161s1.922-9.047 5.030-12.161l-0 0c0.673-0.671 1.601-1.086 2.626-1.086 0.005 0 0.010 0 0.014 0h-0.001c0.002 0 0.004 0 0.006 0 1.034 0 1.972 0.415 2.655 1.088l-0-0c0.15 0.146 0.284 0.308 0.399 0.483l0.007 0.011c0.129 0.177 0.244 0.378 0.335 0.592l0.008 0.020-3.818 5.259c-0.659-0.076-1.251-0.315-1.75-0.674l0.011 0.008c-0.12-0.085-0.268-0.136-0.429-0.136-0.067 0-0.132 0.009-0.194 0.025l0.005-0.001z"/></svg>') no-repeat center;
		background-size: contain;
	}

	#header-line-1 .h_line_2 h1 {
		display: block;
		width: 1px;
		height: 1px;
		overflow: hidden;
		opacity: 0;
		position: absolute;
	}

	#header-line-1 .h_line_2 .col-cc {
		margin-top: 6px;
	}

}