/* Clubstylez Header (Rot/Schwarz) für OceanWP „Medium Header“ – Basis: SHIRT-HQ Header B3 */
:root {
	--csh-red: #c8102e;
	--csh-accent: #c9a227;      /* Gold (Standard) oder Rot – einstellbar unter Design → Clubstylez Header */
	--csh-accent-text: #111111;
	--csh-ink: #111111;
	--csh-bar: #c8102e;         /* oberste Zeile rot */
	--csh-head: #0d0d0d;        /* Logo-Zeile schwarz */
	--csh-nav: #161616;         /* Menüzeile schwarz */
	--csh-line: #2a2a2a;
	--csh-head-font: 'Allerta Stencil', sans-serif;
}

/* ------------------------------------------------------------------
 * 1. Top Bar – rot mit Countdown
 * ---------------------------------------------------------------- */
#top-bar-wrap { background: var(--csh-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; }

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

/* ------------------------------------------------------------------
 * 2. Logo-Zeile: schwarz, Logo – Suche – Kontakt / Konto / Warenkorb
 * ---------------------------------------------------------------- */
#site-header.medium-header .top-header-wrap { background: var(--csh-head) !important; border: 0 !important; border-bottom: 1px solid var(--csh-line) !important; padding: 0 !important; }

#site-header #medium-searchform .header-searchform { position: relative; display: flex !important; width: 100%; align-items: center; height: 46px; box-sizing: border-box; padding: 0 4px 0 18px; background: #1c1c1c; border: 1px solid #333; border-radius: 23px; transition: border-color .15s, background .15s; }
#medium-searchform .header-searchform input { flex: 1 1 auto; width: auto !important; max-width: none !important; min-width: 0; height: 42px; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #fff !important; font-size: 15px; }
#medium-searchform .header-searchform input::placeholder { color: #8a8a8a; opacity: 1; }
#site-header #medium-searchform .header-searchform input,
#site-header #medium-searchform .header-searchform input:focus,
#site-header #medium-searchform .header-searchform input:focus-visible,
#site-header #medium-searchform .header-searchform input:hover { outline: none !important; border: 0 !important; box-shadow: none !important; background: transparent !important; -webkit-appearance: none; appearance: none; border-radius: 0 !important; }
#site-header #medium-searchform .header-searchform input::-webkit-search-decoration,
#site-header #medium-searchform .header-searchform input::-webkit-search-cancel-button { -webkit-appearance: none; }
#site-header #medium-searchform .header-searchform:focus-within { background: #222; border-color: var(--csh-accent); }
#site-header #medium-searchform .header-searchform .search-submit:focus { outline: none; }
#site-header #medium-searchform .header-searchform .search-submit:focus-visible { outline: 2px solid var(--csh-accent); outline-offset: -4px; border-radius: 20px; }
#medium-searchform .header-searchform .search-submit { position: static !important; flex: 0 0 40px; width: 40px; margin-left: auto !important; height: 40px; padding: 0; border: 0; background: transparent !important; color: #fff !important; font-size: 17px; transform: none !important; }
#medium-searchform .search-bg { display: none !important; }

