/*
 * Mobile header: two-row layout.
 *   Row 1: logo (left), hamburger menu + cart (right).
 *   Row 2: full-width search box (pairs with the full-width autocomplete).
 * Desktop is untouched. Loaded after bootstrap-responsive.css so these
 * rules win at the same breakpoint.
 */

@media (max-width: 767px) {

	#header { position: relative; height: auto; padding-bottom: 54px; }

	#header .header-bottom {
		width: auto;
		max-width: none;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		padding: 0 12px;
		margin: 0;
	}

	/* Row 1 */
	#header .header-bottom .logo { order: 1; margin: 6px auto 0 0; }
	#header .header-bottom .logo a { width: 86px; height: 58px; }

	/* position: static lets the search (and the dropdown) anchor to the
	   header itself instead of this small box. */
	#header .header-bottom .menu {
		order: 2;
		display: flex;
		align-items: center;
		margin: 6px 0 0 0;
		padding: 0;
		background: none;
		position: static;
	}

	/* Hamburger + cart: one grouped, segmented control (equal boxes,
	   shared border, rounded outer corners). */
	#header .header-bottom .menu a.res_menu {
		float: none;
		width: 48px;
		height: 46px;
		margin: 0;
		padding: 13px 0 0 0;
		background: #fff;
		border: 1px solid #d5d9dc;
		border-radius: 4px 0 0 4px;
		box-sizing: border-box;
	}

	#header .header-bottom .inbox {
		order: 3;
		margin: 6px 0 0 0;
		padding: 0;
		background: #fff;
		border: 1px solid #d5d9dc;
		border-left: none;
		border-radius: 0 4px 4px 0;
		box-sizing: border-box;
	}

	#header .header-bottom .inbox a {
		width: 48px;
		height: 44px;
		padding: 0;
		background-size: 24px;
		background-position: center;
	}

	#header .header-bottom .inbox a span { top: 4px; right: 4px; }

	/* Hamburger dropdown: full-width sheet below row 1, styled like the
	   autocomplete panel, scrollable, with clear sections. */
	#header .header-bottom .menu .menu-inner {
		left: 12px;
		right: 12px;
		top: 64px;
		width: auto;
		border: 1px solid #d5d9dc;
		border-radius: 6px;
		box-shadow: 0 6px 24px rgba(24, 27, 30, 0.16);
		max-height: calc(100vh - 170px);
		overflow-y: auto;
		padding: 4px 0 8px;
	}

	#header .header-bottom .menu .menu-inner ul li a {
		padding: 8px 16px;
		font-size: 15px;
	}

	/* Account block on top, separated from the departments. */
	#header .header-bottom .menu .menu-inner ul.visible-phone {
		padding: 4px 0 8px;
		border-bottom: 1px solid #eef1f2;
		margin-bottom: 4px;
	}

	/* Department names as section headers. */
	#header .header-bottom .menu .menu-inner ul li a.heandlaget,
	#header .header-bottom .menu .menu-inner ul li a.mote,
	#header .header-bottom .menu .menu-inner ul li a.samler,
	#header .header-bottom .menu .menu-inner ul li a.materiell {
		font-size: 13px;
		font-weight: bold;
		letter-spacing: 0.06em;
		color: #8a949c;
		border-top: 1px solid #eef1f2;
		margin-top: 6px;
		padding: 12px 16px 4px;
	}

	/* Category lists: slightly indented, comfortable tap targets. */
	#header .header-bottom .menu .menu-inner ul li ul { padding: 0 8px; }
	#header .header-bottom .menu .menu-inner ul li ul li a {
		padding: 7px 16px;
		font-size: 14px;
	}

	/* Row 2: the search lives inside .menu, so span it across the header. */
	#header .header-bottom .menu .search {
		position: absolute;
		left: 12px;
		right: 12px;
		top: 72px;
		float: none;
		margin: 0;
	}

	#header .header-bottom .menu .search form { display: flex; align-items: stretch; }

	/* White on the grey header so the field is clearly visible. The base
	   stylesheets give these controls stray margins/paddings -- zero them
	   so field and button align seamlessly. */
	#header .header-bottom .menu .search .searchbox {
		flex: 1 1 auto;
		width: auto;
		height: 38px;
		font-size: 14px;
		margin: 0;
		padding: 4px 10px;
		background: #fff;
		border: 1px solid #d5d9dc;
		border-right: none;
		border-radius: 0;
		box-sizing: border-box;
	}

	#header .header-bottom .menu .search .sbutton {
		flex: 0 0 auto;
		width: 44px;
		height: 38px;
		padding: 0;
		margin: 0;
		background-color: #fff;
		background-position: center;
		border: 1px solid #d5d9dc;
		border-left: none;
		border-radius: 0;
		box-sizing: border-box;
	}

	/* No dead space between the header and the page content. */
	#header { margin-bottom: 0; }

	/* The top ad slot renders empty (ad_top.html has no content) -- on
	   mobile its padding is just a 30px spacer, so collapse it. */
	.ad-slot-top { padding: 0 !important; }

	/* Front-page campaign band: tighten the roomy desktop spacing and
	   keep the button group vertically centered (symmetric padding:
	   14px top vs last block's 10px margin + 4px bottom padding). */
	#slider { padding: 14px 0 4px; }
	#slider .block_1 { margin: 0 auto 10px; }

	/* Labels flow below the image instead of overlaying it, so blocks
	   keep their height (and never overlap) when an image is missing. */
	#slider .block_1 span { position: static; padding: 12px 0; }
}