/**
 * Header account / wishlist / cart / search icon cluster – alignment & polish.
 *
 * The stock RadiantThemes header lays these boxes out with floats and per-icon
 * absolute badges, which leaves the icons on different baselines, the wishlist
 * count sitting on top of the heart, and a large empty gap between the menu and
 * the icons. This file re-lays the cluster as a single centred flex row with a
 * consistent icon size and one shared badge style.
 *
 * Search collapse behaviour itself lives in inc/search-collapse.php – this file
 * only positions the collapsed search next to the other icons.
 *
 * @package dello
 */

/* ------------------------------------------------------------------ *
 * Header row layout
 *
 * Stock rules give .rt-menu-holder `flex: 2` and the search box `flex: 1`,
 * so both grow and dump their slack as empty space – a huge void opens up
 * between the (left-aligned) menu and the icons. Instead: logo hugs the left,
 * the icon group hugs the right, and the menu sits centred between them with
 * the free space split evenly on both sides (a pair of facing `auto` margins).
 * ------------------------------------------------------------------ */
.rt-header.mobile-header-style1 .rt-header-holder {
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
}

/* Logo hugs the left edge. This `auto` margin plus the matching one on the
   search box (below) splits all free space evenly, centring the menu. */
.rt-header.mobile-header-style1 .logo-holder {
	flex: 0 0 auto !important;
	margin-right: auto !important;
}

/* Header logo — bump from the stock 93×32 the RadiantThemes widget outputs
   to 100px wide; height:auto lets the SVG keep its own aspect ratio. Covers
   the normal header, the sticky clone, and the mobile centred logo — all
   render the same `.logo > a > .logo-default > img` markup. */
.rt-header .logo img,
.rt-header .logo-default img {
	width: 100px !important;
	height: auto !important;
	max-width: none !important;
}

/* Menu: size to its content and sit centred. No fixed margin here — the
   logo's `margin-right:auto` and the search box's `margin-left:auto` (below)
   are the only two auto-margins on the row, so flexbox splits the leftover
   space between them equally, centring the nav exactly like the Figma
   Header (node 3:6): logo ends at 198px, search starts at 1187px, "Home"
   through "Men" sit centred in the 989px between with an even gap each side. */
.rt-header .rt-menu-holder,
.rt-header .rt-navbar-menu {
	flex: 0 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-align: center !important;
}
.rt-header .rt-menu-holder nav,
.rt-header .rt-navbar-menu nav {
	padding-left: 0 !important;
}
/* Nav items: more breathing room than the Figma-literal 30px now that the
   header row has space to spare. */
.rt-header .apr-nav-menu--main > .mega-menu {
	flex-wrap: nowrap !important;
	gap: 44px !important;
}
@media (max-width: 1300px) {
	.rt-header .rt-menu-holder,
	.rt-header .rt-navbar-menu {
		margin-right: 28px !important;
	}
	.rt-header .apr-nav-menu--main > .mega-menu {
		gap: 32px !important;
	}
}
.rt-header .apr-nav-menu--main > .mega-menu > li {
	margin-left: 0 !important;
	margin-right: 0 !important;
	white-space: nowrap;
}

/* Search box: swallow the row's free space, pushing itself and the icon
   cluster to the right edge. Stays put (a small fixed-size anchor) in
   both open and closed states — the persistent header icon it holds
   never moves; only its overlay panel (assets/css/search-overlay.css)
   breaks out to a fixed, full-width dropdown. */
.rt-header .rt-search-box2.cat-search-box {
	flex: 0 0 auto !important;
	margin-left: auto !important;
	text-align: right !important;
	position: relative !important;
	right: auto !important;
	top: auto !important;
	padding: 0 !important;
}

/* Collapse the search hit-area down to icon width so the magnifier sits
   right next to the account icon (no 45px dead space between them). */
.rt-search-box2.cat-search-box #search-box1,
.rt-search-box2.cat-search-box #search-boxone {
	width: 22px !important;
	height: 22px !important;
}
.rt-search-box2.cat-search-box .search-button2 {
	width: 22px !important;
	height: 22px !important;
	right: 0 !important;
}
.rt-search-box2.cat-search-box input[type="text"] {
	right: 28px !important; /* anchor the expand-on-click input just past the smaller button */
}
.rt-header .rt-search-box2.cat-search-box .container,
.rt-header .rt-search-box2.cat-search-box .search-area-grid {
	padding: 0 !important;
	margin: 0 !important;
	width: 22px !important;
}

/* Figma Header (node 3:6): the search/user/heart/bag icon row sits 20px apart. */
.rt-header .rt-search-cart-holder {
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
	gap: 20px !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 0 0 20px !important;
}

/* Reset the individual boxes: no floats, no stray margins, own containing block */
.rt-header .rt-search-cart-holder > div {
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	border: 0 !important;
	background: none !important;
}

/* ------------------------------------------------------------------ *
 * Uniform icon sizing / weight
 * ------------------------------------------------------------------ */
