/*
 * header.css
 *
 * Woodmart header builder rows 1-3 and the mobile header.
 * Part of the Unitex child theme. Enqueued from inc/enqueue.php.
 */

/* ==========================================================
   1. ROW 1 - info strip
   ========================================================== */
.whb-top-bar {
	background: var(--ux-dark);
	color: #B3A8A6;
	font-size: 13px;
}
.whb-top-bar .whb-flex-row { min-height: 38px; }
.whb-top-bar a { color: #fff; font-weight: 500; }
.whb-top-bar a:hover { color: #FF8078; }

/* ==========================================================
   2. ROW 2 - logo, search, phone, cart
   ========================================================== */
.whb-main {
	background: #fff;
	border-bottom: 1px solid var(--ux-line);
}
.whb-main .whb-flex-row { min-height: 88px; }
.whb-main .wd-logo img { height: 48px !important; width: auto; }
.whb-main .whb-column > * + * { margin-left: 26px; }

/* --- search --- */
.whb-row .wd-search-form,
.whb-row .searchform {
	width: 100% !important;
	max-width: 680px !important;
}
.whb-row .whb-column > .wd-search-form { margin-left: 36px; }

.whb-row .wd-search-form form,
.whb-row form.searchform,
.whb-row .wd-search-form .searchform {
	height: 48px !important;
	background: #fff !important;
	border: 1.5px solid var(--ux-dark) !important;
	display: flex !important;
	align-items: stretch !important;
	overflow: hidden;
	padding: 0 !important;
}

.whb-row .wd-search-form input[type="text"],
.whb-row form.searchform input[type="text"],
.whb-row .wd-search-form input.s {
	flex: 1 1 auto !important;
	height: 100% !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 16px !important;
	font-family: 'Instrument Sans', sans-serif;
	font-size: 14.5px;
	color: var(--ux-dark);
}
.whb-row .wd-search-form input::placeholder { color: #9C8E8B; }

/* red submit button - covers every Woodmart markup variant */
.whb-row .wd-search-form button,
.whb-row .wd-search-form button[type="submit"],
.whb-row form.searchform button,
.whb-row .searchsubmit,
.whb-row button.searchsubmit,
.whb-row .wd-search-form .searchsubmit {
	flex: 0 0 54px !important;
	width: 54px !important;
	min-width: 54px !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: var(--ux-red) !important;
	color: #fff !important;
	opacity: 1 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.whb-row .searchsubmit:hover,
.whb-row .wd-search-form button:hover { background: var(--ux-red-dark) !important; }

.whb-row .searchsubmit *,
.whb-row .wd-search-form button * { color: #fff !important; fill: #fff !important; }
.whb-row .searchsubmit svg,
.whb-row .wd-search-form button svg { width: 18px; height: 18px; }

/* --- phone (HTML block) --- */
.ux-hphone {
	display: flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1.2;
	color: var(--ux-dark);
	white-space: nowrap;
}
.ux-hphone:hover { color: var(--ux-red); }
.ux-hphone-l {
	font-size: 12px;
	color: var(--ux-muted);
	letter-spacing: .04em;
	text-transform: uppercase;
}
.ux-hphone-n {
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 17px;
}

/* --- cart --- */
.whb-row .wd-header-cart {
	display: flex !important;
	align-items: center;
	cursor: pointer;
}
.whb-row .wd-header-cart::before {
	content: "";
	flex: 0 0 1px;
	width: 1px;
	height: 32px;
	margin-right: 26px;
	background: var(--ux-line);
}
.whb-row .wd-header-cart > a,
.whb-row .wd-header-cart .wd-tools-inner {
	display: flex !important;
	align-items: center;
	gap: 10px;
	position: relative;
	z-index: 2;
	pointer-events: auto;
}

/* hide the stock icon */
.whb-row .wd-header-cart .wd-tools-icon::before,
.whb-row .wd-header-cart .wd-tools-icon::after { content: none !important; }
.whb-row .wd-header-cart .wd-tools-icon > svg,
.whb-row .wd-header-cart .wd-tools-icon > img { display: none !important; }
.whb-row .wd-header-cart .wd-tools-icon {
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center;
}

/* item count becomes a 42px tinted square */
.whb-row .wd-header-cart .wd-cart-number {
	position: static !important;
	inset: auto !important;
	transform: none !important;
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: var(--ux-tint) !important;
	color: var(--ux-red) !important;
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	border: 0 !important;
}
.whb-row .wd-header-cart .wd-cart-number span { display: none !important; }

/* two-line label: KORPA / subtotal */
.whb-row .wd-header-cart .wd-tools-text {
	display: flex !important;
	flex-direction: column;
	gap: 1px;
	margin: 0 !important;
	line-height: 1.2;
}
.whb-row .wd-header-cart .wd-tools-text::before {
	content: "Korpa";
	font-family: 'Instrument Sans', sans-serif;
	font-size: 12px;
	font-weight: 400;
	color: var(--ux-muted);
	letter-spacing: .04em;
	text-transform: uppercase;
}
.whb-row .wd-header-cart .wd-cart-subtotal,
.whb-row .wd-header-cart .wd-cart-subtotal .amount,
.whb-row .wd-header-cart .wd-cart-subtotal bdi,
.whb-row .wd-header-cart .woocommerce-Price-amount {
	display: block !important;
	visibility: visible !important;
	font-family: 'Archivo', sans-serif !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	color: var(--ux-dark) !important;
	white-space: nowrap;
}
.whb-row .wd-header-cart .subtotal-divider { display: none !important; }

/* ==========================================================
   3. ROW 3 - navigation
   ========================================================== */
.whb-bottom {
	background: var(--ux-dark) !important;
	border: 0 !important;
}
.whb-bottom .whb-flex-row { min-height: 52px; }
.whb-bottom .whb-column { height: 52px; }

/* Woodmart draws its own grey rule inside the container - it stops short
   of the viewport edge, so the seam is owned by the hero instead */
.whb-header-bottom-inner { border-bottom: 0 !important; }
.home .whb-main { border-bottom: 0 !important; }

/* --- main menu --- */
.whb-bottom .wd-nav > li > a {
	height: 52px !important;
	padding: 0 15px !important;
	display: flex !important;
	align-items: center;
	font-family: 'Archivo', sans-serif !important;
	font-weight: 600 !important;
	font-size: 13.5px !important;
	letter-spacing: .01em;
	text-transform: none !important;
	color: #E7DEDC !important;
	white-space: nowrap;
	transition: background .2s ease, color .2s ease;
}
.whb-bottom .wd-nav > li > a:hover,
.whb-bottom .wd-nav > li.current-menu-item > a {
	color: #fff !important;
	background: #332927 !important;
}
.whb-bottom .wd-nav > li > a::before,
.whb-bottom .wd-nav > li > a::after,
.whb-bottom .wd-nav > li > a .wd-nav-arrow { display: none !important; }

/* --- red "SVE KATEGORIJE" block --- */
.whb-bottom .wd-dropdown-cats > a,
.whb-bottom .wd-header-cats > a,
.whb-bottom .wd-header-cats .wd-nav-opener {
	height: 52px !important;
	padding: 0 22px !important;
	margin-right: 8px;
	display: flex !important;
	align-items: center;
	gap: 10px;
	background: var(--ux-red) !important;
	color: #fff !important;
	font-family: 'Archivo', sans-serif !important;
	font-weight: 600 !important;
	font-size: 13.5px !important;
	letter-spacing: .01em;
	text-transform: uppercase !important;
}
.whb-bottom .wd-dropdown-cats > a:hover,
.whb-bottom .wd-header-cats > a:hover {
	background: var(--ux-red-dark) !important;
	color: #fff !important;
}
.whb-bottom .wd-header-cats .wd-nav-opener::before,
.whb-bottom .wd-dropdown-cats > a::after { display: none !important; }

/* --- dropdowns --- */
.whb-bottom .wd-dropdown,
.whb-bottom .wd-dropdown-menu,
.whb-bottom .wd-sub-menu {
	background: #fff !important;
	border: 1px solid var(--ux-line) !important;
	box-shadow: 0 18px 40px rgba(36, 28, 27, .12) !important;
	padding: 8px 0 !important;
}
.whb-bottom .wd-sub-menu li > a,
.whb-bottom .wd-dropdown-menu li > a {
	padding: 10px 22px !important;
	font-family: 'Instrument Sans', sans-serif !important;
	font-weight: 400 !important;
	font-size: 14.5px !important;
	color: var(--ux-dark) !important;
	text-transform: none !important;
}
.whb-bottom .wd-sub-menu li > a:hover,
.whb-bottom .wd-dropdown-menu li > a:hover {
	background: var(--ux-tint) !important;
	color: var(--ux-red) !important;
}

/* --- "Zatrazite ponudu" link --- */
.ux-hquote {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 52px;
	padding-left: 18px;
	font-family: 'Archivo', sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	color: #FF8078 !important;
	white-space: nowrap;
}
.ux-hquote:hover { color: #fff !important; }

/* ==========================================================
   4. MOBILE
   ========================================================== */
@media (max-width: 1024px) {
	.whb-main .whb-flex-row { min-height: 70px; }
	.whb-main .wd-logo img { height: 38px !important; }
	.whb-row .wd-search-form { max-width: none !important; }
	.whb-row .whb-column > .wd-search-form { margin-left: 0; }
	.whb-row .wd-header-cart::before { display: none; }
	.whb-row .wd-header-cart .wd-tools-text { display: none !important; }
	.whb-bottom { display: none !important; }
}