/* SHIRT-HQ Header (Variante B3) für OceanWP „Medium Header“ */
:root {
	--shq-yellow: #E2C814;
	--shq-bar: #333333;
	--shq-ink: #111111;
	--shq-nav: #0e0e0e;
}

/* ------------------------------------------------------------------
 * 1. Oberste Zeile (OceanWP Top Bar) – 80 % Schwarz mit Countdown
 * ---------------------------------------------------------------- */
#top-bar-wrap {
	background: var(--shq-bar) !important;
	border: 0 !important;
	color: #fff;
}
#top-bar { padding: 0 !important; }
#top-bar-content { float: none !important; width: 100%; text-align: center; }
#top-bar-content .topbar-content { display: block; }

.shq-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 18px;
	min-height: 44px;
	padding: 6px 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.shq-bar__title { font-weight: 800; color: #fff; }
.shq-bar__code { display: inline-flex; align-items: center; gap: 6px; color: var(--shq-yellow); }
.shq-bar__btn {
	height: 26px;
	padding: 0 10px;
	border: 1px dashed var(--shq-yellow);
	border-radius: 4px;
	background: transparent;
	color: #fff;
	font: inherit;
	font-weight: 800;
	line-height: 24px;
	cursor: pointer;
}
.shq-bar__btn:hover, .shq-bar__btn:focus { background: rgba(255, 255, 255, 0.08); color: #fff; }
.shq-bar__sep { width: 1px; height: 18px; background: #5c5c5c; }
.shq-bar__cd { color: var(--shq-yellow); }
.shq-bar__cd b { color: #fff; font-weight: 700; }
.shq-bar__fallback { color: #fff; font-weight: 600; }
.shq-bar__fallback a { color: #fff; }
.shq-bar.is-expired .shq-bar__deal { display: none; }
.shq-bar__deal { display: contents; }
.shq-bar:not(.is-expired) .shq-bar__fallback { display: none; }

/* ------------------------------------------------------------------
 * 2. Gelbe Zeile: Logo – Suche – Kontakt / Konto / Warenkorb
 * ---------------------------------------------------------------- */
#site-header.medium-header .top-header-wrap {
	background: var(--shq-yellow) !important;
	border: 0 !important;
	padding: 0 !important;
}

#site-header #medium-searchform .header-searchform {
	position: relative;
	display: flex !important;
	width: 100%;
	align-items: center;
	height: 50px;
	box-sizing: border-box;
	padding: 0 4px 0 20px;
	background: #fff;
	border: 2px solid var(--shq-ink);
	border-radius: 25px;
}
#medium-searchform .header-searchform input {
	flex: 1 1 auto;
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	height: 44px;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--shq-ink) !important;
	font-size: 15px;
}
#medium-searchform .header-searchform input::placeholder { color: #555; opacity: 1; }
#medium-searchform .header-searchform .search-submit {
	position: static !important;
	flex: 0 0 44px;
	width: 44px;
	margin-left: auto !important;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent !important;
	color: var(--shq-ink) !important;
	font-size: 18px;
	transform: none !important;
}
#medium-searchform .search-bg { display: none !important; }

.shq-actions { display: flex; align-items: center; gap: 12px; color: var(--shq-ink); }
.shq-actions a { color: var(--shq-ink) !important; text-decoration: none; }
.shq-actions svg { display: block; flex: 0 0 auto; }
.shq-wa { display: flex; align-items: center; gap: 10px; height: 44px; font-size: 13px; line-height: 1.25; }
.shq-wa__text { display: flex; flex-direction: column; text-align: left; }
.shq-wa__text strong { font-weight: 800; }
.shq-account { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px; font-size: 14px; font-weight: 700; }
.shq-actions a.shq-cart {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 16px;
	border-radius: 22px;
	background: var(--shq-ink);
	color: var(--shq-yellow) !important;
	font-size: 14px;
	font-weight: 800;
}

/* Desktop-Anordnung: Logo links, Suche in der Mitte, Aktionen rechts */
@media (min-width: 960px) {
	#site-header.medium-header .top-header-inner {
		display: flex;
		align-items: center;
		gap: 32px;
		min-height: 84px;
		padding: 0 !important;
	}
	#site-header.medium-header .top-header-inner::after { display: none; }
	#site-header.medium-header .top-header-inner > .top-col { display: contents; }
	#site-header.medium-header #site-logo {
		order: 1;
		float: none;
		flex: 0 0 auto;
		margin: 0 !important;
		padding: 0;
	}
	#site-header.medium-header #site-logo #site-logo-inner { height: auto; display: block; }
	#site-header.medium-header #site-logo img { max-height: 60px !important; width: auto; }
	#site-header.medium-header #medium-searchform {
		order: 2;
		float: none;
		flex: 1 1 auto;
		max-width: 580px;
		width: auto;
		margin: 0;
	}
	#site-header.medium-header .shq-actions { order: 3; margin-left: auto; flex: 0 0 auto; }

	/* Konto und Warenkorb sitzen jetzt in der gelben Zeile */
	#site-navigation .menu-item-150,
	#site-navigation .woo-menu-icon { display: none !important; }
}