.rt-header .rt-search-cart-holder svg,
.rt-header .rt-search-box2.cat-search-box .search-button2 svg {
	width: 22px !important;
	height: 22px !important;
	stroke-width: 1.6 !important;
	vertical-align: middle !important;
	display: block;
}

.rt-header .rt-search-cart-holder a,
.rt-header .rt-search-cart-holder .rt_user_login,
.rt-header .rt-search-cart-holder .menu-mobile-icon,
.rt-header .rt-search-cart-holder .rt_user_login .main-nav,
.rt-header .rt-search-cart-holder .rt_user_login .main-nav ul,
.rt-header .rt-search-cart-holder .rt_user_login .main-nav li {
	display: flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	list-style: none !important;
	float: none !important;
	background: none !important;
}

/* Wishlist: drop the webfont glyph and paint an exact 22px feather "heart"
   via a mask, so it matches the other feather SVGs pixel for pixel. */
.rt-header .rt-search-cart-holder .rt-wishlist-box .wishlist_products_counter_text {
	display: none !important;
}
.rt-header .rt-search-cart-holder .rt-wishlist-box a.wishlist_products_counter {
	position: relative !important;
	display: block !important;
	width: 22px !important;
	height: 22px !important;
	line-height: 22px !important;
	font-size: 0 !important;
	color: #272727 !important;
}
.rt-header .rt-search-cart-holder .rt-wishlist-box a.wishlist_products_counter::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	margin: 0 !important;
	background-color: #272727 !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") no-repeat center / 22px 22px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") no-repeat center / 22px 22px;
}

/* ------------------------------------------------------------------ *
 * One shared badge style for cart + wishlist counts
 * ------------------------------------------------------------------ */
