/* Hlavička webu i4wifi / enbat / b2b / asm – mobilní hlavička do 1024 px (www/js/siteHeader.js) + styly přesunuté ze šablony */

/* přesunuto ze šablony @layout.latte */
#targetTest_message { display: none; }
.flashing { animation: flashing 0.6s cubic-bezier(1, 0, 0, 1) infinite alternate; }
@keyframes flashing {
	from { opacity: 1; }
	to { opacity: 0; }
}
.alert-warning2 { background-color: #ee5555; color: #ffffff; border-color: #ec4b4b; }

/* desktop: mobilní hlavička není vidět */
.mh, .mh-spacer, .mh-backdrop, .mh-drawer, .mh-catalog, .mh-sheet { display: none; }

@media (max-width: 1024px) {
	:root {
		--mh-top: 56px;
		--mh-search: 56px;
		--mh-nav: 52px;
	}

	/* barvy značek: třída mh--* je na hlavičce, panelu i spodních panelech */
	.mh, .mh-drawer, .mh-catalog, .mh-sheet {
		--mh-bar: #df2d14;
		--mh-bar-ink: #fff;
		--mh-bar-hover: rgba(255, 255, 255, .15);
		--mh-accent: #df2d14;
		--mh-accent-ink: #fff;
		--mh-search-btn: #33414e;
		--mh-badge-bg: #fff;
		--mh-badge-ink: var(--mh-bar);
		--mh-pill-bg: rgba(255, 255, 255, .18);
		--mh-pill-ink: #fff;
		--mh-pill-line: rgba(255, 255, 255, .45);
		--mh-ink: #1f2933;
		--mh-muted: #6b7684;
		--mh-line: #e3e6ea;
		--mh-soft: #f4f5f7;
		font-family: 'Open Sans', system-ui, sans-serif;
		color: var(--mh-ink);
	}
	.mh--enbat { --mh-bar: #1f2833; --mh-accent: #ff7600; --mh-search-btn: #ff7600; --mh-badge-bg: #ff7600; --mh-badge-ink: #fff; }
	.mh--100mega { --mh-bar: #ea0000; --mh-accent: #ea0000; --mh-search-btn: #33414e; }
	.mh--asm { --mh-bar: #fff; --mh-bar-ink: #1f2933; --mh-bar-hover: rgba(0, 0, 0, .06); --mh-accent: #006699; --mh-search-btn: #006699; --mh-badge-bg: #006699; --mh-badge-ink: #fff; --mh-pill-bg: #eef3f7; --mh-pill-ink: #1f2933; --mh-pill-line: #cfd6de; }
	.mh--asm .mh-search form { box-shadow: inset 0 0 0 1px #cfd6de; }
	.mh--asm .mh-drawer-head, .mh-drawer.mh--asm .mh-drawer-head { border-bottom: 1px solid var(--mh-line); }

	/* staré části hlavičky se na mobilu schovají, obsah začíná pod novou hlavičkou */
	/* místo pod pevnou hlavičkou drží spacer v toku stránky, s lištou stromu je vyšší */
	.mh-spacer { display: block; height: calc(var(--mh-top) + var(--mh-search)); }
	.mh-spacer--nav { height: calc(var(--mh-top) + var(--mh-search) + var(--mh-nav)); }
	body.mh-locked { overflow: hidden; }
	.page-container .page-sidebar,
	#i4navPanel,
	#snippet--cartList #topCart,
	#snippet--cartList #topCartOffer,
	#snippet--cartList #topCartProject,
	.page-container .page-content > .x-navigation.x-navigation-panel { display: none !important; }
	.page-container .page-content { margin-left: 0; }
	.page-container.page-navigation-top-fixed .page-content { padding-top: 0; }
	.breadcrumb, #cartStepper, #CategoryTabs, #v24-sec01 { margin-top: 10px; }

	/* drobečková navigace: na mobilu hlavní orientace, proto výraznější (odkazy v barvě webu, aktuální stránka tučně) */
	:root { --mh-crumb: #d42410; }
	:root:has(#mh.mh--enbat) { --mh-crumb: #c25700; }
	:root:has(#mh.mh--100mega) { --mh-crumb: #d40000; }
	:root:has(#mh.mh--asm) { --mh-crumb: #006699; }
	.page-content .breadcrumb {
		float: none; width: auto; margin: 10px 0; padding: 8px 12px;
		background: #fff; border: 0; border-bottom: 1px solid #e3e6ea; border-radius: 0;
	}
	.page-content .breadcrumb li, .page-content .breadcrumb li a { font-size: 13px; line-height: 24px; }
	.page-content .breadcrumb li a { color: var(--mh-crumb); font-weight: 600; text-decoration: none; }
	.page-content .breadcrumb li a:hover, .page-content .breadcrumb li a:focus { color: var(--mh-crumb); text-decoration: underline; }
	.page-content .breadcrumb li:last-child, .page-content .breadcrumb li:last-child a { color: #1f2933; font-weight: 700; }
	.page-content .breadcrumb > li + li:before { padding: 0 6px; color: #9aa3ad; }

	/* flash zprávy v toku stránky pod hlavičkou */
	#snippet--flashMessage { position: static; top: auto; width: auto; margin: 10px 10px 0; z-index: auto; }
	#snippet--flashMessage::after { content: ""; display: table; clear: both; }
	#snippet--flashMessage .alert { margin-bottom: 8px; font-size: 14px; }
	#snippet--flashMessage .alert .close { width: 36px; height: 36px; margin: -8px -10px 0 0; opacity: .6; }

	/* ---------- hlavička ---------- */
	.mh { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 1030; }
	.mh-bar {
		position: relative; z-index: 2; display: flex; align-items: center; gap: 2px;
		height: var(--mh-top); padding: 0 6px; background: var(--mh-bar); color: var(--mh-bar-ink);
	}
	.mh-btn {
		position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none;
		padding: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer;
	}
	.mh-btn:active, .mh-btn:focus-visible { background: var(--mh-bar-hover); outline: none; }
	.mh-btn svg { width: 24px; height: 24px; }
	.mh-btn[hidden] { display: none; }
	.mh-logo { flex: 1; display: flex; align-items: center; min-width: 0; padding-left: 4px; }
	.mh-logo img { display: block; height: 30px; width: auto; max-width: 100%; }
	.mh--enbat .mh-logo img { height: 24px; }
	.mh--asm .mh-logo img { height: 32px; }
	.mh-badge {
		position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px;
		border-radius: 9px; background: var(--mh-badge-bg); color: var(--mh-badge-ink); font-size: 11px; font-weight: 700;
		line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--mh-bar);
	}
	.mh-badge[hidden] { display: none; }
	.mh-dot { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: #41d17a; box-shadow: 0 0 0 2px var(--mh-bar); }

	/* vyhledávání: doplňky b2b pod polem překryjí lištu stromu */
	.mh-search {
		position: relative; z-index: 2; height: var(--mh-search); padding: 0 10px 10px;
	}
	/* vyhledávání a lišta stromu: při scrollu dolů zajedou pod lištu, při scrollu nahoru se vrátí */
	.mh-sub { position: relative; z-index: 1; background: var(--mh-bar); box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transition: transform .2s ease; }
	.mh.is-compact .mh-sub { transform: translateY(-100%); }

	.mh-nav { display: flex; gap: 8px; height: var(--mh-nav); padding: 0 10px 10px; overflow-x: auto; scrollbar-width: none; }
	.mh-nav::-webkit-scrollbar { display: none; }
	.mh-nav[hidden] { display: none; }
	.mh-nav-btn, .mh-nav-chip {
		display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; height: 42px; padding: 0 16px;
		border: 0; border-radius: 10px; background: var(--mh-pill-bg); color: var(--mh-pill-ink);
		font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer;
	}
	.mh-nav-btn:hover, .mh-nav-btn:focus, .mh-nav-chip:hover, .mh-nav-chip:focus { color: var(--mh-pill-ink); text-decoration: none; }
	.mh-nav-btn svg { width: 20px; height: 20px; }
	.mh-nav-btn:active, .mh-nav-chip:active { filter: brightness(.92); }
	.mh-nav-chip { padding: 0 14px; font-weight: 400; font-size: 14px; background: transparent; box-shadow: inset 0 0 0 1px var(--mh-pill-line); }
	.mh-nav:not(.mh-nav--split) > .mh-nav-btn { flex: 1 0 auto; }
	.mh-nav--split > .mh-nav-btn { flex: 1 1 0; min-width: 0; }
	.mh-search form { position: relative; display: flex; height: 44px; margin: 0; background: #fff; border-radius: 10px; }
	.mh-search form::before {
		content: "\f002"; position: absolute; left: 13px; top: 12px; color: var(--mh-muted);
		font: normal normal normal 16px/1 FontAwesome;
	}
	.mh-search input[type="text"] {
		flex: 1; min-width: 0; width: auto; height: 44px; margin: 0; padding: 0 10px 0 38px;
		border: 0; border-radius: 10px 0 0 10px; background: transparent; color: var(--mh-ink);
		font-size: 16px; line-height: 44px; box-shadow: none; outline: none; float: none;
	}
	.mh-search button[type="submit"] {
		flex: none; height: 44px; margin: 0; padding: 0 16px; border: 0; border-radius: 0 10px 10px 0;
		background: var(--mh-search-btn); color: #fff; font-size: 16px; float: none;
	}
	/* b2b: "hledat jen v kódu" a rozšířené hledání se ukážou pod polem po kliknutí (expandSearch) */
	.mh-search form { flex-wrap: wrap; }
	.mh-search form > .x-hide-me:not(button) { display: none !important; }
	.mh-search form > .x-hide-me.x-show-me:not(button) {
		display: flex !important; flex-basis: 100%; align-items: center; padding: 6px 12px; color: var(--mh-ink) !important;
		background: #fff; border-top: 1px solid var(--mh-line); font-size: 13px;
	}
	.mh-search form > .x-hide-me.x-show-me:last-child { border-radius: 0 0 10px 10px; box-shadow: 0 8px 16px rgba(0, 0, 0, .15); }
	.mh-search form > .x-hide-me label { display: flex; align-items: center; margin: 0; font-weight: 400; }
	.mh-search form > .x-hide-me .btn { padding: 4px 10px; font-size: 13px; }

	#whisperer {
		top: calc(var(--mh-top) + var(--mh-search) - 6px); left: 8px; right: 8px;
		min-width: 0; max-height: calc(100vh - var(--mh-top) - var(--mh-search) - 16px); overflow-y: auto;
	}
	#whisperer::before { display: none; }
	#whisperer .category li a { min-height: 40px; }
	/* ikona (float z theme CSS) by zůstala nahoře nad svisle vycentrovaným textem vyššího řádku */
	#whisperer .category.word li,
	#whisperer .category.cats li { display: flex; align-items: center; }
	#whisperer .category.word li::before,
	#whisperer .category.cats li::before { float: none; flex: 0 0 20px; }
	#whisperer .category.word li a,
	#whisperer .category.cats li a { flex: 1 1 auto; min-width: 0; }

	/* vrstvy stránky přes celou obrazovku musí být nad hlavičkou (1030); body zvyšuje specifičnost kvůli inline <style> v šablonách */
	body .panel-fullscreen-wrap { z-index: 1037; }
	body #snippet-productBox-ConfigComponentItem,
	body #ConfigComponentModalBg { z-index: 1037; }
	body #ConfigComponentModalMain { z-index: 1038; }
	body .ui-dialog { z-index: 1037 !important; }

	/* ---------- překryvné vrstvy (pod Bootstrap modaly se z-index 1040+) ---------- */
	.mh-backdrop {
		display: block; position: fixed; inset: 0; z-index: 1034; background: rgba(10, 14, 20, .5);
		opacity: 0; pointer-events: none; transition: opacity .2s;
	}
	.mh-backdrop.is-open { opacity: 1; pointer-events: auto; }

	.mh-drawer {
		display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 1036;
		width: 88%; max-width: 360px; background: #fff; box-shadow: 4px 0 24px rgba(0, 0, 0, .25);
		transform: translateX(-102%); visibility: hidden;
		transition: transform .25s cubic-bezier(.3, .7, .2, 1), visibility 0s linear .25s;
	}
	.mh-drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; }

	/* strom produktů přes celou obrazovku, vyjede zespodu */
	.mh-catalog {
		display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 1036; background: #fff;
		transform: translateY(100%); visibility: hidden;
		transition: transform .28s cubic-bezier(.3, .7, .2, 1), visibility 0s linear .28s;
	}
	.mh-catalog.is-open { transform: none; visibility: visible; transition-delay: 0s; }
	.mh-catalog-head {
		display: flex; align-items: center; flex: none; height: var(--mh-top); padding: 0 6px 0 16px;
		background: var(--mh-bar); color: var(--mh-bar-ink);
	}
	.mh-catalog.mh--asm .mh-catalog-head { border-bottom: 1px solid var(--mh-line); }
	.mh-catalog-title { flex: 1; font-size: 17px; font-weight: 700; }
	.mh-drawer-head { display: flex; align-items: center; flex: none; height: var(--mh-top); padding: 0 6px 0 14px; background: var(--mh-bar); color: var(--mh-bar-ink); }
	.mh-drawer-head .mh-logo img { height: 26px; }
	.mh-drawer.mh--enbat .mh-drawer-head .mh-logo img { height: 20px; }
	.mh-drawer.mh--asm .mh-drawer-head .mh-logo img { height: 28px; }
	.mh-pane { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
	.mh-pane[hidden] { display: none; }

	.mh-switch { display: flex; gap: 6px; padding: 12px 12px 0; }
	.mh-switch[hidden] { display: none; }
	.mh-switch a, .mh-switch span {
		flex: 1; padding: 8px; border: 1px solid var(--mh-line); border-radius: 10px;
		color: var(--mh-ink); font-size: 14px; text-align: center; text-decoration: none;
	}
	.mh-switch .is-active { border-color: var(--mh-accent); box-shadow: inset 0 0 0 1px var(--mh-accent); font-weight: 600; }
	.mh-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 12px 4px; }
	.mh-chips:empty, .mh-chips[hidden] { display: none; }
	.mh-chips a {
		padding: 6px 11px; border: 1px solid var(--mh-line); border-radius: 16px; background: var(--mh-soft);
		color: var(--mh-ink); font-size: 13px; text-decoration: none;
	}
	.mh-level { animation: mh-in .2s ease; }
	.mh-level.is-back { animation: mh-back .2s ease; }
	@keyframes mh-in { from { transform: translateX(25%); opacity: 0; } to { transform: none; opacity: 1; } }
	@keyframes mh-back { from { transform: translateX(-25%); opacity: 0; } to { transform: none; opacity: 1; } }
	.mh-level-head {
		position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 4px;
		padding: 4px 8px 4px 2px; border-bottom: 1px solid var(--mh-line); background: var(--mh-soft);
	}
	.mh-level-head button {
		display: flex; align-items: center; gap: 2px; padding: 10px 8px; border: 0; background: transparent;
		color: var(--mh-accent); font-size: 14px; font-weight: 600; cursor: pointer;
	}
	.mh-level-head button svg { width: 18px; height: 18px; }
	.mh-level-head strong { flex: 1; overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
	.mh-row {
		display: flex; align-items: center; width: 100%; min-height: 48px; padding: 8px 8px 8px 16px;
		border: 0; border-bottom: 1px solid var(--mh-line); background: none; color: var(--mh-ink);
		font-size: 15px; line-height: 1.3; text-align: left; text-decoration: none; cursor: pointer;
	}
	.mh-row:hover, .mh-row:focus { color: var(--mh-ink); text-decoration: none; background: var(--mh-soft); }
	.mh-row > span { flex: 1; }
	.mh-row svg { flex: none; width: 20px; height: 20px; color: var(--mh-muted); }
	.mh-row.is-all { color: var(--mh-accent); font-weight: 600; }
	.mh-row.is-current { background: #fafafa; box-shadow: inset 4px 0 0 var(--mh-accent); font-weight: 600; }
	.mh-row .mh-count { flex: none; margin-right: 4px; color: var(--mh-muted); font-size: 12px; font-style: normal; }

	.mh-acc { border-bottom: 1px solid var(--mh-line); }
	.mh-acc > button, .mh-acc > a {
		display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 0 12px 0 16px;
		border: 0; background: transparent; color: var(--mh-ink); font-size: 15px; font-weight: 600;
		text-align: left; text-decoration: none; cursor: pointer;
	}
	.mh-acc > button > span, .mh-acc > a > span { flex: 1; }
	.mh-acc > button svg { width: 20px; height: 20px; color: var(--mh-muted); transition: transform .2s; }
	.mh-acc.is-open > button svg { transform: rotate(90deg); }
	.mh-acc-sub { display: none; padding: 0 0 8px; }
	.mh-acc.is-open .mh-acc-sub { display: block; }
	.mh-acc-sub a { display: block; padding: 10px 16px 10px 32px; color: var(--mh-ink); font-size: 14px; text-decoration: none; }
	.mh-acc-sub a:hover { background: var(--mh-soft); color: var(--mh-ink); }
	.mh-acc-sub a .fa-caret-right { display: none; }
	.mh-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 18px; }
	.mh-foot:empty { display: none; }
	.mh-foot a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--mh-line); border-radius: 16px; color: var(--mh-ink); font-size: 13px; text-decoration: none; }
	.mh-foot a img { height: 14px; }
	.mh-foot li.active a { border-color: var(--mh-accent); color: var(--mh-accent); }
	.mh-foot ul { display: contents; }
	.mh-foot li { list-style: none; }

	/* spodní panel – košík a účet */
	.mh-sheet {
		display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1036;
		width: 100%; max-width: 560px; max-height: 86vh; margin: 0 auto; background: #fff;
		border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
		transform: translateY(105%); visibility: hidden;
		transition: transform .25s cubic-bezier(.3, .7, .2, 1), visibility 0s linear .25s;
	}
	.mh-sheet.is-open { transform: none; visibility: visible; transition-delay: 0s; }
	.mh-grab { flex: none; width: 40px; height: 5px; margin: 8px auto 2px; border-radius: 3px; background: #cfd4da; }
	.mh-sheet-head { display: flex; align-items: center; flex: none; padding: 2px 6px 8px 16px; }
	.mh-sheet-head h3 { flex: 1; margin: 0; font-size: 17px; font-weight: 700; }
	.mh-sheet-head small { display: block; color: var(--mh-muted); font-size: 13px; font-weight: 400; }
	.mh-sheet-head .mh-btn { color: var(--mh-muted); }
	.mh-sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--mh-line); }
	.mh-empty { padding: 36px 20px; color: var(--mh-muted); text-align: center; }

	/* obsah košíku je původní #topCartCont přesunutý do panelu */
	.mh-sheet #currency { display: block; margin: 10px 14px 0; height: 36px; padding: 0 8px; border: 1px solid var(--mh-line); border-radius: 8px; background: #fff; color: var(--mh-ink); float: none; font-size: 14px; }
	.mh-sheet #topCartCont { display: block !important; opacity: 1 !important; position: static; width: auto; color: var(--mh-ink); }
	.mh-sheet #topCartCont > .col-md-12 { padding: 0; }
	.mh-sheet #topCartCont .panel.panel-default { margin: 0; border: 0; box-shadow: none; }
	.mh-sheet #topCartCont .list-group-item { float: none; padding: 10px 14px; border-left: 0; border-right: 0; }
	.mh-sheet #topCartCont div.itemRow { flex-wrap: wrap; align-items: center; gap: 6px 10px; }
	.mh-sheet #topCartCont .itemRow .pimg { width: 44px; margin: 0; }
	.mh-sheet #topCartCont .itemRow .pimg img { max-height: 44px; max-width: 44px; }
	.mh-sheet #topCartCont .itemRow .pname { flex: 1 1 calc(100% - 60px); float: none; }
	.mh-sheet #topCartCont .itemRow .pname a { max-width: none; margin: 0; font-size: 13px; line-height: 1.3; white-space: normal; }
	.mh-sheet #topCartCont .itemRow input.quantity_control { width: 64px; height: 36px; margin: 0 0 0 54px; font-size: 16px; text-align: center; }
	.mh-sheet #topCartCont .itemRow .removefromcart { order: 5; width: 36px !important; height: 36px; float: none !important; font-size: 16px; }
	.mh-sheet #topCartCont .itemRow .pprice { margin-left: auto; font-size: 14px; }
	.mh-sheet #topCartCont div.sumRow { padding: 4px 14px; border: 0; font-size: 13px; }
	.mh-sheet #topCartCont div.sumRow:last-child { font-size: 15px; font-weight: 700; }
	.mh-sheet #topCartCont .bar .progress-list { padding: 10px 14px; }
	.mh-sheet #topCartCont .bar .pull-left { float: none !important; }
	.mh-sheet #topCartCont .panel-body .row { display: flex; gap: 8px; margin: 0; }
	.mh-sheet #topCartCont .panel-body .row > div { flex: 1; width: auto; padding: 0; }
	.mh-sheet #topCartCont .panel-body .btn { width: 100%; height: 44px; float: none !important; margin: 0; padding: 0 10px; font-size: 14px; line-height: 44px; }

	.mh-account { display: flex; align-items: center; gap: 12px; padding: 4px 16px 14px; }
	.mh-avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--mh-soft); color: var(--mh-accent); font-size: 20px; }
	.mh-account-name { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; }
	.mh-account-name span { color: var(--mh-muted); }
	.mh-account .profile-control-right { font-size: 20px; }
	.mh-actions { display: grid; gap: 8px; padding: 14px 16px 18px; }
	.mh-actions .btn { height: 44px; font-size: 15px; line-height: 30px; }
}