/* =============================================================================
   UGL OZ Replica — HEADER
   Transparent + sticky. Grid: col-lg-2 logo / col-lg-10 nav + right.
   Mini-cart is an ICON with a count bubble linking to /cart/.
   THERE IS NO CART DRAWER / FLYOUT ON THE SOURCE. None is built here.
   The source's own class is misspelt `haeder-default` — copied verbatim.
   The InBio nav-hover .wav is deliberately DROPPED (brief decision 14).

   Measured at 1440 (scrape/_shots/desktop/home.png, pixel-scanned):
     header height 143 = 14 + 115(logo) + 14   -> .header-wrapper padding 14px 45px
     logo image box  x 45..245, ink 56..235, y 14..128
     nav caps        y 66..77 (centre 71.5 = header centre), items gap 30px
     mini-cart circle 45x45 at x 1320..1365, count bubble 16x16 at 1353..1368 / y 47..62
   ========================================================================== */

.rn-header {
	position: relative;
	z-index: 99;
	background: transparent;
	color: var(--ugloz-body);
	width: 100%;
}

#rainbow-sticky-placeholder { display: none; }

.rn-header .header-wrapper {
	padding: 14px 45px;
}
/* Measured header heights: 1440 -> 143 (14 + 115 logo + 14)
                             820  -> 76  (12 + 52 logo  + 12)
                             390  -> 78  (14 + 50 hamburger + 14) */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
	.rn-header .header-wrapper { padding: 12px 45px; }
}
@media only screen and (max-width: 767px) {
	.rn-header .header-wrapper { padding: 14px 15px; }
}

/* ---------- left: logo ----------------------------------------------------- */
.header-wrapper .header-left {
	flex-basis: 20%;
	justify-content: flex-start;
	display: flex;
}
/* line-height:0 kills the inline-block baseline gap under the logo anchor —
   without it .header-left measures 125.4px and the header renders 153px tall
   instead of the source's measured 143px. */
.header-wrapper .logo { line-height: 0; }
.header-wrapper .logo a { display: inline-block; }
.header-wrapper .logo a img {
	transition: 0.4s;
	display: block;
}
.header-wrapper .logo .light-logo { display: none; }

/* width:auto everywhere a max-height is set — the <img> has width/height
   attributes, so max-height alone stretches it. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.header-wrapper .logo a img { max-height: 52px; width: auto; }
}
@media only screen and (max-width: 767px) { .header-wrapper .logo a img { max-height: 54px; width: auto; } }
@media only screen and (max-width: 575px) { .header-wrapper .logo a img { max-height: 45px; width: auto; } }

/* ---------- centre: nav + right -------------------------------------------- */
.header-wrapper .header-center {
	flex-basis: 100%;
	justify-content: flex-end;
	display: flex;
	align-items: center;
}
.header-wrapper .header-right {
	margin-left: 26px;
	justify-content: flex-end;
	display: flex;
	align-items: center;
}
@media only screen and (max-width: 991px) {
	.header-wrapper .header-right { margin-left: 0; margin-right: 0; }
}

