/* Global desktop/laptop sticky top bar (see TZ Head panel). Mobile: hidden; sidebar keeps logo/search/util. */

:root {
	--ec-global-topbar-h: 0px;
	--ec-global-topbar-z: 120;
	--ec-global-topbar-bg: rgba(12, 12, 14, 0.92);
	--ec-global-topbar-border: rgba(255, 255, 255, 0.06);
	--ec-topbar-balance-amber: #d4a574;
	--ec-topbar-balance-amber-dim: rgba(212, 165, 116, 0.14);
	--ec-topbar-balance-border: rgba(212, 165, 116, 0.35);
	/*
	 * Радиус как у PDP utility: main.css → #product-product #ec-tab-nav
	 * .ec-tab-nav__balance, .ec-tab-nav__action { border-radius: 10px; }
	 */
	--ec-topbar-control-radius: 10px;
}

@media (min-width: 992px) {
	:root {
		--ec-global-topbar-h: 76px;
	}

	.wrpcont > .allcont {
		padding-top: var(--ec-global-topbar-h);
		box-sizing: border-box;
	}

	#product-product {
		--ec-sticky-nav-top: var(--ec-global-topbar-h);
	}
}

.ec-global-topbar {
	display: none;
}

@media (min-width: 992px) {
	.ec-global-topbar {
		display: block;
		position: fixed;
		z-index: var(--ec-global-topbar-z);
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		box-sizing: border-box;
		min-height: var(--ec-global-topbar-h);
		padding: 0;
		background: var(--ec-global-topbar-bg);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border-bottom: 1px solid var(--ec-global-topbar-border);
		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
	}

	/*
	 * Зона 1: ровно ширина sidebar — только логотип, по центру колонки.
	 * Зона 2: minmax(0,1fr) — поиск + компактный utility-cluster (CSS grid).
	 */
	.ec-global-topbar__inner {
		display: grid;
		grid-template-columns: var(--ec-sidebar-width, 268px) minmax(0, 1fr);
		align-items: center;
		column-gap: 0;
		width: 100%;
		margin: 0;
		min-height: var(--ec-global-topbar-h);
		box-sizing: border-box;
		padding: 8px 0;
	}

	.ec-global-topbar__left {
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 0;
		width: 100%;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.ec-global-topbar__logo-img {
		display: block;
		max-width: 200px;
		width: auto;
		height: auto;
		max-height: 58px;
		object-fit: contain;
	}

	.ec-global-topbar__logo-link {
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 0;
	}

	/*
	 * Зона 2: поиск визуально по центру промежутка между левым краем utility-zone
	 * и левым краем cluster (flex:1 + justify-content:center). Кластер без сдвига.
	 */
	.ec-global-topbar__main {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: clamp(12px, 1.25vw, 20px);
		min-width: 0;
		padding: 0 clamp(12px, 1.5vw, 24px) 0 clamp(8px, 1vw, 14px);
		box-sizing: border-box;
	}

	.ec-global-topbar__search-wrap {
		position: relative;
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* Один визуальный search-shell: cap ширины, не тянуть на всю utility-зону */
	.ec-global-topbar__search-wrap #search.input-group {
		width: min(100%, 580px);
		max-width: 100%;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		margin: 0;
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: var(--ec-topbar-control-radius);
		background: rgba(255, 255, 255, 0.06);
		overflow: hidden;
		box-sizing: border-box;
	}

	.ec-global-topbar__search-wrap #search .inp0 {
		flex: 1 1 auto;
		min-width: 0;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
		color: rgba(255, 255, 255, 0.9);
		height: 40px;
		font-size: 13px;
	}

	.ec-global-topbar__search-wrap #search .btn {
		flex: 0 0 auto;
		align-self: stretch;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		width: 44px;
		padding: 0;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
		background: rgba(139, 92, 246, 0.22) !important;
		color: rgba(255, 255, 255, 0.9);
	}

	.ec-global-topbar__search-wrap #search .btn:hover,
	.ec-global-topbar__search-wrap #search .btn:focus {
		background: rgba(139, 92, 246, 0.34) !important;
	}

	.ec-topbar-search-suggest {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width: min(580px, 100%);
		top: calc(100% + 6px);
		z-index: 200;
		box-sizing: border-box;
	}

	.ec-global-topbar__right {
		flex: 0 0 auto;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-end;
		gap: 8px;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 0;
		margin: 0;
		min-width: 0;
	}

	.ec-global-topbar__live-chat {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 0 12px;
		height: 36px;
		border-radius: var(--ec-topbar-control-radius);
		border: 1px solid rgba(255, 255, 255, 0.12);
		background: rgba(0, 0, 0, 0.35);
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		cursor: pointer;
		transition: background 0.15s ease, border-color 0.15s ease;
	}

	.ec-global-topbar__live-chat:hover,
	.ec-global-topbar__live-chat:focus-visible {
		background: rgba(255, 255, 255, 0.06);
		border-color: rgba(255, 255, 255, 0.18);
		outline: none;
	}

	.ec-global-topbar__live-chat-txt {
		color: rgba(255, 255, 255, 0.78);
	}

	.ec-global-topbar__live-chat:hover .ec-global-topbar__live-chat-txt,
	.ec-global-topbar__live-chat:focus-visible .ec-global-topbar__live-chat-txt {
		color: rgba(255, 255, 255, 0.92);
	}

	/* Брендовый фиолетовый — только иконка (stroke currentColor) */
	.ec-global-topbar__live-chat-ic {
		display: flex;
		color: #b565e6;
		flex-shrink: 0;
	}

	.ec-global-topbar__live-chat:hover .ec-global-topbar__live-chat-ic,
	.ec-global-topbar__live-chat:focus-visible .ec-global-topbar__live-chat-ic {
		color: #c084fc;
	}

	.ec-global-topbar__balance.ec-tab-nav__balance {
		max-width: 120px;
		min-height: 34px;
		padding: 0 12px;
		font-size: 11px;
		font-weight: 700;
		line-height: 1.2;
		color: var(--ec-topbar-balance-amber);
		background: var(--ec-topbar-balance-amber-dim);
		border: 1px solid var(--ec-topbar-balance-border);
		border-radius: var(--ec-topbar-control-radius);
		text-decoration: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.ec-global-topbar__balance.ec-tab-nav__balance:hover,
	.ec-global-topbar__balance.ec-tab-nav__balance:focus {
		color: #e8c49a;
		border-color: rgba(232, 196, 154, 0.45);
		background: rgba(212, 165, 116, 0.2);
	}

	.ec-global-topbar__account-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 36px;
		padding: 0 16px;
		border-radius: var(--ec-topbar-control-radius);
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		text-decoration: none;
		white-space: nowrap;
		border: 1px solid transparent;
		background: linear-gradient(135deg, rgba(139, 92, 246, 0.95), rgba(109, 40, 217, 0.92));
		color: #fff;
		box-shadow: 0 2px 12px rgba(109, 40, 217, 0.25);
		transition: opacity 0.15s ease, transform 0.15s ease;
	}

	.ec-global-topbar__account-btn:hover,
	.ec-global-topbar__account-btn:focus-visible {
		opacity: 0.94;
		transform: translateY(-1px);
		color: #fff;
		outline: none;
	}

	.ec-global-topbar__account-btn--ghost {
		background: transparent;
		border-color: rgba(255, 255, 255, 0.16);
		color: rgba(255, 255, 255, 0.82);
		box-shadow: none;
	}

	.ec-global-topbar__account-btn--ghost:hover,
	.ec-global-topbar__account-btn--ghost:focus-visible {
		border-color: rgba(255, 255, 255, 0.26);
		background: rgba(255, 255, 255, 0.05);
		color: #fff;
	}

	.ec-global-topbar__actions {
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}

	.ec-global-topbar__action.ec-tab-nav__action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: var(--ec-topbar-control-radius);
		background: rgba(0, 0, 0, 0.4);
		border: 1px solid rgba(255, 255, 255, 0.1);
		text-decoration: none;
		transition: background 0.15s ease, border-color 0.15s ease;
	}

	.ec-global-topbar__action.ec-tab-nav__action:hover,
	.ec-global-topbar__action.ec-tab-nav__action:focus-visible {
		background: rgba(255, 255, 255, 0.08);
		border-color: rgba(255, 255, 255, 0.16);
		outline: none;
	}

	.ec-global-topbar__action .ec-tab-nav__action-icon {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ec-global-topbar__action .ec-tab-nav__action-badge {
		position: absolute;
		top: 2px;
		right: 2px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 999px;
		font-size: 9px;
		font-weight: 800;
		line-height: 16px;
		text-align: center;
		background: #8b5cf6;
		color: #fff;
		box-sizing: border-box;
	}

	.ec-global-topbar__action .ec-tab-nav__action-badge[hidden] {
		display: none !important;
	}
}

/* OpenCart wishlist sink (hidden) */
.ec-oc-top-sinks {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

/* Sidebar: mobile-only block (logo, lang in stack, search, util) */
.ec-sidebar-mobile-only-stack {
	display: block;
}

.ec-sidebar-sticky__langcurr--desktop {
	display: none;
}

@media (min-width: 992px) {
	.ec-sidebar-mobile-only-stack {
		display: none !important;
	}

	.ec-sidebar-sticky__langcurr--desktop {
		display: block;
	}

	.ec-sidebar-sticky__langcurr--in-mobile-stack {
		display: none !important;
	}

	/*
	 * PDP: якоря секций — учёт глобального topbar + высоты полосы табов (п.10 ТЗ, без правки логики табов).
	 * --ec-pdp-tab-nav-offset задан в main.css на #product-product.
	 */
	#product-product #ec-sec-product,
	#product-product .ec-section,
	#product-product .sp-seo-faq .faq-title,
	#product-product .sp-seo-faq .faq {
		scroll-margin-top: calc(var(--ec-global-topbar-h) + var(--ec-pdp-tab-nav-offset, 48px) + 16px);
	}
}