/* ------------------------------------------------------------------
 * 3. Menüzeile – dunkel
 * ---------------------------------------------------------------- */
#site-header.medium-header .bottom-header-wrap {
	background: var(--shq-nav) !important;
	border-bottom: 1px solid #262626;
}

/* ------------------------------------------------------------------
 * 4. Mobil
 * ---------------------------------------------------------------- */
@media (max-width: 959px) {
	.shq-bar { gap: 4px 10px; font-size: 12px; padding: 8px 0; }
	.shq-bar__sep, .shq-bar__hint, .shq-bar__until { display: none; }
	.shq-bar__btn { height: 30px; line-height: 28px; }

	#site-header.medium-header #site-header-inner { position: relative; }
	#site-header.medium-header .top-header-inner { min-height: 64px; display: flex; align-items: center; padding: 0 !important; }
	#site-header.medium-header .top-header-inner > .col-1,
	#site-header.medium-header .top-header-inner > .col-3,
	#site-header.medium-header .shq-actions { display: none !important; }
	#site-header.medium-header .top-header-inner > .logo-col { width: auto; text-align: left; padding: 0; }
	#site-header.medium-header .top-header-wrap { z-index: auto !important; }
	#site-header.medium-header #site-logo { float: none; margin: 0 !important; }
	#site-header.medium-header #site-logo #site-logo-inner { display: inline-block; width: auto; }
	#site-header.medium-header #site-logo img { max-height: 46px !important; width: auto; }

	/* Warenkorb + Menü-Icon von OceanWP rechts in die gelbe Zeile schieben */
	#site-header.medium-header .oceanwp-mobile-menu-icon {
		position: absolute;
		top: 32px;
		left: auto !important;
		right: 8px !important;
		width: auto !important;
		float: none !important;
		transform: translateY(-50%);
		margin: 0;
		display: flex;
		align-items: center;
		gap: 4px;
		z-index: 100;
	}
	#site-header.medium-header .oceanwp-mobile-menu-icon a {
		display: flex;
		align-items: center;
		gap: 6px;
		min-height: 44px;
		padding: 0 8px;
		color: var(--shq-ink) !important;
		font-weight: 700;
		line-height: 44px;
	}
	#site-header.medium-header .oceanwp-mobile-menu-icon,
	#site-header.medium-header .oceanwp-mobile-menu-icon a { background: transparent !important; border: 0 !important; }
	#site-header.medium-header .oceanwp-mobile-menu-icon .wcmenucart-details.count {
		background: var(--shq-ink) !important;
		border-color: var(--shq-ink) !important;
		color: var(--shq-yellow) !important;
	}
	#site-header.medium-header .oceanwp-mobile-menu-icon .wcmenucart-details.count::after { border-color: var(--shq-ink) !important; }
	#site-header.medium-header .bottom-header-wrap { min-height: 0; }
}