/* ---------- primary menu --------------------------------------------------- */
.mainmenu-nav ul.primary-menu {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mainmenu-nav ul.primary-menu > li {
	margin: 10px 15px;
	transition: 0.3s;
	position: relative;
	list-style: none;
}
.mainmenu-nav ul.primary-menu > li > a {
	color: var(--ugloz-lightn);
	position: relative;
	display: inline-block;
	padding: 0;
	font-family: var(--ugloz-font-secondary);
	font-size: 13px;
	font-weight: var(--ugloz-w-regular);
	line-height: 24.7px;
	text-transform: uppercase;
	white-space: nowrap;
	transition: var(--ugloz-transition);
}
.mainmenu-nav ul.primary-menu > li:hover > a,
.mainmenu-nav ul.primary-menu > li.current-menu-ancestor > a,
.mainmenu-nav ul.primary-menu > li.current_page_item > a,
.mainmenu-nav ul.primary-menu > li.current-menu-item > a {
	color: var(--ugloz-primary);
}

/* dropdown panels — exactly two on the source: Affiliate Program (3), Community (5) */
.mainmenu-nav ul.primary-menu > li ul.sub-menu {
	min-width: 247px;
	height: auto;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 99;
	opacity: 0;
	visibility: hidden;
	background-color: var(--ugloz-bg-2);
	box-shadow: var(--ugloz-shadow-1);
	text-align: left;
	padding: 12px 0;
	margin: 0;
	border-radius: var(--ugloz-radius-menu);
	list-style: none;
	transition: 0.3s;
}
.mainmenu-nav ul.primary-menu > li ul.sub-menu li {
	margin: 0;
	padding: 0;
	position: relative;
	list-style: none;
}
.mainmenu-nav ul.primary-menu > li ul.sub-menu li > a {
	display: block;
	font-family: var(--ugloz-font-secondary);
	font-size: 13px;
	font-weight: var(--ugloz-w-medium);
	text-transform: uppercase;
	padding: 5px 20px;
	margin: 0 10px;
	color: var(--ugloz-lightn);
	border-radius: 3px;
	white-space: nowrap;
}
.mainmenu-nav ul.primary-menu > li ul.sub-menu li:hover > a {
	color: var(--ugloz-primary) !important;
	background: var(--ugloz-dark);
}
.mainmenu-nav ul.primary-menu > li:hover > ul.sub-menu,
.mainmenu-nav ul.primary-menu > li:focus-within > ul.sub-menu {
	opacity: 1;
	visibility: visible;
}
/* right-aligned header: keep the last dropdowns inside the viewport */
.rn-header.header-right-align .mainmenu-nav ul.primary-menu > li:nth-last-child(-n + 3) ul.sub-menu {
	left: auto;
	right: 0;
}

/* ---------- mini-cart ------------------------------------------------------ */
.rbt-mini-cart-wrap {
	margin-left: 0;
	margin-right: 30px;
	display: block;
	position: relative;
	z-index: 2;
	width: 45px;
	height: 45px;
	border-radius: 100%;
	transition: 0.4s;
	text-align: center;
	line-height: 45px;
}
@media only screen and (max-width: 767px) { .rbt-mini-cart-wrap { margin-right: 15px; } }

.rbt-mini-cart-wrap a {
	position: relative;
	display: block;
	background: var(--ugloz-surface);
	box-shadow: var(--ugloz-shadow-1);
	border-radius: 100%;
	z-index: 1;
	height: 100%;
}
.rbt-mini-cart-wrap a::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--ugloz-surface-2);
	box-shadow: var(--ugloz-shadow-1);
	opacity: 1;
	z-index: -1;
	transition: var(--ugloz-transition);
}
.rbt-mini-cart-wrap a:hover::after { transform: scale(1.1); }

.rbt-mini-cart-wrap .mini-cart {
	color: var(--ugloz-heading);
	position: relative;
	top: 2px;
	left: 1px;
	font-size: 18px;
}
.rbt-mini-cart-wrap .mini-cart i { padding-right: 5px; }
.rbt-mini-cart-wrap .mini-cart .rbt-cart-count {
	position: absolute;
	top: -15px;
	right: -15px;
	left: auto;
	z-index: 2;
	min-width: 16px;
	height: 16px;
	background: var(--ugloz-primary);
	border-radius: 10px;
	font-family: var(--ugloz-font-primary);
	font-size: 12px;
	font-weight: var(--ugloz-w-semibold);
	line-height: 16px;
	text-align: center;
	display: inline-block;
	color: #fff;
	padding: 0 4px;
}