.csh-actions { display: flex; align-items: center; gap: 10px; color: #fff; }
.csh-actions a { color: #fff !important; text-decoration: none; }
.csh-actions svg { display: block; flex: 0 0 auto; }
.csh-wa { display: flex; align-items: center; gap: 10px; height: 44px; font-size: 13px; line-height: 1.25; }
.csh-wa svg { color: var(--csh-accent); }
.csh-wa__text { display: flex; flex-direction: column; text-align: left; }
.csh-wa__text strong { font-weight: 800; }
.csh-wa__text span { color: #9a9a9a; }
.csh-account { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px; font-size: 14px; font-weight: 700; }
.csh-actions a.csh-cart { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 22px; background: var(--csh-accent); color: var(--csh-accent-text) !important; font-size: 14px; font-weight: 800; }
.csh-actions a.csh-cart:hover { filter: brightness(1.1); }

@media (min-width: 960px) {
	#site-header.medium-header .top-header-inner { display: flex; align-items: center; gap: 32px; min-height: 80px; 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: 54px !important; width: auto; }
	#site-header.medium-header #medium-searchform { order: 2; float: none; flex: 1 1 auto; max-width: 560px; width: auto; margin: 0; }
	#site-header.medium-header .csh-actions { order: 3; margin-left: auto; flex: 0 0 auto; }
	/* Konto und Warenkorb sitzen in der Logo-Zeile */
	#site-navigation .woo-menu-icon { display: none !important; }
}

/* ------------------------------------------------------------------
 * 3. Menüzeile – schwarz mit Akzentlinie
 * ---------------------------------------------------------------- */
#site-header.medium-header .bottom-header-wrap { background: var(--csh-nav) !important; border-bottom: 2px solid var(--csh-accent); }
/* OceanWP färbt beim Medium Header den Menü-Container selbst hell ein – alles darin schwarz setzen */
#site-header.medium-header #site-navigation-wrap,
#site-header.medium-header .bottom-header-wrap .container,
#site-header.medium-header #site-navigation,
#site-header.medium-header #site-navigation-wrap .dropdown-menu,
#site-header.medium-header #site-navigation-wrap .dropdown-menu > li,
.is-sticky #site-header.medium-header .bottom-header-wrap,
.is-sticky #site-header.medium-header #site-navigation-wrap { background: var(--csh-nav) !important; background-color: var(--csh-nav) !important; }
#site-header.medium-header #site-navigation-wrap .dropdown-menu > li > a,
#site-header.medium-header #site-navigation-wrap .dropdown-menu > li > a .text-wrap,
#site-header.medium-header #site-navigation-wrap .dropdown-menu > li > a .nav-arrow { background: transparent !important; color: #fff !important; opacity: 1 !important; }
#site-header.medium-header #site-navigation-wrap .dropdown-menu > li > a:hover .text-wrap,
#site-header.medium-header #site-navigation-wrap .dropdown-menu > li > a:hover .nav-arrow,
#site-header.medium-header #site-navigation-wrap .dropdown-menu > li.current-menu-item > a .text-wrap,
#site-header.medium-header #site-navigation-wrap .dropdown-menu > li.current-menu-ancestor > a .text-wrap { color: var(--csh-accent) !important; }
/* Untermenüs: weiß mit dunkler Schrift, Hover in Akzentfarbe */
#site-header.medium-header .dropdown-menu .sub-menu { background: #fff !important; }
#site-header.medium-header .dropdown-menu .sub-menu li a,
#site-header.medium-header .dropdown-menu .sub-menu li a .text-wrap { color: #111 !important; background: transparent !important; font-family: inherit; text-transform: none; letter-spacing: 0; }
#site-header.medium-header .dropdown-menu .sub-menu li a:hover { background: #f4f4f4 !important; }
#site-header.medium-header .dropdown-menu .sub-menu li a:hover .text-wrap { color: var(--csh-red) !important; }
/* Suche sitzt schon in der Logo-Zeile – Lupe im Menü ausblenden */
@media (min-width: 960px) { #site-header.medium-header #site-navigation .search-toggle-li { display: none !important; } }
#site-header.medium-header #site-navigation-wrap .dropdown-menu > li > a { color: #fff !important; font-family: var(--csh-head-font); text-transform: uppercase; letter-spacing: .04em; font-size: 14px; }
#site-header.medium-header #site-navigation-wrap .dropdown-menu > li > a:hover,
#site-header.medium-header #site-navigation-wrap .dropdown-menu > li.current-menu-item > a,
#site-header.medium-header #site-navigation-wrap .dropdown-menu > li.current-menu-ancestor > a { color: var(--csh-accent) !important; }
#site-header.medium-header .dropdown-menu .sub-menu { border-top: 3px solid var(--csh-accent) !important; }

/* ------------------------------------------------------------------
 * 4. Mobil
 * ---------------------------------------------------------------- */
@media (max-width: 959px) {
	.csh-bar { gap: 4px 10px; font-size: 12px; padding: 8px 0; }
	.csh-bar__sep, .csh-bar__hint, .csh-bar__until { display: none; }
	.csh-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: 60px; 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 .csh-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: 42px !important; width: auto; }

	/* Warenkorb + Menü-Icon von OceanWP rechts in die Logo-Zeile */
	#site-header.medium-header .oceanwp-mobile-menu-icon { position: absolute; top: 30px; 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: #fff !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(--csh-accent) !important; border-color: var(--csh-accent) !important; color: var(--csh-accent-text) !important; }
	#site-header.medium-header .oceanwp-mobile-menu-icon .wcmenucart-details.count::after { border-color: var(--csh-accent) !important; }
	#site-header.medium-header .bottom-header-wrap { min-height: 0; border-bottom-width: 2px; }
}