.rt-header .rt-search-cart-holder .cart-count,
.rt-header .rt-search-cart-holder .wish_list_count,
.rt-header .rt-search-cart-holder .wishlist_products_counter_number {
	position: absolute !important;
	top: -8px !important;
	right: -10px !important;
	left: auto !important;
	margin: 0 !important;
	min-width: 16px !important;
	height: 16px !important;
	padding: 0 4px !important;
	box-sizing: border-box !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	line-height: 16px !important;
	text-align: center !important;
	color: #fff !important;
	background: #272727 !important;
	border-radius: 999px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Don't render an empty badge as a stray dot */
.rt-header .rt-search-cart-holder .cart-count:empty,
.rt-header .rt-search-cart-holder .wish_list_count:empty,
.rt-header .rt-search-cart-holder .wishlist_products_counter_number:empty {
	display: none !important;
}

/* Keep the mini-cart flyout out of the row's flow.
 * .mobile-slider must stay viewport-anchored (position:fixed, its own
 * default) rather than absolute — absolute makes it position relative to
 * .rt-cart-box instead of the viewport, which shoves it ~200px past the
 * right edge of the page and inflates the document's scrollWidth, letting
 * the whole page be dragged/scrolled sideways on mobile. */
.rt-header .rt-search-cart-holder .rt-cart-box .mobile-slider {
	position: fixed !important;
}
.rt-header .rt-search-cart-holder .rt-cart-box .filter {
	position: absolute !important;
}

/* ------------------------------------------------------------------ *
 * Header side margins — matched to the same inset formula as the
 * homepage content sections' `.mm-wrap` (max-width:1280 + 32px padding,
 * centred): `max(32px, (100vw - 1280px)/2 + 32px)`. That's 112px at a
 * 1440 viewport — 7px more than the Figma Header frame's own 105px — but
 * .mm-wrap is what "Shop By Category" and every other homepage section
 * actually use, so matching it (rather than the frame's literal number)
 * is what keeps the header/hero flush with them at every viewport width,
 * not just 1440. The theme's stock rules use a flat 5% on both the
 * normal and the sticky/fixed header state — override to match at
 * desktop widths. Below 900px, match the Hero's own mobile margins
 * (homepage-sections.css .mm-hero__content: 32px / 20px) instead.
 *
 * The theme actually renders TWO <header class="rt-header"> elements: the
 * normal in-flow one, and a second "sticky clone" (has the extra `.fixed`
 * class) that's hidden above the viewport until you scroll. The normal
 * header's inset lives on its `.rt-header-holder` child; the sticky
 * clone's lives on the `<header>` itself. Padding both a `.fixed` header
 * AND its `.rt-header-holder` child stacks, which is what made the logo
 * visibly jump sideways on scroll — so each state gets padding on
 * exactly one of the two, and the other is zeroed.
 * ------------------------------------------------------------------ */
@media (min-width: 901px) {
	.rt-header:not(.fixed) .rt-header-holder,
	.rt-header.fixed {
		padding-left: max(32px, calc((100vw - 1280px) / 2 + 32px)) !important;
		padding-right: max(32px, calc((100vw - 1280px) / 2 + 32px)) !important;
	}
	.rt-header.fixed .rt-header-holder {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}
@media (max-width: 900px) {
	.rt-header:not(.fixed) .rt-header-holder,
	.rt-header.fixed {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}
	.rt-header.fixed .rt-header-holder {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}
@media (max-width: 560px) {
	.rt-header:not(.fixed) .rt-header-holder,
	.rt-header.fixed {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	.rt-header.fixed .rt-header-holder {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Top Bar (widget 5eed709) — same `.mm-wrap`-matched inset as the header,
 * so "Special Offer…" lines up with the logo and "Store location" lines
 * up with the icon cluster. Hidden below desktop (elementor-hidden-tablet/
 * -phone) already, so no mobile breakpoint needed. */
.elementor-element-5eed709 {
	padding-left: max(32px, calc((100vw - 1280px) / 2 + 32px)) !important;
	padding-right: max(32px, calc((100vw - 1280px) / 2 + 32px)) !important;
}

/* ------------------------------------------------------------------ *
 * Mobile/tablet top header icon cluster: only Cart stays — Account and
 * Wishlist move to the fixed bottom tab bar (assets/css/mobile-tabbar.css)
 * instead, at the same ≤1024px breakpoint the header already switches
 * to its hamburger layout at.
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.rt-header .rt-search-cart-holder .rt-user-box,
	.rt-header .rt-search-cart-holder .rt-wishlist-box {
		display: none !important;
	}
}

/* ------------------------------------------------------------------ *
 * Mobile/tablet header layout: hamburger — logo — cart, with the logo
 * truly centered in the row regardless of how wide the hamburger/cart
 * columns are. Centering via absolute positioning (rather than equal
 * flex-basis thirds) keeps the hamburger pinned left and the cart
 * pinned right exactly where they already sit.
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.rt-header .rt-header-holder {
		position: relative;
	}
	.rt-header .logo-holder {
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%, -50%) !important;
		margin: 0 !important;
	}
	.rt-header .rt-search-cart-holder {
		margin-left: auto !important;
	}
}

/* ------------------------------------------------------------------ *
 * Mobile off-canvas menu (the hamburger side panel, #mobile-menu) —
 * drop the Account/Wishlist/Cart icon row entirely. It duplicated the
 * fixed bottom tab bar (Home/Category/Best Deals/Cart/Account — see
 * inc/mobile-tab-bar.php), which already covers Account and Cart on
 * mobile/tablet, so this row was redundant clutter in the side panel.
 * ------------------------------------------------------------------ */
#mobile-menu .rt-search-cart-holder {
	display: none !important;
}

/* ------------------------------------------------------------------ *
 * Mobile off-canvas menu — the Login / Wishlist / Cart rows.
 * Dormant now that the block above hides the row outright; left in
 * place in case that row ever needs to come back.
 *
 * The three icon boxes shipped with mismatched right padding (0 on
 * .rt-user-box, 8px on the wishlist/cart boxes), so the person icon sat
 * 8px right of the heart and bag — they never lined up. The heart also
 * had a wider hit-box than the others, and the wishlist plugin's empty
 * count span still rendered as a solid dark circle right on top of the
 * heart. Normalise all three to one 22px box on a shared right edge,
 * one 20px glyph, and hide the count badges when they're empty.
 * ------------------------------------------------------------------ */
#mobile-menu .rt-search-cart-holder .rt-user-box,
#mobile-menu .rt-search-cart-holder .rt-wishlist-box,
#mobile-menu .rt-search-cart-holder .rt-cart-box {
	padding-right: 0 !important;
}
#mobile-menu .rt-search-cart-holder .rt-user-box .cd-signin,
#mobile-menu .rt-search-cart-holder .rt-wishlist-box .wishlist_products_counter,
#mobile-menu .rt-search-cart-holder .menu-mobile-icon.cart-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
}
#mobile-menu .rt-search-cart-holder .rt-user-box .cd-signin svg,
#mobile-menu .rt-search-cart-holder .menu-mobile-icon.cart-icon svg {
	width: 20px !important;
	height: 20px !important;
}
#mobile-menu .rt-search-cart-holder .wishlist_products_counter_text {
	display: none !important;
}
/* Drop the plugin's filled webfont heart and paint the same 20px feather
   outline heart used in the desktop header, so it matches the person/bag. */
#mobile-menu .rt-search-cart-holder .wishlist_products_counter {
	font-size: 0 !important;
	color: #272727 !important;
}
#mobile-menu .rt-search-cart-holder .wishlist_products_counter::before {
	content: "" !important;
	width: 20px !important;
	height: 20px !important;
	background-color: currentColor !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}
#mobile-menu .rt-search-cart-holder .wishlist_products_counter_number:empty,
#mobile-menu .rt-search-cart-holder .cart-count:empty {
	display: none !important;
}
#mobile-menu .rt-search-cart-holder .wishlist_products_counter_number,
#mobile-menu .rt-search-cart-holder .cart-count {
	top: -6px !important;
	right: -6px !important;
	left: auto !important;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
}