/* ---------- hamburger / close ---------------------------------------------- */
.header-wrapper .header-right .hamberger-menu {
	padding: 0;
	width: 50px;
	height: 50px;
	z-index: 1;
	background: var(--ugloz-surface);
	box-shadow: var(--ugloz-shadow-1);
	border-radius: 100%;
	position: relative;
	line-height: 50px;
	text-align: center;
	margin-left: 16px;
	cursor: pointer;
}
@media only screen and (max-width: 575px) {
	.header-wrapper .header-right .hamberger-menu { margin-left: 10px; }
}
.header-wrapper .header-right .hamberger-menu::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--ugloz-surface-2);
	box-shadow: var(--ugloz-shadow-1);
	opacity: 1;
	z-index: -1;
	transition: var(--ugloz-transition);
}
.header-wrapper .header-right .hamberger-menu:hover::after { transform: scale(1.1); }
.header-wrapper .header-right .hamberger-menu i {
	z-index: 800;
	color: var(--ugloz-primary);
	font-size: 23px;
	position: relative;
	transition: 0.5s;
	line-height: 50px;
}

/* The source keeps this hidden close-trigger in the DOM (header.php copies it
   verbatim). Its <i> glyph is 16px wide and, at the right-hand edge of a 390px
   viewport, its box ended at x=391 — which is exactly where the 1px horizontal
   overflow on every mobile capture came from (documentElement.scrollWidth 391
   vs clientWidth 390). width:0 alone does not clip a child; overflow:hidden
   does. The element stays in the markup, it just no longer paints or scrolls. */
.close-menu {
	opacity: 0;
	visibility: hidden;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* ---------- sticky --------------------------------------------------------- */
.rn-header.header--sticky.rainbow-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 999;
	background-color: rgba(33, 36, 40, 0.8705882353);
	box-shadow: var(--ugloz-shadow-1);
	backdrop-filter: blur(15px);
	animation: uglozHeaderSlideDown 0.5s ease forwards;
}
.rn-header.header--sticky.rainbow-sticky .logo a img { max-height: 53px; width: auto; }
.rn-header.header--sticky.rainbow-sticky .mainmenu-nav ul.primary-menu > li > a { opacity: 0.7; }
.rn-header.header--sticky.rainbow-sticky .mainmenu-nav ul.primary-menu > li:hover > a { opacity: 1; }
#rainbow-sticky-placeholder.is-active { display: block; }

@keyframes uglozHeaderSlideDown {
	0%   { transform: translateY(-100%); }
	100% { transform: translateY(0); }
}

/* Keep the admin bar from covering the sticky header */
.admin-bar .rn-header.header--sticky.rainbow-sticky { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .rn-header.header--sticky.rainbow-sticky { top: 46px; }
}

/* =============================================================================
   MOBILE DRAWER — left slide-in, scrim rgba(0,0,0,.8), panel rgb(25,27,30).
   The DOM shape is `li.menu-item-has-children > a` + `ul.sub-menu`, so the JS
   derives the drawer's + / - expanders from the same markup as the desktop nav.
   ========================================================================== */
.popup-mobile-menu {
	z-index: 1000000;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	background-color: var(--ugloz-scrim);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.5s ease-out;
}
.popup-mobile-menu .inner {
	padding: 25px 40px;
	width: 375px;
	max-width: 90%;
	z-index: 999;
	position: absolute;
	background: var(--ugloz-drawer-bg);
	height: 100vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.7);
	opacity: 0;
	left: -150px;
	transition: all 0.5s ease-out;
}
@media only screen and (max-width: 479px) {
	.popup-mobile-menu .inner { width: 310px; padding: 20px; }
}
.popup-mobile-menu.menu-open { visibility: visible; opacity: 1; }
.popup-mobile-menu.menu-open .inner { opacity: 1; left: 0; overflow-y: auto; }

