/* Digital Hub — header, structure/colors/icons pulled from plati.market's
   real DOM + CSS (see /opt/papa.market/website/donor-reference/), not approximated:
   1. thin utility bar — bg var(--layer-floor1) = #f3f4f6
   2. logo + catalog button + search + icon row — DARK bg (.block-primary =
      var(--primary-900) = #111927), same color as row 3, no seam between them
   3. dark category nav
*/

.site-header {
	background-color: var(--color-header);
	border-bottom: none;
	padding: 0;
	/* Storefront's own `.home.post-type-archive-product .site-header` etc.
	   (style.css) sets a ~68px margin-bottom that only fires on the front
	   page — donor has zero gap between header and page content. Higher
	   specificity than a bare `.site-header` rule, hence !important. */
	margin-bottom: 0 !important;
}

/* Row 1 — utility bar, full viewport bleed with content capped to match row 2/3 */
.dh-utility-bar {
	background-color: var(--color-bg);
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
	font-size: 0.85rem;
}

.dh-utility-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: 0.5rem 20px;
}

.dh-utility-left {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 1.5rem;
}

.dh-utility-left a {
	color: var(--color-text-secondary);
	font-family: var(--font-family);
}

.dh-utility-left a:hover {
	color: var(--color-accent);
}

.dh-utility-right {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-text-secondary);
	font-family: var(--font-family);
}

/* Row 2 — branding + catalog button + search + icon row, all on dark bg */
.dh-row2 {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 0.85rem 0;
}

.site-header .site-branding,
.woocommerce-active .site-header .site-branding {
	/* Storefront has a `.woocommerce-active .site-header .site-branding
	   {width:73.913%}` rule (3 classes deep) meant for its own default
	   layout — beat its specificity explicitly, `width:auto` alone wasn't
	   enough. This was eating ~295px of dead space and squeezing the
	   search field. */
	flex: 0 0 auto !important;
	width: auto !important;
	float: none !important;
	margin-right: 0 !important;
}

.site-header .site-branding .site-title {
	/* Storefront's own CSS gives .site-title a wide flex-basis meant for its
	   default (very different) header layout — it was leaking through as
	   ~295px of dead space for what should be a content-sized "Digital Hub"
	   wordmark, squeezing the search field. Force it to size to content. */
	width: auto;
	flex: 0 0 auto;
}

.site-header .site-branding .site-title a {
	font-family: var(--font-family);
	font-weight: 700;
	color: #ffffff;
	white-space: nowrap;
}

/* Tagline lives in the homepage hero, not the header (matches plati.market —
   no descriptive text next to the logo, just the wordmark). */
.site-header .site-branding .site-description {
	display: none;
}

.dh-catalog-button {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	background-color: var(--color-accent);
	color: #ffffff;
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.65rem 1.1rem;
	border-radius: 8px;
	white-space: nowrap;
}

.dh-catalog-button:hover {
	background-color: var(--color-accent-hover);
	color: #ffffff;
}

/* Donor icons are filled shapes (fill="currentColor" on the <path> itself) —
   don't force fill:none/stroke here or the icon disappears. */

/* Search field — donor markup: .dh-field > .dh-field__wrapper > input + an
   icon button positioned inside the field on the right. */
.dh-field {
	flex: 1 1 260px;
	min-width: 160px;
}

.dh-field__wrapper {
	/* The bare <form> tag inherits the theme's global 1em bottom margin
	   (same as a paragraph) — invisible here since .dh-field has no other
	   content, but it inflates .dh-field's own box height by that margin,
	   so .dh-row2's align-items:center centers the padded box instead of
	   the visible input, pushing the search field noticeably above the
	   catalog button/icon row. Reset it. */
	margin: 0;
	position: relative;
	width: 100%;
}

.dh-field__input {
	width: 100%;
	background-color: #ffffff;
	color: var(--color-text);
	border: none;
	border-radius: 8px;
	padding: 0.65rem 2.75rem 0.65rem 1rem;
	font-family: var(--font-family);
	box-sizing: border-box;
}

.dh-field__input::placeholder {
	color: var(--color-text-secondary);
}

.dh-field__submit {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--color-text-secondary);
}

.dh-field__submit:hover {
	color: var(--color-accent);
}

/* Same recurring lesson as CP18/CP40: the HTML width/height attributes on an
   <svg> inside a flex button aren't enough on their own — collapses to 0
   width without an explicit CSS rule. Search icon was invisible. */
.dh-field__submit svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}


/* Чат / Покупки / Избранное / Корзина — donor's REAL rendered layout
   (confirmed from an actual pixel screenshot, not just the HTML class names
   — .button--menu is a flex ROW: icon block then label side by side, only
   the icon+badge wrapper inside is flex-column for badge stacking. The
   earlier vertical icon-over-caption rebuild was a misreading of that inner
   wrapper's scope.) Dark pill buttons, icon-then-text horizontally. */
.dh-header-icons {
	flex: 0 0 auto;
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.4rem;
}

.dh-header-icon {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.35rem;
	padding: 0.55rem 0.65rem;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.9);
}

.dh-header-icon:hover {
	background-color: rgba(255, 255, 255, 0.12);
	color: #ffffff;
}

.dh-header-icon-badge-wrap {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
}

.dh-header-icon-badge {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 14px;
	height: 14px;
	padding: 0 3px;
	border-radius: 999px;
	background-color: #f54848;
	color: #ffffff;
	font-size: 0.6rem;
	font-weight: 600;
	line-height: 14px;
	text-align: center;
}

.dh-header-icon-label {
	font-family: var(--font-family);
	font-size: 0.85rem;
	font-weight: 500;
	white-space: nowrap;
}

/* Row 3 — dark category bar */
.storefront-primary-navigation {
	background-color: var(--color-header);
}

/* Force single line with horizontal scroll instead of wrapping to a second
   row — Storefront's default nav floats <li>s, which wraps once 8 real
   category names don't fit at common desktop widths. */
.storefront-primary-navigation .primary-navigation > ul.nav-menu {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	margin-left: 0;
}

.storefront-primary-navigation .primary-navigation > ul.nav-menu::-webkit-scrollbar {
	display: none;
}

.storefront-primary-navigation .primary-navigation > ul.nav-menu > li {
	flex: 0 0 auto;
}

.storefront-primary-navigation .primary-navigation > ul.nav-menu > li > a {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: #ffffff;
	font-family: var(--font-family);
	font-weight: 500;
	font-size: 0.9rem;
	white-space: nowrap;
	padding: 0.9rem 0.85rem;
}

.storefront-primary-navigation .primary-navigation > ul.nav-menu > li > a:hover {
	color: var(--color-accent);
}

.dh-nav-icon {
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.7);
}

.storefront-primary-navigation .primary-navigation > ul.nav-menu > li > a:hover .dh-nav-icon {
	color: var(--color-accent);
}

.storefront-primary-navigation .primary-navigation ul.nav-menu li.current-menu-item > a,
.storefront-primary-navigation .primary-navigation ul.nav-menu li.current_page_item > a {
	color: var(--color-accent);
}

.main-navigation ul ul {
	background-color: var(--color-header);
}

/* Below Storefront's own handheld breakpoint: drop the utility bar, search
   field and icon row — the handheld footer bar (account/search/cart icons,
   native Storefront feature) already covers those on mobile. */
@media (max-width: 709px) {
	.dh-utility-bar,
	.dh-field,
	.dh-header-icons {
		display: none;
	}

	.dh-row2 {
		padding: 0.75rem 0;
	}
}