/* OCEX Header 1.0.0
   Layout "stock": the stock Bootstrap markup and the theme's own #top / #logo / #search / #cart styles; only the module's extras
   (badges, slogan, social icons, account block) are styled here.
   Layout "flex": one or two light rows with left / center / right groups; below the breakpoint the JS sets .is-mobile.
   Colours are CSS variables; the admin colour settings override them per store (inline <style> in the head). */

.ocex-header {
	--ocex-header-bg: #fff;
	--ocex-header-fg: #222;
	--ocex-header-muted: #5b6170;
	--ocex-header-field: #eef0f2;
	--ocex-header-top-bg: #f5f5f5;
	--ocex-header-top-fg: #555;
	--ocex-header-accent: #229ac8;
	--ocex-header-badge-bg: var(--ocex-header-accent);
	--ocex-header-badge-fg: #fff;
	--ocex-header-cart-bg: #2f323d;
	--ocex-header-cart-fg: #fff;
	--ocex-header-mobile-bg: #333;
	--ocex-header-mobile-fg: #fff;
}

/* ---------- both layouts ---------- */
.ocex-header__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ocex-header__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; color: inherit; }
.ocex-header__icon .fa { font-size: 20px; }
.ocex-header__badge { position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ocex-header-badge-bg); color: var(--ocex-header-badge-fg); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; box-sizing: border-box; }
.ocex-header__badge[hidden] { display: none; }
.ocex-header__dd { display: inline-block; position: relative; }
.ocex-header__social { display: inline-block; margin: 0 4px; color: inherit; }
.ocex-header__social .fa { font-size: 16px; }
.ocex-header__account-block { display: inline-flex; align-items: center; gap: 8px; }
.ocex-header__account-block .fa { font-size: 22px; }
.ocex-header__account-block > span { display: flex; flex-direction: column; line-height: 1.25; }
.ocex-header__account-title { font-weight: 600; }
.ocex-header__account-block small { font-size: 12px; }
#ocex-header #logo .ocex-header__logo-dark { display: none; } /* ID level: themes size / show "#logo img" */
.ocex-header__logo--slogan { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ocex-slogan { display: block; font-size: 11px; line-height: 1.2; letter-spacing: .06em; white-space: nowrap; color: inherit; }
.ocex-slogan--foot { margin: -.4em 0 .9em; font-size: 12px; }
.ocex-header__search-btn { display: none; }
.ocex-cart__data { display: none !important; }
.ocex-cart--no-dropdown > .dropdown-menu { display: none !important; }
.ocex-cart__badge { display: inline-block; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 5px; border-radius: 10px; background: var(--ocex-header-badge-bg); color: var(--ocex-header-badge-fg); font-size: 11px; line-height: 20px; text-align: center; }
.ocex-cart__label { margin-left: 6px; }
.ocex-cart__text { margin-left: 4px; }
.ocex-header__slot { display: inline-block; vertical-align: middle; }
#top .ocex-header__group--left { display: inline; }
#top .ocex-header__group--left .ocex-header__slot { float: left; }
.ocex-header--stock .ocex-header__main .ocex-header__slot { display: block; }
.ocex-header.is-mobile .ocex-header__slot--no-mobile, .ocex-header.is-mobile .ocex-header__top--no-mobile { display: none !important; }

/* ---------- flex layout ---------- */
.ocex-header--flex { position: relative; z-index: 1001; background: var(--ocex-header-bg); color: var(--ocex-header-fg); }
.ocex-header--flex a, .ocex-header--flex a:hover, .ocex-header--flex a:focus { text-decoration: none; }
.ocex-header--flex a:not(.btn), .ocex-header--flex a:not(.btn):hover { color: inherit; }
.ocex-header--flex .dropdown-menu a { color: #333; }
.ocex-header--flex :where(button.ocex-header__icon) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ocex-header--flex .ocex-header__row { display: flex; align-items: center; gap: 24px; }
.ocex-header--flex .ocex-header__row:before, .ocex-header--flex .ocex-header__row:after { display: none; }
.ocex-header--flex .ocex-header__group { display: flex; align-items: center; gap: 16px; flex: none; }
.ocex-header--flex .ocex-header__group--center { flex: 1 1 auto; justify-content: center; min-width: 0; }
.ocex-header--flex .ocex-header__group--right { margin-left: auto; }
.ocex-header--flex .ocex-header__slot { display: flex; align-items: center; }
.ocex-header--flex .ocex-header__slot--search { flex: 1 1 auto; max-width: 640px; }
.ocex-header--flex .ocex-header__search { width: 100%; }
.ocex-header--flex .ocex-header__link { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ocex-header--flex .pull-left { float: none !important; }
.ocex-header--flex .ocex-header__top { background: var(--ocex-header-top-bg); color: var(--ocex-header-top-fg); font-size: 13px; }
.ocex-header--flex .ocex-header__top .ocex-header__row { min-height: 35px; }
.ocex-header--flex .ocex-header__top .btn-link { color: inherit; padding: 0; }
.ocex-header--flex .ocex-header__main .ocex-header__row { min-height: var(--ocex-header-main-h, 76px); }
/* themes style #logo / #search / #cart by ID (margins, .btn-lg sizes); inside the flex header the module sets the metrics,
   so these rules are scoped under #ocex-header (ID level) - otherwise the row grows (VF: 92 instead of 76 px) */
#ocex-header.ocex-header--flex #logo, #ocex-header.ocex-header--flex #search, #ocex-header.ocex-header--flex #cart { margin: 0; }
#ocex-header.ocex-header--flex .ocex-header__main { padding: 0; margin: 0; }
#ocex-header.ocex-header--flex #logo { margin: 0; }
#ocex-header.ocex-header--flex #logo img { height: var(--ocex-header-logo-h-desktop, 38px); width: auto; max-width: none; }
/* display only on the normal logo: the light (dark-background) logo stays hidden by the swap rules, whose specificity is
   counted against this one - normal shown 2-2-0, light hidden 2-1-0, light shown 2-2-0 / 2-3-0, normal hidden 2-3-0 / 2-4-0 */
#ocex-header.ocex-header--flex #logo .ocex-header__logo-img { display: block; }
#ocex-header.ocex-header--stock #logo img { height: var(--ocex-header-logo-h-desktop, auto); width: auto; }
#ocex-header.ocex-header--flex #logo h1 { margin: 0; font-size: 22px; }

/* search, pill style (both layouts can use it) */
#ocex-header .ocex-header__search--pill #search { display: block; position: relative; width: 100%; margin: 0; }
#ocex-header .ocex-header__search--pill #search .form-control { float: none; width: 100%; height: 44px; border: 0; border-radius: 22px; background: var(--ocex-header-field); padding: 0 52px 0 22px; font-size: 15px; color: var(--ocex-header-fg); box-shadow: none; }
#ocex-header .ocex-header__search--pill #search .input-group-btn { position: absolute; right: 4px; top: 0; bottom: 0; width: auto; display: flex; align-items: center; z-index: 3; }
#ocex-header .ocex-header__search--pill #search .input-group-btn .btn { height: 40px; width: 44px; padding: 0; border: 0; border-radius: 20px; background: transparent; color: var(--ocex-header-muted); font-size: 17px; box-shadow: none; }

/* cart button (module display modes) */
#ocex-header.ocex-header--flex #cart { width: auto; margin: 0; }
#ocex-header #cart.ocex-cart:not(.ocex-cart--stock) > .ocex-cart__btn,
#ocex-header #cart.ocex-cart:not(.ocex-cart--stock) > .ocex-cart__btn:hover,
#ocex-header #cart.ocex-cart:not(.ocex-cart--stock) > .ocex-cart__btn:focus,
#ocex-header #cart.ocex-cart.open:not(.ocex-cart--stock) > .ocex-cart__btn { position: relative; display: inline-flex; align-items: center; width: auto; height: 36px; padding: 0 14px; border: 0; border-radius: 6px; background: var(--ocex-header-cart-bg); background-image: none; color: var(--ocex-header-cart-fg); font-size: 14px; font-weight: 600; line-height: 1; text-shadow: none; box-shadow: none; }
#ocex-header #cart.ocex-cart:not(.ocex-cart--stock) > .ocex-cart__btn .fa { font-size: 18px; }
#ocex-header #cart.ocex-cart--icon_badge > .ocex-cart__btn .ocex-cart__badge, #ocex-header #cart.ocex-cart--icon_label_badge > .ocex-cart__btn .ocex-cart__badge { position: absolute; top: -8px; right: -8px; margin: 0; border: 2px solid var(--ocex-header-bg); line-height: 16px; }
#ocex-header #cart.ocex-cart > .ocex-cart__btn:hover, #ocex-header #cart.ocex-cart.open > .ocex-cart__btn { filter: brightness(1.15); }
.ocex-cart .dropdown-menu { min-width: 340px; }

/* dark mode (the ocex_theme toggle sets data-ocex-theme on <html>) */
[data-ocex-theme="dark"] .ocex-header { --ocex-header-bg: #1f2229; --ocex-header-fg: #e6e7ea; --ocex-header-muted: #c9ccd3; --ocex-header-field: #2b2e39; --ocex-header-top-bg: #181a20; --ocex-header-top-fg: #c9ccd3; } /* cart_bg / mobile_bg: the store colours stay in dark mode too */
[data-ocex-theme="dark"] #ocex-header #logo .ocex-header__logo-dark { display: block; }
[data-ocex-theme="dark"] #ocex-header #logo .ocex-header__logo-img:not(:only-child) { display: none; }

/* ---------- sticky modes ---------- */
.ocex-header--sticky-header { position: sticky; top: 0; z-index: 1001; }
.ocex-header--sticky-header:not(.is-mobile) { box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
[data-ocex-theme="dark"] .ocex-header--sticky-header:not(.is-mobile) { box-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
/* the JS publishes the height of whatever sticks at the top as --ocex-sticky-top on <html> (shared ocex_* convention:
   sticky sidebars and the menu offset themselves by it) and keeps anchor jumps clear of it with scroll-padding-top */
.ocex-header-menu--sticky { position: sticky; top: 0; z-index: 1000; }

/* ---------- mobile (below the breakpoint; .is-mobile set by the inline script and ocex_header.js) ---------- */
.ocex-header.is-mobile .ocex-header__main .ocex-header__row { flex-wrap: wrap; gap: 8px 10px; min-height: 0; padding: 8px 0 12px; }
.ocex-header.is-mobile .ocex-header__main .ocex-header__group--left { flex: 1 1 auto; min-width: 0; gap: 8px; }
.ocex-header.is-mobile .ocex-header__main .ocex-header__group--right { gap: 2px; }
.ocex-header.is-mobile .ocex-header__main .ocex-header__group--center { order: 3; flex: 1 0 100%; }
.ocex-header.is-mobile .ocex-header__slot--search { max-width: none; }
#ocex-header.is-mobile #logo img { height: auto; max-height: var(--ocex-header-logo-h-mobile, 28px); max-width: 100%; }
.ocex-header.is-mobile .ocex-header__text, .ocex-header.is-mobile .ocex-cart__label, .ocex-header.is-mobile .ocex-cart__text { display: none; }
#ocex-header.is-mobile .ocex-header__search--pill #search .form-control { height: 40px; border-radius: 20px; font-size: 14px; }
.ocex-header--search-toggle.is-mobile .ocex-header__search-btn { display: inline-flex; }
.ocex-header--search-toggle.is-mobile .ocex-header__search { display: none; }
.ocex-header--search-toggle.is-mobile.is-search-open .ocex-header__search { display: block; }
.ocex-header--search-toggle.is-mobile .ocex-header__slot--search { flex-wrap: wrap; justify-content: flex-end; }
.ocex-header--has-menu-button.is-mobile ~ .ocex-header-menu .ocex-menu__mbar { display: none; } /* the header button opens the menu drawer */
.ocex-header__bars { display: none; }
.ocex-header.is-mobile .ocex-header__bars { display: inline-flex; font-size: 22px; }

/* mobile: dark main row, white logo, fixed with the body padding held by the JS (--ocex-header-h) */
.ocex-header--sticky-mobile.is-mobile { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; }
/* header_notification bar printed inside the header: its own position:sticky + z-index 9998 would sit apart from the fixed
   mobile header and above the menu drawer; inside #ocex-header it simply scrolls / sticks with the header (other module untouched) */
#ocex-header .ocex-hn { position: static; top: auto; z-index: auto; }
html.ocex-header-fixed body { padding-top: var(--ocex-header-h, 115px); }
.ocex-header--mobile-dark-logo.is-mobile .ocex-header__main { background: var(--ocex-header-mobile-bg); color: var(--ocex-header-mobile-fg); border-bottom: 3px solid var(--ocex-header-accent); }
#ocex-header.ocex-header--mobile-dark-logo.is-mobile #logo .ocex-header__logo-dark { display: block; }
#ocex-header.ocex-header--mobile-dark-logo.is-mobile #logo .ocex-header__logo-img:not(:only-child) { display: none; }
#ocex-header.ocex-header--mobile-dark-logo.is-mobile #cart.ocex-cart:not(.ocex-cart--stock) > .ocex-cart__btn { min-width: 38px; height: 40px; padding: 0 8px; justify-content: center; background: transparent; color: var(--ocex-header-mobile-fg); }
#ocex-header.ocex-header--mobile-dark-logo.is-mobile .ocex-header__search--pill #search .form-control { background: #fff; color: #222; }
.ocex-header--compact.is-mobile .ocex-header__group--center { transition: max-height .2s ease, opacity .2s ease; max-height: 60px; }
.ocex-header--compact.is-mobile.is-compact .ocex-header__main .ocex-header__group--center { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; }

/* tablet logo height (between the breakpoint and the Bootstrap md limit) */
@media (max-width: 1199px) {
	.ocex-header--flex:not(.is-mobile) #logo img { height: var(--ocex-header-logo-h-tablet, var(--ocex-header-logo-h-desktop, 38px)); }
}
@media (prefers-reduced-motion: reduce) {
	.ocex-header * { transition: none !important; }
}