.popup-mobile-menu .inner .menu-top {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 20px;
}
.popup-mobile-menu .inner .menu-top .menu-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
/* InBio's rule is `.menu-header a img.logo { max-height:70px }` — but the source
   puts the `logo` class on the ANCHOR, not the img, so the rule never matches and
   the drawer logo renders at its natural 200x115 (measured ~190x105 of ink in
   _shots/mobile/menu-open.png). Selector kept faithful so it stays inert. */
.popup-mobile-menu .inner .menu-top .menu-header a img.logo { max-height: 70px; width: auto; }
.popup-mobile-menu .inner .menu-top .close-button .close {
	width: 45px;
	height: 45px;
	right: -20px;
	position: relative;
	z-index: 1;
	padding: 0;
	margin: 0;
	border: 0;
	display: inline-block;
	background: var(--ugloz-surface);
	box-shadow: var(--ugloz-shadow-1);
	border-radius: 100%;
	opacity: 1;
	cursor: pointer;
}
@media only screen and (max-width: 575px) {
	.popup-mobile-menu .inner .menu-top .close-button .close { right: 0; }
}
.popup-mobile-menu .inner .menu-top .close-button .close::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--ugloz-surface-2);
	box-shadow: var(--ugloz-shadow-1);
	z-index: -1;
	transition: var(--ugloz-transition);
}
.popup-mobile-menu .inner .menu-top .close-button .close:hover::after { transform: scale(1.1); }
.popup-mobile-menu .inner .menu-top .close-button .close i {
	color: var(--ugloz-primary);
	font-size: 20px;
	font-weight: 500;
	line-height: 45px;
}
.popup-mobile-menu .inner .menu-top p.description {
	font-size: 16px;
	line-height: 32px;
	margin: 20px 0 0;
	color: var(--ugloz-body);
	padding-right: 7%;
}

.popup-mobile-menu .content { display: flex; flex-direction: column; }
.popup-mobile-menu .content .mainmenu-nav .primary-menu {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}
.popup-mobile-menu .content .mainmenu-nav .primary-menu li {
	display: block;
	margin: 8px 0 !important;
	list-style: none;
}
.popup-mobile-menu .content .mainmenu-nav .primary-menu li a {
	color: var(--ugloz-lightn);
	position: relative;
	transition: var(--ugloz-transition);
	font-family: var(--ugloz-font-secondary);
	font-size: 14px;
	font-weight: var(--ugloz-w-medium);
	text-transform: uppercase;
	margin: 0;
	display: block;
	padding: 0;
	opacity: 1;
	white-space: normal;
}
.popup-mobile-menu .content .mainmenu-nav .primary-menu li a.open { color: var(--ugloz-primary); }
.popup-mobile-menu .content .mainmenu-nav .primary-menu li.menu-item-has-children > a { position: relative; }
.popup-mobile-menu .content .mainmenu-nav .primary-menu li.menu-item-has-children > a .rbt-mobile-plus-icon {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	transition: 0.4s;
	line-height: 1;
}
.popup-mobile-menu .content .mainmenu-nav .primary-menu li.menu-item-has-children > a.open .rbt-mobileicon::before {
	content: "\e996";
}
.popup-mobile-menu .content .mainmenu-nav .primary-menu li ul.sub-menu {
	min-width: 100%;
	position: static;
	opacity: 1;
	visibility: visible;
	background-color: transparent;
	box-shadow: none;
	text-align: left;
	border-radius: 0;
	list-style: none;
	padding: 0;
	margin: 0;
	display: none;
}
.popup-mobile-menu .content .mainmenu-nav .primary-menu li ul.sub-menu li > a {
	font-weight: var(--ugloz-w-medium);
	font-size: 13px;
	padding: 7px 10px;
	border-radius: 0;
	color: var(--ugloz-heading);
}
.popup-mobile-menu .content .mainmenu-nav .primary-menu li ul.sub-menu li:hover > a { background: transparent; }
.popup-mobile-menu .content .footer {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	margin-top: 20px;
	padding-top: 20px;
}