/* ------------------------------------------------------------------------- *
 *  Mobile header (Xtra header_4 + custom top bar)
 *  Breakpoint matches Xtra's tablet_breakpoint (768px).
/* ------------------------------------------------------------------------- */

.gk-mtop {
	display: none;
}

@media screen and (max-width: 768px) {

	/* Top bar ------------------------------------------------------------- */

	.gk-mtop {
		display: flex;
		align-items: center;
		height: 37px;
		padding: 0 18px 0 19px;
		background: #ececec;
		color: #111;
		font-size: 14px;
		line-height: 1;
		position: relative;
		z-index: 3;
	}

	.gk-mtop a,
	.gk-mtop summary {
		color: #111;
		text-decoration: none;
	}

	.gk-mtop svg {
		display: block;
		flex: none;
	}

	.gk-mtop__phone {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-right: auto;
		letter-spacing: .02em;
	}

	.gk-mtop__phone svg {
		width: 17px;
		height: 17px;
	}

	.gk-mtop__mail {
		display: flex;
		align-items: center;
		padding: 0 12px;
		height: 21px;
		border-right: 1px solid #c4c4c4;
	}

	.gk-mtop__mail svg {
		width: 18px;
		height: 18px;
	}

	.gk-mtop__lang {
		position: relative;
		margin-left: 14px;
	}

	.gk-mtop__lang summary {
		display: flex;
		align-items: center;
		gap: 6px;
		cursor: pointer;
		list-style: none;
		padding: 6px 0;
	}

	.gk-mtop__lang summary::-webkit-details-marker {
		display: none;
	}

	.gk-mtop__lang summary svg {
		width: 13px;
		height: 13px;
		transition: transform .2s ease;
	}

	.gk-mtop__lang[open] summary svg {
		transform: rotate(180deg);
	}

	.gk-mtop__lang ul {
		position: absolute;
		top: 100%;
		right: -8px;
		min-width: 56px;
		margin: 4px 0 0;
		padding: 4px 0;
		list-style: none;
		background: #fff;
		box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
	}

	.gk-mtop__lang li {
		margin: 0;
	}

	.gk-mtop__lang li a {
		display: block;
		padding: 9px 14px;
	}

	.gk-mtop__lang li a:hover {
		background: #f4f4f4;
	}

	/*
	 * Xtra's sticky.js makes header_4 fixed and measures it *before* sizing its
	 * placeholder, so Chrome's scroll anchoring sees the content shift up and
	 * jumps the page by the header height on the first scroll. Opt out.
	 */
	.inner_layout {
		overflow-anchor: none;
	}

	/* Main bar ------------------------------------------------------------ */

	.header_4 .elms_row > .clr {
		display: flex;
		align-items: center;
		height: 80px;
		padding: 0 18px 0 19px;
		box-sizing: border-box;
	}

	.header_4 .row {
		width: 100% !important;
		margin: 0 !important;
		padding: 0;
	}

	/* .header_4.have_center beats Theme Options' ".have_center .elms_center" inline CSS */
	.header_4.have_center .elms_left,
	.header_4.have_center .elms_center,
	.header_4.have_center .elms_right {
		flex: none;
		width: auto;
		display: flex;
		align-items: center;
		margin: 0;
	}

	.header_4.have_center .elms_left {
		margin-right: auto;
	}

	.header_4 .elms_center > div {
		display: flex;
		align-items: center;
		margin: 0;
	}

	.header_4 .elms_left > div,
	.header_4 .elms_center > div > div,
	.header_4 .elms_right > div {
		float: none;
	}

	.header_4 .cz_elm {
		margin: 0 !important;
	}

	/* Phone, e-mail & language flags live in the top bar now */
	.header_4 [class*="icon_header_4_left"],
	.header_4 .elms_right .cz_elm:has(.lang-item) {
		display: none !important;
	}

	/* Logo */
	.header_4 .logo_2 img {
		width: 93px !important;
		height: auto;
		display: block;
	}

	/* Search & cart icons */
	.header_4 .elms_center .cz_elm {
		margin-left: 26px !important;
	}

	.header_4 .xtra-search-icon,
	.header_4 .shop_icon i {
		font-size: 24px !important;
		color: #000 !important;
		background: none !important;
		padding: 0 !important;
		width: auto;
		height: auto;
		line-height: 1 !important;
	}

	.header_4 .shop_icon i {
		font-size: 26px !important;
	}

	/* Full-screen search: keep overlay & close button below the 46px mobile admin bar */
	.admin-bar .header_4 .outer_search {
		top: 46px !important;
	}

	.admin-bar .header_4 .xtra-close-icon {
		top: 66px !important;
	}

	/* Cart count: black badge on the basket's top-right corner */
	.header_4 .elms_shop_cart {
		position: relative;
	}

	.header_4 .elms_shop_cart .cz_cart {
		position: static;
	}

	.header_4 .cz_cart_count {
		top: -8px;
		right: -10px;
		width: auto;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		box-sizing: border-box;
		font-size: 11px;
		font-weight: 600;
		line-height: 18px;
		color: #fff !important;
		background: #000 !important;
		border-radius: 9px;
		box-shadow: 0 0 0 2px #fff;
	}

	.header_4 .cz_cart_count::before,
	.header_4 .cz_cart_counts::before {
		display: none;
	}

	/* Hamburger: Lucide "menu" icon (stroke-width 1.5) as a mask over the Xtra toggle */
	.header_4 .elms_right .cz_elm {
		margin-left: 22px !important;
	}

	.header_4 .icon_offcanvas_menu,
	.header_4 .icon_mobile_offcanvas_menu {
		width: 34px;
		height: 34px;
		padding: 0 !important;
		font-size: 0 !important;
		color: transparent !important;
		background: #000 !important;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' x2='20' y1='12' y2='12'/%3E%3Cline x1='4' x2='20' y1='6' y2='6'/%3E%3Cline x1='4' x2='20' y1='18' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' x2='20' y1='12' y2='12'/%3E%3Cline x1='4' x2='20' y1='6' y2='6'/%3E%3Cline x1='4' x2='20' y1='18' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	.header_4 .icon_offcanvas_menu::before,
	.header_4 .icon_mobile_offcanvas_menu::before,
	.header_4 .icon_offcanvas_menu::after,
	.header_4 .icon_mobile_offcanvas_menu::after {
		display: none;
	}

}